From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 C88E4CBE3 for ; Tue, 12 Apr 2022 15:35:09 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id BA3F818292 for ; Tue, 12 Apr 2022 15:34:38 +0200 (CEST) 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 ACB5D10225 for ; Tue, 12 Apr 2022 15:34:26 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 85A1F40FD1 for ; Tue, 12 Apr 2022 15:34:26 +0200 (CEST) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Tue, 12 Apr 2022 15:34:19 +0200 Message-Id: <20220412133423.1021857-12-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20220412133423.1021857-1-d.csapak@proxmox.com> References: <20220412133423.1021857-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.138 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 v6 07/11] 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 12 Apr 2022 13:35:09 -0000 displays a single tag, with the ability to edit inline on click (when the mode is set to editable). This brings up a list of globally available tags for simple selection. Also has a mode for adding a new Tag. This has 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 --- www/manager6/Makefile | 1 + www/manager6/form/Tag.js | 270 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 271 insertions(+) create mode 100644 www/manager6/form/Tag.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 8d14f684..b0729f7a 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..f6caa412 --- /dev/null +++ b/www/manager6/form/Tag.js @@ -0,0 +1,270 @@ +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 layout in the containing element + // this is necessary since we circumvent extjs layout with 'contentEditable' + layoutCallback: Ext.emptyFn, + + style: { + 'white-space': 'nowrap', + }, + + icons: { + addTag: 'plus', + editable: 'minus', + normal: '', + edit: 'check', + }, + + faIconStyle: '-square', + + mode: 'normal', + + // 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') { + return; + } + switch (me.mode) { + case 'editable': + if (me.addTag) { + break; + } + me.setText(''); + me.finishEdit(); + break; + case 'edit': + if (me.addTag && me.tagEl().innerHTML === '') { + event.browserEvent.preventDefault(); + event.browserEvent.stopPropagation(); + break; + } + me.finishEdit(); + break; + default: break; + } + }, + + onClick: function(event) { + let me = this; + if (event.target.tagName !== 'SPAN' && !me.addTag) { + return; + } + if (me.mode === 'editable') { + me.startEdit(); + } + }, + + startEdit: function() { + let me = this; + me.setMode('edit'); + + // 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-full', + displayField: 'tag', + itemTpl: [ + '{[Proxmox.Utils.getTagElement(values.tag, PVE.Utils.tagOverrides)]}', + ], + store: [], + listeners: { + select: function(picker, rec) { + me.setText(rec.data.tag); + me.finishEdit(); + }, + }, + }); + } + me.picker.getStore().clearFilter(); + let taglist = PVE.Utils.tagList.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; + if (!me.addTag) { + if (tag === '') { + // "delete" ourselves + me.setVisible(false); + } + me.tag = tag; + me.updateColor(me.tag); + } + + if (update) { + me.fireEvent('change', tag); + } + + me.tagEl().contentEditable = false; + me.setMode('editable'); + }, + + cancelEdit: function(list, event) { + let me = this; + if (me.mode === 'edit') { + me.setText(me.tag); + me.finishEdit(false); + } + }, + + setText: function(text) { + let me = this; + me.tagEl().innerHTML = text; + me.layoutCallback(); + }, + + getTag: function() { + return this.tagEl().innerHTML; + }, + + setMode: function(mode) { + let me = this; + let icon = me.icons[me.addTag ? 'addTag' : mode]; + let iconStyle = 'cursor: pointer; padding-right: 6px;'; + let text = me.tag; + let cursor = 'pointer'; + let padding = '0px'; + switch (mode) { + case 'normal': + iconStyle += 'display: none;'; + padding = undefined; + break; + case 'editable': + break; + case 'edit': + me.tagEl().contentEditable = true; + text = ''; + cursor = undefined; + break; + default: return; + } + + if (me.addTag) { + me.setText(text); + me.setStyle('cursor', cursor); + } + + me.setStyle('padding-right', padding); + + me.iconEl().classList = `fa fa-${icon}${me.faIconStyle}`; + me.iconEl().style = iconStyle; + me.mode = mode; + }, + + onKeyPress: function(event) { + let me = this; + let key = event.browserEvent.key; + if (key === "Enter") { + if (!me.addTag || me.tagEl().innerHTML !== '') { + me.finishEdit(); + return; + } + } else if (key.match(PVE.Utils.tagCharRegex)) { + return; + } + 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; + let rgb = PVE.Utils.tagOverrides[tag] ?? Proxmox.Utils.stringToRGB(tag); + + let cls = Proxmox.Utils.getTextContrastClass(rgb); + let color = Proxmox.Utils.rgbToCss(rgb); + me.setUserCls(`proxmox-tag-${cls}`); + me.setStyle('background-color', color); + if (rgb.length > 3) { + let fgcolor = Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]]); + me.setStyle('color', fgcolor); + } else { + me.setStyle('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"; + } + me.mode = me.mode ?? 'normal'; + + if (me.addTag) { + me.tag = gettext('Add Tag'); + me.mode = 'editable'; + me.setUserCls(`proxmox-tag-dark`); + } + + let iconStyle = me.mode !== 'editable' ? 'display: none' : 'padding-right: 6px;'; + let iconCls = me.icons[me.addTag ? 'addTag' : me.mode]; + + let icon = ` `; + me.html = `${me.tag}${icon}`; + + me.callParent(); + if (me.addTag) { + me.setStyle('cursor', 'pointer'); + } else { + me.updateColor(me.tag); + } + me.setStyle('padding-right', me.mode === 'editable' ? '0px' : undefined); + }, +}); -- 2.30.2