[common] reduce 'huge' bottons width to show invisible elements on tabbar

This commit is contained in:
Maxim Kadushkin 2018-12-12 14:56:08 +03:00
parent 41d4cb4efd
commit 262387a139
4 changed files with 64 additions and 2 deletions

View file

@ -226,6 +226,8 @@ define([
if ( $boxTabs.parent().hasClass('short') ) {
$boxTabs.parent().removeClass('short');
}
this.processPanelVisible();
},
onTabClick: function (e) {
@ -243,10 +245,12 @@ define([
me.collapse();
} else {
me.setTab(tab);
me.processPanelVisible();
}
} else {
if ( !$target.hasClass('active') && !islone ) {
me.setTab(tab);
me.processPanelVisible();
}
}
},
@ -345,6 +349,46 @@ define([
return true;
},
/**
* in case panel partly visible.
* hide button's caption to decrease panel width
* ##adopt-panel-width
**/
processPanelVisible: function(panel) {
var me = this;
if ( me._timer_id ) clearTimeout(me._timer_id);
function _fc() {
let $active = panel || me.$panels.filter('.active');
if ($active) {
var _maxright = $active.parents('.box-controls').width();
var data = $active.data(),
_rightedge = data.rightedge;
if ( !_rightedge ) {
_rightedge = $active.get(0).getBoundingClientRect().right;
}
if ( _rightedge > _maxright ) {
if ( !$active.hasClass('compactwidth') ) {
$active.addClass('compactwidth');
data.rightedge = _rightedge;
}
} else {
if ($active.hasClass('compactwidth')) {
$active.removeClass('compactwidth');
}
}
}
};
me._timer_id = setTimeout(function() {
delete me._timer_id;
_fc();
}, 100);
},
/**/
setExtra: function (place, el) {
if ( !!el ) {
if (this.$tabs) {

View file

@ -147,6 +147,22 @@
.panel:not(.active) {
display: none;
}
/* ##adopt-panel-width */
.panel.compactwidth:not(#plugns-panel) {
.btn-group, .btn-toolbar {
&.x-huge {
.caption {
display: none;
}
.inner-box-caption {
justify-content: center;
}
}
}
}
/**/
}
background-color: @gray-light;

View file

@ -96,7 +96,7 @@
<span class="btn-slot split" id="slot-btn-slidesize"></span>
</div>
</div>
<div class="group" id="slot-field-styles" style="width: 100%; min-width: 140px;"></div>
<div class="group" id="slot-field-styles" style="width: 100%; min-width: 148px;"></div>
</section>
<section class="panel" data-tab="ins">
<div class="group">

View file

@ -868,8 +868,10 @@ define([
}
});
if ( mode.isEdit )
if ( mode.isEdit ) {
me.setTab('home');
me.processPanelVisible();
}
if ( me.isCompactView )
me.setFolded(true);