diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js index b3c755cfe..2f7905c79 100644 --- a/src/gui/src/UI/Dashboard/TabHome.js +++ b/src/gui/src/UI/Dashboard/TabHome.js @@ -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); } diff --git a/src/gui/src/UI/Dashboard/TabUsage.js b/src/gui/src/UI/Dashboard/TabUsage.js index d69089e64..4c10df942 100644 --- a/src/gui/src/UI/Dashboard/TabUsage.js +++ b/src/gui/src/UI/Dashboard/TabUsage.js @@ -40,6 +40,8 @@ const TabUsage = {

${i18n('Storage')}

+ + · used of @@ -47,7 +49,6 @@ const TabUsage = {
-
@@ -55,15 +56,15 @@ const TabUsage = {

${i18n('Resources')}

+ + · used of
-
- -
+

Usage Details

@@ -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 diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css index 5c5335a87..15e2a6143 100644 --- a/src/gui/src/css/dashboard.css +++ b/src/gui/src/css/dashboard.css @@ -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 { diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index a486f2ecc..63fb811de 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -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; diff --git a/src/gui/src/helpers.js b/src/gui/src/helpers.js index be9983ccc..1c0cedfc9 100644 --- a/src/gui/src/helpers.js +++ b/src/gui/src/helpers.js @@ -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.