mpuchstein/Owlerlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[refactor] finalized the templates for the current scope

Browse Source
This commit is contained in:
Matthias Puchstein
2026-03-11 04:32:22 +01:00
parent 79ffdd7018
commit f5c54ce64b
4 changed files with 58 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-tauri/templates/overlay/browsersource.html.j2
View File

@@ -12,7 +12,9 @@
</style>
</head>
<body>
{{ content }}
<div id="group" style="display: flex; flex-direction: {{ layout }};">
{{ content }}
</div>
<script>
{{ script }}
</script>

30
src-tauri/templates/overlay/countdown/countdown.css.j2
View File

@@ -1,22 +1,19 @@
.countdown-item {
display: flex;
}
.countdown-list.vertical {
flex-direction: column;
}
.countdown-list.horizontal {
flex-direction: row;
}
.countdown-item {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.countdown-item[data-hidden="true"] {
display: none;
}
{% for c in countdowns %}
#countdown-{{ c.id }}{
background-color: {{ c.background }};
border: {{ c.border }};
border-radius: {{ c.border_radius }}px;
padding: 1rem 2rem;
{% if c.backdrop_filter %}
backdrop-filter: blur(8px);
{% endif %}
{% if c.box_shadow %}
box-shadow: {{ c.box_shadow }};
{% endif %}
}
#timer-{{ c.id }} {
font-size: {{ c.font_size }}rem;
font-family: monospace;
@@ -29,4 +26,3 @@
vertical-align: middle;
margin-right: 0.5rem;
}
{% endfor %}

52
src-tauri/templates/overlay/countdown/countdown.html.j2
View File

@@ -1,23 +1,35 @@
<div class="countdown-list {{ layout }}">
{% for c in countdowns %}
<div
id="countdown-{{ c.id }}"
class="countdown-item"
data-hidden="{{ hide_idle and c.state == 'Idle' }}"
<div
id="countdown-{{ c.id }}"
class="countdown-item"
data-hidden="{{ hide_idle and c.state == 'Idle' }}"
>
{% if c.icon %}
<img
id="icon-{{ c.id }}"
src="/static/icons/{{ c.icon }}"
alt="{{ c.name }}"
/>
{% endif %}
{% if c.show_timer %}
<span
id="timer-{{ c.id }}"
style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}"
>
{% if c.icon %}
<img
id="icon-{{ c.id }}"
src="/static/icons/{{ c.icon }}"
alt="{{ c.name }}"
/>
{% endif %}
<span
id="timer-{{ c.id }}"
style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}"
>
{{ c.remaining }}
</span>
{{ c.remaining }}
</span>
{% endif %}
{% if c.show_timer and c.show_progress %}
<hr style="width: 100%; background-color: {{ c.divider_color }};" />
{% endif %}
{% if c.show_progress %}
<div
id="progress-{{ c.id }}"
style="width: 100%; background-color: {{ c.bar_bg }};"
>
<div
id="progress-inner-{{ c.id }}"
style="width: {{ c.percent }}%; background-color: {{ c.bar_fg }};"
></div>
</div>
{% endfor %}
{% endif %}
</div>

13
src-tauri/templates/overlay/countdown/countdown.js.j2
View File

@@ -1,13 +1,20 @@
const hideIdle = {{ hide_idle | lower }};
const es = new EventSource('/sse/group/{{ id }}');
es.addEventListener('countdown-tick', e => {
const {id, remaining} = JSON.parse(e.data);
document.getElementById('timer-' + id).textContent = remaining;
const {id, remaining, percent} = JSON.parse(e.data);
const timer = document.getElementById('timer-' + id);
if(timer){
timer.textContent = remaining;
}
const progressInner = document.getElementById('progress-inner-' + id);
if(progressInner){
progressInner.style.width = percent + '%';
}
});
es.addEventListener('countdown-state', e => {
const {id, state} = JSON.parse(e.data);
if (hideIdle) {
document.getElementById('countdown-' + id).style.display = state === 'Idle' ? 'none' : '';
document.getElementById('countdown-' + id).dataset.hidden = state === 'Idle';
}
});
es.addEventListener('reload', () => location.reload());