From a36d845e0e70d5deb5e7f098b99135a70c68f564 Mon Sep 17 00:00:00 2001 From: Sohan Deshar Date: Tue, 16 Jan 2024 16:15:24 +0000 Subject: [PATCH] Personas in modals. --- .../js/DuplicateFileUploadDialog.js | 47 +++++------ tine20/Tinebase/js/ExceptionDialog.js | 84 ++++++++++++------- tine20/Tinebase/js/PasswordChangeDialog.js | 20 +++-- .../vue/PersonaContainer/PersonaContainer.vue | 55 ++++++++++++ .../js/ux/vue/PersonaContainer}/helpers.js | 0 .../js/ux/vue/PersonaContainer/index.js | 45 ++++++++++ .../ux/vue/PersonaContainer}/mb-svg-loader.js | 0 .../js/widgets/dialog/FileListDialog.js | 10 ++- .../js/widgets/dialog/MultiOptionsDialog.js | 15 ++-- .../js/widgets/dialog/PasswordDialog.js | 14 ++-- .../library/ExtJS/src/widgets/MessageBox.js | 9 +- .../ExtJS/src/widgets/VueMessageBox/App.vue | 23 +---- 12 files changed, 223 insertions(+), 99 deletions(-) create mode 100644 tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue rename tine20/{library/ExtJS/src/widgets/VueMessageBox => Tinebase/js/ux/vue/PersonaContainer}/helpers.js (100%) create mode 100644 tine20/Tinebase/js/ux/vue/PersonaContainer/index.js rename tine20/{library/ExtJS/src/widgets/VueMessageBox => Tinebase/js/ux/vue/PersonaContainer}/mb-svg-loader.js (100%) diff --git a/tine20/Filemanager/js/DuplicateFileUploadDialog.js b/tine20/Filemanager/js/DuplicateFileUploadDialog.js index 1cd2cea128d..4d3a6936e0e 100644 --- a/tine20/Filemanager/js/DuplicateFileUploadDialog.js +++ b/tine20/Filemanager/js/DuplicateFileUploadDialog.js @@ -6,6 +6,8 @@ * @copyright Copyright (c) 2021 Metaways Infosystems GmbH (http://www.metaways.de) */ +import {PersonaContainer, Personas} from "../../Tinebase/js/ux/vue/PersonaContainer"; + Ext.ns('Tine.Filemanager'); Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, { @@ -59,7 +61,7 @@ Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, { ]; this.initButtons(); - + this.itemsName = this.id + '-radioItems'; this.items = { @@ -68,30 +70,25 @@ Tine.Filemanager.DuplicateFileUploadDialog = Ext.extend(Ext.FormPanel, { layoutConfig: { align:'stretch' }, - items : [ - { - border: false, - html: '
', - flex: 0, - width: 45 + items : [new PersonaContainer({ + flex: 0, + persona: Personas.WARNING + }), { + border: false, + layout: 'vbox', + flex: 1, + layoutConfig: { + align:'stretch' }, - { - border: false, - layout: 'vbox', - flex: 1, - layoutConfig: { - align:'stretch' - }, - items: [ - { - xtype: 'label', - border: false, - cls: 'ext-mb-text', - html: this.questionText - } - ] - } - ] + items: [ + { + xtype: 'label', + border: false, + cls: 'ext-mb-text', + html: this.questionText + } + ] + }] }; Tine.Filemanager.DuplicateFileUploadDialog.superclass.initComponent.call(this); @@ -185,7 +182,7 @@ Tine.Filemanager.DuplicateFileUploadDialog.openWindow = function (config) { closable: false, title: this.app.i18n._('Overwrite Existing File?'), width: config.width || 400, - height: config.height || 150, + height: Math.max(config.height || 150, 200), name: prototype.windowNamePrefix + Ext.id(), contentPanelConstructor: constructor, contentPanelConstructorConfig: config, diff --git a/tine20/Tinebase/js/ExceptionDialog.js b/tine20/Tinebase/js/ExceptionDialog.js index f2c2bd1146e..6b9da9ab203 100644 --- a/tine20/Tinebase/js/ExceptionDialog.js +++ b/tine20/Tinebase/js/ExceptionDialog.js @@ -9,6 +9,8 @@ /*global Ext, Tine, window*/ +import { PersonaContainer, Personas } from "./ux/vue/PersonaContainer"; + Ext.ns('Tine', 'Tine.Tinebase'); /** @@ -131,7 +133,6 @@ Tine.Tinebase.ExceptionDialog = Ext.extend(Ext.Window, { */ getReportForm: function () { this.initButtons(); - this.reportForm = new Ext.FormPanel({ id: 'tb-exceptiondialog-frompanel', bodyStyle: 'padding:5px;', @@ -141,36 +142,59 @@ Tine.Tinebase.ExceptionDialog = Ext.extend(Ext.Window, { buttons: this.reportButtons, items: [{ xtype: 'panel', + layout: 'hbox', border: false, - html: '
' + - '

' + i18n._('An error occurred, the program ended abnormal.') + '

' + - '

' + i18n._('The last action you made was potentially not performed correctly.') + '

' + - '

' + i18n._('Please help improving this software and notify the vendor. Include a brief description of what you where doing when the error occurred.') + '

' + - '
' - }, { - id: 'tb-exceptiondialog-description', - height: 60, - xtype: 'textarea', - fieldLabel: i18n._('Description'), - name: 'description', - anchor: '95%', - readOnly: false - }, { - xtype: 'fieldset', - id: 'tb-exceptiondialog-send-contact', - anchor: '95%', - title: i18n._('Send Contact Information'), - autoHeight: true, - checkboxToggle: true, - items: [{ - id: 'tb-exceptiondialog-contact', - xtype: 'textfield', - hideLabel: true, - anchor: '100%', - name: 'contact', - value: (this.currentAccount) ? this.currentAccount.accountFullName + ' ' + this.currentAccount.accountEmailAddress : 'unknown' - }] - }, { + layoutConfig: { + align: 'stretchmax' + }, + items: [ + new PersonaContainer({ + persona: Personas.ERROR_SEVERE, + flex: 0, + width: 100, + height: 200 + }), + { + border: false, + flex: 1, + layout: 'form', + items: [ + { + xtype: 'panel', + border: false, + html: '
' + + '

' + i18n._('An error occurred, the program ended abnormal.') + '

' + + '

' + i18n._('The last action you made was potentially not performed correctly.') + '

' + + '

' + i18n._('Please help improving this software and notify the vendor. Include a brief description of what you where doing when the error occurred.') + '

' + + '
' + }, { + id: 'tb-exceptiondialog-description', + height: 60, + xtype: 'textarea', + fieldLabel: i18n._('Description'), + name: 'description', + anchor: '95%', + readOnly: false + }, { + xtype: 'fieldset', + id: 'tb-exceptiondialog-send-contact', + anchor: '95%', + title: i18n._('Send Contact Information'), + autoHeight: true, + checkboxToggle: true, + items: [{ + id: 'tb-exceptiondialog-contact', + xtype: 'textfield', + hideLabel: true, + anchor: '100%', + name: 'contact', + value: (this.currentAccount) ? this.currentAccount.accountFullName + ' ' + this.currentAccount.accountEmailAddress : 'unknown' + }] + }, + ] + } + ] + },{ xtype: 'panel', width: '95%', layout: 'form', diff --git a/tine20/Tinebase/js/PasswordChangeDialog.js b/tine20/Tinebase/js/PasswordChangeDialog.js index 1ccf82e2ce0..9bcdc23a470 100644 --- a/tine20/Tinebase/js/PasswordChangeDialog.js +++ b/tine20/Tinebase/js/PasswordChangeDialog.js @@ -6,8 +6,10 @@ * @copyright Copyright (c) 2010-2017 Metaways Infosystems GmbH (http://www.metaways.de) * */ - - Ext.ns('Tine', 'Tine.Tinebase'); + + // import {PersonaContainer, Personas} from "./ux/vue/PersonaContainer"; + +Ext.ns('Tine', 'Tine.Tinebase'); /** * @namespace Tine.Tinebase @@ -20,10 +22,10 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, { closeAction: 'close', modal: true, width: 350, - height: 350, + height: 230, minWidth: 350, minHeight: 230, - layout: 'fit', + layout: 'column', plain: true, title: null, // password or pin @@ -38,8 +40,12 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, { this.passwordLabel, this.currentAccount.accountDisplayName ); - - this.items = new Ext.FormPanel({ + this.items = [] + // const persona = new PersonaContainer({persona: Personas.QUESTION_CONFIRM, columnWidth: .2}) + // this.items.push(persona) + this.items.push(new Ext.FormPanel({ + // columnWidth: .8, + autoHeight: true, bodyStyle: 'padding:5px;', buttonAlign: 'right', labelAlign: 'top', @@ -142,7 +148,7 @@ Tine.Tinebase.PasswordChangeDialog = Ext.extend(Ext.Window, { }, scope: this }] - }); + })); Tine.Tinebase.PasswordChangeDialog.superclass.initComponent.call(this); } diff --git a/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue b/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue new file mode 100644 index 00000000000..5d58c9de694 --- /dev/null +++ b/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue @@ -0,0 +1,55 @@ + + + + + + diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/helpers.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/helpers.js similarity index 100% rename from tine20/library/ExtJS/src/widgets/VueMessageBox/helpers.js rename to tine20/Tinebase/js/ux/vue/PersonaContainer/helpers.js diff --git a/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js new file mode 100644 index 00000000000..9c5145c7cc0 --- /dev/null +++ b/tine20/Tinebase/js/ux/vue/PersonaContainer/index.js @@ -0,0 +1,45 @@ +Ext.ns("Tine.ux.vue") +Ext.ns("Tine.personas") + +export const Personas = Object.freeze({ + INFO : 'info_default', + INFO_INSTRUCTION: 'info_instruction', + INFO_FAILURE: 'info_failure', + INFO_SUCCESS: 'info_success', + INFO_WAIT: 'info_wait', + + WARNING : 'warning', + + QUESTION : 'question_default', + QUESTION_INPUT: 'question_input', + QUESTION_OPTION: 'question_option', + QUESTION_CONFIRM: 'question_confirm', + QUESTION_WARN: 'question_warn', + + ERROR : 'error_default', + ERROR_MILD: 'error_mild', + ERROR_SEVERE: 'error_severe', +}) + +export const PersonaContainer = Ext.extend(Ext.BoxComponent, { + width: 100, + height: 200, + persona: Personas.INFO, + + onRender: async function (ct, position){ + Ext.BoxComponent.superclass.onRender.call(this, ct, position) + window.vue = window.vue || await import(/* webpackChunkName: "Tinebase/js/Vue-Runtime" */"tine-vue") + const { default: PersonaContainer } = await import("./PersonaContainer.vue") + this.app = vue.createApp( + PersonaContainer, + { + iconName: this.initialConfig.persona, + skinColor: this.initialConfig.skinColor + }) + this.app.mount(`#${this.id}`) + }, +}) + +Tine.personas = Personas +Tine.ux.vue.PersonaContainer = PersonaContainer +Ext.reg('vpersona', Tine.ux.vue.PersonaContainer) diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/mb-svg-loader.js b/tine20/Tinebase/js/ux/vue/PersonaContainer/mb-svg-loader.js similarity index 100% rename from tine20/library/ExtJS/src/widgets/VueMessageBox/mb-svg-loader.js rename to tine20/Tinebase/js/ux/vue/PersonaContainer/mb-svg-loader.js diff --git a/tine20/Tinebase/js/widgets/dialog/FileListDialog.js b/tine20/Tinebase/js/widgets/dialog/FileListDialog.js index 8a258bc5e7c..9e171a7b7b8 100644 --- a/tine20/Tinebase/js/widgets/dialog/FileListDialog.js +++ b/tine20/Tinebase/js/widgets/dialog/FileListDialog.js @@ -1,3 +1,4 @@ +import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer"; Ext.ns('Tine.widgets.dialog'); @@ -55,7 +56,7 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, { initComponent: function() { // init buttons and tbar this.initButtons(); - + this.itemsName = this.id + '-fileListc'; // get items for this dialog @@ -65,7 +66,10 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, { layoutConfig: { align:'stretch' }, - items: [{ + items: [new PersonaContainer({ + persona: Personas.WARNING, + flex: 0, + }),{ border: false, layout: 'fit', flex: 1, @@ -131,7 +135,7 @@ Ext.extend(Tine.widgets.dialog.FileListDialog, Ext.FormPanel, { Tine.widgets.dialog.FileListDialog.openWindow = function (config) { var window = Tine.WindowFactory.getWindow({ width: config.width || 400, - height: config.height || 150, + height: Math.max(config.height || 150, 200), closable: false, name: Tine.widgets.dialog.FileListDialog.windowNamePrefix + Ext.id(), contentPanelConstructor: 'Tine.widgets.dialog.FileListDialog', diff --git a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js index d9fd12ab27b..2aa4fa93f1a 100644 --- a/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js +++ b/tine20/Tinebase/js/widgets/dialog/MultiOptionsDialog.js @@ -1,3 +1,4 @@ +import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer"; Ext.ns('Tine.widgets.dialog'); @@ -54,11 +55,13 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, { deferredRender: false, buttonAlign: null, bufferResize: 500, + + persona: Personas.QUESTION_OPTION, initComponent: function() { // init buttons and tbar this.initButtons(); - + this.itemsName = this.id + '-radioItems'; // get items for this dialog @@ -68,12 +71,10 @@ Ext.extend(Tine.widgets.dialog.MultiOptionsDialog, Ext.FormPanel, { layoutConfig: { align:'stretch' }, - items: [{ - border: false, - html: '
', + items: [new PersonaContainer({ + persona: this.persona, flex: 0, - width: 45 - }, { + }), { border: false, layout: 'fit', flex: 1, @@ -209,7 +210,7 @@ Tine.widgets.dialog.MultiOptionsDialog.getOption = function(config) { Tine.widgets.dialog.MultiOptionsDialog.openWindow = function (config) { var window = Tine.WindowFactory.getWindow({ width: config.width || 400, - height: config.height || 150, + height: Math.max(config.height || 150, 200), closable: false, name: Tine.widgets.dialog.MultiOptionsDialog.windowNamePrefix + Ext.id(), contentPanelConstructor: 'Tine.widgets.dialog.MultiOptionsDialog', diff --git a/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js b/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js index 622c578e6ce..1cdf4a6cb53 100644 --- a/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js +++ b/tine20/Tinebase/js/widgets/dialog/PasswordDialog.js @@ -6,6 +6,8 @@ * @copyright Copyright (c) 2017 Metaways Infosystems GmbH (http://www.metaways.de) */ +import {PersonaContainer, Personas} from "../../ux/vue/PersonaContainer"; + Ext.ns('Tine.Tinebase.widgets.dialog'); Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Dialog, { @@ -96,7 +98,10 @@ Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Di } }], this.additionalFields ] - }] + }, new PersonaContainer({ + region: 'west', + persona: Personas.QUESTION_INPUT + })] }]; if (this.questionText) { @@ -194,10 +199,9 @@ Tine.Tinebase.widgets.dialog.PasswordDialog = Ext.extend(Tine.Tinebase.dialog.Di closeAction: 'close', modal: true, width: 400, - height: 130 + - (this.hasPwGen ? 20 : 0) + - (Math.ceil(this.questionText.length/70) * 20) + - this.additionalFields.length * 30, + height: Math.max(130 + + (Math.ceil(this.questionText.length/70) * 20) + + this.additionalFields.length * 30, 200) + (this.hasPwGen ? 20 : 0), layout: 'fit', items: this }, config)); diff --git a/tine20/library/ExtJS/src/widgets/MessageBox.js b/tine20/library/ExtJS/src/widgets/MessageBox.js index c54d1f3c203..059541372e1 100644 --- a/tine20/library/ExtJS/src/widgets/MessageBox.js +++ b/tine20/library/ExtJS/src/widgets/MessageBox.js @@ -45,7 +45,7 @@ Ext.MessageBox = function(){ let opt, dlg; const skinShades = ["#ffffff", "#fad9b4", "#fcbf89", "#ec8f2e", "#d97103", "#b75b01", "#924500"] - + const __HIDDEN = false // for readability and clarity let synchronousVisibilityState = __HIDDEN let initialized = false @@ -247,6 +247,8 @@ Ext.Msg.show({ synchronousVisibilityState = !__HIDDEN Ext.getBody().mask("Loading"); const {MessageBoxApp, SymbolKeys} = await import(/* webpackChunkName: "Tinebase/js/VueMessageBox"*/'./VueMessageBox') + const {default: PersonaContainer } = await import(/* webpackChunkName: "Tinebase/js/PersonaContainer"*/'../../../../Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue') + const {BootstrapVueNext} = await import(/* webpackChunkName: "Tinebase/js/BootstrapVueNext"*/'bootstrap-vue-next') // initializing vue stuff if(!initialized){ @@ -270,6 +272,7 @@ Ext.Msg.show({ vueHandle.config.globalProperties.ExtEventBus = vueEmitter; vueHandle.provide(SymbolKeys.ExtEventBusInjectKey, vueEmitter); + vueHandle.component('PersonaContainer', PersonaContainer) vueHandle.use(BootstrapVueNext) const mp = document.createElement("div"); @@ -287,7 +290,7 @@ Ext.Msg.show({ if(!vueProps || !vueEmitter || !vueHandle) return // setting the prop values to the ones passed in config option // only those values are taken whose keys are present in the - // defaultOpt, as these are the only ones allowed + // defaultOpt as these are the only ones allowed Object.keys(opt).forEach(key => { if(key in vueProps.opt){ vueProps.opt[key] = opt[key]; @@ -377,6 +380,8 @@ Ext.MessageBox.ERROR modal:true, minWidth: this.minProgressWidth, waitConfig: config, + fn: 'fake', + icon: this.INFO_WAIT }); }, diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue index 655fd86d8b9..03cd4e056b7 100644 --- a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue +++ b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue @@ -12,10 +12,10 @@ @close="closeBox" :style="{'z-index': otherConfigs.zIndex}" >