From 72c839adcbaddadb4121df5bea45a3df5a8a6795 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 16 Aug 2023 00:57:19 +0300 Subject: [PATCH] [DE] Show tips for working with forms --- .../main/lib/component/SynchronizeTip.js | 1 + .../main/app/controller/FormsTab.js | 109 ++++++++++++------ .../main/app/controller/LeftMenu.js | 7 +- .../main/app/controller/Main.js | 2 +- .../main/app/controller/RightMenu.js | 3 +- .../main/app/view/FormSettings.js | 8 ++ apps/documenteditor/main/app/view/FormsTab.js | 9 +- .../main/app/view/MailMergeSettings.js | 2 +- 8 files changed, 99 insertions(+), 42 deletions(-) diff --git a/apps/common/main/lib/component/SynchronizeTip.js b/apps/common/main/lib/component/SynchronizeTip.js index 1b1932c2f4..3f177b2fb1 100644 --- a/apps/common/main/lib/component/SynchronizeTip.js +++ b/apps/common/main/lib/component/SynchronizeTip.js @@ -115,6 +115,7 @@ define([ close: function() { if (this.cmpEl) this.cmpEl.remove(); + this.trigger('close'); }, applyPlacement: function () { diff --git a/apps/documenteditor/main/app/controller/FormsTab.js b/apps/documenteditor/main/app/controller/FormsTab.js index 3c42325c06..f266ff2811 100644 --- a/apps/documenteditor/main/app/controller/FormsTab.js +++ b/apps/documenteditor/main/app/controller/FormsTab.js @@ -60,7 +60,8 @@ define([ onLaunch: function () { this._state = { lastViewRole: undefined, // last selected role in the preview mode - lastRoleInList: undefined // last role in the roles list + lastRoleInList: undefined, // last role in the roles list, + formCount: 0 }; }, @@ -82,6 +83,7 @@ define([ // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); } Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this)); + Common.NotificationCenter.on('forms:close-help', _.bind(this.closeHelpTip, this)); return this; }, @@ -92,6 +94,14 @@ define([ toolbar: this.toolbar.toolbar, config: config.config }); + this._helpTips = { + 'create': {name: 'de-form-tip-create', placement: 'bottom-right', text: this.view.tipCreateField, link: false, target: '#slot-btn-form-field'}, + 'key': {name: 'de-form-tip-settings', placement: 'left-bottom', text: this.view.tipFormKey, link: false, target: '#form-combo-key'}, + 'settings': {name: 'de-form-tip-settings', placement: 'left-top', text: this.view.tipFieldSettings, link: false, target: '#id-right-menu-form'}, + 'roles': {name: 'de-form-tip-roles', placement: 'bottom-left', text: this.view.tipHelpRoles, link: {text: this.view.tipRolesLink, src: 'UsageInstructions\/CreateFillableForms.htm#managing_roles'}, target: '#slot-btn-manager'}, + 'save': this.appConfig.canDownloadForms ? {name: 'de-form-tip-save', placement: 'bottom-left', text: this.view.tipSaveFile, link: false, target: '#slot-btn-form-save'} : undefined + }; + !Common.localStorage.getItem(this._helpTips['key'].name) && this.addListeners({'RightMenu': {'rightmenuclick': this.onRightMenuClick}}); this.addListeners({ 'FormsTab': { 'forms:insert': this.onControlsSelect, @@ -167,6 +177,8 @@ define([ in_smart_art_internal = shape_pr && shape_pr.asc_getFromSmartArtInternal(); Common.Utils.lockControls(Common.enumLock.inSmartart, in_smart_art, {array: arr}); Common.Utils.lockControls(Common.enumLock.inSmartartInternal, in_smart_art_internal, {array: arr}); + + (!control_props || !control_props.get_FormPr()) && this.closeHelpTip('key'); }, // onChangeSpecialFormsGlobalSettings: function() { @@ -227,9 +239,17 @@ define([ } var me = this; - setTimeout(function() { - me.showSaveFormTip(); - }, 500); + if (!this._state.formCount) { // add first form + this.closeHelpTip('create'); + setTimeout(function() { + !me.showHelpTip('key') && me.showHelpTip('settings'); + }, 500); + } else if (this._state.formCount===1) { + setTimeout(function() { + me.showHelpTip('roles'); + }, 500); + } + this._state.formCount++; Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, @@ -301,6 +321,7 @@ define([ }, onSaveFormClick: function() { + this.closeHelpTip('save', true); this.showRolesList(function() { this.isFromFormSaveAs = this.appConfig.canRequestSaveAs || !!this.appConfig.saveAsUrl; this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.OFORM, this.isFromFormSaveAs)); @@ -416,56 +437,59 @@ define([ // clr && (clr = Common.Utils.ThemeColor.getHexColor(clr.get_r(), clr.get_g(), clr.get_b())); // me.view.btnHighlight.currentColor = clr; // } - config.isEdit && config.canFeatureContentControl && config.isFormCreator && me.showCreateFormTip(); // show tip only when create form in docxf + + config.isEdit && config.canFeatureContentControl && config.isFormCreator && me.showHelpTip('create'); // show tip only when create form in docxf me.onRefreshRolesList(); me.onChangeProtectDocument(); }); }, - showCreateFormTip: function() { - if (!Common.localStorage.getItem("de-hide-createform-tip")) { - var target = $('.toolbar').find('.ribtab [data-tab=forms]').parent(); - var tip = new Common.UI.SynchronizeTip({ - extCls: 'colored', - placement: 'bottom-right', - target: target, - text: this.view.textCreateForm, - showLink: false, - closable: false, - showButton: true, - textButton: this.view.textGotIt - }); - tip.on({ - 'buttonclick': function() { - Common.localStorage.setItem("de-hide-createform-tip", 1); - tip.close(); - } - }); - tip.show(); + closeHelpTip: function(step, force) { + var props = this._helpTips[step]; + if (props) { + props.tip && props.tip.close(); + props.tip = undefined; + force && Common.localStorage.setItem(props.name, 1); } }, - showSaveFormTip: function() { - if (this.view.btnSaveForm && !Common.localStorage.getItem("de-hide-saveform-tip") && !this.tipSaveForm) { - var me = this; - me.tipSaveForm = new Common.UI.SynchronizeTip({ + showHelpTip: function(step) { + if (!this._helpTips[step]) return; + if (!Common.localStorage.getItem(this._helpTips[step].name)) { + var props = this._helpTips[step], + target = props.target; + + if (typeof target === 'string') + target = $(target); + if (!(target && target.length && target.is(':visible'))) + return false; + + props.tip = new Common.UI.SynchronizeTip({ extCls: 'colored', - placement: 'bottom-right', - target: this.view.btnSaveForm.$el, - text: this.view.tipSaveForm, - showLink: false, + placement: props.placement, + target: target, + text: props.text, + showLink: !!props.link, + textLink: props.link ? props.link.text : '', closable: false, showButton: true, textButton: this.view.textGotIt }); - me.tipSaveForm.on({ + props.tip.on({ 'buttonclick': function() { - Common.localStorage.setItem("de-hide-saveform-tip", 1); - me.tipSaveForm.close(); + props.tip && props.tip.close(); + props.tip = undefined; + }, + 'dontshowclick': function() { + Common.NotificationCenter.trigger('file:help', props.link.src); + }, + 'close': function() { + Common.localStorage.setItem(props.name, 1); } }); - me.tipSaveForm.show(); + props.tip.show(); } + return true; }, onRefreshRolesList: function(roles) { @@ -479,6 +503,7 @@ define([ onManagerClick: function() { var me = this; + this.closeHelpTip('roles', true); this.api.asc_GetOForm() && (new DE.Views.RolesManagerDlg({ api: me.api, handler: function(result, settings) { @@ -486,6 +511,7 @@ define([ }, props : undefined })).on('close', function(win){ + me.showHelpTip('save'); }).show(); }, @@ -525,6 +551,15 @@ define([ Common.Utils.lockControls(Common.enumLock.docLockComments, props.isCommentsOnly, {array: arr}); } } + }, + + onRightMenuClick: function(menu, type, minimized, event) { + if (!minimized && event && type === Common.Utils.documentSettingsType.Form) + this.closeHelpTip('settings', true); + else if (minimized || type !== Common.Utils.documentSettingsType.Form) { + this.closeHelpTip('key'); + this.closeHelpTip('settings'); + } } }, DE.Controllers.FormsTab || {})); diff --git a/apps/documenteditor/main/app/controller/LeftMenu.js b/apps/documenteditor/main/app/controller/LeftMenu.js index cebbbbdb6e..f21e6d160a 100644 --- a/apps/documenteditor/main/app/controller/LeftMenu.js +++ b/apps/documenteditor/main/app/controller/LeftMenu.js @@ -115,6 +115,7 @@ define([ }, this)); Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this)); Common.NotificationCenter.on('file:print', _.bind(this.clickToolbarPrint, this)); + Common.NotificationCenter.on('file:help', _.bind(this.showHelp, this)); }, onLaunch: function() { @@ -782,7 +783,7 @@ define([ case 'help': if ( this.mode.isEdit && this.mode.canHelp ) { // TODO: unlock 'help' for 'view' mode Common.UI.Menu.Manager.hideAll(); - this.leftMenu.showMenu('file:help'); + this.showHelp(); } return false; case 'file': @@ -946,6 +947,10 @@ define([ this.onLeftMenuHide(null, true); }, + showHelp: function(src) { + this.leftMenu && this.leftMenu.showMenu('file:help', src); + }, + textNoTextFound : 'Text not found', newDocumentTitle : 'Unnamed document', requestEditRightsText : 'Requesting editing rights...', diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 5bd16b45d3..71367a3b62 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -2832,7 +2832,7 @@ define([ }); win.$window.find('#id-equation-convert-help').on('click', function (e) { win && win.close(); - me.getApplication().getController('LeftMenu').getView('LeftMenu').showMenu('file:help', 'UsageInstructions\/InsertEquation.htm#convertequation'); + Common.NotificationCenter.trigger('file:help', 'UsageInstructions\/InsertEquation.htm#convertequation'); }) }, diff --git a/apps/documenteditor/main/app/controller/RightMenu.js b/apps/documenteditor/main/app/controller/RightMenu.js index fd30c823e9..165ac712a6 100644 --- a/apps/documenteditor/main/app/controller/RightMenu.js +++ b/apps/documenteditor/main/app/controller/RightMenu.js @@ -537,8 +537,9 @@ define([ } else { this.rightmenu.signatureSettings && this.rightmenu.signatureSettings.hideSignatureTooltip(); } + !status && Common.NotificationCenter.trigger('forms:close-help', 'key'); + !status && Common.NotificationCenter.trigger('forms:close-help', 'settings'); } - Common.NotificationCenter.trigger('layout:changed', 'main'); Common.NotificationCenter.trigger('edit:complete', this.rightmenu); } diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index 0d1d2bde46..795eb625b7 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -142,6 +142,14 @@ define([ this.cmbKey.on('changed:after', this.onKeyChanged.bind(this)); this.cmbKey.on('hide:after', this.onHideMenus.bind(this)); + var showtip = function() { + Common.NotificationCenter.trigger('forms:close-help', 'key', true); + me.cmbKey.off('show:before', showtip); + me.cmbKey.off('combo:focusin', showtip); + }; + me.cmbKey.on('show:before', showtip); + me.cmbKey.on('combo:focusin', showtip); + this.txtPlaceholder = new Common.UI.InputField({ el : $markup.findById('#form-txt-pholder'), allowBlank : true, diff --git a/apps/documenteditor/main/app/view/FormsTab.js b/apps/documenteditor/main/app/view/FormsTab.js index 88bcf6ccb1..35f2b433c7 100644 --- a/apps/documenteditor/main/app/view/FormsTab.js +++ b/apps/documenteditor/main/app/view/FormsTab.js @@ -687,7 +687,14 @@ define([ tipZipCode: 'Insert zip code', tipCreditCard: 'Insert credit card number', capDateTime: 'Date & Time', - tipDateTime: 'Insert date and time' + tipDateTime: 'Insert date and time', + tipCreateField: 'To create a field select the desired field type on the toolbar and click on it. The field will appear in the document.', + tipFormKey: 'You can assign a key to a field or a group of fields. When a user fills in the data, it will be copied to all the fields with the same key.', + tipFieldSettings: 'You can configure selected fields on the right sidebar. Click this icon to open the field settings.', + tipHelpRoles: 'Use the Manage Roles feature to group fields by purpose and assign the responsible team members.', + tipSaveFile: 'Click “Save as oform” to save the form in the format ready for filling.', + tipRolesLink: 'Learn more about roles' + } }()), DE.Views.FormsTab || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/MailMergeSettings.js b/apps/documenteditor/main/app/view/MailMergeSettings.js index b72453c3c0..11a08c8222 100644 --- a/apps/documenteditor/main/app/view/MailMergeSettings.js +++ b/apps/documenteditor/main/app/view/MailMergeSettings.js @@ -869,7 +869,7 @@ define([ }, openHelp: function(e) { - DE.getController('LeftMenu').getView('LeftMenu').showMenu('file:help', 'UsageInstructions\/UseMailMerge.htm'); + Common.NotificationCenter.trigger('file:help', 'UsageInstructions\/UseMailMerge.htm'); }, disablePreviewMode: function() {