[Common] changed logic for the 'split' button
This commit is contained in:
Maxim Kadushkin
parent
7e0ec37f28
commit
7a2b4dab48
|
|
@ -315,13 +315,13 @@ define([
|
|||
}
|
||||
};
|
||||
|
||||
var doSplitSelect = function(select, e) {
|
||||
var doSplitSelect = function(select, element, e) {
|
||||
if (!select) {
|
||||
// Is mouse under button
|
||||
var isUnderMouse = false;
|
||||
|
||||
_.each($('button', el), function(el){
|
||||
if ($(el).is(':hover')) {
|
||||
$('button', el).each(function(index, button){
|
||||
if ($(button).is(':hover')) {
|
||||
isUnderMouse = true;
|
||||
return false;
|
||||
}
|
||||
|
|
@ -333,15 +333,18 @@ define([
|
|||
}
|
||||
}
|
||||
|
||||
if (!select && (me.enableToggle && me.allowDepress && me.pressed))
|
||||
return;
|
||||
if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if ( element == 'button') {
|
||||
if (!select && (me.enableToggle && me.allowDepress && me.pressed))
|
||||
return;
|
||||
if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
$('button:first', el).toggleClass('active', select);
|
||||
} else
|
||||
$('[data-toggle^=dropdown]', el).toggleClass('active', select);
|
||||
|
||||
$('button:first', el).toggleClass('active', select);
|
||||
$('[data-toggle^=dropdown]', el).toggleClass('active', select);
|
||||
el.toggleClass('active', select);
|
||||
};
|
||||
|
||||
|
|
@ -358,27 +361,29 @@ define([
|
|||
}
|
||||
}
|
||||
var isOpen = el.hasClass('open');
|
||||
doSplitSelect(!isOpen, e);
|
||||
doSplitSelect(!isOpen, 'arrow', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var doSetActiveState = function(e, state) {
|
||||
if (isSplit) {
|
||||
doSplitSelect(state, e);
|
||||
doSplitSelect(state, 'button', e);
|
||||
} else {
|
||||
el.toggleClass('active', state);
|
||||
$('button', el).toggleClass('active', state);
|
||||
}
|
||||
};
|
||||
|
||||
var splitElement;
|
||||
var onMouseDown = function (e) {
|
||||
doSplitSelect(true, e);
|
||||
splitElement = e.currentTarget.className.match(/dropdown/) ? 'arrow' : 'button';
|
||||
doSplitSelect(true, splitElement, e);
|
||||
$(document).on('mouseup', onMouseUp);
|
||||
};
|
||||
|
||||
var onMouseUp = function (e) {
|
||||
doSplitSelect(false, e);
|
||||
doSplitSelect(false, splitElement, e);
|
||||
$(document).off('mouseup', onMouseUp);
|
||||
};
|
||||
|
||||
|
|
@ -394,8 +399,8 @@ define([
|
|||
$('button', el).on('mousedown', _.bind(onMouseDown, this));
|
||||
}
|
||||
|
||||
el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false));
|
||||
el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true));
|
||||
el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));
|
||||
el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true, 'arrow'));
|
||||
el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me));
|
||||
|
||||
$('button:first', el).on('click', buttonHandler);
|
||||
|
|
|
|||
|
|
@ -98,22 +98,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.over:not(.open):not(.active):not(:active) {
|
||||
&.split {
|
||||
.inner-box-icon {
|
||||
background-color: #e9e9e9;
|
||||
|
||||
&:hover {
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
|
||||
.inner-box-caption {
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.x-huge,
|
||||
.x-huge {
|
||||
min-width: 45px;
|
||||
|
|
@ -126,6 +110,10 @@
|
|||
|
||||
.inner-box-icon {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.inner-box-caption {
|
||||
|
|
@ -265,7 +253,7 @@
|
|||
|
||||
&.open {
|
||||
> .btn-toolbar {
|
||||
color: lighten(@gray-lighter, 10%);
|
||||
//color: lighten(@gray-lighter, 10%);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
|
|
@ -280,21 +268,10 @@
|
|||
|
||||
&.over {
|
||||
> button {
|
||||
background-color: @secondary;
|
||||
//background-color: @secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&.open,
|
||||
&.over {
|
||||
&.split {
|
||||
> button:first-child {
|
||||
z-index: 3;
|
||||
.box-inner-shadow(-1px 0 0 0 @gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:not(.split) {
|
||||
.btn-toolbar {
|
||||
&.dropdown-toggle {
|
||||
|
|
@ -326,6 +303,58 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@color-gray: @secondary;
|
||||
@color-dark: @primary;
|
||||
//@color-gray: #079e2f;
|
||||
//@color-dark: #c52c0e;
|
||||
|
||||
&.split {
|
||||
|
||||
&.over,
|
||||
&.open {
|
||||
box-shadow: inset 0 0 0 1px @color-gray;
|
||||
|
||||
button:not(.active) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.over {
|
||||
button {
|
||||
&:not(.active) {
|
||||
&:hover {
|
||||
background-color: @color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:active:hover {
|
||||
background-color: @color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
button:not(.active) {
|
||||
&:last-of-type {
|
||||
background-color: @color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y;
|
||||
}
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: @color-dark;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
|
|
|
|||
Loading…
Reference in a new issue