YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-15 18:20:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: add dayjs to fix datetime format in safari

Browse Source
This commit is contained in:
Steven 2024-05-09 08:52:34 +08:00
parent 1d99dad435
commit deae53c1f1
5 changed files with 3801 additions and 3037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@ -16,6 +16,7 @@
"@reduxjs/toolkit": "^2.2.3",
"clsx": "^2.1.1",
"copy-to-clipboard": "^3.3.3",
"dayjs": "^1.11.11",
"fuse.js": "^7.0.0",
"highlight.js": "^11.9.0",
"i18next": "^23.11.3",

6804
web/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
web/src/components/HomeSidebar/TagsSection.tsx
View File

@ -44,11 +44,14 @@ 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-between items-center w-full mb-1">
<div className="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>
<Tooltip title={"Rebuild"} placement="top">
<Icon.RefreshCcw className="text-gray-400 w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleRebuildMemoTags} />
<Icon.RefreshCcw
className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
onClick={handleRebuildMemoTags}
/>
</Tooltip>
</div>
</div>

12
web/src/components/MemoView.tsx
View File

@ -22,6 +22,7 @@ import VisibilityIcon from "./VisibilityIcon";
interface Props {
memo: Memo;
displayTimeFormat?: "auto" | "time";
compact?: boolean;
showCreator?: boolean;
showVisibility?: boolean;
@ -70,6 +71,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
}
}, []);
const displayTime =
props.displayTimeFormat === "time" ? (
memo.displayTime?.toLocaleTimeString()
) : (
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
);
return (
<div
className={clsx(
@ -98,13 +106,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
onClick={handleGotoMemoDetailPage}
>
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
{displayTime}
</div>
</div>
</div>
) : (
<div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
{displayTime}
</div>
)}
</div>

14
web/src/pages/Timeline.tsx
View File

@ -1,5 +1,6 @@
import { Button, IconButton } from "@mui/joy";
import clsx from "clsx";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import ActivityCalendar from "@/components/ActivityCalendar";
import Empty from "@/components/Empty";
@ -31,7 +32,7 @@ const Timeline = () => {
const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined);
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime));
const monthString = new Date(selectedDateString).getFullYear() + "-" + (new Date(selectedDateString).getMonth() + 1);
const monthString = dayjs(selectedDateString).format("YYYY-MM");
useEffect(() => {
setIsRequesting(true);
@ -66,8 +67,7 @@ const Timeline = () => {
setActivityStats(
Object.fromEntries(
Object.entries(stats).filter(([date]) => {
const d = new Date(date);
return `${d.getFullYear()}-${d.getMonth() + 1}` === monthString;
return dayjs(date).format("YYYY-MM") === monthString;
}),
),
);
@ -139,7 +139,7 @@ const Timeline = () => {
<span className="font-medium text-3xl sm:text-4xl">
{new Date(selectedDateString).toLocaleDateString(i18n.language, { month: "short", day: "numeric" })}
</span>
<span className="opacity-60 text-lg">{new Date(monthString).getFullYear()}</span>
<span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
</div>
<ActivityCalendar
month={monthString}
@ -155,7 +155,11 @@ const Timeline = () => {
key={`${memo.name}-${memo.displayTime}`}
className={clsx("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
>
<MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
<MemoView
className="!border max-w-full !border-gray-100 dark:!border-zinc-700"
memo={memo}
displayTimeFormat="time"
/>
<div className="absolute -left-2 sm:left-2 top-4 h-full">
{index !== sortedMemos.length - 1 && (
<div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>