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

[DE] Fix resizing toolbar: bug when open combobox in toolbar (due to overflow:hidden)

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-22 17:46:14 +03:00
parent c9e50231d1
commit 44562bd7d4
3 changed files with 31 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -521,30 +521,25 @@ define([
}, },
resizeToolbar: function(reset) { resizeToolbar: function(reset) {
var activePanel = this.$panels.filter('.active'), var $active = this.$panels.filter('.active'),
more_section = activePanel.find('.more-box'), more_section = $active.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(), box_controls_width = $active.parents('.box-controls').width(),
boxpanels_outer_width = this.$boxpanels.outerWidth(), _maxright = box_controls_width,
boxpanels_width = boxpanels_outer_width, _rightedge = $active.get(0).getBoundingClientRect().right,
boxpanels_inner_width = this.$boxpanels.width(), delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1;
delta = (this._prevBoxWidth) ? (boxpanels_outer_width - this._prevBoxWidth) : -1; this._prevBoxWidth = _maxright;
this._prevBoxWidth = boxpanels_outer_width; more_section.is(':visible') && (_maxright -= more_section_width);
more_section.is(':visible') && (boxpanels_width -= more_section_width); // more section has absolute position -> use outer width
var boxpanels_right = boxpanels_offset.left + boxpanels_width;
if (this.$moreBar && this.$moreBar.parent().is(':visible')) { if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
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) { // from toolbar to more section if ( (reset || delta<0) && (_rightedge > _maxright)) { // 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 = boxpanels_outer_width - parseInt(more_section.css('width')); // more section has absolute position -> use outer width _maxright -= parseInt(more_section.css('width'));
boxpanels_right = boxpanels_offset.left + boxpanels_width;
} }
var last_separator = null, var last_separator = null,
last_group = null, last_group = null,
prevchild = this.$moreBar.children(); prevchild = this.$moreBar.children();
@ -555,12 +550,15 @@ define([
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open') if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
last_group = prevchild; last_group = prevchild;
} }
var items = $active.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]);
if (item.hasClass('group')) { if (item.hasClass('group')) {
_rightedge = $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright) // stop moving items
break;
var offset = item.offset(), var offset = item.offset(),
item_width = item.outerWidth(), item_width = item.outerWidth(),
children = item.children(); children = item.children();
@ -571,13 +569,13 @@ define([
child.attr('inner-width', child.outerWidth()); child.attr('inner-width', child.outerWidth());
} }
} }
if ((offset.left > boxpanels_right || children.length==1) && item.attr('group-state') != 'open') { if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
// move group // move group
this.$moreBar.prepend(item); this.$moreBar.prepend(item);
if (last_separator) { if (last_separator) {
last_separator.css('display', ''); last_separator.css('display', '');
} }
} else if ( offset.left+item_width > boxpanels_right ) { } else if ( offset.left+item_width > _maxright ) {
// move buttons from group // move buttons from group
for (var j=children.length-1; j>=0; j--) { for (var j=children.length-1; j>=0; j--) {
var child = $(children[j]); var child = $(children[j]);
@ -590,7 +588,7 @@ define([
} else { } else {
var child_offset = child.offset(), var child_offset = child.offset(),
child_width = child.outerWidth(); child_width = child.outerWidth();
if (child_offset.left+child_width>boxpanels_right) { if (child_offset.left+child_width>_maxright) {
if (!last_group) { if (!last_group) {
last_group = $('<div></div>'); last_group = $('<div></div>');
last_group.addClass(items[i].className); last_group.addClass(items[i].className);
@ -632,7 +630,7 @@ define([
} else if ((reset || delta>0) && more_section.is(':visible')) { } else if ((reset || delta>0) && more_section.is(':visible')) {
var last_separator = null, var last_separator = null,
last_group = null, last_group = null,
prevchild = activePanel.find('> div:not(.more-box)'); prevchild = $active.find('> div:not(.more-box)');
var last_width = 0; var last_width = 0;
if (prevchild.length>0) { if (prevchild.length>0) {
prevchild = $(prevchild[prevchild.length-1]); prevchild = $(prevchild[prevchild.length-1]);
@ -645,22 +643,20 @@ define([
} }
var items = this.$moreBar.children(); var items = this.$moreBar.children();
var active_width = activePanel.outerWidth();
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]);
active_width = activePanel.outerWidth(); _rightedge = $active.get(0).getBoundingClientRect().right;
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 = boxpanels_inner_width; // try to move last group _maxright = box_controls_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);
if (active_width + last_width + item_width < boxpanels_width && item.attr('group-state') != 'open') { if (_rightedge + last_width + item_width < _maxright && item.attr('group-state') != 'open') {
// move group // move group
more_section.before(item); more_section.before(item);
if (last_separator) { if (last_separator) {
@ -670,21 +666,21 @@ 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 ( _rightedge + last_width < _maxright) {
// move buttons from group // move buttons from group
var children = item.children(); var children = item.children();
boxpanels_width = boxpanels_outer_width - more_section_width; _maxright = box_controls_width - 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 = boxpanels_inner_width; // try to move last item from last group _maxright = box_controls_width; // try to move last item from last group
active_width = activePanel.outerWidth(); _rightedge = $active.get(0).getBoundingClientRect().right;
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
need_break = true; need_break = true;
break; break;
} else { } else {
var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? 6 : 0); 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 (active_width+last_width+child_width<boxpanels_width) { if (_rightedge+last_width+child_width < _maxright) {
if (!last_group) { if (!last_group) {
last_group = $('<div></div>'); last_group = $('<div></div>');
last_group.addClass(items[i].className); last_group.addClass(items[i].className);
@ -693,7 +689,7 @@ define([
last_group.attr(attrs[k].name, attrs[k].value); last_group.attr(attrs[k].name, attrs[k].value);
} }
if (last_group.hasClass('flex')) { // need to update flex groups list if (last_group.hasClass('flex')) { // need to update flex groups list
activePanel.data().flex = null; $active.data().flex = null;
} }
more_section.before(last_group); more_section.before(last_group);
if (last_separator) { if (last_separator) {

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

@ -27,7 +27,7 @@
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
</section> </section>
<section class="box-panels" style="overflow: hidden;"> <section class="box-panels">
<section class="panel" data-tab="home"> <section class="panel" data-tab="home">
<div class="group small"> <div class="group small">
<div class="elset" style="width:208px;"> <div class="elset" style="width:208px;">
@ -218,11 +218,5 @@
</div> </div>
</section> </section>
</section> </section>
<section class="panel static" style="display: none;">
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-more"></span>
</div>
</section>
</section> </section>
</div> </div>

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

@ -1404,15 +1404,6 @@ define([
] ]
}); });
} }
this.btnMore = new Common.UI.Button({
id: 'tlbtn-more',
cls: 'btn-toolbar x-huge icon-top dropdown-manual',
caption: this.capBtnMore,
iconCls: 'btn-insertchart',
enableToggle: true
});
this.on('render:after', _.bind(this.onToolbarAfterRender, this)); this.on('render:after', _.bind(this.onToolbarAfterRender, this));
} else { } else {
Common.UI.Mixtbar.prototype.initialize.call(this, { Common.UI.Mixtbar.prototype.initialize.call(this, {
@ -1565,7 +1556,6 @@ define([
_injectComponent('#slot-img-movebkwd', this.btnImgBackward); _injectComponent('#slot-img-movebkwd', this.btnImgBackward);
_injectComponent('#slot-img-wrapping', this.btnImgWrapping); _injectComponent('#slot-img-wrapping', this.btnImgWrapping);
_injectComponent('#slot-btn-watermark', this.btnWatermark); _injectComponent('#slot-btn-watermark', this.btnWatermark);
_injectComponent('#slot-btn-more', this.btnMore);
this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom', 'small'); this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom', 'small');
Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak); Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);