lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-05-04 16:40:41 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Add dynamic usage-bar colors and refine layout

Browse Source
This commit is contained in:
Nariman Jelveh
2026-04-30 16:03:39 -07:00
parent 6b8152d3bc
commit a32ac4e672
5 changed files with 54 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Dashboard/TabHome.js
+8 -2
View File
@@ -301,7 +301,10 @@ const TabHome = {
$el_window.find('.bento-storage-used').text(`${window.byte_format(general_used)} Used`);
$el_window.find('.bento-storage-capacity').text(window.byte_format(res.capacity));
$el_window.find('.bento-storage-percent').text(`${usage_percentage}%`);
$el_window.find('.bento-storage-bar').css('width', `${usage_percentage}%`);
$el_window.find('.bento-storage-bar').css({
width: `${usage_percentage}%`,
'background-color': window.usage_bar_color(usage_percentage),
});
} catch (e) {
console.error('Failed to load storage data:', e);
}
@@ -317,7 +320,10 @@ const TabHome = {
$el_window.find('.bento-resources-used').text(`${window.number_format(totalUsage / 100_000_000, { decimals: 2, prefix: '$' })} Used`);
$el_window.find('.bento-resources-capacity').text(window.number_format(monthlyAllowance / 100_000_000, { decimals: 2, prefix: '$' }));
$el_window.find('.bento-resources-percent').text(`${totalUsagePercentage}%`);
$el_window.find('.bento-resources-bar').css('width', `${totalUsagePercentage}%`);
$el_window.find('.bento-resources-bar').css({
width: `${totalUsagePercentage}%`,
'background-color': window.usage_bar_color(totalUsagePercentage),
});
} catch (e) {
console.error('Failed to load monthly usage data:', e);
}
src/gui/src/UI/Dashboard/TabUsage.js
+19 -13
View File
@@ -40,6 +40,8 @@ const TabUsage = {
<div class="driver-usage-header">
<h3 style="margin:0; font-size: 14px; flex-grow: 1; font-weight: 500;">${i18n('Storage')}</h3>
<div style="font-size: 13px; margin-bottom: 3px; opacity:0.85;">
<span id="storage-used-percent"></span>
<span> &middot; </span>
<span id="storage-used"></span>
<span> used of </span>
<span id="storage-capacity"></span>
@@ -47,7 +49,6 @@ const TabUsage = {
</div>
</div>
<div id="storage-bar-wrapper">
<span id="storage-used-percent"></span>
<div id="storage-bar"></div>
<div id="storage-bar-host"></div>
</div>
@@ -55,15 +56,15 @@ const TabUsage = {
<div class="driver-usage-header">
<h3 style="margin:0; font-size: 14px; flex-grow: 1; font-weight: 500;">${i18n('Resources')}</h3>
<div style="font-size: 13px; margin-bottom: 3px; opacity:0.85;">
<span class="usage-progbar-percent"></span>
<span> &middot; </span>
<span id="total-usage"></span>
<span> used of </span>
<span id="total-capacity"></span>
</div>
</div>
<div class="usage-progbar-wrapper">
<div class="usage-progbar" style="width: 0;">
<span class="usage-progbar-percent"></span>
</div>
<div class="usage-progbar" style="width: 0;"></div>
</div>
<h3 style="margin:15px 0 10px 0; font-size: 14px; font-weight: 500;">Usage Details</h3>
<div class="driver-usage-details-content visible">
@@ -221,7 +222,10 @@ async function update_usage_details ($el_window) {
$('#total-usage').html(window.number_format(totalUsage / 100_000_000, { decimals: 2, prefix: '$' }));
$('#total-capacity').html(window.number_format(monthlyAllowance / 100_000_000, { decimals: 2, prefix: '$' }));
$('.usage-progbar-percent').html(`${totalUsagePercentage }%`);
$('.usage-progbar').css('width', `${totalUsagePercentage }%`);
$('.usage-progbar').css({
width: `${totalUsagePercentage }%`,
'background-color': window.usage_bar_color(totalUsagePercentage),
});
// Store raw data for sorting
usageTableData = [];
@@ -276,14 +280,16 @@ async function update_usage_details ($el_window) {
host_usage_percentage > 0
? ` / ${ host_usage_percentage }%` : ''}`,
);
$('#storage-bar').css('width', `${usage_percentage }%`);
$('#storage-bar-host').css('width', `${host_usage_percentage }%`);
if ( usage_percentage >= 100 ) {
$('#storage-bar').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
}
const totalStoragePercent = Number(usage_percentage) + Number(host_usage_percentage);
const storageColor = window.usage_bar_color(totalStoragePercent);
$('#storage-bar').css({
width: `${usage_percentage }%`,
'background-color': storageColor,
});
$('#storage-bar-host').css({
width: `${host_usage_percentage }%`,
'background-color': storageColor,
});
});
// Wait for both promises to complete
src/gui/src/css/dashboard.css
+1 -10
View File
@@ -493,15 +493,6 @@ body {
background: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0.85) 40%, rgba(30, 30, 30, 1) 100%);
}
#storage-bar-wrapper, .usage-progbar-wrapper {
background-color: var(--dashboard-input-background);
}
#storage-bar-host, .usage-progbar {
background: linear-gradient(#64748b, #8494ab, #64748b);
}
.dashboard-section-billing .billing-card {
background: var(--dashboard-card-background);
}
@@ -2890,7 +2881,7 @@ body {
background-color: var(--dashboard-bento-usage-bar-fill);
border-radius: 7px;
width: 0;
transition: width 0.4s ease;
transition: width 0.4s ease, background-color 0.4s ease;
}
.dashboard .bento-usage-card-info {
src/gui/src/css/style.css
+12 -57
View File
@@ -4760,71 +4760,26 @@ fieldset[name=number-code] {
margin-bottom: 5px;
}
#storage-bar-wrapper {
#storage-bar-wrapper, .usage-progbar-wrapper {
width: 100%;
height: 20px;
border: 1px solid #dddddd;
border-radius: 3px;
background-color: #fbfbfb;
position: relative;
height: 14px;
flex-shrink: 0;
background-color: var(--dashboard-usage-bar-background, #e5e7eb);
border-radius: 7px;
overflow: hidden;
display: flex;
align-items: center;
align-items: stretch;
}
#storage-bar {
float: left;
height: 20px;
background: linear-gradient(#dbe3ef, #c2ccdc, #dbe3ef);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
width: 0;
}
#storage-bar-host {
float: left;
#storage-bar, #storage-bar-host, .usage-progbar {
height: 100%;
background: linear-gradient(#dbe3ef, #c2ccdc, #dbe3ef);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: var(--dashboard-bento-usage-bar-fill, #ea580c);
width: 0;
transition: width 0.4s ease, background-color 0.4s ease;
}
#storage-used-percent {
position: absolute;
text-align: center;
display: inline-block;
width: 100%;
font-size: 13px;
}
.usage-progbar-wrapper {
width: 100%;
height: 20px;
border: 1px solid #dddddd;
border-radius: 3px;
background-color: #fbfbfb;
position: relative;
display: flex;
align-items: center;
}
.usage-progbar {
float: left;
height: 20px;
background: linear-gradient(#dbe3ef, #c2ccdc, #dbe3ef);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
width: 0;
}
.usage-progbar-percent {
position: absolute;
left: calc(50% - 20px);
text-align: center;
display: inline-block;
width: 40px;
font-size: 13px;
line-height: 20px;
#storage-used-percent, .usage-progbar-percent {
font-weight: 500;
}
.driver-usage-container{
flex-grow: 1;
src/gui/src/helpers.js
+14
View File
@@ -85,6 +85,20 @@ window.byte_format = (bytes) => {
return `${(bytes / Math.pow(1024, i)).toFixed(2) } ${ sizes[i]}`;
};
/**
* Returns a fill color for a usage progress bar that shifts from green at 0%
* toward red as the percentage approaches 100%, passing through yellow/orange
* in the middle. Uses HSL so the transition is smooth.
*
* @param {number} percent - 0..100 (clamped)
* @returns {string} CSS color
*/
window.usage_bar_color = (percent) => {
const p = Math.max(0, Math.min(100, Number(percent) || 0)) / 100;
const hue = 120 * (1 - p);
return `hsl(${hue.toFixed(0)}, 70%, 45%)`;
};
/**
* A function that generates a UUID (Universally Unique Identifier) using the version 4 format,
* which are random UUIDs. It uses the cryptographic number generator available in modern browsers.