From 5b5ce52a7cd4318d7f9d93c86af3304b3df9cda4 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 2 Feb 2024 23:19:42 +0300 Subject: [PATCH] Refactoring custom buttons --- apps/common/main/lib/component/Mixtbar.js | 51 +++++- .../main/lib/controller/LayoutManager.js | 161 +++++++----------- apps/common/main/resources/less/buttons.less | 2 +- apps/common/main/resources/less/toolbar.less | 30 ++-- 4 files changed, 125 insertions(+), 119 deletions(-) diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index a999a30e76..d8ac8f516d 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/apps/common/main/lib/component/Mixtbar.js @@ -399,12 +399,12 @@ define([ } }, - createTab: function(action, caption, visible) { - if (!action || !caption) return; + createTab: function(tab, visible) { + if (!tab.action || !tab.caption) return; - var _panel = $('
'); - this.addTab({action: action, caption: caption}, _panel, this.getLastTabIdx()); - this.setVisible(action, !!visible); + var _panel = $('
'); + this.addTab(tab, _panel, this.getLastTabIdx()); + this.setVisible(tab.action, !!visible); return _panel; }, @@ -630,6 +630,47 @@ define([ } }, + addCustomItems: function(tab, buttons) { + if (!tab.action) return; + + var $panel = tab.action ? this.getTab(tab.action) || this.createTab(tab, true) || this.getTab('plugins') : null, + $morepanel = this.getMorePanel(tab.action), + $moresection = $panel ? $panel.find('.more-box') : null, + compactcls = ''; + ($moresection.length<1) && ($moresection = null); + if ($panel) { + buttons && buttons.forEach(function(button, index) { + var _groups, _group; + if ($morepanel) { + _groups = $morepanel.children().filter('.group'); + if (_groups.length>0) { + $moresection = null; + $panel = $morepanel; + compactcls = 'compactwidth'; + } + } + if (!_groups || _groups.length<1) + _groups = $panel.children().filter('.group'); + + if (_groups.length>0 && !button.options.separator && index>0) // add first button to new group + _group = $(_groups[_groups.length-1]); + else { + if (button.options.separator) { + var el = $('
'); + $moresection ? $moresection.before(el) : el.appendTo($panel); + } + _group = $('
'); + $moresection ? $moresection.before(_group) : _group.appendTo($panel); + } + var $slot = $('').appendTo(_group); + button.render($slot); + }); + } + this.clearActiveData(tab.action); + this.processPanelVisible(null, true); + }, + + resizeToolbar: function(reset) { var $active = this.$panels.filter('.active'), more_section = $active.find('.more-box'); diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js index 0172fb01d5..4ba09999c9 100644 --- a/apps/common/main/lib/controller/LayoutManager.js +++ b/apps/common/main/lib/controller/LayoutManager.js @@ -150,10 +150,6 @@ Common.UI.LayoutManager = new(function() { return toMenu; } - var _getTab = function (toolbar, action, caption) { - return toolbar && action ? toolbar.getTab(action) || toolbar.createTab(action, caption, true) : null; - }; - var _addCustomItems = function (toolbar, data) { if (!data || data.length<1) return; @@ -192,104 +188,72 @@ Common.UI.LayoutManager = new(function() { } */ if (plugin.tab) { - var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins'), - $morepanel = toolbar.getMorePanel(plugin.tab.id), - $moresection = $panel.find('.more-box'), - compactcls = ''; - ($moresection.length<1) && ($moresection = null); - if ($panel) { - plugin.items && plugin.items.forEach(function(item, index) { - var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id), - _set = Common.enumLock; - if (btn) { // change caption, hint, disable state, menu items - if (btn instanceof Common.UI.Button) { - var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ''; - if (btn.options.caption !== (caption || ' ')) { - btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('emptycaption', !caption); - btn.setCaption(caption || ' '); - btn.options.caption = caption || ' '; - } - btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',); - (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]}); - if (btn.menu && item.menu && item.menu.length > 0) {// update menu items - if (typeof btn.menu !== 'object') { - btn.setMenu(new Common.UI.Menu({items: []})); - btn.menu.on('item:click', function(menu, mi, e) { - _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); - }); - } - _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu); - } - } - return; - } - - var _groups, _group; - if ($morepanel) { - _groups = $morepanel.children().filter('.group'); - if (_groups.length>0) { - $moresection = null; - $panel = $morepanel; - compactcls = 'compactwidth'; - } - } - if (!_groups || _groups.length<1) - _groups = $panel.children().filter('.group'); - - if (_groups.length>0 && !item.separator && index>0) // add first item to new group - _group = $(_groups[_groups.length-1]); - else { - if (item.separator) { - var el = $('
'); - $moresection ? $moresection.before(el) : el.appendTo($panel); - } - _group = $('
'); - $moresection ? $moresection.before(_group) : _group.appendTo($panel); - } - - if (item.type==='button' || item.type==='big-button') { + plugin.items && plugin.items.forEach(function(item, index) { + var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id), + _set = Common.enumLock; + if (btn) { // change caption, hint, disable state, menu items + if (btn instanceof Common.UI.Button) { var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ''; - btn = new Common.UI.ButtonCustom({ - cls: 'btn-toolbar x-huge icon-top', - iconsSet: item.icons, - caption: caption || ' ', - menu: item.menu, - split: item.menu && !!item.split, - enableToggle: item.enableToggle && (!item.menu || !!item.split), - value: item.id, - guid: plugin.guid, - tabid: plugin.tab.id, - hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '', - lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock], - dataHint: '1', - dataHintDirection: 'bottom', - dataHintOffset: 'small' - }); - - if (item.menu && typeof item.menu === 'object') { - btn.setMenu(new Common.UI.Menu({items: []})); - btn.menu.on('item:click', function(menu, mi, e) { - _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); - }); + if (btn.options.caption !== (caption || ' ')) { + btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('nocaption', !caption); + btn.setCaption(caption || ' '); + btn.options.caption = caption || ' '; + } + btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',); + (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]}); + if (btn.menu && item.menu && item.menu.length > 0) {// update menu items + if (typeof btn.menu !== 'object') { + btn.setMenu(new Common.UI.Menu({items: []})); + btn.menu.on('item:click', function(menu, mi, e) { + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); + }); + } _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu); } - if ( !btn.menu || btn.split) { - btn.on('click', function(b, e) { - _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed); - }); - } - var $slot = $('').appendTo(_group); - btn.render($slot); - btns.push(btn); - item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]}); } - }); - toolbar.clearActiveData(plugin.tab.id); - toolbar.processPanelVisible(null, true); - if (!toolbar.customButtonsArr) - toolbar.customButtonsArr = []; - Array.prototype.push.apply(toolbar.customButtonsArr, btns); - } + return; + } + + if (item.type==='button' || item.type==='big-button') { + btn = new Common.UI.ButtonCustom({ + cls: 'btn-toolbar x-huge icon-top', + iconsSet: item.icons, + caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ' ', + menu: item.menu, + split: item.menu && !!item.split, + enableToggle: item.enableToggle && (!item.menu || !!item.split), + value: item.id, + guid: plugin.guid, + tabid: plugin.tab.id, + separator: item.separator, + hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '', + lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock], + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'small' + }); + + if (item.menu && typeof item.menu === 'object') { + btn.setMenu(new Common.UI.Menu({items: []})); + btn.menu.on('item:click', function(menu, mi, e) { + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); + }); + _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu); + } + if ( !btn.menu || btn.split) { + btn.on('click', function(b, e) { + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed); + }); + } + btns.push(btn); + item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]}); + } + }); + + toolbar.addCustomItems({action: plugin.tab.id, caption: ((typeof plugin.tab.text == 'object') ? plugin.tab.text[lang] || plugin.tab.text['en'] : plugin.tab.text) || ''}, btns); + if (!toolbar.customButtonsArr) + toolbar.customButtonsArr = []; + Array.prototype.push.apply(toolbar.customButtonsArr, btns); } }); return btns; @@ -301,7 +265,6 @@ Common.UI.LayoutManager = new(function() { isElementVisible: _isElementVisible, getInitValue: _getInitValue, lastTabIdx: _lastInternalTabIdx, - getTab: _getTab, addCustomItems: _addCustomItems } })(); diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 75f0eac33d..27b19ccff1 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -311,7 +311,7 @@ } } - .emptycaption & { + .emptycaption & { // used for buttons without caption, but with color div width: 37px; .caret { margin: 0 1px 0 2px; diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 249778a258..02e349bef3 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -235,21 +235,23 @@ } /* ##adopt-panel-width */ - .panel .compactwidth:not(.emptycaption) { - .btn-group, .btn-toolbar { - &.x-huge { - .caption { - display: none; - } + .panel { + .compactwidth:not(.emptycaption), .nocaption { + .btn-group, .btn-toolbar { + &.x-huge { + .caption { + display: none; + } - .inner-box-caption { - justify-content: center; - align-items: center; - padding: 0 2px; - } + .inner-box-caption { + justify-content: center; + align-items: center; + padding: 0 2px; + } - .compact-caret { - display: block; + .compact-caret { + display: block; + } } } } @@ -267,7 +269,7 @@ .rtl & { padding: 12px 0 7px 10px; } - .compactwidth:not(.emptycaption) { + .compactwidth:not(.emptycaption), .nocaption { .btn-group, .btn-toolbar { &.x-huge { .caption {