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

[Common] changed logic for the 'split' button

Browse source
This commit is contained in:
Maxim Kadushkin 2017-03-23 16:00:24 +03:00
parent 7e0ec37f28
commit 7a2b4dab48
2 changed files with 80 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
apps/common/main/lib/component/Button.js
View file

@ -315,13 +315,13 @@ define([
} }
}; };
var doSplitSelect = function(select, e) { var doSplitSelect = function(select, element, e) {
if (!select) { if (!select) {
// Is mouse under button // Is mouse under button
var isUnderMouse = false; var isUnderMouse = false;
_.each($('button', el), function(el){ $('button', el).each(function(index, button){
if ($(el).is(':hover')) { if ($(button).is(':hover')) {
isUnderMouse = true; isUnderMouse = true;
return false; return false;
} }
@ -333,15 +333,18 @@ define([
} }
} }
if (!select && (me.enableToggle && me.allowDepress && me.pressed)) if ( element == 'button') {
return; if (!select && (me.enableToggle && me.allowDepress && me.pressed))
if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu return;
e.preventDefault(); if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
return; 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); el.toggleClass('active', select);
}; };
@ -358,27 +361,29 @@ define([
} }
} }
var isOpen = el.hasClass('open'); var isOpen = el.hasClass('open');
doSplitSelect(!isOpen, e); doSplitSelect(!isOpen, 'arrow', e);
} }
} }
}; };
var doSetActiveState = function(e, state) { var doSetActiveState = function(e, state) {
if (isSplit) { if (isSplit) {
doSplitSelect(state, e); doSplitSelect(state, 'button', e);
} else { } else {
el.toggleClass('active', state); el.toggleClass('active', state);
$('button', el).toggleClass('active', state); $('button', el).toggleClass('active', state);
} }
}; };
var splitElement;
var onMouseDown = function (e) { var onMouseDown = function (e) {
doSplitSelect(true, e); splitElement = e.currentTarget.className.match(/dropdown/) ? 'arrow' : 'button';
doSplitSelect(true, splitElement, e);
$(document).on('mouseup', onMouseUp); $(document).on('mouseup', onMouseUp);
}; };
var onMouseUp = function (e) { var onMouseUp = function (e) {
doSplitSelect(false, e); doSplitSelect(false, splitElement, e);
$(document).off('mouseup', onMouseUp); $(document).off('mouseup', onMouseUp);
}; };
@ -394,8 +399,8 @@ define([
$('button', el).on('mousedown', _.bind(onMouseDown, this)); $('button', el).on('mousedown', _.bind(onMouseDown, this));
} }
el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false)); el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));
el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true)); el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true, 'arrow'));
el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me)); el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me));
$('button:first', el).on('click', buttonHandler); $('button:first', el).on('click', buttonHandler);

87
apps/common/main/resources/less/buttons.less
View file

@ -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,
.x-huge { .x-huge {
min-width: 45px; min-width: 45px;
@ -126,6 +110,10 @@
.inner-box-icon { .inner-box-icon {
flex-grow: 1; flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
line-height: 20px;
} }
.inner-box-caption { .inner-box-caption {
@ -265,7 +253,7 @@
&.open { &.open {
> .btn-toolbar { > .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. // Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link { &.btn-link {
@ -280,21 +268,10 @@
&.over { &.over {
> button { > 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) { &:not(.split) {
.btn-toolbar { .btn-toolbar {
&.dropdown-toggle { &.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 { .btn-color {