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 layout styles

Browse Source
This commit is contained in:
boojack
2022-05-02 09:32:45 +08:00
parent 406109b091
commit 08682a822e
19 changed files with 65 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@ interface Props {}
const UsageHeatMap: React.FC<Props> = () => {
const todayTimeStamp = utils.getDateStampByDate(Date.now());
const todayDay = new Date(todayTimeStamp).getDay() || 7;
const todayDay = new Date(todayTimeStamp).getDay() + 1;
const nullCell = new Array(7 - todayDay).fill(0);
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
@ -62,9 +62,8 @@ const UsageHeatMap: React.FC<Props> = () => {
}
const targetEl = event.target as HTMLElement;
popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px";
const topValue = targetEl.offsetTop;
popupRef.current.style.top = topValue + "px";
popupRef.current.style.left = targetEl.offsetLeft + "px";
popupRef.current.style.top = targetEl.offsetTop - 4 + "px";
}, []);
const handleUsageStatItemMouseLeave = useCallback(() => {
@ -87,16 +86,15 @@ const UsageHeatMap: React.FC<Props> = () => {
return (
<div className="usage-heat-map-wrapper" ref={containerElRef}>
<div className="day-tip-text-container">
<span className="tip-text">Mon</span>
<span className="tip-text"></span>
<span className="tip-text">Wed</span>
<span className="tip-text"></span>
<span className="tip-text">Fri</span>
<span className="tip-text"></span>
<span className="tip-text">Sun</span>
<span className="tip-text"></span>
<span className="tip-text">Tue</span>
<span className="tip-text"></span>
<span className="tip-text">Thu</span>
<span className="tip-text"></span>
<span className="tip-text">Sat</span>
</div>
{/* popup */}
<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>