Skip to content

C
canifa_note
Unverified Commit 987bb807 authored by winwin2011's avatar winwin2011 Committed by GitHub
Browse files
Options

fix: heatmap popover blink (#195)

parent b884327a
Hide whitespace changes
Inline Side-by-side
Showing with 36 additions and 29 deletions
web/src/components/UsageHeatMap.tsx
View file @ 987bb807
...@@ -99,19 +99,25 @@ const UsageHeatMap = () => { ...@@ -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>
......
web/src/less/usage-heat-map.less
View file @ 987bb807
...@@ -23,35 +23,36 @@ ...@@ -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;
}
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment