Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-18 00:46:45 +00:00
Code Issues Projects Releases Wiki Activity

feat(ui): use rounded-square shape for task done-toggle

Browse source 
Replace the always-on background circle in the shared done-toggle
component with a slightly rounded square (rx/ry 5.5 on the 24-unit
viewBox). Rename the .done-circle SCSS selector to .done-shape;
stroke, opacity, hover and animation behavior are unchanged.

Applies everywhere the toggle is used (task list, planner).
This commit is contained in:
Johannes Millan 2026-05-15 12:35:38 +02:00
parent 79138b1ad2
commit 3e6d494f67
2 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/ui/done-toggle/done-toggle.component.html
View file

@ -3,12 +3,15 @@
viewBox="0 0 24 24"
fill="none"
>
<!-- Background circle (always visible) -->
<circle
class="done-circle"
cx="12"
cy="12"
r="10"
<!-- Background shape (always visible) -->
<rect
class="done-shape"
x="2.5"
y="2.5"
width="19"
height="19"
rx="5.5"
ry="5.5"
/>
@if (isCurrent() && !isDone() && !showDoneAnimation()) {
<!-- Play triangle (only rendered for current task) -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 554 B

Before After
Before After

10
src/app/ui/done-toggle/done-toggle.component.scss
View file

@ -52,7 +52,7 @@ $check-len: 18;
transform: scale(1.15);
}
.done-circle {
.done-shape {
stroke: currentColor;
stroke-width: 2;
fill: none;
@ -80,7 +80,7 @@ $check-len: 18;
}
&.is-done {
.done-circle {
.done-shape {
opacity: 0.5;
}
@ -92,7 +92,7 @@ $check-len: 18;
&.is-current:not(.is-done) {
&:hover {
.done-circle {
.done-shape {
opacity: 0.6;
}
@ -103,7 +103,7 @@ $check-len: 18;
}
&:hover {
.done-circle {
.done-shape {
opacity: 0.6;
}
@ -112,7 +112,7 @@ $check-len: 18;
}
&.is-done {
.done-circle {
.done-shape {
opacity: 0.8;
}