feat: Add new border style options, including single-edge borders, to countdown trackers.

This commit is contained in:
CPTN Cosmo 2025-12-22 00:53:52 +01:00
parent 19fce22ec3
commit dfc84d0626
4 changed files with 103 additions and 2 deletions

View file

@ -105,6 +105,57 @@
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></circle>
{{/if}}
{{else}}
{{#if (eq ../borderStyle "edge")}}
{{#if ../invertBorder}}
{{#if (eq ../borderEdge "bottom")}}
<line x1="1" y1="1" x2="1" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100"
stroke-dasharray="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "top")}}
<line x1="47" y1="1" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100"
stroke-dasharray="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "left")}}
<line x1="1" y1="1" x2="47" y2="1" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100"
stroke-dasharray="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "right")}}
<line x1="1" y1="47" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100"
stroke-dasharray="0 {{countdown.percentage}} {{countdown.pctRemaining}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{/if}}
{{else}}
{{#if (eq ../borderEdge "bottom")}}
<line x1="1" y1="1" x2="1" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "top")}}
<line x1="47" y1="1" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "left")}}
<line x1="1" y1="1" x2="47" y2="1" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{else if (eq ../borderEdge "right")}}
<line x1="1" y1="47" x2="47" y2="47" stroke="{{../borderColor}}" stroke-width="2"
stroke-linecap="round" pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;">
</line>
{{/if}}
{{/if}}
{{else}}
{{#if ../invertBorder}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
@ -119,6 +170,7 @@
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></rect>
{{/if}}
{{/if}}
{{/if}}
</svg>
{{/if}}
</div>