cosmo/dh-improved-countdowns
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

feat: Rework countdown visuals with new fill, border, and number color settings, including dynamic settings visibility and a "both" display mode.

Browse source
This commit is contained in:
CPTN Cosmo 2025-12-22 00:01:20 +01:00
parent 02a3855ea1
commit d00248593a
4 changed files with 282 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

77
templates/countdown-tracker.hbs
View file

@ -38,41 +38,98 @@
../isMinimized}}data-tooltip="{{countdown.name}}" {{/if}}>
<img src="{{countdown.img}}" class="countdown-icon" />
{{#if ../showNumbers}}
<div class="value-overlay number">
{{countdown.progress.current}}{{#unless ../isMinimized}}<span
class="max-value">/{{countdown.progress.start}}</span>{{/unless}}
</div>
{{else}}
{{#if ../showVisuals}}
<div class="value-overlay visual">
{{#if ../enableVisualOverlay}}
{{#if (eq ../fillType "grayscale")}}
{{!-- Grayscale Filter Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertProgress}}
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%); mask-image: conic-gradient(transparent {{countdown.percentage}}%, black {{countdown.percentage}}%);">
</div>
{{else}}
<div class="clock-visual grayscale-filter"
style="-webkit-mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%); mask-image: conic-gradient(black {{countdown.percentage}}%, transparent {{countdown.percentage}}%);">
</div>
{{/if}}
{{else}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{else}}
<div class="bar-visual {{../barOrientation}} grayscale-filter"
style="{{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{else}}
{{!-- Color Overlay Mode --}}
{{#if (eq ../iconShape "circle")}}
{{#if ../invertProgress}}
<div class="clock-visual"
style="background: conic-gradient({{../visualColor}} {{countdown.percentage}}%, transparent {{countdown.percentage}}%); opacity: 0.4;">
style="background: conic-gradient(transparent {{countdown.percentage}}%, {{../fillColor}} {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{else}}
<div class="clock-visual"
style="background: conic-gradient({{../fillColor}} {{countdown.percentage}}%, transparent {{countdown.percentage}}%); opacity: 0.4;">
</div>
{{/if}}
{{else}}
{{#if ../invertProgress}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.pctRemaining}}%; left: {{countdown.percentage}}%;{{else}}height: {{countdown.pctRemaining}}%; top: 0;{{/if}}">
</div>
{{else}}
<div class="bar-visual {{../barOrientation}}"
style="background-color: {{../visualColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
style="background-color: {{../fillColor}}; opacity: 0.4; {{#if (eq ../barOrientation 'horizontal')}}width: {{countdown.percentage}}%;{{else}}height: {{countdown.percentage}}%;{{/if}}">
</div>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{#if ../enableVisualBorder}}
<svg class="progress-border-svg" viewBox="0 0 48 48" style="transform: rotate(-90deg);">
{{#if (eq ../iconShape "circle")}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../visualColor}}" stroke-width="2"
{{#if ../invertBorder}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</circle>
{{else}}
<circle cx="24" cy="24" r="23" fill="none" stroke="{{../borderColor}}" stroke-width="2"
pathLength="100" stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></circle>
{{/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"
stroke-dasharray="{{countdown.pctRemaining}} 100"
stroke-dashoffset="-{{countdown.percentage}}"
style="transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; opacity: 1;">
</rect>
{{else}}
<rect x="1" y="1" width="46" height="46" rx="8" ry="8" fill="none"
stroke="{{../visualColor}}" stroke-width="2" pathLength="100"
stroke="{{../borderColor}}" stroke-width="2" pathLength="100"
stroke-dasharray="{{countdown.percentage}} 100"
style="transition: stroke-dasharray 0.3s ease; opacity: 1;"></rect>
{{/if}}
{{/if}}
</svg>
{{/if}}
</div>
{{/if}}
{{#if ../showNumbers}}
<div class="value-overlay number" style="color: {{../numberColor}};">
{{countdown.progress.current}}{{#unless ../isMinimized}}<span
class="max-value">/{{countdown.progress.start}}</span>{{/unless}}
</div>
{{/if}}
</div>
{{#if countdown.editable}}