OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Additional hover on title, not date

Browse Source
This commit is contained in:
shamoon 2023-10-19 20:15:02 -07:00
parent 7f2f162f6e
commit 65c3c88aef
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/widgets/calendar/agenda.jsx
View File

@ -6,21 +6,21 @@ import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { EventContext } from "../../utils/contexts/calendar"; import { EventContext } from "../../utils/contexts/calendar";
function formatDate(date, i18n) {
return date.setLocale(i18n.language).startOf("day").toLocaleString({ month: "short", day: "numeric" });
}
export function Event({ event, colorVariants, i18n }) { export function Event({ event, colorVariants, i18n }) {
const title = event.title.length > 42 ? `${event.title.slice(0, 42)}...` : event.title; const title = event.title.length > 42 ? `${event.title.slice(0, 42)}...` : event.title;
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const onHover = () => setHover(!hover);
return ( return (
<div <div
key={title} key={title}
className="flex flex-row text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1" className="flex flex-row text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
onMouseEnter={() => setHover(!hover)}
onMouseLeave={() => setHover(!hover)}
> >
<span className="inline-flex items-center ml-2 w-10" onMouseEnter={onHover} onMouseLeave={onHover}> <span className="inline-flex items-center ml-2 w-10">
<span>{hover ? event.additional : formatDate(event.date, i18n)}</span> <span>
{event.date.setLocale(i18n.language).startOf("day").toLocaleString({ month: "short", day: "numeric" })}
</span>
</span> </span>
<span className="inline-flex items-center"> <span className="inline-flex items-center">
<span <span
@ -29,7 +29,7 @@ export function Event({ event, colorVariants, i18n }) {
/> />
</span> </span>
<span className="inline-flex flex-auto left-1 text-left text-xs mt-[2px] truncate text-ellipsis overflow-hidden visible"> <span className="inline-flex flex-auto left-1 text-left text-xs mt-[2px] truncate text-ellipsis overflow-hidden visible">
{title} {hover && event.additional ? event.additional : title}
</span> </span>
{event.isCompleted && ( {event.isCompleted && (
<span className="text-xs mr-1 mt-1 z-10"> <span className="text-xs mr-1 mt-1 z-10">