Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Calendar): remove past items styling

Browse source
This commit is contained in:
Tim 2024-11-28 15:07:39 +01:00
parent 83c5c5ab0f
commit 7b87715153
4 changed files with 10 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/Calendar/List/Item/Item.less
View file

@ -88,12 +88,6 @@
} }
} }
&.past {
.body {
opacity: 0.5;
}
}
&.active { &.active {
border-color: var(--primary-foreground-color); border-color: var(--primary-foreground-color);
} }

13
src/routes/Calendar/List/Item/Item.tsx
View file

@ -20,13 +20,10 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const { toDayMonth } = useCalendarDate(profile); const { toDayMonth } = useCalendarDate(profile);
const [active, today, past] = useMemo(() => { const [active, today] = useMemo(() => [
const active = date.day === selected?.day; date.day === selected?.day,
const today = date.day === monthInfo.today; date.day === monthInfo.today,
const past = date.day < (monthInfo.today ?? 1); ], [selected, monthInfo, date]);
return [active, today, past];
}, [selected, monthInfo, date]);
const onItemClick = () => { const onItemClick = () => {
onClick && onClick(date); onClick && onClick(date);
@ -42,7 +39,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
return ( return (
<div <div
ref={ref} ref={ref}
className={classNames(styles['item'], { [styles['active']]: active, [styles['today']]: today, [styles['past']]: past })} className={classNames(styles['item'], { [styles['active']]: active, [styles['today']]: today })}
key={date.day} key={date.day}
onClick={onItemClick} onClick={onItemClick}
> >

6
src/routes/Calendar/Table/Cell/Cell.less
View file

@ -124,12 +124,6 @@
} }
} }
&.past {
.items {
opacity: 0.5;
}
}
&.active { &.active {
border-color: var(--primary-foreground-color); border-color: var(--primary-foreground-color);
} }

13
src/routes/Calendar/Table/Cell/Cell.tsx
View file

@ -15,13 +15,10 @@ type Props = {
}; };
const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => { const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
const [active, today, past] = useMemo(() => { const [active, today] = useMemo(() => [
const active = date.day === selected?.day; date.day === selected?.day,
const today = date.day === monthInfo.today; date.day === monthInfo.today,
const past = date.day < (monthInfo.today ?? 1); ], [selected, monthInfo, date]);
return [active, today, past];
}, [selected, monthInfo, date]);
const onCellClick = () => { const onCellClick = () => {
onClick && onClick(date); onClick && onClick(date);
@ -29,7 +26,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
return ( return (
<Button <Button
className={classNames(styles['cell'], { [styles['active']]: active, [styles['today']]: today, [styles['past']]: past })} className={classNames(styles['cell'], { [styles['active']]: active, [styles['today']]: today })}
onClick={onCellClick} onClick={onCellClick}
> >
<div className={styles['heading']}> <div className={styles['heading']}>