Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1465 from ONLYOFFICE/feature/resize-toolbar

Browse source 
Feature/resize toolbar
This commit is contained in:
Julia Radzhabova 2022-01-13 14:38:47 +03:00 committed by GitHub
parent cab404fc86 e084f223d3
commit c4c0af3e28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 423 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

381
apps/common/main/lib/component/Mixtbar.js
View file

@ -52,6 +52,7 @@ define([
var $scrollL;
var optsFold = {timeout: 2000};
var config = {};
var btnsMore = [];
var onScrollTabs = function(opts, e) {
var sv = $boxTabs.scrollLeft();
@ -126,7 +127,9 @@ define([
$boxTabs = me.$('.tabs > ul');
me.$tabs = $boxTabs.find('> li');
me.$panels = me.$('.box-panels > .panel');
me.$boxpanels = me.$('.box-panels');
me.$panels = me.$boxpanels.find('> .panel');
optsFold.$bar = me.$('.toolbar');
var $scrollR = me.$('.tabs .scroll.right');
$scrollL = me.$('.tabs .scroll.left');
@ -234,7 +237,7 @@ define([
if ( $boxTabs.parent().hasClass('short') ) {
$boxTabs.parent().removeClass('short');
}
this.hideMoreBtns();
this.processPanelVisible();
},
@ -261,7 +264,7 @@ define([
me._timerSetTab = false;
}, 500);
me.setTab(tab);
me.processPanelVisible(null, true);
// me.processPanelVisible(null, true);
if ( !me.isFolded ) {
if ( me.dblclick_timer ) clearTimeout(me.dblclick_timer);
me.dblclick_timer = setTimeout(function () {
@ -286,11 +289,14 @@ define([
if ( tab ) {
me.$tabs.removeClass('active');
me.$panels.removeClass('active');
me.hideMoreBtns();
var panel = this.$panels.filter('[data-tab=' + tab + ']');
if ( panel.length ) {
this.lastPanel = tab;
panel.addClass('active');
me.setMoreButton(tab, panel);
me.processPanelVisible(null, true, true);
}
if ( panel.length ) {
@ -375,7 +381,7 @@ define([
* hide button's caption to decrease panel width
* ##adopt-panel-width
**/
processPanelVisible: function(panel, now) {
processPanelVisible: function(panel, now, force) {
var me = this;
if ( me._timer_id ) clearTimeout(me._timer_id);
@ -387,6 +393,7 @@ define([
_rightedge = data.rightedge,
_btns = data.buttons,
_flex = data.flex;
var more_section = $active.find('.more-box');
if ( !_rightedge ) {
_rightedge = $active.get(0).getBoundingClientRect().right;
@ -407,44 +414,53 @@ define([
data.flex = _flex;
}
if ( _rightedge > _maxright) {
if (_flex.length>0) {
for (var i=0; i<_flex.length; i++) {
var item = _flex[i].el;
if (item.outerWidth() > parseInt(item.css('min-width')))
return;
else
item.css('width', item.css('min-width'));
}
}
for (var i=_btns.length-1; i>=0; i--) {
var btn = _btns[i];
if ( !btn.hasClass('compactwidth') ) {
btn.addClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright)
break;
}
}
data.rightedge = _rightedge;
} else {
for (var i=0; i<_btns.length; i++) {
var btn = _btns[i];
if ( btn.hasClass('compactwidth') ) {
btn.removeClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right;
if ( _rightedge > _maxright) {
btn.addClass('compactwidth');
if ( (_rightedge > _maxright)) {
if (!more_section.is(':visible') ) {
if (_flex.length>0) {
for (var i=0; i<_flex.length; i++) {
var item = _flex[i].el;
_rightedge = $active.get(0).getBoundingClientRect().right;
break;
if (item.outerWidth() > parseInt(item.css('min-width'))) {
data.rightedge = _rightedge;
return;
} else
item.css('width', item.css('min-width'));
}
}
for (var i=_btns.length-1; i>=0; i--) {
var btn = _btns[i];
if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
btn.addClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright)
break;
}
}
data.rightedge = _rightedge;
}
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);
me.resizeToolbar(force);
} else {
more_section.is(':visible') && me.resizeToolbar(force);
if (!more_section.is(':visible')) {
for (var i=0; i<_btns.length; i++) {
var btn = _btns[i];
if ( btn.hasClass('compactwidth') ) {
btn.removeClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right;
if ( _rightedge > _maxright) {
btn.addClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right;
break;
}
}
}
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);
data.rightedge = $active.get(0).getBoundingClientRect().right;
}
}
}
}
@ -477,6 +493,295 @@ define([
this.$tabs.find('> a[data-tab=' + tab + ']').parent().css('display', visible ? '' : 'none');
this.onResize();
}
},
setMoreButton: function(tab, panel) {
var me = this;
if (!btnsMore[tab]) {
var box = $('<div class="more-box" style="position: absolute;right: 0; padding-left: 12px;padding-right: 6px;display: none;">' +
'<div class="separator long" style="position: relative;display: table-cell;"></div>' +
'<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
'</div>');
panel.append(box);
btnsMore[tab] = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top dropdown-manual',
caption: Common.Locale.get("textMoreButton",{name:"Common.Translation", default: "More"}),
iconCls: 'toolbar__icon btn-more',
enableToggle: true
});
btnsMore[tab].render(box.find('.slot-btn-more'));
btnsMore[tab].on('toggle', function(btn, state, e) {
(state) ? me.onMoreShow(btn, e) : me.onMoreHide(btn, e);
Common.NotificationCenter.trigger('more:toggle', btn, state);
});
var moreContainer = $('<div class="dropdown-menu more-container" data-tab="' + tab + '"><div style="display: inline;"></div></div>');
optsFold.$bar.append(moreContainer);
btnsMore[tab].panel = moreContainer.find('div');
}
this.$moreBar = btnsMore[tab].panel;
},
resizeToolbar: function(reset) {
var $active = this.$panels.filter('.active'),
more_section = $active.find('.more-box'),
more_section_width = parseInt(more_section.css('width')) || 0,
box_controls_width = $active.parents('.box-controls').width(),
_maxright = box_controls_width,
_rightedge = $active.get(0).getBoundingClientRect().right,
delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
hideAllMenus = false;
this._prevBoxWidth = _maxright;
more_section.is(':visible') && (_maxright -= more_section_width);
if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
}
if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
if (!more_section.is(':visible') ) {
more_section.css('display', "");
_maxright -= parseInt(more_section.css('width'));
}
var last_separator = null,
last_group = null,
prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
if (prevchild.length>0) {
prevchild = $(prevchild[0]);
if (prevchild.hasClass('separator'))
last_separator = prevchild;
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
last_group = prevchild;
}
var items = $active.find('> div:not(.more-box)');
var need_break = false;
for (var i=items.length-1; i>=0; i--) {
var item = $(items[i]);
if (!item.is(':visible')) { // move invisible items as is and set special attr
item.attr('data-hidden-tb-item', true);
this.$moreBar.prepend(item);
hideAllMenus = true;
} else if (item.hasClass('group')) {
_rightedge = $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright) // stop moving items
break;
var offset = item.offset(),
item_width = item.outerWidth(),
children = item.children();
if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
item.attr('inner-width', item_width);
for (var j=children.length-1; j>=0; j--) {
var child = $(children[j]);
child.attr('inner-width', child.outerWidth());
}
}
if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
// move group
this.$moreBar.prepend(item);
if (last_separator) {
last_separator.css('display', '');
}
hideAllMenus = true;
} else if ( offset.left+item_width > _maxright ) {
// move buttons from group
for (var j=children.length-1; j>=0; j--) {
var child = $(children[j]);
if (child.hasClass('elset')) {
this.$moreBar.prepend(item);
if (last_separator) {
last_separator.css('display', '');
}
hideAllMenus = true;
break;
} else {
var child_offset = child.offset(),
child_width = child.outerWidth();
if (child_offset.left+child_width>_maxright) {
if (!last_group) {
last_group = $('<div></div>');
last_group.addClass(items[i].className);
var attrs = items[i].attributes;
for (var k = 0; k < attrs.length; k++) {
last_group.attr(attrs[k].name, attrs[k].value);
}
this.$moreBar.prepend(last_group);
if (last_separator) {
last_separator.css('display', '');
}
}
last_group.prepend(child);
hideAllMenus = true;
} else {
need_break = true;
break;
}
}
}
if (item.children().length<1) { // all buttons are moved
item.remove();
last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
last_group = null;
} else {
last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
}
if (need_break)
break;
} else {
break;
}
last_separator = null;
} else if (item.hasClass('separator')) {
this.$moreBar.prepend(item);
item.css('display', 'none');
last_separator = item;
hideAllMenus = true;
}
}
} else if ((reset || delta>0) && more_section.is(':visible')) {
var last_separator = null,
last_group = null,
prevchild = $active.find('> div:not(.more-box)');
var last_width = 0;
if (prevchild.length>0) {
prevchild = $(prevchild[prevchild.length-1]);
if (prevchild.hasClass('separator')) {
last_separator = prevchild;
last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
}
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
last_group = prevchild;
}
var items = this.$moreBar.children();
if (items.length>0) {
// from more panel to toolbar
for (var i=0; i<items.length; i++) {
var item = $(items[i]);
_rightedge = $active.get(0).getBoundingClientRect().right;
if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
item.removeAttr('data-hidden-tb-item');
more_section.before(item);
if (this.$moreBar.children().filter('.group').length == 0) {
this.hideMoreBtns();
more_section.css('display', "none");
}
} else if (item.hasClass('group')) {
var islast = false;
if (this.$moreBar.children().filter('.group').length == 1) {
_maxright = box_controls_width; // try to move last group
islast = true;
}
var item_width = parseInt(item.attr('inner-width') || 0);
if (_rightedge + last_width + item_width < _maxright && item.attr('group-state') != 'open') {
// move group
more_section.before(item);
if (last_separator) {
last_separator.css('display', '');
}
if (this.$moreBar.children().filter('.group').length == 0) {
this.hideMoreBtns();
more_section.css('display', "none");
}
hideAllMenus = true;
} else if ( _rightedge + last_width < _maxright) {
// move buttons from group
var children = item.children();
_maxright = box_controls_width - more_section_width;
for (var j=0; j<children.length; j++) {
if (islast && j==children.length-1)
_maxright = box_controls_width; // try to move last item from last group
_rightedge = $active.get(0).getBoundingClientRect().right;
var child = $(children[j]);
if (child.hasClass('elset')) { // don't add group - no enough space
need_break = true;
break;
} else {
var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
if (_rightedge+last_width+child_width < _maxright) {
if (!last_group) {
last_group = $('<div></div>');
last_group.addClass(items[i].className);
var attrs = items[i].attributes;
for (var k = 0; k < attrs.length; k++) {
last_group.attr(attrs[k].name, attrs[k].value);
}
if (last_group.hasClass('flex')) { // need to update flex groups list
$active.data().flex = null;
}
more_section.before(last_group);
if (last_separator) {
last_separator.css('display', '');
}
}
last_group.append(child);
hideAllMenus = true;
} else {
need_break = true;
break;
}
}
}
if (item.children().length<1) { // all buttons are moved
item.remove();
last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
last_group = null;
if (this.$moreBar.children().filter('.group').length == 0) {
this.hideMoreBtns();
more_section.css('display', "none");
}
} else {
last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
}
if (need_break)
break;
} else {
break;
}
last_separator = null; last_width = 0;
} else if (item.hasClass('separator')) {
more_section.before(item);
item.css('display', 'none');
last_separator = item;
last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
hideAllMenus = true;
}
}
} else {
this.hideMoreBtns();
more_section.css('display', "none");
}
}
hideAllMenus && Common.UI.Menu.Manager.hideAll();
},
onMoreHide: function(btn, e) {
var moreContainer = btn.panel.parent();
if (btn.pressed) {
btn.toggle(false, true);
}
if (moreContainer.is(':visible')) {
moreContainer.hide();
Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn);
}
},
onMoreShow: function(btn, e) {
var moreContainer = btn.panel.parent(),
parentxy = moreContainer.parent().offset(),
target = btn.$el,
showxy = target.offset(),
right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
top = showxy.top - parentxy.top + target.height() + 10;
moreContainer.css({right: right, left: 'auto', top : top});
moreContainer.show();
},
hideMoreBtns: function() {
for (var btn in btnsMore) {
btnsMore[btn] && btnsMore[btn].toggle(false);
}
}
};
}()));

0
apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/big/btn-more.png → apps/common/main/resources/img/toolbar/1.25x/big/btn-more.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 193 B

0
apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/big/btn-more.png → apps/common/main/resources/img/toolbar/1.5x/big/btn-more.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 229 B

After

Width:  |  Height:  |  Size: 229 B

0
apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/big/btn-more.png → apps/common/main/resources/img/toolbar/1.75x/big/btn-more.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 261 B

After

Width:  |  Height:  |  Size: 261 B

0
apps/spreadsheeteditor/main/resources/img/toolbar/1x/big/btn-more.png → apps/common/main/resources/img/toolbar/1x/big/btn-more.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 189 B

After

Width:  |  Height:  |  Size: 189 B

0
apps/spreadsheeteditor/main/resources/img/toolbar/2x/big/btn-more.png → apps/common/main/resources/img/toolbar/2x/big/btn-more.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 264 B

After

Width:  |  Height:  |  Size: 264 B

7
apps/common/main/resources/less/combo-dataview.less
View file

@ -342,9 +342,14 @@
.combo-template(60px);
top: -7px;
padding-right: 24px;
padding-right: 12px;
position: absolute;
.more-container & {
padding-right: 0;
position: static;
}
.view .dataview, .dropdown-menu {
padding: 1px;
}

44
apps/common/main/resources/less/toolbar.less
View file

@ -177,13 +177,14 @@
.box-panels {
flex-grow: 1;
-ms-flex: 1;
padding-right: 6px;
.panel:not(.active) {
display: none;
}
/* ##adopt-panel-width */
.panel:not(#plugns-panel) .compactwidth {
.panel .compactwidth {
.btn-group, .btn-toolbar {
&.x-huge {
.caption {
@ -204,6 +205,40 @@
/**/
}
.more-container {
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
min-width:auto;
padding: 12px 10px 7px 0;
border-radius: 0;
z-index:999;
.compactwidth {
.btn-group, .btn-toolbar {
&.x-huge {
.caption {
display: none;
}
.inner-box-caption {
justify-content: center;
align-items: center;
}
.compact-caret {
display: block;
}
}
}
}
&[data-tab=pivot] {
padding: 5px 10px 0 0;
}
}
.more-box {
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
}
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
@minus-px: calc(-1 * @scaled-one-px-value);
@ -218,10 +253,6 @@
padding-left: 6px;
font-size: 0;
&:last-child {
padding-right: 6px;
}
&.small {
padding-left: 10px;
@ -769,3 +800,6 @@
min-width: 46px;
}
section .field-styles {
width: 100%;
}

1
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -3082,6 +3082,7 @@ define([
if (disable && mask.length>0 || !disable && mask.length==0) return;
var toolbar = this.toolbar;
toolbar.hideMoreBtns();
if(disable) {
if (reviewmode) {
mask = $("<div class='toolbar-group-mask'>").appendTo(toolbar.$el.find('.toolbar section.panel .group:not(.no-mask):not(.no-group-mask.review):not(.no-group-mask.inner-elset)'));

2
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -78,7 +78,7 @@
<span class="btn-slot" id="slot-btn-mailrecepients" data-layout-name="toolbar-home-mailmerge"></span>
</div>
</div>
<div class="group small" id="slot-field-styles"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 160px;width: 100%; " data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">

2
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -1311,6 +1311,7 @@ define([
cls: 'combo-styles',
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:150px;',
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'bottom',
@ -1403,7 +1404,6 @@ define([
]
});
}
this.on('render:after', _.bind(this.onToolbarAfterRender, this));
} else {
Common.UI.Mixtbar.prototype.initialize.call(this, {

1
apps/documenteditor/main/locale/en.json
View file

@ -124,6 +124,7 @@
"Common.Translation.warnFileLocked": "You can't edit this file because it's being edited in another app.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.Translation.textMoreButton": "More",
"Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.Calendar.textApril": "April",

1
apps/documenteditor/main/locale/ru.json
View file

@ -124,6 +124,7 @@
"Common.Translation.warnFileLocked": "Вы не можете редактировать этот файл, потому что он уже редактируется в другом приложении.",
"Common.Translation.warnFileLockedBtnEdit": "Создать копию",
"Common.Translation.warnFileLockedBtnView": "Открыть на просмотр",
"Common.Translation.textMoreButton": "Больше",
"Common.UI.ButtonColored.textAutoColor": "Автоматический",
"Common.UI.ButtonColored.textNewColor": "Пользовательский цвет",
"Common.UI.Calendar.textApril": "Апрель",

5
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -165,11 +165,6 @@
margin-left: 2px;
}
#slot-field-styles {
width: 100%;
min-width: 160px;
}
#special-paste-container {
position: absolute;
z-index: @zindex-dropdown - 20;

1
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -2454,6 +2454,7 @@ define([
if (disable && mask.length>0 || !disable && mask.length==0) return;
var toolbar = this.toolbar;
toolbar.hideMoreBtns();
toolbar.$el.find('.toolbar').toggleClass('masked', disable);
if (toolbar.btnsAddSlide) // toolbar buttons are rendered

15
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -101,7 +101,7 @@
<span class="btn-slot split" id="slot-btn-slidesize"></span>
</div>
</div>
<div class="group flex small" id="slot-field-styles" style="width: 100%; min-width: 145px;" data-group-width="100%"></div>
<div class="group flex small field-styles" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">
@ -143,7 +143,7 @@
</div>
</section>
<section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 140px;" data-group-width="900px"></div>
<div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 120px;" data-group-width="900px"></div>
<div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parameters"></span>
@ -219,8 +219,7 @@
</div>
</section>
<section id="animation-panel" class="panel" data-tab="animate">
<div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 140px;" data-group-width="700px"></div>
<div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 210px;" data-group-width="700px"></div>
<div class="group small">
<span class="btn-slot text x-huge" id="animation-button-parameters"></span>
</div>
@ -238,18 +237,18 @@
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label id="animation-label-start"></label>
<label id="animation-label-start" style="margin-right: 10px;"></label>
<div class="btn-slot" style="width: 96px; " id="animation-start"></div>
</div>
<div class="elset font-normal">
<label id="animation-delay"></label>
<label id="animation-delay" style="margin-right: 10px;"></label>
<span id="animation-spin-delay" class="btn-slot text spinner" ></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label id="animation-duration"></label>
<label id="animation-duration" style="margin-right: 10px;"></label>
<span id="animation-spin-duration" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal">
@ -259,7 +258,7 @@
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label id="animation-repeat"></label>
<label id="animation-repeat" style="margin-right: 10px;"></label>
<span id="animation-spin-repeat" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal">

1
apps/presentationeditor/main/app/view/Animation.js
View file

@ -170,6 +170,7 @@ define([
cls: 'combo-transitions combo-animation',
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:200px;',
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= iconCls %>"></div>',

3
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1023,6 +1023,7 @@ define([
itemWidth: 88,
enableKeyEvents: true,
itemHeight: 40,
style: 'min-width:130px;',
lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1',
dataHintDirection: 'bottom',
@ -1072,11 +1073,11 @@ define([
this.cmbInsertShape = new Common.UI.ComboDataViewShape({
cls: 'combo-styles shapes',
style: 'min-width: 140px;',
itemWidth: 20,
itemHeight: 20,
menuMaxHeight: 640,
menuWidth: 362,
style: 'width: 140px;',
enableKeyEvents: true,
lock: [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
dataHint: '1',

1
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -142,6 +142,7 @@ define([
cls: 'combo-transitions',
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:110px;',
itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',

1
apps/presentationeditor/main/locale/en.json
View file

@ -239,6 +239,7 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.Translation.textMoreButton": "More",
"Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders",

23
apps/presentationeditor/main/resources/less/animation.less
View file

@ -1,26 +1,3 @@
#animation-panel {
label {
margin-right: 10px;
}
}
.a-table{
display: table;
width: 100%;
}
.a-tr{
display: table-row;
height: 20px;
border-top: 2px solid transparent;
&.bottom {
border-top: 4px solid transparent;
}
.a-td
{
display: table-cell;
}
}
.combo-animation {
.menu-picker-container .dataview {
padding: 10px 0 0 2px;

12
apps/spreadsheeteditor/main/app/controller/PivotTable.js
View file

@ -87,6 +87,7 @@ define([
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('api:disconnect', _.bind(this.SetDisabled, this));
Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
},
setConfig: function (config) {
@ -426,6 +427,17 @@ define([
});
},
onMoreToggle: function(btn, state, e) {
if (this.view && this.view.toolbar && this.view.toolbar.isTabActive('pivot') && state) {
var styles = this.view.pivotStyles;
if (styles && styles.needFillComboView && styles.menuPicker.store.length > 0 && styles.rendered){
var styleRec;
if (this._state.TemplateName) styleRec = styles.menuPicker.store.findWhere({name: this._state.TemplateName});
styles.fillComboView((styleRec) ? styleRec : styles.menuPicker.store.at(0), true);
}
}
},
strSheet : 'Sheet'
}, SSE.Controllers.PivotTable || {}));

1
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -3700,6 +3700,7 @@ define([
if (disable && mask.length>0 || !disable && mask.length==0) return;
var toolbar = this.toolbar;
toolbar.hideMoreBtns();
toolbar.$el.find('.toolbar').toggleClass('masked', disable);
this.toolbar.lockToolbar(SSE.enumLock.menuFileOpen, disable);

2
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -116,7 +116,7 @@
<span class="btn-slot split" id="slot-btn-table-tpl"></span>
</div>
</div>
<div class="group small" id="slot-field-styles" style="width: 100%; min-width: 168px;"></div>
<div class="group small flex field-styles" id="slot-field-styles" style="min-width: 168px;width: 100%;" data-group-width="100%"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">

2
apps/spreadsheeteditor/main/app/view/PivotTable.js
View file

@ -87,7 +87,7 @@ define([
'<span class="btn-slot text" id="slot-chk-banded-column"></span>' +
'</div>' +
'</div>' +
'<div class="group flex small" id="slot-field-pivot-styles" style="width: 336px;max-width: 336px;min-width: 115px;" data-group-width="336px">' +
'<div class="group flex small" id="slot-field-pivot-styles" style="width: 324px;max-width: 324px;min-width: 105px;" data-group-width="324px">' +
'</div>' +
'</section>';

2
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -935,6 +935,7 @@ define([
enableKeyEvents : true,
itemWidth : 112,
itemHeight : 40,
style: 'min-width:158px;',
menuMaxHeight : 226,
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']],
dataHint : '1',
@ -985,6 +986,7 @@ define([
me.cmbNumberFormat = new Common.UI.ComboBox({
cls : 'input-group-nr',
style : 'width: 113px;',
menuStyle : 'min-width: 180px;',
hint : me.tipNumFormat,
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set['FormatCells']],