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

[DE] Fix toolbar resize

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-22 00:27:30 +03:00
parent fca5aa3e6a
commit 96d2d081ed
5 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -420,9 +420,11 @@ define([
if (_flex.length>0) { if (_flex.length>0) {
for (var i=0; i<_flex.length; i++) { for (var i=0; i<_flex.length; i++) {
var item = _flex[i].el; var item = _flex[i].el;
if (item.outerWidth() > parseInt(item.css('min-width'))) _rightedge = $active.get(0).getBoundingClientRect().right;
if (item.outerWidth() > parseInt(item.css('min-width'))) {
data.rightedge = _rightedge;
return; return;
else } else
item.css('width', item.css('min-width')); item.css('width', item.css('min-width'));
} }
} }
@ -458,6 +460,7 @@ define([
for (var i=0; i<_flex.length; i++) { for (var i=0; i<_flex.length; i++) {
var item = _flex[i]; var item = _flex[i];
item.el.css('width', item.width); item.el.css('width', item.width);
data.rightedge = $active.get(0).getBoundingClientRect().right;
} }
} }
} }
@ -522,10 +525,11 @@ define([
more_section = activePanel.find('.more-box'), more_section = activePanel.find('.more-box'),
more_section_width = parseInt(more_section.css('width')) || 0, more_section_width = parseInt(more_section.css('width')) || 0,
boxpanels_offset = this.$boxpanels.offset(), boxpanels_offset = this.$boxpanels.offset(),
boxpanels_width = this.$boxpanels.outerWidth(), boxpanels_outer_width = this.$boxpanels.outerWidth(),
delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1; boxpanels_inner_width = this.$boxpanels.width(),
this._prevBoxWidth = boxpanels_width; boxpanels_width = more_section.is(':visible') ? boxpanels_outer_width - more_section_width : boxpanels_inner_width, // more section has absolute position -> use outer width
more_section.is(':visible') && (boxpanels_width -= more_section_width); delta = (this._prevBoxWidth) ? (boxpanels_inner_width - this._prevBoxWidth) : -1;
this._prevBoxWidth = boxpanels_inner_width;
var boxpanels_right = boxpanels_offset.left + boxpanels_width; var boxpanels_right = boxpanels_offset.left + boxpanels_width;
@ -533,10 +537,10 @@ define([
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth()); this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
} }
if ((reset || delta<0) && activePanel.outerWidth() > boxpanels_width) { if ((reset || delta<0) && activePanel.outerWidth() > boxpanels_width) { // from toolbar to more section
if (!more_section.is(':visible')) { if (!more_section.is(':visible')) {
more_section.css('display', ""); more_section.css('display', "");
boxpanels_width = this.$boxpanels.outerWidth() - parseInt(more_section.css('width')); boxpanels_width = boxpanels_outer_width - parseInt(more_section.css('width')); // more section has absolute position -> use outer width
boxpanels_right = boxpanels_offset.left + boxpanels_width; boxpanels_right = boxpanels_offset.left + boxpanels_width;
} }
@ -554,8 +558,7 @@ define([
var items = activePanel.find('> div:not(.more-box)'); var items = activePanel.find('> div:not(.more-box)');
var need_break = false; var need_break = false;
for (var i=items.length-1; i>=0; i--) { for (var i=items.length-1; i>=0; i--) {
var item = $(items[i]), var item = $(items[i]);
itemCls = items[i].className;
if (item.hasClass('group')) { if (item.hasClass('group')) {
var offset = item.offset(), var offset = item.offset(),
item_width = item.outerWidth(), item_width = item.outerWidth(),
@ -589,7 +592,11 @@ define([
if (child_offset.left+child_width>boxpanels_right) { if (child_offset.left+child_width>boxpanels_right) {
if (!last_group) { if (!last_group) {
last_group = $('<div></div>'); last_group = $('<div></div>');
last_group.addClass(itemCls); 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); this.$moreBar.prepend(last_group);
if (last_separator) { if (last_separator) {
last_separator.css('display', ''); last_separator.css('display', '');
@ -630,7 +637,7 @@ define([
prevchild = $(prevchild[prevchild.length-1]); prevchild = $(prevchild[prevchild.length-1]);
if (prevchild.hasClass('separator')) { if (prevchild.hasClass('separator')) {
last_separator = prevchild; last_separator = prevchild;
last_width = 7; last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
} }
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open') if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
last_group = prevchild; last_group = prevchild;
@ -642,17 +649,17 @@ define([
if (items.length>0) { if (items.length>0) {
// from more panel to toolbar // from more panel to toolbar
for (var i=0; i<items.length; i++) { for (var i=0; i<items.length; i++) {
var item = $(items[i]), var item = $(items[i]);
itemCls = items[i].className;
active_width = activePanel.outerWidth(); active_width = activePanel.outerWidth();
if (item.hasClass('group')) { if (item.hasClass('group')) {
var islast = false; var islast = false;
if (this.$moreBar.children().filter('.group').length == 1) { if (this.$moreBar.children().filter('.group').length == 1) {
boxpanels_width = this.$boxpanels.outerWidth(); boxpanels_width = boxpanels_inner_width; // try to move last group
islast = true; islast = true;
} }
var item_width = parseInt(item.attr('inner-width') || 0); var item_width = parseInt(item.attr('inner-width') || 0);
var children = item.children();
if (active_width + last_width + item_width < boxpanels_width && item.attr('group-state') != 'open') { if (active_width + last_width + item_width < boxpanels_width && item.attr('group-state') != 'open') {
// move group // move group
more_section.before(item); more_section.before(item);
@ -663,13 +670,12 @@ define([
this.hideMoreBtns(); this.hideMoreBtns();
more_section.css('display', "none"); more_section.css('display', "none");
} }
} else if ( active_width + last_width < boxpanels_width ) { } else if ( active_width + last_width < boxpanels_width && children.length>1 ) { // if only one child in group - don't move child. try to move whole group
// move buttons from group // move buttons from group
var children = item.children(); boxpanels_width = boxpanels_outer_width - more_section_width;
boxpanels_width = this.$boxpanels.outerWidth() - more_section_width;
for (var j=0; j<children.length; j++) { for (var j=0; j<children.length; j++) {
if (islast && j==children.length-1) if (islast && j==children.length-1)
boxpanels_width = this.$boxpanels.outerWidth(); boxpanels_width = boxpanels_inner_width; // try to move last item from last group
active_width = activePanel.outerWidth(); active_width = activePanel.outerWidth();
var child = $(children[j]); var child = $(children[j]);
if (child.hasClass('elset')) { // don't add group - no enough space if (child.hasClass('elset')) { // don't add group - no enough space
@ -680,7 +686,14 @@ define([
if (active_width+last_width+child_width<boxpanels_width) { if (active_width+last_width+child_width<boxpanels_width) {
if (!last_group) { if (!last_group) {
last_group = $('<div></div>'); last_group = $('<div></div>');
last_group.addClass(itemCls); 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
activePanel.data().flex = null;
}
more_section.before(last_group); more_section.before(last_group);
if (last_separator) { if (last_separator) {
last_separator.css('display', ''); last_separator.css('display', '');
@ -714,7 +727,7 @@ define([
more_section.before(item); more_section.before(item);
item.css('display', 'none'); item.css('display', 'none');
last_separator = item; last_separator = item;
last_width = 7; last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
} }
} }
} else { } else {

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

@ -204,7 +204,7 @@
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
min-width:auto; min-width:auto;
padding: 5px 10px; padding: 5px 10px 5px 0;
border-radius: 0; border-radius: 0;
z-index:999; z-index:999;
.compactwidth { .compactwidth {
@ -222,6 +222,11 @@
} }
} }
.more-box .group {
background-color: @background-toolbar-ie;
background-color: @background-toolbar;
}
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
@minus-px: calc(-1 * @scaled-one-px-value); @minus-px: calc(-1 * @scaled-one-px-value);
@ -783,3 +788,6 @@
min-width: 46px; min-width: 46px;
} }
section .field-styles {
width: 100%;
}

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> <span class="btn-slot" id="slot-btn-mailrecepients" data-layout-name="toolbar-home-mailmerge"></span>
</div> </div>
</div> </div>
<div class="group small field-styles" id="slot-field-styles" style="min-width: 160px;"></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>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">

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

@ -1311,7 +1311,7 @@ define([
cls: 'combo-styles', cls: 'combo-styles',
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:145px;', style: 'min-width:150px;',
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',

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

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