ui: ceph warnings: lower opacity for no-details text

to make it more clear that this is not the details, but a UI text
placeholder.
Add a `pmx-faded` class that reduced opacity, as there where recent
discussion about adding such a utility class to widget-toolkit anyway.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index f386fd12ed3caebf9042c3b476ec9438f48cf878..e2d3dce970b9693fd5931632ac35bde5598b52af 100644 (file)
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -717,3 +717,7 @@ table.osds td:first-of-type {
     padding-bottom: 10px;
     font-weight: normal;
 }
+
+.pmx-faded {
+    opacity: 0.75;
+}

diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index a72ee761ecbc3c18f8bf437bf81313c4474a84e5..e985a4cc79746a48c89daddd09e2a560a070b31e 100644 (file)
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -106,6 +106,7 @@ Ext.define('PVE.node.CephStatus', {
                                severity: check.severity,
                            };
                            data.noDetails = data.detail.length === 0;
+                           data.detailsCls = data.detail.length === 0 ? 'pmx-faded' : '';
                            if (data.detail.length === 0) {
                                data.detail = "no additional data";
                            }
@@ -185,7 +186,7 @@ Ext.define('PVE.node.CephStatus', {
                        {
                            ptype: 'rowexpander',
                            expandOnDblClick: false,
-                           rowBodyTpl: '<pre class="pve-ceph-warning-detail">{detail}</pre>',
+                           rowBodyTpl: '<pre class="pve-ceph-warning-detail {detailsCls}">{detail}</pre>',
                        },
                    ],
                },