stsL/argo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Refine battery status pill

Browse Source
This commit is contained in:
PitresAli
2026-10-02 08:11:25 +02:00
parent 31f720a316
commit a4d8f1b7af
8 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+7 -3
View File
@@ -763,13 +763,17 @@ function render(s,confirmed=false){
const b=s.battery;
if(b){
$('#battery-title').textContent=`${b.voltage.toFixed(2)} V`;
$('#battery-percent').textContent=`${Math.round(b.percent)}% • ${b.cells}s${!view.known||s.battery_stale?' · stale':''}`;
$('#battery-percent').textContent=`${Math.round(b.percent)}%`;
$('.battery-card').dataset.stale=String(!view.known||!!s.battery_stale);
$('.battery-card').title=`Estimated charge from voltage · ${b.cells}S${!view.known||s.battery_stale?' · stale reading':''} · Battery settings`;
$('#battery-fill').style.width=`${b.percent}%`;
$('#battery-fill').style.background=b.low?'var(--battery-low)':'var(--battery-charge)';
$('.battery-card').dataset.low=String(!!b.low);
}else{
$('#battery-title').textContent='—';
$('#battery-percent').textContent='waiting';
$('#battery-title').textContent='No voltage';
$('#battery-percent').textContent='—';
$('.battery-card').dataset.stale='false';
$('.battery-card').title='Waiting for battery voltage · Battery settings';
$('#battery-fill').style.width='0';
$('.battery-card').dataset.low='false';
}
web/index.html
+1 -1
View File
@@ -61,7 +61,7 @@
</div>
<button class="battery-card ghost" data-open="battery-modal" aria-label="Battery status and settings">
<span class="battery-meter" aria-hidden="true"><em id="battery-fill"></em></span>
<span class="battery-copy"><span class="battery-summary"><small>Battery</small><strong id="battery-title">—</strong></span><i id="battery-percent">waiting</i></span>
<span class="battery-copy"><span class="battery-summary"><strong id="battery-percent">—</strong><small id="battery-title">No voltage</small></span></span>
</button>
</section>
web/styles.css
+6 -5
View File
@@ -1417,17 +1417,18 @@ body #connect { height:var(--pill-lg); border-radius:var(--pill-radius); }
.battery-card {
position:relative; display:block; flex-shrink:0; width:100%; height:var(--pill-lg);
min-height:var(--pill-lg); margin:0; padding:0; overflow:hidden;
border:1px solid #565956; border-radius:var(--pill-radius); background:#383c39;
border:0; border-radius:var(--pill-radius); background:#314b3a;
color:#f2f5f2; isolation:isolate;
}
.battery-meter { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.25; transition:width .35s ease,background .2s ease; }
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.55; transition:width .35s ease,background .2s ease,opacity .18s ease-out; }
.battery-card .battery-copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:0 18px; pointer-events:none; }
.battery-summary { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.battery-card small { color:#c3cec5; font-size:11px; line-height:1; }
.battery-card strong { font-size:20px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
.battery-card small { color:#d7e8dc; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; }
.battery-card strong { font-size:26px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
.battery-card i { align-self:auto; color:#d9e0da; text-align:right; font-size:12px; line-height:1.35; font-style:normal; }
.battery-card[data-low="true"] { border-color:#a87468; }
.battery-card[data-low="true"] { background:#4a3734; }
.battery-card[data-stale="true"] #battery-fill { opacity:.25; }
.battery-card:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
/* The same slender, rounded scrollbar is used by every scrollable panel. */