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

[rtl] Make display/hide more button in toolbar

Browse source
This commit is contained in:
JuliaSvinareva 2022-12-10 23:36:26 +03:00
parent 2f70498c5c
commit 2db8a58b49
2 changed files with 297 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -403,7 +403,7 @@ define([
me.setMoreButton($active.attr('data-tab'), $active); me.setMoreButton($active.attr('data-tab'), $active);
} }
if ( !_rightedge ) { if ( !_rightedge ) {
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
} }
if ( !_btns ) { if ( !_btns ) {
_btns = []; _btns = [];
@ -421,12 +421,12 @@ define([
data.flex = _flex; data.flex = _flex;
} }
if ( (_rightedge > _maxright)) { if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
if (!more_section.is(':visible') ) { if (!more_section.is(':visible') ) {
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;
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
if (item.outerWidth() > parseInt(item.css('min-width'))) { if (item.outerWidth() > parseInt(item.css('min-width'))) {
data.rightedge = _rightedge; data.rightedge = _rightedge;
return; return;
@ -438,8 +438,8 @@ define([
var btn = _btns[i]; var btn = _btns[i];
if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) { if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
btn.addClass('compactwidth'); btn.addClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright) if ((Common.UI.isRTL() && _rightedge >= 0) || (_rightedge <= _maxright))
break; break;
} }
} }
@ -453,10 +453,10 @@ define([
var btn = _btns[i]; var btn = _btns[i];
if ( btn.hasClass('compactwidth') ) { if ( btn.hasClass('compactwidth') ) {
btn.removeClass('compactwidth'); btn.removeClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
if ( _rightedge > _maxright) { if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
btn.addClass('compactwidth'); btn.addClass('compactwidth');
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
break; break;
} }
} }
@ -466,7 +466,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; data.rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
} }
} }
} }
@ -506,7 +506,7 @@ define([
var me = this; var me = this;
if (!btnsMore[tab]) { if (!btnsMore[tab]) {
var top = panel.position().top; var top = panel.position().top;
var box = $('<div class="more-box" style="position: absolute;right: 0; top:'+ top +'px; padding-left: 12px;padding-right: 6px;display: none;">' + var box = $('<div class="more-box" style="top:'+ top +'px;">' +
'<div class="separator long" style="position: relative;display: table-cell;"></div>' + '<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 class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
'</div>'); '</div>');
@ -545,6 +545,10 @@ define([
}, },
resizeToolbar: function(reset) { resizeToolbar: function(reset) {
if (Common.UI.isRTL()) {
this.resizeToolbarRTL(reset);
return;
}
var $active = this.$panels.filter('.active'), var $active = this.$panels.filter('.active'),
more_section = $active.find('.more-box'); more_section = $active.find('.more-box');
@ -567,7 +571,7 @@ define([
if ( (reset || delta<0) && (_rightedge > _maxright)) { // 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', "block");
_maxright -= parseInt(more_section.css('width')); _maxright -= parseInt(more_section.css('width'));
} }
var last_separator = null, var last_separator = null,
@ -790,6 +794,256 @@ define([
hideAllMenus && Common.UI.Menu.Manager.hideAll(); hideAllMenus && Common.UI.Menu.Manager.hideAll();
}, },
resizeToolbarRTL: function(reset) {
var $active = this.$panels.filter('.active'),
more_section = $active.find('.more-box');
if (more_section.length===0) {
this.setMoreButton($active.attr('data-tab'), $active);
}
var more_section_width = parseInt(more_section.css('width')) || 0,
box_controls_width = $active.parents('.box-controls').width(),
_maxright = box_controls_width,
_minLeft = 0,
_leftedge = $active.get(0).getBoundingClientRect().left,
delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
hideAllMenus = false;
this._prevBoxWidth = _maxright;
if (more_section.is(':visible')) {
_maxright -= more_section_width;
_minLeft += more_section_width;
}
if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
}
if ( (reset || delta<0) && (_leftedge < _minLeft)) { // from toolbar to more section
if (!more_section.is(':visible') ) {
more_section.css('display', 'block');
_minLeft += 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') && !item.attr('hidden-on-resize')) { // 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')) {
_leftedge = $active.get(0).getBoundingClientRect().left;
if (_leftedge >= _minLeft) // 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 < _minLeft || children.length==1) && item.attr('group-state') != 'open') {
// move group
this.$moreBar.prepend(item);
if (last_separator) {
last_separator.css('display', '');
last_separator.removeAttr('hidden-on-resize');
}
hideAllMenus = true;
} else if ( offset.left < _minLeft ) {
// 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', '');
last_separator.removeAttr('hidden-on-resize');
}
hideAllMenus = true;
break;
} else {
var child_offset = child.offset(),
child_width = child.outerWidth();
if (child_offset.left < _minLeft) {
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_separator.removeAttr('hidden-on-resize');
}
}
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');
item.attr('hidden-on-resize', true);
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]);
_leftedge = $active.get(0).getBoundingClientRect().left;
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 (_leftedge > _minLeft && item.attr('group-state') != 'open') {
// move group
more_section.before(item);
if (last_separator) {
last_separator.css('display', '');
last_separator.removeAttr('hidden-on-resize');
}
if (this.$moreBar.children().filter('.group').length == 0) {
this.hideMoreBtns();
more_section.css('display', "none");
}
hideAllMenus = true;
} else if ( _leftedge < _minLeft) {
// 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
_leftedge = $active.get(0).getBoundingClientRect().left;
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 (_leftedge < _minLeft) {
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_separator.removeAttr('hidden-on-resize');
}
}
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');
item.attr('hidden-on-resize', true);
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) { onMoreHide: function(btn, e) {
var moreContainer = btn.panel.parent(); var moreContainer = btn.panel.parent();
if (btn.pressed) { if (btn.pressed) {
@ -809,7 +1063,8 @@ define([
right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()), right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
top = showxy.top - parentxy.top + target.height() + 10; top = showxy.top - parentxy.top + target.height() + 10;
moreContainer.css({right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'}); var styles = Common.UI.isRTL() ? {left: '6px', right: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'} : {right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'}
moreContainer.css(styles);
moreContainer.show(); moreContainer.show();
}, },

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

@ -250,6 +250,9 @@
padding: 12px 10px 7px 0; padding: 12px 10px 7px 0;
border-radius: 0; border-radius: 0;
z-index:999; z-index:999;
.rtl & {
padding: 12px 0 7px 10px;
}
.compactwidth { .compactwidth {
.btn-group, .btn-toolbar { .btn-group, .btn-toolbar {
&.x-huge { &.x-huge {
@ -285,6 +288,18 @@
.more-box { .more-box {
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
background-color: @background-toolbar; background-color: @background-toolbar;
position: absolute;
right: 0;
padding-left: 12px;
padding-right: 6px;
display: none;
.rtl & {
right: unset;
left: 0;
padding-left: 6px;
padding-right: 12px;
}
} }
background-color: @background-toolbar-ie; background-color: @background-toolbar-ie;
@ -301,11 +316,26 @@
padding-left: 6px; padding-left: 6px;
font-size: 0; font-size: 0;
.rtl & {
padding-left: 0;
padding-right: 6px;
}
&.small { &.small {
padding-left: 10px; padding-left: 10px;
.rtl & {
padding-left: 0;
padding-right: 10px;
}
+ .separator:not(.invisible) { + .separator:not(.invisible) {
margin-left: 10px; margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
} }
} }