YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update calendar styles

Browse Source
This commit is contained in:
Steven
2024-01-23 23:15:54 +08:00
parent 3dbb254aeb
commit 1b69b73eb9
2 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/ActivityCalendar.tsx
View File

@@ -9,20 +9,20 @@ interface Props {
onClick?: (date: string) => void; onClick?: (date: string) => void;
} }
const getBgColor = (count: number, maxCount: number) => { const getCellAdditionalStyles = (count: number, maxCount: number) => {
if (count === 0) { if (count === 0) {
return "bg-gray-100 dark:bg-gray-700"; return "bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500";
} }
const ratio = count / maxCount; const ratio = count / maxCount;
if (ratio > 0.7) { if (ratio > 0.7) {
return "bg-blue-600"; return "bg-blue-600 text-gray-200";
} else if (ratio > 0.5) { } else if (ratio > 0.5) {
return "bg-blue-400"; return "bg-blue-400 text-gray-200 dark:opacity-80";
} else if (ratio > 0.3) { } else if (ratio > 0.3) {
return "bg-blue-300"; return "bg-blue-300 text-gray-200 dark:opacity-80";
} else { } else {
return "bg-blue-200"; return "bg-blue-200 text-gray-200 dark:opacity-80";
} }
}; };
@@ -47,7 +47,7 @@ const ActivityCalendar = (props: Props) => {
} }
return ( return (
<div className={classNames("w-28 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}> <div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
{days.map((day, index) => { {days.map((day, index) => {
const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`); const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`);
const count = data[date] || 0; const count = data[date] || 0;
@@ -57,19 +57,21 @@ const ActivityCalendar = (props: Props) => {
<Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow> <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
<div <div
className={classNames( className={classNames(
"w-3 h-3 rounded flex justify-center items-center border border-transparent", "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
getBgColor(count, maxCount), getCellAdditionalStyles(count, maxCount),
isToday && "border-gray-600 dark:!border-gray-400" isToday && "border-gray-600 dark:!border-gray-500"
)} )}
onClick={() => count && onClick && onClick(date)} onClick={() => count && onClick && onClick(date)}
></div> >
{day}
</div>
</Tooltip> </Tooltip>
) : ( ) : (
<div <div
key={`${date}-${index}`} key={`${date}-${index}`}
className={classNames( className={classNames(
"shrink-0 opacity-30 w-3 h-3 rounded flex justify-center items-center border border-transparent", "shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
getBgColor(count, maxCount) getCellAdditionalStyles(count, maxCount)
)} )}
></div> ></div>
); );

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

@@ -145,7 +145,7 @@ const Timeline = () => {
{groupedByMonth.map((group, index) => ( {groupedByMonth.map((group, index) => (
<Fragment key={group.month}> <Fragment key={group.month}>
<div className={classNames("flex justify-start items-start w-full mt-2 last:mb-4", md ? "flex-row" : "flex-col")}> <div className={classNames("flex justify-start items-start w-full mt-2 last:mb-4", md ? "flex-row" : "flex-col")}>
<div className={classNames("flex shrink-0", md ? "flex-col w-32 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}> <div className={classNames("flex shrink-0", md ? "flex-col w-40 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
<div className={classNames("w-full flex flex-col", md && "mt-4 mb-2")}> <div className={classNames("w-full flex flex-col", md && "mt-4 mb-2")}>
<span className="font-medium text-3xl leading-none mb-1"> <span className="font-medium text-3xl leading-none mb-1">
{new Date(group.month).toLocaleString(i18n.language, { month: "short" })} {new Date(group.month).toLocaleString(i18n.language, { month: "short" })}