Skip to content

Commit

Permalink
Merge pull request #2834 from ONLYOFFICE/feature/toolbar-refactoring
Browse files Browse the repository at this point in the history 
Feature/toolbar refactoring
  • Loading branch information
@JuliaRadzhabova
JuliaRadzhabova authored Feb 8, 2024
2 parents 64a65e7 + 078091b commit 30f0e96
Show file tree
Hide file tree
Showing 28 changed files with 309 additions and 134 deletions.
6 changes: 4 additions & 2 deletions apps/api/documents/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,13 @@
save: false/true // save button
} / false / true,
home: {
mailmerge: false/true // mail merge button
mailmerge: false/true // mail merge button // deprecated, button is moved to collaboration tab. use toolbar->collaboration->mailmerge instead
},
layout: false / true, // layout tab
references: false / true, // de references tab
collaboration: false / true // collaboration tab
collaboration: {
mailmerge: false/true // mail merge button in de
} / false / true, // collaboration tab
draw: false / true // draw tab
protect: false / true, // protect tab
plugins: false / true // plugins tab
Expand Down
116 changes: 80 additions & 36 deletions apps/common/main/lib/component/ComboDataView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,6 @@ define([
this.openButton.menu.setInnerMenu([{menu: this.menuPicker, index: 0}]);
}

// Handle resize
setInterval(_.bind(this.checkSize, this), 500);

if (this.options.el) {
this.render();
}
Expand Down Expand Up @@ -200,6 +197,8 @@ define([
});
}

me.autoWidth && me.cmpEl.addClass('auto-width');

me.fieldPicker.on('item:select', _.bind(me.onFieldPickerSelect, me));
me.menuPicker.on('item:select', _.bind(me.onMenuPickerSelect, me));
me.fieldPicker.on('item:click', _.bind(me.onFieldPickerClick, me));
Expand All @@ -211,9 +210,10 @@ define([
me.menuPicker.el.addEventListener('contextmenu', _.bind(me.onPickerComboContextMenu, me), false);

Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));

Common.NotificationCenter.on('tab:active', _.bind(this.onTabActive, this));
Common.NotificationCenter.on('window:resize', _.bind(this.startCheckSize, this));
me.checkSize();
me.onResize();

me.rendered = true;

me.trigger('render:after', me);
Expand All @@ -227,17 +227,40 @@ define([

onMoreToggle: function(btn, state) {
if(state) {
this.checkSize();
this.startCheckSize();
}
},

onTabActive: function() {
this.startCheckSize();
},

startCheckSize: function() {
if (!this.cmpEl || !this.cmpEl.is(':visible')) return;

var me = this;
me.checkSize();
if (!me._timer_id) {
me._needCheckSize = 0;
me._timer_id = setInterval(function() {
if (me._needCheckSize++ < 10)
me.checkSize();
else {
clearInterval(me._timer_id);
delete me._timer_id;
}
}, 500);
} else
me._needCheckSize = 0;
},

checkSize: function() {
if (this.cmpEl && this.cmpEl.is(':visible')) {
if(this.autoWidth && this.menuPicker.store.length > 0) {
var wrapWidth = this.$el.width();
if(wrapWidth != this.wrapWidth || this.needFillComboView){
this.wrapWidth = wrapWidth;
this.autoChangeWidth();
wrapWidth = this.autoChangeWidth();
wrapWidth && (this.wrapWidth = wrapWidth);

var picker = this.menuPicker;
var record = picker.getSelectedRec();
Expand All @@ -248,7 +271,6 @@ define([
var me = this,
width = this.cmpEl.width(),
height = this.cmpEl.height();

if (width < this.minWidth) return;

if (this.rootWidth != width || this.rootHeight != height) {
Expand Down Expand Up @@ -290,32 +312,13 @@ define([

autoChangeWidth: function() {
if(this.menuPicker.dataViewItems[0]){
var wrapEl = this.$el;
var wrapWidth = wrapEl.width();

var itemEl = this.menuPicker.dataViewItems[0].$el;
var itemWidth = this.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));

var fieldPickerEl = this.fieldPicker.$el;
var fieldPickerPadding = parseFloat(fieldPickerEl.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));

var cmbDataViewEl = this.cmpEl;
var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));

var itemsCount = Math.floor((wrapWidth - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
if(itemsCount > this.store.length)
itemsCount = this.store.length;

var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;

var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
if(widthCalc > maxWidth)
widthCalc = maxWidth;

cmbDataViewEl.css('width', widthCalc);
var wrapEl = this.$el,
widthCalc = this.checkAutoWidth(wrapEl, wrapEl.width()),
cmbDataViewEl = this.cmpEl;
if (widthCalc) {
cmbDataViewEl.css('width', widthCalc);
wrapEl.css('width', (widthCalc + parseFloat(wrapEl.css('padding-left')) + parseFloat(wrapEl.css('padding-right'))) + 'px');
}

if(this.initAutoWidth) {
this.initAutoWidth = false;
Expand All @@ -324,9 +327,50 @@ define([
cmbDataViewEl.css('bottom', '50%');
cmbDataViewEl.css('margin', 'auto 0');
}

return widthCalc;
}
},


checkAutoWidth: function(el, width) {
var $menuPicker = el.find('.menu-picker'),
$fieldPicker = el.find('.field-picker').closest('.view'),
cmbDataViewEl = el.find('.combo-dataview');
if ($menuPicker && $menuPicker.length>0) {
var itemEl = $menuPicker.find('.item'),
storeLength = itemEl.length,
fieldItemEl = $fieldPicker.find('.item');
if (itemEl.length>0) {
itemEl = $(itemEl[0]);
var itemWidth = itemEl.width();
if (itemWidth<1) {
itemWidth = fieldItemEl.length>0 ? $(fieldItemEl[0]).width() : 0;
}
if (itemWidth<1) return;

itemWidth += parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) + 2 * parseFloat(itemEl.css('border-width'));
var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));

var fieldPickerPadding = parseFloat($fieldPicker.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
var fieldPickerBorder = parseFloat($fieldPicker.css('border-width'));
var dataView = $fieldPicker.find('.dataview');
var dataviewPaddings = parseFloat(dataView.css('padding-left')) + parseFloat(dataView.css('padding-right'));

var cmbDataViewPaddings = parseFloat(cmbDataViewEl.css('padding-left')) + parseFloat(cmbDataViewEl.css('padding-right'));
var itemsCount = Math.floor((width - fieldPickerPadding - dataviewPaddings - 2 * fieldPickerBorder - cmbDataViewPaddings) / (itemWidth + itemMargins));
if(itemsCount > storeLength)
itemsCount = storeLength;

var widthCalc = Math.ceil((itemsCount * (itemWidth + itemMargins) + fieldPickerPadding + dataviewPaddings + 2 * fieldPickerBorder + cmbDataViewPaddings) * 10) / 10;
var maxWidth = parseFloat(cmbDataViewEl.css('max-width'));
if(widthCalc > maxWidth)
widthCalc = maxWidth;

return widthCalc;
}
}
},

onBeforeShowMenu: function(e) {
var me = this;

Expand Down
35 changes: 24 additions & 11 deletions apps/common/main/lib/component/Mixtbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ define([
me._timerSetTab = false;
}, 500);
me.setTab(tab);
// me.processPanelVisible(null, true);
// me.processPanelVisible();
if ( !me.isFolded ) {
if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
me.dblclick_timer = setTimeout(function () {
Expand Down Expand Up @@ -337,7 +337,7 @@ define([
this.lastPanel = tab;
panel.addClass('active');
me.setMoreButton(tab, panel);
me.processPanelVisible(null, true, true);
me.processPanelVisible(null, true);
}

if ( panel.length ) {
Expand All @@ -353,6 +353,7 @@ define([
}

this.fireEvent('tab:active', [tab]);
Common.NotificationCenter.trigger('tab:active',[tab]);
}
},

Expand Down Expand Up @@ -422,10 +423,8 @@ define([
* hide button's caption to decrease panel width
* ##adopt-panel-width
**/
processPanelVisible: function(panel, now, force) {
processPanelVisible: function(panel, force) {
var me = this;
if ( me._timer_id ) clearTimeout(me._timer_id);

function _fc() {
var $active = panel || me.$panels.filter('.active');
if ( $active && $active.length ) {
Expand Down Expand Up @@ -502,8 +501,13 @@ define([
data.rightedge = _rightedge;
if (_flex.length>0 && $active.find('.btn-slot.compactwidth').length<1) {
for (var i=0; i<_flex.length; i++) {
var item = _flex[i];
item.el.css('width', item.width);
var item = _flex[i],
checkedwidth;
if (item.el.find('.combo-dataview').hasClass('auto-width')) {
checkedwidth = Common.UI.ComboDataView.prototype.checkAutoWidth(item.el,
me.$boxpanels.width() - $active.outerWidth() + item.el.width());
}
item.el.css('width', checkedwidth ? (checkedwidth + parseFloat(item.el.css('padding-left')) + parseFloat(item.el.css('padding-right'))) + 'px' : item.width);
data.rightedge = $active.get(0).getBoundingClientRect().right;
}
}
Expand All @@ -512,11 +516,20 @@ define([
}
};

if ( now === true ) _fc(); else
me._timer_id = setTimeout(function() {
delete me._timer_id;
if (!me._timer_id) {
_fc();
}, 100);
me._needProcessPanel = false;
me._timer_id = setInterval(function() {
if (me._needProcessPanel) {
_fc();
me._needProcessPanel = false;
} else {
clearInterval(me._timer_id);
delete me._timer_id;
}
}, 100);
} else
me._needProcessPanel = true;
},
/**/

Expand Down
2 changes: 1 addition & 1 deletion apps/common/main/lib/controller/Plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ define([
me.viewPlugins.backgroundBtn.menu.on('show:before', onShowBefore);
}

me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true, true);
me.toolbar && me.toolbar.isTabActive('plugins') && me.toolbar.processPanelVisible(null, true);
var docProtection = me.viewPlugins._state.docProtection;
Common.Utils.lockControls(Common.enumLock.docLockView, docProtection.isReadOnly, {array: me.viewPlugins.lockedControls});
Common.Utils.lockControls(Common.enumLock.docLockForms, docProtection.isFormsOnly, {array: me.viewPlugins.lockedControls});
Expand Down
10 changes: 10 additions & 0 deletions apps/common/main/lib/controller/ReviewChanges.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1000,6 +1000,11 @@ define([
Common.Utils.InternalSettings.set(me.appPrefix + "settings-review-hover-mode", val);
me.appConfig.reviewHoverMode = val;

if (me.view && me.view.btnMailRecepients) {
Common.Utils.lockControls(Common.enumLock.mmergeLock, !!me._state.mmdisable, {array: [me.view.btnMailRecepients]});
me.view.mnuMailRecepients.items[2].setVisible(me.appConfig.fileChoiceUrl || me.appConfig.canRequestSelectSpreadsheet || me.appConfig.canRequestMailMergeRecipients);
}

me.view && me.view.onAppReady(config);
});
},
Expand Down Expand Up @@ -1155,6 +1160,11 @@ define([
}
},

DisableMailMerge: function() {
this._state.mmdisable = true;
this.view && this.view.btnMailRecepients && Common.Utils.lockControls(Common.enumLock.mmergeLock, true, {array: [this.view.btnMailRecepients]});
},

textInserted: '<b>Inserted:</b>',
textDeleted: '<b>Deleted:</b>',
textParaInserted: '<b>Paragraph Inserted</b> ',
Expand Down
Loading

0 comments on commit 30f0e96

Please sign in to comment.