From 2c9de9214a288a35fe65964a90e8a6b2ee96ef3e Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Wed, 10 Sep 2025 18:09:17 +0300 Subject: [PATCH] [SSE] Update hints with shortcuts for buttons --- apps/spreadsheeteditor/main/app.js | 2 + .../main/app/controller/Main.js | 30 +-- .../main/app/view/LeftMenu.js | 21 ++- .../main/app/view/Toolbar.js | 173 +++++++++++++++--- apps/spreadsheeteditor/main/app_dev.js | 2 + .../main/resources/less/app.less | 2 + 6 files changed, 172 insertions(+), 58 deletions(-) diff --git a/apps/spreadsheeteditor/main/app.js b/apps/spreadsheeteditor/main/app.js index 2d01621973..b98f40f0d5 100644 --- a/apps/spreadsheeteditor/main/app.js +++ b/apps/spreadsheeteditor/main/app.js @@ -156,6 +156,7 @@ require([ ,'Common.Controllers.ExternalOleEditor' ,'Common.Controllers.ReviewChanges' ,'Common.Controllers.Protection' + ,'Common.Controllers.Shortcuts' ] }); @@ -199,6 +200,7 @@ require([ ,'common/main/lib/controller/ExternalOleEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Shortcuts' ,'common/main/lib/controller/Draw' ], function() { app.postLaunchScripts = [ diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 0d4c7e2f96..6f28de57b9 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -1114,7 +1114,7 @@ define([ if (window.styles_loaded || me.appOptions.isEditDiagram || me.appOptions.isEditMailMerge || me.appOptions.isEditOle) { clearInterval(timer_sl); - me.applyShortcuts(); + SSE.getController('Common.Controllers.Shortcuts').setApi(me.api); Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + me.api.asc_getActiveWorksheetId()]); documentHolderView.createDelayedElements(); @@ -2918,34 +2918,6 @@ define([ }, 50); }, - applyShortcuts: function() { - const applyMethod = function(storage) { - storage = JSON.parse(storage || Common.localStorage.getItem("shortcuts") || "{}"); - for (const actionType in storage) { - storage[actionType] = storage[actionType].map(function(ascShortcutJson) { - const ascShortcut = new Asc.CAscShortcut(); - ascShortcut.asc_FromJson(ascShortcutJson); - return ascShortcut; - }); - } - - this.api.asc_resetAllShortcutTypes(); - - const modifiedShortcuts = _.flatten(_.values(storage)); - if(modifiedShortcuts.length) { - this.api.asc_applyAscShortcuts(modifiedShortcuts); - } - }.bind(this); - - $(window).on('storage', function (e) { - if(e.key == 'shortcuts') { - applyMethod(e.originalEvent.newValue); - } - }.bind(this)) - - applyMethod(); - }, - onSendThemeColors: function(colors, standart_colors) { Common.Utils.ThemeColor.setColors(colors, standart_colors); if (window.styles_loaded) { diff --git a/apps/spreadsheeteditor/main/app/view/LeftMenu.js b/apps/spreadsheeteditor/main/app/view/LeftMenu.js index 7e3d51da46..3ccb120add 100644 --- a/apps/spreadsheeteditor/main/app/view/LeftMenu.js +++ b/apps/spreadsheeteditor/main/app/view/LeftMenu.js @@ -58,6 +58,8 @@ define([ initialize: function () { this.minimizedMode = true; this._state = {disabled: false}; + + this.shortcutHints = {}; }, render: function () { @@ -107,7 +109,7 @@ define([ /** coauthoring begin **/ this.btnComments = new Common.UI.Button({ el: $markup.elementById('#left-btn-comments'), - hint: this.tipComments + Common.Utils.String.platformKey('Ctrl+Shift+H'), + hint: this.tipComments, enableToggle: true, disabled: true, iconCls: 'btn-menu-comments', @@ -115,16 +117,24 @@ define([ }); this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this)); this.btnComments.on('click', this.onBtnMenuClick.bind(this)); + this.shortcutHints.OpenCommentsPanel = { + btn: this.btnComments, + label: this.tipComments + }; this.btnChat = new Common.UI.Button({ el: $markup.elementById('#left-btn-chat'), - hint: this.tipChat + Common.Utils.String.platformKey('Alt+Q', ' (' + (Common.Utils.isMac ? Common.Utils.String.textCtrl + '+' : '') + '{0})'), + hint: this.tipChat, enableToggle: true, disabled: true, iconCls: 'btn-menu-chat', toggleGroup: 'leftMenuGroup' }); this.btnChat.on('click', this.onBtnMenuClick.bind(this)); + this.shortcutHints.OpenChatPanel = { + btn: this.btnChat, + label: this.tipChat + }; this.btnComments.hide(); this.btnChat.hide(); @@ -146,6 +156,13 @@ define([ this.$el.html($markup); + const updateShortcuntsHints = function() { + const app = (window.DE || window.PE || window.SSE || window.PDFE || window.VE); + app.getController('Common.Controllers.Shortcuts').updateShortcuntsHints(this.shortcutHints); + }.bind(this); + updateShortcuntsHints(); + Common.NotificationCenter.on('shortcuts:update', _.bind(updateShortcuntsHints, this)); + return this; }, diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index f46644e43e..4912a51403 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -139,6 +139,7 @@ define([ var me = this, options = {}; + me.shortcutHints = {}; me._state = { hasCollaborativeChanges: undefined }; @@ -217,6 +218,10 @@ define([ dataHintDirection: (config.isEditDiagram || config.isEditMailMerge || config.isEditOle) ? 'bottom' : 'top', dataHintTitle: 'C' }); + me.shortcutHints.Copy = { + btn: me.btnCopy, + label: me.tipCopy + }; me.btnPaste = new Common.UI.Button({ id : 'id-toolbar-btn-paste', @@ -227,6 +232,10 @@ define([ dataHintDirection: (config.isEditDiagram || config.isEditMailMerge || config.isEditOle) ? 'bottom' : 'top', dataHintTitle: 'V' }); + me.shortcutHints.Paste = { + btn: me.btnPaste, + label: me.tipPaste + }; me.btnUndo = new Common.UI.Button({ id : 'id-toolbar-btn-undo', @@ -239,6 +248,10 @@ define([ dataHintDirection: 'bottom', dataHintTitle: 'Z' }); + me.shortcutHints.EditUndo = { + btn: me.btnUndo, + label: me.tipUndo + }; me.btnRedo = new Common.UI.Button({ id : 'id-toolbar-btn-redo', @@ -251,6 +264,10 @@ define([ dataHintDirection: 'bottom', dataHintTitle: 'Y' }); + me.shortcutHints.EditRedo = { + btn: me.btnRedo, + label: me.tipRedo + }; if (config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) { me.$el.addClass('type-simple'); @@ -274,13 +291,28 @@ define([ { caption: me.txtAdditional, value: 'more', - hint: me.txtFormula + Common.Utils.String.platformKey('Shift+F3') + hint: me.txtFormula } ] }), dataHint: '1', dataHintDirection: 'bottom' }); + me.shortcutHints.CellInsertSumFunction = { + btn: me.btnInsertFormula, + label: me.txtAutosumTip, + applyCallback: function(item, hintText) { + item.btn.updateHint([hintText, item.btn.options.hint[1]]); + } + }; + me.shortcutHints.OpenInsertFunctionDialog = { + btn: _.find(me.btnInsertFormula.menu.items, function(item) { return item.value == 'more' }), + label: me.txtFormula, + applyCallback: function(item, hintText) { + item.btn.setCaption(hintText); + me.btnInsertFormula.updateHint([me.btnInsertFormula.options.hint[0], hintText]); + } + }; var formatTemplate = _.template([ @@ -403,6 +435,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.ToggleAutoFilter = { + btn: me.btnSetAutofilter, + label: me.txtFilter + }; me.btnClearAutofilter = new Common.UI.Button({ id : 'id-toolbar-btn-clearfilter', @@ -786,6 +822,10 @@ define([ dataHintDirection: 'top', dataHintTitle: 'X' }); + me.shortcutHints.Cut = { + btn: me.btnCut, + label: me.tipCut + }; me.btnSelectAll = new Common.UI.Button({ id: 'id-toolbar-btn-select-all', @@ -795,6 +835,10 @@ define([ dataHint: '1', dataHintDirection: 'bottom' }); + me.shortcutHints.EditSelectAll = { + btn: me.btnSelectAll, + label: me.tipSelectAll + }; me.btnReplace = new Common.UI.Button({ id: 'id-toolbar-btn-replace', @@ -804,6 +848,10 @@ define([ dataHint: '1', dataHintDirection: 'top' }); + me.shortcutHints.OpenFindAndReplaceMenu = { + btn: me.btnReplace, + label: me.tipReplace + }; me.cmbFontSize = new Common.UI.ComboBox({ cls : 'input-group-nr', @@ -857,6 +905,10 @@ define([ dataHintTitle: 'P', printType: 'print' }); + me.shortcutHints.PrintPreviewAndPrint = { + btn: me.btnPrint, + label: me.tipPrint + }; me.btnSave = new Common.UI.Button({ id : 'id-toolbar-btn-save', @@ -878,6 +930,10 @@ define([ dataHint : '1', dataHintDirection: 'top' }); + me.shortcutHints.IncreaseFontSize = { + btn: me.btnIncFontSize, + label: me.tipIncFont + }; me.btnDecFontSize = new Common.UI.Button({ id : 'id-toolbar-btn-decfont', @@ -887,6 +943,10 @@ define([ dataHint : '1', dataHintDirection: 'top' }); + me.shortcutHints.DecreaseFontSize = { + btn: me.btnDecFontSize, + label: me.tipDecFont + }; me.btnChangeCase = new Common.UI.Button({ id: 'id-toolbar-btn-case', @@ -917,6 +977,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.Bold = { + btn: me.btnBold, + label: me.textBold + }; me.btnItalic = new Common.UI.Button({ id : 'id-toolbar-btn-italic', @@ -927,6 +991,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.Italic = { + btn: me.btnItalic, + label: me.textItalic + }; me.btnUnderline = new Common.UI.Button({ id : 'id-toolbar-btn-underline', @@ -937,6 +1005,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.Underline = { + btn: me.btnUnderline, + label: me.textUnderline + }; me.btnStrikeout = new Common.UI.Button({ id: 'id-toolbar-btn-strikeout', @@ -984,6 +1056,20 @@ define([ dataHintDirection: 'bottom', dataHintOffset: '0, -16' }); + me.shortcutHints.DrawingSuperscript = { + btn: me.btnSubscript.menu.items[0], + label: me.textSuperscript, + applyCallback: function(item, hintText) { + item.btn.setCaption(hintText); + } + }; + me.shortcutHints.DrawingSubscript = { + btn: me.btnSubscript.menu.items[1], + label: me.textSubscript, + applyCallback: function(item, hintText) { + item.btn.setCaption(hintText); + } + }; me.mnuTextColorPicker = dummyCmp(); me.btnTextColor = new Common.UI.ButtonColored({ @@ -1045,6 +1131,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.DrawingLeftPara = { + btn: me.btnAlignLeft, + label: me.tipAlignLeft + }; me.btnAlignCenter = new Common.UI.Button({ id : 'id-toolbar-btn-align-center', @@ -1056,6 +1146,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.DrawingCenterPara = { + btn: me.btnAlignCenter, + label: me.tipAlignCenter + }; me.btnAlignRight = new Common.UI.Button({ id : 'id-toolbar-btn-align-right', @@ -1067,6 +1161,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.DrawingRightPara = { + btn: me.btnAlignRight, + label: me.tipAlignRight + }; me.btnAlignJust = new Common.UI.Button({ id : 'id-toolbar-btn-align-just', @@ -1078,6 +1176,10 @@ define([ dataHint : '1', dataHintDirection: 'bottom' }); + me.shortcutHints.DrawingJustifyPara = { + btn: me.btnAlignJust, + label: me.tipAlignJust + }; me.btnMerge = new Common.UI.Button({ id : 'id-toolbar-rtn-merge', @@ -1256,6 +1358,10 @@ define([ dataHintDirection: 'bottom', dataHintOffset: 'small' }); + me.shortcutHints.InsertHyperlink = { + btn: me.btnInsertHyperlink, + label: me.tipInsertHyperlink + }; me.btnInsertChart = new Common.UI.Button({ id : 'tlbtn-insertchart', @@ -1607,7 +1713,7 @@ define([ { caption: me.txtAdditional, value: 'more', - hint: me.txtFormula + Common.Utils.String.platformKey('Shift+F3') + hint: me.txtFormula } ] }), @@ -1616,6 +1722,21 @@ define([ dataHintDirection: 'top', dataHintOffset: '0, -16' }); + me.shortcutHints.CellInsertSumFunction = { + btn: me.btnInsertFormula, + label: me.txtAutosumTip, + applyCallback: function(item, hintText) { + item.btn.updateHint([hintText, item.btn.options.hint[1]]); + } + }; + me.shortcutHints.OpenInsertFunctionDialog = { + btn: _.find(me.btnInsertFormula.menu.items, function(item) { return item.value == 'more' }), + label: me.txtFormula, + applyCallback: function(item, hintText) { + item.btn.setCaption(hintText); + me.btnInsertFormula.updateHint([me.btnInsertFormula.options.hint[0], hintText]); + } + }; me.btnNamedRange = new Common.UI.Button({ id : 'id-toolbar-btn-insertrange', @@ -1768,6 +1889,10 @@ define([ dataHintDirection: 'top', dataHintOffset: '0, -6' }); + me.shortcutHints.OpenInsertCellsWindow = { + btn: me.btnAddCell, + label: me.tipInsertOpt + }; me.btnDeleteCell = new Common.UI.Button({ id : 'id-toolbar-btn-delcell', @@ -1801,6 +1926,10 @@ define([ dataHintDirection: 'bottom', dataHintOffset: '0, -6' }); + me.shortcutHints.OpenDeleteCellsWindow = { + btn: me.btnDeleteCell, + label: me.tipDeleteOpt + }; me.btnCondFormat = new Common.UI.Button({ id : 'id-toolbar-btn-condformat', @@ -2520,38 +2649,20 @@ define([ return $host; }, - createDelayedElements: function() { - var me = this; - + updateHints: function() { + const me = this; function _updateHint(cmp, hint) { cmp && cmp.updateHint(hint); } // set hints - _updateHint(this.btnPrint, this.tipPrint + Common.Utils.String.platformKey('Ctrl+P')); _updateHint(this.btnSave, this.btnSaveTip); - _updateHint(this.btnCopy, this.tipCopy + Common.Utils.String.platformKey('Ctrl+C')); - _updateHint(this.btnPaste, this.tipPaste + Common.Utils.String.platformKey('Ctrl+V')); - _updateHint(this.btnCut, this.tipCut + Common.Utils.String.platformKey('Ctrl+X')); - _updateHint(this.btnSelectAll, this.tipSelectAll + Common.Utils.String.platformKey('Ctrl+A')); - _updateHint(this.btnReplace, this.tipReplace + ' (' + Common.Utils.String.textCtrl + '+H)'); - _updateHint(this.btnUndo, this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z')); - _updateHint(this.btnRedo, this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y')); - _updateHint(this.btnIncFontSize, this.tipIncFont + Common.Utils.String.platformKey('Ctrl+]')); - _updateHint(this.btnDecFontSize, this.tipDecFont + Common.Utils.String.platformKey('Ctrl+[')); _updateHint(this.btnChangeCase, this.tipChangeCase); - _updateHint(this.btnBold, this.textBold + Common.Utils.String.platformKey('Ctrl+B')); - _updateHint(this.btnItalic, this.textItalic + Common.Utils.String.platformKey('Ctrl+I')); - _updateHint(this.btnUnderline, this.textUnderline + Common.Utils.String.platformKey('Ctrl+U')); _updateHint(this.btnStrikeout, this.textStrikeout); _updateHint(this.btnSubscript, this.textSubSuperscript); _updateHint(this.btnTextColor, this.tipFontColor); _updateHint(this.btnBackColor, this.tipPrColor); _updateHint(this.btnBorders, this.tipBorders); - _updateHint(this.btnAlignLeft, this.tipAlignLeft); - _updateHint(this.btnAlignCenter, this.tipAlignCenter); - _updateHint(this.btnAlignRight, this.tipAlignRight); - _updateHint(this.btnAlignJust, this.tipAlignJust); _updateHint(this.btnMerge, this.tipMerge); _updateHint(this.btnAlignTop, this.tipAlignTop); _updateHint(this.btnAlignMiddle, this.tipAlignMiddle); @@ -2566,14 +2677,12 @@ define([ _updateHint(this.btnInsertSmartArt, this.tipInsertSmartArt); _updateHint(this.btnInsertText, [this.tipInsertHorizontalText ,this.tipInsertText]); _updateHint(this.btnInsertTextArt, this.tipInsertTextart); - _updateHint(this.btnInsertHyperlink, this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K')); _updateHint(this.btnInsertShape, this.tipInsertShape); _updateHint(this.btnInsertEquation, this.tipInsertEquation); _updateHint(this.btnInsertSymbol, this.tipInsertSymbol); _updateHint(this.btnInsertSlicer, this.tipInsertSlicer); _updateHint(this.btnSortDown, this.txtSortAZ); _updateHint(this.btnSortUp, this.txtSortZA); - _updateHint(this.btnSetAutofilter, this.txtFilter + ' (Ctrl+Shift+L)'); _updateHint(this.btnClearAutofilter, this.txtClearFilter); _updateHint(this.btnSearch, this.txtSearch); _updateHint(this.btnTableTemplate, this.txtTableTemplate); @@ -2583,13 +2692,10 @@ define([ _updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting); _updateHint(this.btnDecDecimal, this.tipDecDecimal); _updateHint(this.btnIncDecimal, this.tipIncDecimal); - _updateHint(this.btnInsertFormula, [this.txtAutosumTip + Common.Utils.String.platformKey('Alt+='), this.txtFormula + Common.Utils.String.platformKey('Shift+F3')]); _updateHint(this.btnNamedRange, this.txtNamedRange); _updateHint(this.btnFillNumbers, this.txtFillNum); _updateHint(this.btnClearStyle, this.tipClearStyle); _updateHint(this.btnCopyStyle, this.tipCopyStyle); - _updateHint(this.btnAddCell, this.tipInsertOpt + Common.Utils.String.platformKey('Ctrl+Shift+=')); - _updateHint(this.btnDeleteCell, this.tipDeleteOpt + Common.Utils.String.platformKey('Ctrl+Shift+-')); _updateHint(this.btnColorSchemas, this.tipColorSchemas); _updateHint(this.btnPageOrient, this.tipPageOrient); _updateHint(this.btnPageSize, this.tipPageSize); @@ -2607,6 +2713,19 @@ define([ _updateHint(btn, me.tipEditHeader); }); + + const updateShortcuntsHints = function() { + SSE.getController('Common.Controllers.Shortcuts').updateShortcuntsHints(this.shortcutHints); + }.bind(this); + updateShortcuntsHints(); + Common.NotificationCenter.on('shortcuts:update', _.bind(updateShortcuntsHints, this)); + }, + + createDelayedElements: function() { + var me = this; + + this.updateHints(); + // set menus if (this.btnBorders && this.btnBorders.rendered) { this.btnBorders.setMenu( new Common.UI.Menu({ diff --git a/apps/spreadsheeteditor/main/app_dev.js b/apps/spreadsheeteditor/main/app_dev.js index 7b38439a5c..b70972af86 100644 --- a/apps/spreadsheeteditor/main/app_dev.js +++ b/apps/spreadsheeteditor/main/app_dev.js @@ -146,6 +146,7 @@ require([ ,'Common.Controllers.ExternalOleEditor' ,'Common.Controllers.ReviewChanges' ,'Common.Controllers.Protection' + ,'Common.Controllers.Shortcuts' ] }); @@ -190,6 +191,7 @@ require([ ,'common/main/lib/controller/ExternalOleEditor' ,'common/main/lib/controller/ReviewChanges' ,'common/main/lib/controller/Protection' + ,'common/main/lib/controller/Shortcuts' ,'common/main/lib/controller/Draw' ], function() { app.postLaunchScripts = [ diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index 832ba65bad..7a621c359f 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -130,6 +130,8 @@ @import "../../../../common/main/resources/less/updown-picker.less"; @import "../../../../common/main/resources/less/macros-dialog.less"; @import "../../../../common/main/resources/less/statusbar.less"; +@import "../../../../common/main/resources/less/shortcuts-dialog.less"; + // App // --------------------------------------------------