From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 53E8969491
for <pve-devel@lists.proxmox.com>; Wed, 23 Mar 2022 11:35:49 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 5984C2590A
for <pve-devel@lists.proxmox.com>; Wed, 23 Mar 2022 11:34:55 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[94.136.29.106])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS id 83881258F2
for <pve-devel@lists.proxmox.com>; Wed, 23 Mar 2022 11:34:52 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 5AAD74267A
for <pve-devel@lists.proxmox.com>; Wed, 23 Mar 2022 11:34:52 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Wed, 23 Mar 2022 11:34:42 +0100
Message-Id: <20220323103445.2075649-10-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20220323103445.2075649-1-d.csapak@proxmox.com>
References: <20220323103445.2075649-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.150 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
T_SCC_BODY_TEXT_LINE -0.01 -
Subject: [pve-devel] [PATCH manager v4 07/10] ui: add form/Tag
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Wed, 23 Mar 2022 10:35:49 -0000
displays a single tag, with the ability to edit inline on click. This brings
up a list of globally available tags for simple selection.
Also has a mode for adding a new Tag.
This has a 'updateCallback' which is called when the value changes
so that the parent component can update the config, and a
'layoutCallback' which will be called on input, so that the parent
component can update the layout when the content changes.
This is necessary since we circumvent the extjs logic for updating.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/manager6/Makefile | 1 +
www/manager6/form/Tag.js | 207 +++++++++++++++++++++++++++++++++++++++
2 files changed, 208 insertions(+)
create mode 100644 www/manager6/form/Tag.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 225dffba..45862e71 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -74,6 +74,7 @@ JSSRC= \
form/ViewSelector.js \
form/iScsiProviderSelector.js \
form/TagColorGrid.js \
+ form/Tag.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/Tag.js b/www/manager6/form/Tag.js
new file mode 100644
index 00000000..5c308f51
--- /dev/null
+++ b/www/manager6/form/Tag.js
@@ -0,0 +1,207 @@
+Ext.define('Proxmox.Tag', {
+ extend: 'Ext.Component',
+ alias: 'widget.pmxTag',
+
+ // if set to true, displays 'Add Tag' and a plus symbol
+ addTag: false,
+
+ // callback to update the config
+ updateCallback: Ext.emptyFn,
+
+ // callback to update the layout in the containing element
+ // this is necessary since we circumvent extjs layout with 'contentEditable'
+ layoutCallback: Ext.emptyFn,
+
+ inEdit: false,
+ style: {
+ 'padding-right': '1px',
+ 'white-space': 'nowrap',
+ },
+
+ icons: {
+ addTag: 'plus',
+ normal: 'times',
+ edit: 'check',
+ },
+
+ // we need to do this in mousedown, because that triggers before
+ // focusleave (which triggers before click)
+ onMouseDown: function(event) {
+ let me = this;
+ if (event.target.tagName === "I" && (!me.addTag || me.inEdit)) {
+ if (!me.inEdit) {
+ me.setVisible(false);
+ me.setText('');
+ }
+ me.finishEdit();
+ }
+ },
+
+ onClick: function(event) {
+ let me = this;
+ if ((me.addTag || event.target.tagName === "SPAN") && !me.inEdit) {
+ if (me.addTag) {
+ me.setText('');
+ me.setStyle('cursor');
+ }
+ me.inEdit = true;
+ me.tagEl().contentEditable = true;
+ me.iconEl().classList = `fa fa-fw fa-${me.icons.edit}-circle`;
+
+ // select text in the element
+ let range = document.createRange();
+ range.selectNodeContents(me.tagEl());
+ let sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+
+ me.showPicker();
+ }
+ },
+
+ showPicker: function() {
+ let me = this;
+ if (!me.picker) {
+ me.picker = Ext.widget({
+ xtype: 'boundlist',
+ minWidth: 70,
+ scrollable: true,
+ floating: true,
+ hidden: true,
+ userCls: 'proxmox-tags-circle',
+ displayField: 'tag',
+ itemTpl: [
+ '{[Proxmox.Utils.getTagElement(values.tag, PVE.Utils.getTagOverrides())]} {tag}',
+ ],
+ store: [],
+ listeners: {
+ select: function(picker, rec) {
+ me.setText(rec.data.tag);
+ me.finishEdit();
+ },
+ },
+ });
+ }
+ me.picker.getStore().clearFilter();
+ let taglist = PVE.Utils.getTagList().map(v => ({ tag: v }));
+ if (taglist.length < 1) {
+ return;
+ }
+ me.picker.getStore().setData(taglist);
+ me.picker.showBy(me, 'tl-bl');
+ me.picker.setMaxHeight(200);
+ },
+
+ finishEdit: function(update = true) {
+ let me = this;
+ me.picker?.hide();
+
+ let tag = me.tagEl().innerHTML;
+ let mode;
+ if (me.addTag) {
+ me.setText(me.tag);
+ me.setStyle('cursor', 'pointer');
+ mode = 'addTag';
+ } else {
+ me.tag = tag;
+ mode = 'normal';
+ }
+ me.iconEl().classList = `fa fa-fw fa-${me.icons[mode]}-circle`;
+ me.updateColor(me.tag);
+
+
+ if (update) {
+ me.updateCallback(tag);
+ }
+ me.tagEl().contentEditable = false;
+ me.inEdit = false;
+ },
+
+ setText: function(text) {
+ let me = this;
+ me.tagEl().innerHTML = text;
+ me.layoutCallback();
+ },
+
+ cancelEdit: function(list, event) {
+ let me = this;
+ if (me.inEdit) {
+ me.setText(me.tag);
+ me.finishEdit(false);
+ }
+ },
+
+ onKeyPress: function(event) {
+ let me = this;
+ let key = event.browserEvent.key;
+ if (key === "Enter") {
+ me.finishEdit();
+ } else if (!key.match(/^[a-z0-9+\-_.]$/i)) {
+ event.browserEvent.preventDefault();
+ event.browserEvent.stopPropagation();
+ }
+ },
+
+ onInput: function() {
+ let me = this;
+ let tag = me.tagEl().innerHTML;
+ me.layoutCallback();
+ me.picker.getStore().filter({
+ property: 'tag',
+ value: tag,
+ });
+ },
+
+ listeners: {
+ mousedown: 'onMouseDown',
+ click: 'onClick',
+ focusleave: 'cancelEdit',
+ keypress: 'onKeyPress',
+ input: 'onInput',
+ element: 'el',
+ },
+
+ updateColor: function(tag) {
+ let me = this;
+ if (me.addTag) {
+ me.setUserCls(`proxmox-tag-dark`);
+ me.setStyle('background-color');
+ return;
+ }
+ let rgb = PVE.Utils.getTagOverrides()?.[tag] ?? Proxmox.Utils.stringToRGB(tag);
+ let color = Proxmox.Utils.rgbToCss(rgb);
+ let cls = Proxmox.Utils.rgbToLuminance(rgb) < 160 ? 'light' : 'dark';
+ me.setUserCls(`proxmox-tag-${cls}`);
+ me.setStyle('background-color', color);
+ },
+
+ tagEl: function() {
+ return this.el?.dom?.children?.[0];
+ },
+
+ iconEl: function() {
+ return this.el?.dom?.children?.[1];
+ },
+
+ initComponent: function() {
+ let me = this;
+ if (me.tag === undefined && !me.addTag) {
+ throw "no tag given";
+ }
+
+ let mode = 'normal';
+ if (me.addTag) {
+ me.tag = gettext('Add Tag');
+ mode = 'addTag';
+ }
+
+ let icon = `<i style="cursor: pointer;" class="fa fa-fw fa-${me.icons[mode]}-circle"></i>`;
+ me.html = `<span>${me.tag}</span> ${icon}`;
+
+ me.callParent();
+ me.updateColor(me.tag);
+ if (me.addTag) {
+ me.setStyle('cursor', 'pointer');
+ }
+ },
+});
--
2.30.2