usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 14:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: heatmap popover blink (#195)

Browse source
This commit is contained in:
winwin2011 2022-09-04 22:34:24 +08:00 committed by GitHub
parent b884327a53
commit 987bb80770
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/UsageHeatMap.tsx
View file

@ -99,19 +99,25 @@ const UsageHeatMap = () => {
: "stat-day-L4-bg";
return (
<span
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
todayTimeStamp === v.timestamp ? "today" : ""
}`}
<div
className="stat-wrapper"
key={i}
onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
onMouseLeave={handleUsageStatItemMouseLeave}
onClick={() => handleUsageStatItemClick(v)}
></span>
>
<span
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
todayTimeStamp === v.timestamp ? "today" : ""
}`}
></span>
</div>
);
})}
{nullCell.map((_, i) => (
<span className="stat-container null" key={i}></span>
<div className="stat-wrapper" key={i}>
<span className="stat-container null"></span>
</div>
))}
</div>
</div>

47
web/src/less/usage-heat-map.less
View file

@ -23,35 +23,36 @@
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: column;
> .stat-container {
@apply block rounded-sm;
width: 14px;
height: 14px;
background-color: @bg-lightgray;
margin-bottom: 2px;
> .stat-wrapper {
> .stat-container {
@apply block rounded-sm;
width: 14px;
height: 14px;
background-color: @bg-lightgray;
&.null {
@apply bg-transparent;
}
&.null {
@apply bg-transparent;
}
&.stat-day-L1-bg {
background-color: @stat-day-L1-bg !important;
}
&.stat-day-L1-bg {
background-color: @stat-day-L1-bg !important;
}
&.stat-day-L2-bg {
background-color: @stat-day-L2-bg !important;
}
&.stat-day-L2-bg {
background-color: @stat-day-L2-bg !important;
}
&.stat-day-L3-bg {
background-color: @stat-day-L3-bg !important;
}
&.stat-day-L3-bg {
background-color: @stat-day-L3-bg !important;
}
&.stat-day-L4-bg {
background-color: @stat-day-L4-bg !important;
}
&.stat-day-L4-bg {
background-color: @stat-day-L4-bg !important;
}
&.today {
border: 1px solid black;
&.today {
border: 1px solid black;
}
}
}
}