Skip to content

Commit

Permalink
#88 improved duration picker
Browse files Browse the repository at this point in the history
  • Loading branch information
io53 committed Mar 12, 2024
1 parent 2e520c5 commit fb60b35
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 49 deletions.
111 changes: 70 additions & 41 deletions src/components/DurationPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
PopoverAnchor,
PopoverBody,
Box,
Divider,
Flex,
} from "@chakra-ui/react"
import { MdArrowDropDown } from "react-icons/md"
import { AiOutlineCalendar } from "react-icons/ai"
Expand Down Expand Up @@ -51,6 +53,11 @@ const detailedSubText = {
fontSize: "14px",
}

const iconProps = {
size: 26,
style: { margin: -9 }
}

export default function DurationPicker(props) {
const { t } = useTranslation();
const [lastCustom, setLastCustom] = useState(null)
Expand Down Expand Up @@ -87,28 +94,69 @@ export default function DurationPicker(props) {
</Modal>
*/}

<Menu autoSelect={false} strategy="fixed" placement="bottom-end" isOpen={showDropdown} onClose={() => setShowDropdown(false)}>
<span>
<Popover isOpen={showPicker} placement="bottom-end" onClose={() => setShowPicker(false)}>
<PopoverAnchor>
<MenuButton as={Button}
rightIcon={<MdArrowDropDown size={26} className="buttonSideIcon" onClick={e => setShowPicker(false) || setShowDropdown(!showDropdown)} style={{ marginRight: -8, marginLeft: 4 }} />}
leftIcon={!props.dashboard && <AiOutlineCalendar size={26} className="buttonSideIcon" onClick={e => setShowDropdown(false) || setShowPicker(!showPicker)} style={{ marginRight: 6, marginLeft: -8 }} />}
variant="ddl"
className="durationPicker"
style={{ ...detailedSubText }}
disabled={props.disabled}
borderRadius='4px'>
{custom ? (
<>
{ddmm(custom.from) + " - " + ddmm(custom.to)}
</>
) : (
<>
{ts.k} {t(ts.t).toLowerCase()}
</>
)}
</MenuButton>
</PopoverAnchor>
<Menu autoSelect={false} strategy="fixed" placement="bottom-end" isOpen={showDropdown} onClose={() => setShowDropdown(false)}>
<PopoverAnchor>

<span className="durationPicker" style={{ height: "40px", display: "inline-block", borderRadius: "4px" }} >
<Flex>
{!props.dashboard &&
<Button className="durationPicker" variant="imageToggle" style={{ borderRadius: '4px' }}
onClick={e => setShowDropdown(false) || setShowPicker(!showPicker)} >
<AiOutlineCalendar {...iconProps} />
</Button>
}
{!props.dashboard ? (
<Divider orientation="vertical" height={"38px"} mt={"1px"} className="bodybg" width={"2px"} borderStyle="none" />
) : (
<Box width={"4px"} />
)
}
<span style={{ display: "inline-block", marginLeft: 8, marginRight: 10, marginTop: 10, fontFamily: "mulish", fontSize: 14, fontWeight: 600 }}>
{custom ? (
<>
{ddmm(custom.from) + " - " + ddmm(custom.to)}
</>
) : (
<>
{ts.k} {t(ts.t).toLowerCase()}
</>
)}
</span>
<Divider orientation="vertical" height={"38px"} mt={"1px"} className="bodybg" width={"2px"} borderStyle="none" />
<Button className="durationPicker" variant="imageToggle" style={{ borderRadius: '4px' }}
onClick={e => setShowPicker(false) || setShowDropdown(!showDropdown)} >
<MdArrowDropDown {...iconProps} />
</Button>
<MenuButton height={"40px"} >
</MenuButton>
</Flex>
</span>

</PopoverAnchor>

<MenuList zIndex={2}>
{renderTimespans.map((x, i) => {
let divider = <></>
let borderStyle = {};
if (i === 0) borderStyle = { borderTopLeftRadius: 6, borderTopRightRadius: 6 }
if (i === renderTimespans.length - 1) borderStyle = { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }
else divider = <MenuDivider />
return <div key={x.v + "p"}>
<MenuItem key={x.v} className={!custom && ts.v === x.v ? "menuActive" : undefined} style={{ ...detailedSubText, ...borderStyle }}
onClick={() => {
setCustom(null)
props.onChange(x.v)
}}>
{x.k} {t(x.t).toLowerCase()}
</MenuItem>
{divider}
</div>
})}
</MenuList>
</Menu>

<PopoverContent>
<PopoverBody>
<DatePicker onChange={setLastCustom} />
Expand All @@ -127,26 +175,7 @@ export default function DurationPicker(props) {
</PopoverBody>
</PopoverContent>
</Popover>
<MenuList zIndex={2}>
{renderTimespans.map((x, i) => {
let divider = <></>
let borderStyle = {};
if (i === 0) borderStyle = { borderTopLeftRadius: 6, borderTopRightRadius: 6 }
if (i === renderTimespans.length - 1) borderStyle = { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 }
else divider = <MenuDivider />
return <div key={x.v + "p"}>
<MenuItem key={x.v} className={!custom && ts.v === x.v ? "menuActive" : undefined} style={{ ...detailedSubText, ...borderStyle }}
onClick={() => {
setCustom(null)
props.onChange(x.v)
}}>
{x.k} {t(x.t).toLowerCase()}
</MenuItem>
{divider}
</div>
})}
</MenuList>
</Menu>
</span>
</>
)
}
24 changes: 16 additions & 8 deletions src/states/Sensor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
useMediaQuery,
CircularProgress,
Spinner,
Flex,
} from "@chakra-ui/react"
import 'uplot/dist/uPlot.min.css';
import Graph from "../components/Graph";
Expand Down Expand Up @@ -489,10 +490,13 @@ class Sensor extends Component {
}

let graphCtrl = () => {
return <><span style={detailedSubText}>{`${uppercaseFirst(t("zoom"))}`}</span>
<IconButton ml="-8px" variant="ghost" onClick={() => this.zoomInfo()}>
<MdInfo size="16" className="buttonSideIcon" />
</IconButton>
return <>
<span>
<span style={detailedSubText}>{`${uppercaseFirst(t("zoom"))}`}</span>
<IconButton ml="-8px" variant="ghost" onClick={() => this.zoomInfo()}>
<MdInfo size="16" className="buttonSideIcon" />
</IconButton>
</span>
<ExportMenu buttonText={uppercaseFirst(t("export"))} enablePDF={sensorSubscription === "Business Starter"} onClick={val => {
switch (val) {
case "XLSX":
Expand Down Expand Up @@ -560,8 +564,10 @@ class Sensor extends Component {
<td>
{graphTitle()}
</td>
<td style={{ textAlign: "right" }}>
{graphCtrl()}
<td>
<Flex justify="end">
{graphCtrl()}
</Flex>
</td>
</tr>
</tbody>
Expand All @@ -573,8 +579,10 @@ class Sensor extends Component {
<table width="100%">
<tbody>
<tr>
<td style={{ textAlign: "center" }}>
{graphCtrl()}
<td>
<Flex justify="center" flexWrap="wrap" gap={1}>
{graphCtrl(true)}
</Flex>
</td>
</tr>
</tbody>
Expand Down
3 changes: 3 additions & 0 deletions src/themes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ export const ruuviTheme = extendTheme({
bg: colors.bodyBg[props.colorMode],
color: props.colorMode === "light" ? "#1b4847 !important" : "white !important",
},
'.bodybg': {
bg: colors.topbar[props.colorMode],
},
'.subtitle': {
color: colors.subtitle[props.colorMode]
},
Expand Down

0 comments on commit fb60b35

Please sign in to comment.