From 528c24b569b2afbfc8a6ba31408fb16e10013213 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Tue, 16 Nov 2021 13:22:26 +0100
Subject: [PATCH] ui: make protected column header use the icon only

to avoid using to much space, as the icon appears on hitting "change
protection" and the tooltip is set to "Protected" it should be still
quite clear.

Further UX improvement can be made by adding a context menu with can
use words for all actions

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/grid/BackupView.js     | 7 ++++---
 www/manager6/storage/ContentView.js | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/www/manager6/grid/BackupView.js b/www/manager6/grid/BackupView.js
index fe7ad55f..ecf5a23b 100644
--- a/www/manager6/grid/BackupView.js
+++ b/www/manager6/grid/BackupView.js
@@ -330,9 +330,10 @@ Ext.define('PVE.grid.BackupView', {
 		    renderer: Ext.htmlEncode,
 		},
 		{
-		    header: gettext('Protected'),
-		    width: 100,
-		    renderer: (value) => value ? '<i class="fa fa-shield"></i>' : '',
+		    header: `<i class="fa fa-shield"></i>`,
+		    tooltip: gettext('Protected'),
+		    width: 30,
+		    renderer: v => v ? `<i data-qtip="${gettext('Protected')}" class="fa fa-shield"></i>` : '',
 		    sorter: (a, b) => (b.data.protected || 0) - (a.data.protected || 0),
 		    dataIndex: 'protected',
 		},
diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index 6080baea..2fcaa49a 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -161,9 +161,10 @@ Ext.define('PVE.storage.ContentView', {
 		dataIndex: 'notes',
 	    },
 	    'protected': {
-		header: gettext('Protected'),
-		width: 100,
-		renderer: (value) => value ? '<i class="fa fa-shield"></i>' : '',
+		header: `<i class="fa fa-shield"></i>`,
+		tooltip: gettext('Protected'),
+		width: 30,
+		renderer: v => v ? `<i data-qtip="${gettext('Protected')}" class="fa fa-shield"></i>` : '',
 		sorter: (a, b) => (b.data.protected || 0) - (a.data.protected || 0),
 		dataIndex: 'protected',
 	    },