From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH proxmox-backup 1/2] ui: add browser settings window
Date: Fri, 19 Feb 2021 15:40:48 +0100 [thread overview]
Message-ID: <20210219144049.22810-1-d.csapak@proxmox.com> (raw)
mostly copied from pve (for now; will refactor when i add it to
pmg too (soon)) without the pve specific features like dashboard
storages
contains some eslint fixes comparing to pves window
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
www/MainView.js | 5 +
www/Makefile | 1 +
www/window/Settings.js | 267 +++++++++++++++++++++++++++++++++++++++++
3 files changed, 273 insertions(+)
create mode 100644 www/window/Settings.js
diff --git a/www/MainView.js b/www/MainView.js
index a99d34e5..6ed86b77 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -230,6 +230,11 @@ Ext.define('PBS.MainView', {
margin: '0 5 0 0',
iconCls: 'fa fa-user',
menu: [
+ {
+ iconCls: 'fa fa-gear',
+ text: gettext('My Settings'),
+ handler: () => Ext.create('PBS.window.Settings').show(),
+ },
{
iconCls: 'fa fa-language',
text: gettext('Language'),
diff --git a/www/Makefile b/www/Makefile
index bfe6fe25..9f9b46aa 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -70,6 +70,7 @@ JSSRC= \
window/SyncJobEdit.js \
window/UserEdit.js \
window/UserPassword.js \
+ window/Settings.js \
window/TokenEdit.js \
window/TfaEdit.js \
window/VerifyJobEdit.js \
diff --git a/www/window/Settings.js b/www/window/Settings.js
new file mode 100644
index 00000000..ee8464be
--- /dev/null
+++ b/www/window/Settings.js
@@ -0,0 +1,267 @@
+Ext.define('PBS.window.Settings', {
+ extend: 'Ext.window.Window',
+
+ width: '800px',
+ title: gettext('My Settings'),
+ iconCls: 'fa fa-gear',
+ modal: true,
+ bodyPadding: 10,
+ resizable: false,
+
+ buttons: [
+ '->',
+ {
+ text: gettext('Close'),
+ handler: function() {
+ this.up('window').close();
+ },
+ },
+ ],
+
+ layout: 'hbox',
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ init: function(view) {
+ let me = this;
+ let sp = Ext.state.Manager.getProvider();
+
+ let username = sp.get('login-username') || Proxmox.Utils.noneText;
+ me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
+
+ let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+ settings.forEach(function(setting) {
+ let val = localStorage.getItem('pve-xterm-' + setting);
+ if (val !== undefined && val !== null) {
+ let field = me.lookup(setting);
+ field.setValue(val);
+ field.resetOriginalValue();
+ }
+ });
+ },
+
+ set_button_status: function() {
+ let me = this;
+
+ let form = me.lookup('xtermform');
+ let valid = form.isValid();
+ let dirty = form.isDirty();
+
+ let hasvalues = false;
+ let values = form.getValues();
+ Ext.Object.eachValue(values, function(value) {
+ if (value) {
+ hasvalues = true;
+ return false;
+ }
+ return true;
+ });
+
+ me.lookup('xtermsave').setDisabled(!dirty || !valid);
+ me.lookup('xtermreset').setDisabled(!hasvalues);
+ },
+
+ control: {
+ '#xtermjs form': {
+ dirtychange: 'set_button_status',
+ validitychange: 'set_button_status',
+ },
+ '#xtermjs button': {
+ click: function(button) {
+ let me = this;
+ let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+ settings.forEach(function(setting) {
+ let field = me.lookup(setting);
+ if (button.reference === 'xtermsave') {
+ let value = field.getValue();
+ if (value) {
+ localStorage.setItem('pve-xterm-' + setting, value);
+ } else {
+ localStorage.removeItem('pve-xterm-' + setting);
+ }
+ } else if (button.reference === 'xtermreset') {
+ field.setValue(undefined);
+ localStorage.removeItem('pve-xterm-' + setting);
+ }
+ field.resetOriginalValue();
+ });
+ me.set_button_status();
+ },
+ },
+ 'button[name=reset]': {
+ click: function() {
+ let blacklist = ['login-username'];
+ let sp = Ext.state.Manager.getProvider();
+ for (const state of Object.values(sp.state)) {
+ if (blacklist.indexOf(state) !== -1) {
+ continue;
+ }
+
+ sp.clear(state);
+ }
+
+ window.location.reload();
+ },
+ },
+ 'button[name=clear-username]': {
+ click: function() {
+ let me = this;
+ let usernamefield = me.lookupReference('savedUserName');
+ let sp = Ext.state.Manager.getProvider();
+
+ usernamefield.setValue(Proxmox.Utils.noneText);
+ sp.clear('login-username');
+ },
+ },
+ },
+ },
+
+ items: [{
+ xtype: 'fieldset',
+ flex: 1,
+ title: gettext('Webinterface Settings'),
+ margin: '5',
+ layout: {
+ type: 'vbox',
+ align: 'left',
+ },
+ defaults: {
+ width: '100%',
+ margin: '0 0 10 0',
+ },
+ items: [
+ {
+ xtype: 'container',
+ layout: 'hbox',
+ items: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Saved User Name') + ':',
+ labelWidth: 150,
+ stateId: 'login-username',
+ reference: 'savedUserName',
+ flex: 1,
+ value: '',
+ },
+ {
+ xtype: 'button',
+ cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+ text: gettext('Reset'),
+ name: 'clear-username',
+ },
+ ],
+ },
+ {
+ xtype: 'box',
+ autoEl: { tag: 'hr' },
+ },
+ {
+ xtype: 'container',
+ layout: 'hbox',
+ items: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Layout') + ':',
+ flex: 1,
+ },
+ {
+ xtype: 'button',
+ cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+ text: gettext('Reset'),
+ tooltip: gettext('Reset all layout changes (for example, column widths)'),
+ name: 'reset',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ xtype: 'container',
+ layout: 'vbox',
+ flex: 1,
+ margin: '5',
+ defaults: {
+ width: '100%',
+ // right margin ensures that the right border of the fieldsets
+ // is shown
+ margin: '0 2 10 0',
+ },
+ items: [
+ {
+ xtype: 'fieldset',
+ itemId: 'xtermjs',
+ title: gettext('xterm.js Settings'),
+ items: [{
+ xtype: 'form',
+ reference: 'xtermform',
+ border: false,
+ layout: {
+ type: 'vbox',
+ algin: 'left',
+ },
+ defaults: {
+ width: '100%',
+ margin: '0 0 10 0',
+ },
+ items: [
+ {
+ xtype: 'textfield',
+ name: 'fontFamily',
+ reference: 'fontFamily',
+ emptyText: Proxmox.Utils.defaultText,
+ fieldLabel: gettext('Font-Family'),
+ },
+ {
+ xtype: 'proxmoxintegerfield',
+ emptyText: Proxmox.Utils.defaultText,
+ name: 'fontSize',
+ reference: 'fontSize',
+ minValue: 1,
+ fieldLabel: gettext('Font-Size'),
+ },
+ {
+ xtype: 'numberfield',
+ name: 'letterSpacing',
+ reference: 'letterSpacing',
+ emptyText: Proxmox.Utils.defaultText,
+ fieldLabel: gettext('Letter Spacing'),
+ },
+ {
+ xtype: 'numberfield',
+ name: 'lineHeight',
+ minValue: 0.1,
+ reference: 'lineHeight',
+ emptyText: Proxmox.Utils.defaultText,
+ fieldLabel: gettext('Line Height'),
+ },
+ {
+ xtype: 'container',
+ layout: {
+ type: 'hbox',
+ pack: 'end',
+ },
+ defaults: {
+ margin: '0 0 0 5',
+ },
+ items: [
+ {
+ xtype: 'button',
+ reference: 'xtermreset',
+ disabled: true,
+ text: gettext('Reset'),
+ },
+ {
+ xtype: 'button',
+ reference: 'xtermsave',
+ disabled: true,
+ text: gettext('Save'),
+ },
+ ],
+ },
+ ],
+ }],
+ },
+ ],
+ }],
+});
--
2.20.1
next reply other threads:[~2021-02-19 14:41 UTC|newest]
Thread overview: 3+ messages / expand[flat|nested] mbox.gz Atom feed top
2021-02-19 14:40 Dominik Csapak [this message]
2021-02-19 14:40 ` [pbs-devel] [PATCH proxmox-backup 2/2] ui: window/Settings / WebAuthn: add browser setting for userVerificationo Dominik Csapak
2021-02-19 15:53 ` [pbs-devel] applied: [PATCH proxmox-backup 1/2] ui: add browser settings window Dietmar Maurer
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20210219144049.22810-1-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox