WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-06 17:57:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make usage indicator more contrast (#10188)

Browse Source 
* Make usage indicator more contrast

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* Use old warning threshold

Signed-off-by: Artem Savchenko <armisav@gmail.com>

---------

Signed-off-by: Artem Savchenko <armisav@gmail.com>
This commit is contained in:
Artyom Savchenko
2025-11-04 10:32:50 +07:00
committed by GitHub
parent c0346f083e
commit ca83fa264b
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/billing-resources/src/components/LimitsIndicator.svelte
+1 -1
View File
@@ -135,6 +135,6 @@
border-radius: var(--small-BorderRadius);
transition: background-color 0.2s ease;
position: relative;
border: 1px solid var(--button-secondary-BorderColor);
border: 1px solid var(--theme-trans-color);
}
</style>
plugins/billing-resources/src/components/UsageProgressBar.svelte
+15 -3
View File
@@ -19,13 +19,13 @@
$: clampedPercent = Math.min(Math.max(percent, 0), 1)
// Calculate color based on current percentage
$: fillColor = clampedPercent >= 0.9 ? '#e53935' : clampedPercent >= 0.7 ? '#fbc02d' : '#43a047'
// Calculate style class based on current percentage
$: fillClass = clampedPercent >= 0.9 ? 'critical' : clampedPercent >= 0.7 ? 'warning' : 'normal'
</script>
<div class="progress-bar" style="width: {width}; height: {height};">
<div class="progress-track">
<div class="progress-fill" style="width: {clampedPercent * 100}%; background-color: {fillColor};"></div>
<div class="progress-fill {fillClass}" style="width: {clampedPercent * 100}%;"></div>
</div>
</div>
@@ -49,5 +49,17 @@
transition:
width 0.3s ease,
background-color 0.3s ease;
&.normal {
background-color: var(--theme-won-color);
}
&.warning {
background-color: var(--theme-warning-color);
}
&.critical {
background-color: var(--theme-error-color);
}
}
</style>