usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-28 23:39:04 +08:00
Code Issues Projects Releases Packages 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"; : "stat-day-L4-bg";
return ( return (
<span <div
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${ className="stat-wrapper"
todayTimeStamp === v.timestamp ? "today" : ""
}`}
key={i} key={i}
onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)} onMouseEnter={(e) => handleUsageStatItemMouseEnter(e, v)}
onMouseLeave={handleUsageStatItemMouseLeave} onMouseLeave={handleUsageStatItemMouseLeave}
onClick={() => handleUsageStatItemClick(v)} onClick={() => handleUsageStatItemClick(v)}
></span> >
<span
className={`stat-container ${colorLevel} ${currentStat === v ? "current" : ""} ${
todayTimeStamp === v.timestamp ? "today" : ""
}`}
></span>
</div>
); );
})} })}
{nullCell.map((_, i) => ( {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>
</div> </div>

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

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