usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-20 14:35:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add datepicker to timeline

Browse source
This commit is contained in:
Steven 2024-05-09 20:31:37 +08:00
parent e7a788fa71
commit 46a085f8df
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/HomeSidebar/TagsSection.tsx
View file

@ -44,9 +44,9 @@ const TagsSection = () => {
return (
<div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
<div className="flex flex-row justify-start items-center w-full gap-1 mb-1">
<div className="group flex flex-row justify-start items-center w-full gap-1 mb-1">
<span className="text-sm leading-6 font-mono text-gray-400 select-none">{t("common.tags")}</span>
<div>
<div className="hidden group-hover:block">
<Tooltip title={"Rebuild"} placement="top">
<Icon.RefreshCcw
className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"

17
web/src/pages/Timeline.tsx
View file

@ -133,12 +133,19 @@ const Timeline = () => {
<div className="w-full h-auto flex flex-col justify-start items-start">
<MemoFilter className="p-2 my-2 rounded-lg dark:bg-zinc-900" />
<div className={clsx("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
<div className={clsx("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
<div className={clsx("w-full flex flex-col")}>
<span className="font-medium text-3xl sm:text-4xl">
<div className="flex flex-col justify-start items-start w-full mt-2">
<div className="w-full flex shrink-0 flex-row justify-between pl-1 mt-1 mb-3">
<div className="w-auto flex flex-col">
<div className="relative font-medium text-3xl sm:text-4xl">
{new Date(selectedDateString).toLocaleDateString(i18n.language, { month: "short", day: "numeric" })}
</span>
<input
className="inset-0 absolute z-1 opacity-0"
type="date"
defaultValue={dayjs(selectedDateString).format("YYYY-MM-DD")}
onFocus={(e) => e.target.showPicker()}
onChange={(e) => setSelectedDateString(e.target.value)}
/>
</div>
<span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
</div>
<ActivityCalendar