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: fix hover heatmap

Browse Source
This commit is contained in:
boojack
2022-07-15 22:29:47 +08:00
parent 8a91b0ad9d
commit 0dc377550f
3 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/UsageHeatMap.tsx
View File

@ -37,10 +37,8 @@ const UsageHeatMap: React.FC<Props> = () => {
const { memos } = useAppSelector((state) => state.memo); const { memos } = useAppSelector((state) => state.memo);
const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp)); const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
const [popupStat, setPopupStat] = useState<DailyUsageStat | null>(null);
const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null); const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
const containerElRef = useRef<HTMLDivElement>(null); const containerElRef = useRef<HTMLDivElement>(null);
const popupRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp); const newStat: DailyUsageStat[] = getInitialUsageStat(usedDaysAmount, beginDayTimestemp);
@ -54,18 +52,17 @@ const UsageHeatMap: React.FC<Props> = () => {
}, [memos]); }, [memos]);
const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => { const handleUsageStatItemMouseEnter = useCallback((event: React.MouseEvent, item: DailyUsageStat) => {
setPopupStat(item); const tempDiv = document.createElement("div");
if (!popupRef.current) { tempDiv.className = "usage-detail-container pop-up";
return;
}
const bounding = utils.getElementBounding(event.target as HTMLElement); const bounding = utils.getElementBounding(event.target as HTMLElement);
popupRef.current.style.left = bounding.left + "px"; tempDiv.style.left = bounding.left + "px";
popupRef.current.style.top = bounding.top - 4 + "px"; tempDiv.style.top = bounding.top - 2 + "px";
tempDiv.innerHTML = `${item.count} memos on <span className="date-text">${new Date(item.timestamp as number).toDateString()}</span>`;
document.body.appendChild(tempDiv);
}, []); }, []);
const handleUsageStatItemMouseLeave = useCallback(() => { const handleUsageStatItemMouseLeave = useCallback(() => {
setPopupStat(null); document.body.querySelectorAll("div.usage-detail-container.pop-up").forEach((node) => node.remove());
}, []); }, []);
const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => { const handleUsageStatItemClick = useCallback((item: DailyUsageStat) => {
@ -89,11 +86,6 @@ const UsageHeatMap: React.FC<Props> = () => {
<span className="tip-text"></span> <span className="tip-text"></span>
<span className="tip-text">Sat</span> <span className="tip-text">Sat</span>
</div> </div>
<div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}>
{popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span>
</div>
<div className="usage-heat-map"> <div className="usage-heat-map">
{allStat.map((v, i) => { {allStat.map((v, i) => {
const count = v.count; const count = v.count;

2
web/src/helpers/consts.ts
View File

@ -11,7 +11,7 @@ export const TOAST_ANIMATION_DURATION = 400;
export const DAILY_TIMESTAMP = 3600 * 24 * 1000; export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
// tag regex // tag regex
export const TAG_REG = /#(.+?) /g; export const TAG_REG = /#(\S+?) /g;
// markdown image regex // markdown image regex
export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g; export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g;

30
web/src/less/usage-heat-map.less
View File

@ -55,23 +55,23 @@
} }
} }
} }
}
> .usage-detail-container { .usage-detail-container {
@apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap; @apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
> .date-text { > .date-text {
@apply text-gray-300; @apply text-gray-300;
} }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -4px; bottom: -4px;
left: calc(50% - 5px); left: calc(50% - 5px);
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid rgba(0, 0, 0, 0.8); border-top: 4px solid rgba(0, 0, 0, 0.8);
}
} }
} }