watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-06 05:37:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update date filter buttons.

Browse source
This commit is contained in:
Mike Cao 2023-08-25 16:05:02 -07:00
parent 4fd3a66f07
commit 080eb34d57
8 changed files with 43 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/input/WebsiteDateFilter.js
View file

@ -8,7 +8,6 @@ import styles from './WebsiteDateFilter.module.css';
export function WebsiteDateFilter({ websiteId }) {
const [dateRange, setDateRange] = useDateRange(websiteId);
const { value, startDate, endDate, selectedUnit } = dateRange;
const isFutureDate =
value !== 'all' && isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
@ -21,7 +20,21 @@ export function WebsiteDateFilter({ websiteId }) {
};
return (
<>
<Flexbox justifyContent="center" gap={10}>
{value !== 'all' && (
<Flexbox justifyContent="center" className={styles.buttons}>
<Button onClick={() => handleIncrement(1)}>
<Icon rotate={90}>
<Icons.ChevronDown />
</Icon>
</Button>
<Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
<Icon rotate={270}>
<Icons.ChevronDown />
</Icon>
</Button>
</Flexbox>
)}
<DateFilter
className={styles.dropdown}
value={value}
@ -31,22 +44,7 @@ export function WebsiteDateFilter({ websiteId }) {
onChange={handleChange}
showAllTime={true}
/>
{value !== 'all' && (
<Flexbox justifyContent="center" gap={10} className={styles.container}>
<Button onClick={() => handleIncrement(1)}>
<Icon rotate={90}>
<Icons.ChevronDown />
</Icon>
</Button>
<Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
<Icon rotate={270}>
<Icons.ChevronDown />
</Icon>
</Button>
</Flexbox>
)}
</>
</Flexbox>
);
}

11
src/components/input/WebsiteDateFilter.module.css
View file

@ -1,3 +1,14 @@
.dropdown {
min-width: 200px;
}
.buttons button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.buttons button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid var(--base400) !important;
}