From 74e8e4237e7bf276977969a9f5492069d2f52cb2 Mon Sep 17 00:00:00 2001
From: Tony BONNIN <stopyz@gmail.com>
Date: Fri, 23 Aug 2024 22:45:00 +0200
Subject: [PATCH] Change Color & Disk Template
---
app/acf-util/welcome-html.lsp | 47 +++++++++++-----
.../dashboard/css/dashboard-main/dark.css | 13 +++++
.../dashboard/css/dashboard-main/icons.css | 42 +++++++++++++-
.../dashboard/css/dashboard-main/mobile.css | 14 +++++
.../dashboard/css/dashboard-pages/health.css | 5 +-
.../dashboard/css/dashboard-pages/welcome.css | 56 ++++++++++++-------
6 files changed, 140 insertions(+), 37 deletions(-)
diff --git a/app/acf-util/welcome-html.lsp b/app/acf-util/welcome-html.lsp
index f25eec5..1f523b5 100644
--- a/app/acf-util/welcome-html.lsp
+++ b/app/acf-util/welcome-html.lsp
@@ -260,43 +260,64 @@
<div class="disk-list">
<p class="dashboard-title"><i class="fa-solid fa-square"></i> Disk List</p>
<%
-local function get_random_number(limit)
- return math.floor(math.random() * limit)
+-- Random Colors in Range Function without Duplicate Colors
+local used_colors = {}
+local function get_random_number(min, max)
+ return math.floor(math.random() * (max - min + 1)) + min
+end
+local function table_size(tbl)
+ local count = 0
+ for _ in pairs(tbl) do count = count + 1 end
+ return count
end
-
local function get_random_color()
- local h = get_random_number(360)
- local color = string.format("hsl(%d, 70%%, 55%%)", h)
+ local hue_ranges = {
+ {min = 100, max = 160}, -- Green
+ {min = 50, max = 80}, -- Yellow
+ {min = 210, max = 260} -- Blue
+ }
+ if table_size(used_colors) >= 25 then
+ used_colors = {}
+ end
+ local color
+ repeat
+ local range = hue_ranges[get_random_number(1, #hue_ranges)]
+ local h = get_random_number(range.min, range.max)
+ color = string.format("hsl(%d, 60%%, 60%%)", h)
+ until not used_colors[color]
+ used_colors[color] = true
return color
end
%>
<% displaydisk = function(disk, name)
local used_color = get_random_color()
- io.write('<table id="legend-title" style="margin:0px;padding:0px;border:0px;margin-top:5px;">\n')
+ io.write('<div id="disk-listing">\n')
+ io.write('<table id="legend-title">\n')
io.write(" <tr>\n")
- io.write(' <td id="legend-object" width="100px"><b><span class="linux-name"><i class="fa-solid fa-database icon-disk">')
- io.write('</i> Disk '..html.html_escape(name)..'</span> - <span class="brand-name" style="color:'..used_color..'">'..html.html_escape(disk.model)..'</span>')
+ io.write(' <td id="legend-object" width="100px"><b><span class="linux-name"><i class="fa-solid fa-database icon-disk">\n')
+ io.write('</i> Disk '..html.html_escape(name)..'</span> | <span class="brand-name" style="color:'..used_color..'">'..html.html_escape(disk.model)..'</span>\n')
io.write('<span class="disk-right-inf"><span class="mount-point"><i class="fa-solid fa-folder-closed icon-disk icon-disk-right"></i> '..html.html_escape(disk.mount_point)..'</span>')
- io.write('<i class="fa-solid fa-chart-simple icon-disk icon-disk-right"></i> Used <span class="disk-used" style="background-color:'..used_color..'">'..html.html_escape(disk.used) .. "%" .. '</span></span></b></td>\n')
+ io.write('<i class="fa-solid fa-chart-simple icon-disk icon-disk-right"></i> Used <span class="disk-used" style="color:'..used_color..'">'..html.html_escape(disk.used) .. "%" .. '</span></span></b></td>\n')
io.write(" </tr>\n")
io.write("</table>\n")
io.write('<table class="chart-bar chart-storage">\n')
io.write(" <tr>\n")
io.write(" <td>0%</td>\n")
if tonumber(disk.used) >= 0 and tonumber(disk.used) <= 5 then
- io.write(' <td id="capacity-used" class="capacity-used" width="5%" style="margin:0; border:none; background-color:'..used_color..'">')
+ io.write(' <td id="capacity-used" class="capacity-used" width="5%" style="margin:0; border:none; background-color:'..used_color..'">\n')
io.write('<center><b>'.. bytesToSize(tonumber(disk.use) * 1024) ..'</b></center></td>\n')
elseif tonumber(disk.used) > 10 then
- io.write(' <td id="capacity-used" class="capacity-used" width="'..html.html_escape(disk.used)..'%" style="margin:0; border:none; background-color:'..used_color..'">')
+ io.write(' <td id="capacity-used" class="capacity-used" width="'..html.html_escape(disk.used)..'%" style="margin:0; border:none; background-color:'..used_color..'; transition: width 0.5s ease-in-out;">\n')
io.write('<center><b>'.. bytesToSize(tonumber(disk.use) * 1024) ..'</b></center></td>\n')
end
if tonumber(disk.used) < 100 then
- io.write(' <td id="capacity-free" class="capacity-free" width="'..(100-tonumber(disk.used))..'%" style="margin:0; border:none;">')
- io.write('<center><b>'.. bytesToSize(tonumber(disk.available) * 1024) ..'</b></center></td>\n')
+ io.write(' <td id="capacity-free" class="capacity-free" width="'..(100-tonumber(disk.used))..'%" style="margin:0; border:none;">\n')
+ io.write('<center><b>'.. bytesToSize(tonumber(disk.available) * 1024) ..' <span class="free-chart-disk">(Free)</span></b></center></td>\n')
end
io.write(' <td>100%</td>\n')
io.write(" </tr>\n")
io.write("</table>\n")
+ io.write("</div>\n")
end
%>
<%
diff --git a/www/skins/dashboard/css/dashboard-main/dark.css b/www/skins/dashboard/css/dashboard-main/dark.css
index 9877703..f293460 100644
--- a/www/skins/dashboard/css/dashboard-main/dark.css
+++ b/www/skins/dashboard/css/dashboard-main/dark.css
@@ -122,3 +122,16 @@ html.app-logon.dark-theme {
.dark-theme .fa-solid.fa-circle-half-stroke {
color: rgb(99 0 210) !important;
}
+
+.dark-theme #disk-listing {
+ background: inherit !important;
+}
+
+.dark-theme .page-welcome #capacity-free {
+ color: #c9c9c9 !important;
+ background: #404040 !important;
+}
+
+.dark-theme .welcome .dashboard-title {
+ border-top: 1px solid #505050 !important;
+}
\ No newline at end of file
diff --git a/www/skins/dashboard/css/dashboard-main/icons.css b/www/skins/dashboard/css/dashboard-main/icons.css
index ac9f129..a3d28a7 100644
--- a/www/skins/dashboard/css/dashboard-main/icons.css
+++ b/www/skins/dashboard/css/dashboard-main/icons.css
@@ -46,7 +46,7 @@
display: inline-block;
position: relative;
margin: 0 0.5rem 0 0;
- color: #e5e5e5 !important;;
+ color: #e5e5e5 !important;
font-size: 1.5rem;
top: -0.2rem;
}
@@ -160,6 +160,20 @@
color: #adadad
}
+#system #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ content: '\F21E';
+ font-weight: bold;
+ margin: 0 1rem 0 0;
+ color: white;
+ position: relative;
+ font-size: 1.5rem;
+ top: 1.5rem;
+ background: #5a329f;
+ padding: 1.5rem;
+ border-radius: 8rem;
+}
+
.health #subnav::before {
font-family: "Font Awesome 6 Free";
content: '\F21E';
@@ -185,10 +199,14 @@
}
#section-hardware-information #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
content: '\F2DB' !important;
}
#section-storage #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
content: '\F0A0' !important;
}
@@ -201,44 +219,62 @@
}
.apk #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.5rem 1.4rem !important;
content: '\F49E' !important;
}
.cron #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.4rem 1.5rem !important;
content: '\F1DA' !important;
}
.syslog #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
content: '\F06E' !important;
}
.logfiles #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.2rem 1.5rem !important;
content: '\F15C' !important;
}
.password #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.33rem 1.5rem !important;
content: '\F13E' !important;
}
.roles #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.5rem 1.35rem !important;
content: '\E595' !important;
}
.rc #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.4rem 1.5rem !important;
content: '\F469' !important;
}
.modules #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
content: '\F1B3' !important;
}
.skins #subnav::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
padding: 1.2rem 1.5rem !important;
content: '\F043' !important;
}
@@ -259,6 +295,8 @@
}
.welcome .dashboard-title-memory::before {
+ font-family: "Font Awesome 6 Free";
+ font-weight: bold;
content: '\F538' !important;
}
@@ -379,7 +417,7 @@
.icon-disk {
margin: 0 0.25rem 0 0;
- opacity: 0.6;
+ opacity: 0.45;
}
.welcome .dashboard-title .fa-solid.fa-square {
diff --git a/www/skins/dashboard/css/dashboard-main/mobile.css b/www/skins/dashboard/css/dashboard-main/mobile.css
index b2ca9fa..d1119bd 100644
--- a/www/skins/dashboard/css/dashboard-main/mobile.css
+++ b/www/skins/dashboard/css/dashboard-main/mobile.css
@@ -249,6 +249,20 @@
flex-wrap: wrap !important;
}
+ .welcome .disk-right-inf {
+ float: right;
+ position: relative;
+ top: -0.75rem;
+ }
+
+ #legend-object {
+ padding: 0rem 0.1rem !important;
+ }
+
+ #disk-listing {
+ height: 9rem !important;
+ }
+
.data-block.data-system-up-time {
margin: 0 !important;
}
diff --git a/www/skins/dashboard/css/dashboard-pages/health.css b/www/skins/dashboard/css/dashboard-pages/health.css
index cdf3b32..7683a48 100644
--- a/www/skins/dashboard/css/dashboard-pages/health.css
+++ b/www/skins/dashboard/css/dashboard-pages/health.css
@@ -71,9 +71,10 @@
#legend-object {
text-align: left !important;
font-size: 0.75rem;
- color: #a7a7a7;
+ color: #cbcbcb !important;
+ border-color: #fbfbfb !important;
border-radius: 4px;
- padding: 0.75rem 0.1rem !important;
+ padding: 0.75rem 0.1rem;
}
#legend b {
diff --git a/www/skins/dashboard/css/dashboard-pages/welcome.css b/www/skins/dashboard/css/dashboard-pages/welcome.css
index 9fb230a..0a9ac45 100644
--- a/www/skins/dashboard/css/dashboard-pages/welcome.css
+++ b/www/skins/dashboard/css/dashboard-pages/welcome.css
@@ -805,8 +805,12 @@ input:checked + .slider:before {
}
.page-welcome #capacity-free {
- background: #f3f3f3;
- margin: 0 !important;
+ color: grey !important;
+ font-family: monospace;
+ font-size: 0.75rem;
+ border-right: none;
+ border-radius: 0 8px 8px 0;
+ background: #f1f1f1;
}
.page-welcome #capacity-used {
@@ -930,26 +934,20 @@ input:checked + .slider:before {
.welcome #content .chart-storage {
width: 100%;
- height: 10rem;
+ height: 5rem;
border: none !important;
font-size: 0.75rem;
- margin: -1.25rem auto 2rem !important;
+ margin: -1.25rem auto 1.5rem !important;
+ transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.welcome #capacity-used {
color: white !important;
- font-family: "Arial Black", sans-serif;
font-size: 0.75rem;
+ width: 0;
border-right: none;
border-radius: 8px 0 0 8px;
-}
-
-.welcome #capacity-free {
- color: grey !important;
- font-family: monospace;
- font-size: 0.75rem;
- border-right: none;
- border-radius: 0 8px 8px 0;
+ transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.welcome .disk-right-inf {
@@ -957,23 +955,24 @@ input:checked + .slider:before {
}
.welcome .disk-used {
- color: white;
+ color: grey;
+ font-family: monospace;
font-weight: 600 !important;
- font-size: 0.65rem;
- position: relative;
margin: 0 0 0 0.25rem;
- padding: 0.25rem 0.55rem;
+ padding: 0.25rem 0 0.55rem;
border-radius: 2px;
- top: -0.1rem;
+ font-weight: 900 !important;
}
.welcome .icon-disk-right {
- opacity: 0.2;
+ opacity: 0.45;
margin: 0 0.25rem 0 3rem;
}
.welcome .brand-name {
- font-weight: 900;
+ font-weight: bold;
+ font-size: 0.7rem;
+ letter-spacing: -0.05rem;
}
.welcome .dashboard-title {
@@ -985,4 +984,21 @@ input:checked + .slider:before {
letter-spacing: -0.05rem;
text-transform: capitalize;
font-size: 0.85rem;
+}
+
+.free-chart-disk {
+ opacity: 0.55;
+}
+
+#disk-listing {
+ box-shadow: 2px 2px 30px #00000020;
+ margin: 0.5rem auto;
+ background: #fbfbfb;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+}
+
+.welcome center {
+ position: relative;
+ top: -0.5rem;
}
\ No newline at end of file
--
GitLab