pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-04-07 14:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring custom buttons

Browse Source
This commit is contained in:
Julia Radzhabova
2024-02-02 23:19:42 +03:00
parent 50f7584ff8
commit 5b5ce52a7c
4 changed files with 125 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/common/main/lib/component/Mixtbar.js
View File

@ -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 = $('<section id="' + action + '" class="panel" data-tab="' + action + '"></section>');
this.addTab({action: action, caption: caption}, _panel, this.getLastTabIdx());
this.setVisible(action, !!visible);
var _panel = $('<section id="' + tab.action + '" class="panel" data-tab="' + tab.action + '"></section>');
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 = $('<div class="separator long"></div>');
$moresection ? $moresection.before(el) : el.appendTo($panel);
}
_group = $('<div class="group"></div>');
$moresection ? $moresection.before(_group) : _group.appendTo($panel);
}
var $slot = $('<span class="btn-slot text x-huge ' + (!(button.options.caption || '').trim() ? 'nocaption ' : ' ') + compactcls + '"></span>').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');

161
apps/common/main/lib/controller/LayoutManager.js
View File

@ -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 = $('<div class="separator long"></div>');
$moresection ? $moresection.before(el) : el.appendTo($panel);
}
_group = $('<div class="group"></div>');
$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 = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption ' : ' ') + compactcls + '"></span>').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
}
})();

2
apps/common/main/resources/less/buttons.less
View File

@ -311,7 +311,7 @@
}
}
.emptycaption & {
.emptycaption & { // used for buttons without caption, but with color div
width: 37px;
.caret {
margin: 0 1px 0 2px;

30
apps/common/main/resources/less/toolbar.less
View File

@ -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 {