[DE] Refactoring more button in toolbar
This commit is contained in:
parent
bd51c09bc3
commit
b97eb30141
|
@ -265,7 +265,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 () {
|
||||
|
@ -297,6 +297,7 @@ define([
|
|||
this.lastPanel = tab;
|
||||
panel.addClass('active');
|
||||
me.setMoreButton(tab, panel);
|
||||
me.processPanelVisible(null, true, true);
|
||||
}
|
||||
|
||||
if ( panel.length ) {
|
||||
|
@ -381,7 +382,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);
|
||||
|
||||
|
@ -393,6 +394,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;
|
||||
|
@ -413,49 +415,54 @@ 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');
|
||||
_rightedge = $active.get(0).getBoundingClientRect().right;
|
||||
break;
|
||||
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;
|
||||
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.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
me.resizeToolbar();
|
||||
};
|
||||
|
||||
if ( now === true ) _fc(); else
|
||||
|
@ -496,7 +503,7 @@ define([
|
|||
btnsMore[tab] = new Common.UI.Button({
|
||||
cls: 'btn-toolbar x-huge icon-top dropdown-manual',
|
||||
caption: 'More',
|
||||
iconCls: 'btn-insertchart',
|
||||
iconCls: 'toolbar__icon btn-insertchart',
|
||||
enableToggle: true
|
||||
});
|
||||
btnsMore[tab].render(box.find('.slot-btn-more'));
|
||||
|
@ -508,10 +515,10 @@ define([
|
|||
btnsMore[tab].panel = moreContainer.find('div');
|
||||
}
|
||||
this.$moreBar = btnsMore[tab].panel;
|
||||
this.resizeToolbar(true);
|
||||
// this.resizeToolbar(true);
|
||||
},
|
||||
|
||||
resizeToolbar: function(reset) {
|
||||
showMorePanel: function(force) {
|
||||
var activePanel = this.$panels.filter('.active'),
|
||||
more_section = activePanel.find('.more-box'),
|
||||
more_section_width = parseInt(more_section.css('width')) || 0,
|
||||
|
@ -527,7 +534,7 @@ define([
|
|||
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
|
||||
}
|
||||
|
||||
if ((reset || delta<0) && activePanel.width() > boxpanels_width) {
|
||||
if ((force || delta<0) && activePanel.width() > boxpanels_width) {
|
||||
if (!more_section.is(':visible')) {
|
||||
more_section.css('display', "");
|
||||
boxpanels_width = this.$boxpanels.width() - parseInt(more_section.css('width'));
|
||||
|
@ -570,7 +577,7 @@ define([
|
|||
// move buttons from group
|
||||
for (var j=children.length-1; j>=0; j--) {
|
||||
var child = $(children[j]);
|
||||
if (child.hasClass('.elset')) {
|
||||
if (child.hasClass('elset')) {
|
||||
this.$moreBar.prepend(item);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
|
@ -613,6 +620,228 @@ define([
|
|||
last_separator = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hideMorePanel: function(force) {
|
||||
var activePanel = this.$panels.filter('.active'),
|
||||
more_section = activePanel.find('.more-box'),
|
||||
more_section_width = parseInt(more_section.css('width')) || 0,
|
||||
boxpanels_offset = this.$boxpanels.offset(),
|
||||
boxpanels_width = this.$boxpanels.width(),
|
||||
delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1;
|
||||
this._prevBoxWidth = boxpanels_width;
|
||||
more_section.is(':visible') && (boxpanels_width -= more_section_width);
|
||||
|
||||
var boxpanels_right = boxpanels_offset.left + boxpanels_width;
|
||||
|
||||
if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
|
||||
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
|
||||
}
|
||||
|
||||
if ((force || delta>0) && (activePanel.width() <= boxpanels_width) && more_section.is(':visible')) {
|
||||
var last_separator = null,
|
||||
last_group = null,
|
||||
prevchild = activePanel.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 = 7;
|
||||
}
|
||||
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
|
||||
last_group = prevchild;
|
||||
}
|
||||
|
||||
var items = this.$moreBar.children();
|
||||
var active_width = activePanel.width();
|
||||
|
||||
if (items.length>0) {
|
||||
// from more panel to toolbar
|
||||
for (var i=0; i<items.length; i++) {
|
||||
var need_break = false;
|
||||
var item = $(items[i]);
|
||||
active_width = activePanel.width();
|
||||
if (item.hasClass('group')) {
|
||||
var islast = false;
|
||||
if (this.$moreBar.children().filter('.group').length == 1) {
|
||||
boxpanels_width = this.$boxpanels.width();
|
||||
islast = true;
|
||||
}
|
||||
|
||||
var item_width = parseInt(item.attr('inner-width') || 0);
|
||||
if (active_width + last_width + item_width < boxpanels_width && 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");
|
||||
}
|
||||
} else if ( active_width + last_width < boxpanels_width ) {
|
||||
// move buttons from group
|
||||
var children = item.children();
|
||||
boxpanels_width = this.$boxpanels.width() - more_section_width;
|
||||
for (var j=0; j<children.length; j++) {
|
||||
if (islast && j==children.length-1)
|
||||
boxpanels_width = this.$boxpanels.width();
|
||||
active_width = activePanel.width();
|
||||
var child = $(children[j]);
|
||||
if (child.hasClass('elset')) { // don't add group - no enough space
|
||||
break;
|
||||
} else {
|
||||
var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? 12 : 0);
|
||||
if (active_width+last_width+child_width<boxpanels_width) {
|
||||
if (!last_group) {
|
||||
last_group = $('<div class="group"></div>');
|
||||
more_section.before(last_group);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
}
|
||||
last_group.append(child);
|
||||
} 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 = 7;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.hideMoreBtns();
|
||||
more_section.css('display', "none");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
resizeToolbar: function(reset) {
|
||||
var activePanel = this.$panels.filter('.active'),
|
||||
more_section = activePanel.find('.more-box'),
|
||||
more_section_width = parseInt(more_section.css('width')) || 0,
|
||||
boxpanels_offset = this.$boxpanels.offset(),
|
||||
boxpanels_width = this.$boxpanels.width(),
|
||||
delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1;
|
||||
this._prevBoxWidth = boxpanels_width;
|
||||
more_section.is(':visible') && (boxpanels_width -= more_section_width);
|
||||
|
||||
var boxpanels_right = boxpanels_offset.left + boxpanels_width;
|
||||
|
||||
if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
|
||||
this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
|
||||
}
|
||||
|
||||
if ((reset || delta<0) && activePanel.width() > boxpanels_width) {
|
||||
if (!more_section.is(':visible')) {
|
||||
more_section.css('display', "");
|
||||
boxpanels_width = this.$boxpanels.width() - parseInt(more_section.css('width'));
|
||||
boxpanels_right = boxpanels_offset.left + boxpanels_width;
|
||||
}
|
||||
|
||||
var last_separator = null,
|
||||
last_group = null,
|
||||
prevchild = this.$moreBar.children();
|
||||
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 = activePanel.find('> div:not(.more-box)');
|
||||
var need_break = false;
|
||||
for (var i=items.length-1; i>=0; i--) {
|
||||
var item = $(items[i]);
|
||||
if (item.hasClass('group')) {
|
||||
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 > boxpanels_right || children.length==1) && item.attr('group-state') != 'open') {
|
||||
// move group
|
||||
this.$moreBar.prepend(item);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
} else if ( offset.left+item_width > boxpanels_right ) {
|
||||
// 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', '');
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
var child_offset = child.offset(),
|
||||
child_width = child.outerWidth();
|
||||
if (child_offset.left+child_width>boxpanels_right) {
|
||||
if (!last_group) {
|
||||
last_group = $('<div class="group"></div>');
|
||||
this.$moreBar.prepend(last_group);
|
||||
if (last_separator) {
|
||||
last_separator.css('display', '');
|
||||
}
|
||||
}
|
||||
last_group.prepend(child);
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
} else if ((reset || delta>0) && more_section.is(':visible')) {
|
||||
var last_separator = null,
|
||||
last_group = null,
|
||||
|
@ -622,7 +851,7 @@ define([
|
|||
prevchild = $(prevchild[prevchild.length-1]);
|
||||
if (prevchild.hasClass('separator')) {
|
||||
last_separator = prevchild;
|
||||
last_width = 13;
|
||||
last_width = 7;
|
||||
}
|
||||
if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
|
||||
last_group = prevchild;
|
||||
|
@ -663,7 +892,7 @@ define([
|
|||
boxpanels_width = this.$boxpanels.width();
|
||||
active_width = activePanel.width();
|
||||
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
|
||||
break;
|
||||
} else {
|
||||
var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? 12 : 0);
|
||||
|
@ -703,7 +932,7 @@ define([
|
|||
more_section.before(item);
|
||||
item.css('display', 'none');
|
||||
last_separator = item;
|
||||
last_width = 13;
|
||||
last_width = 7;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
|
|
@ -199,6 +199,22 @@
|
|||
/**/
|
||||
}
|
||||
|
||||
.more-container {
|
||||
.compactwidth {
|
||||
.btn-group, .btn-toolbar {
|
||||
&.x-huge {
|
||||
.caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner-box-caption {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background-color: @background-toolbar-ie;
|
||||
background-color: @background-toolbar;
|
||||
@minus-px: calc(-1 * @scaled-one-px-value);
|
||||
|
|
|
@ -168,7 +168,7 @@
|
|||
section #slot-field-styles {
|
||||
width: 100%;
|
||||
min-width: 160px;
|
||||
padding-right: 12px;
|
||||
//padding-right: 12px;
|
||||
}
|
||||
|
||||
#special-paste-container {
|
||||
|
|
Loading…
Reference in a new issue