usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-26 23:22:47 +08:00
Code Issues Projects Releases Packages 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
Show stats 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;
}
const getBgColor = (count: number, maxCount: number) => {
const getCellAdditionalStyles = (count: number, maxCount: number) => {
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;
if (ratio > 0.7) {
return "bg-blue-600";
return "bg-blue-600 text-gray-200";
} else if (ratio > 0.5) {
return "bg-blue-400";
return "bg-blue-400 text-gray-200 dark:opacity-80";
} else if (ratio > 0.3) {
return "bg-blue-300";
return "bg-blue-300 text-gray-200 dark:opacity-80";
} else {
return "bg-blue-200";
return "bg-blue-200 text-gray-200 dark:opacity-80";
}
};
@ -47,7 +47,7 @@ const ActivityCalendar = (props: Props) => {
}
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) => {
const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "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>
<div
className={classNames(
"w-3 h-3 rounded flex justify-center items-center border border-transparent",
getBgColor(count, maxCount),
isToday && "border-gray-600 dark:!border-gray-400"
"w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
getCellAdditionalStyles(count, maxCount),
isToday && "border-gray-600 dark:!border-gray-500"
)}
onClick={() => count && onClick && onClick(date)}
></div>
>
{day}
</div>
</Tooltip>
) : (
<div
key={`${date}-${index}`}
className={classNames(
"shrink-0 opacity-30 w-3 h-3 rounded flex justify-center items-center border border-transparent",
getBgColor(count, maxCount)
"shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
getCellAdditionalStyles(count, maxCount)
)}
></div>
);

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

@ -145,7 +145,7 @@ const Timeline = () => {
{groupedByMonth.map((group, index) => (
<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 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")}>
<span className="font-medium text-3xl leading-none mb-1">
{new Date(group.month).toLocaleString(i18n.language, { month: "short" })}