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

[Common] implemented a big button with caption under the icon

Browse source
This commit is contained in:
Maxim Kadushkin 2017-03-09 11:58:19 +03:00
parent 4cd69190ff
commit 4dc8bdba37
2 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -119,6 +119,28 @@ define([
], function () {
'use strict';
var templateHugeCaption =
'<div class="btn-group" id="<%= id %>" style="<%= style %>">' +
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
'<i class="icon <%= iconCls %>">&nbsp;</i>' +
'<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' +
'<span class="caret img-commonctrl"></span>' +
'</div>' +
'</button>' +
'</div>';
var templateHugeSplitCaption =
'<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
'<button type="button" class="btn <%= cls %> inner-box-icon">' +
'<i class="icon <%= iconCls %>">&nbsp;</i>' +
'</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
'<span class="caption"><%= caption %></span>' +
'<span class="caret img-commonctrl"></span>' +
'</button>' +
'</div>';
Common.UI.Button = Common.UI.BaseView.extend({
options : {
id : null,
@ -206,6 +228,16 @@ define([
me.setElement(parentEl, false);
if (!me.rendered) {
if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
if ( me.split === true ) {
!!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
this.template = _.template(templateHugeSplitCaption);
} else
if ( !!me.menu ) {
this.template = _.template(templateHugeCaption);
}
}
me.cmpEl = $(this.template({
id : me.id,
cls : me.cls,

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

@ -68,6 +68,73 @@
outline: none;
}
}
&.icon-top {
display: inline-flex;
flex-direction: column;
align-items: center;
.icon {
flex-grow: 1;
}
.caption {
line-height: 18px;
padding: 0 5px;
}
}
}
.btn-group.icon-top {
display: inline-flex;
flex-direction: column;
&.open,
&.over {
&.split {
> .inner-box-icon {
.box-shadow(none);
}
}
}
&.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 {
min-width: 45px;
height: 45px;
}
.inner-box-icon {
flex-grow: 1;
}
.inner-box-caption {
margin: 0;
height: 18px;
}
}
.btn-group {
.x-huge {
.inner-box-caption {
line-height: 18px;
}
}
}
.btn-toolbar {
@ -99,6 +166,7 @@
background-color: @primary;
}
&:not(.icon-top)
.caption:not(:empty) {
padding: 0 5px 0 2px;
}