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

[DE PE SSE] Make two line buttons in toolbar

Browse source
This commit is contained in:
JuliaSvinareva 2021-12-24 15:16:21 +03:00
parent b32d8fb121
commit e4044c00b2
3 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -226,9 +226,10 @@ define([
'</button>' + '</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' + '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
'<span class="btn-fixflex-vcenter">' + '<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= caption %>' +
'<i class="caret"></i>' + '<i class="caret"></i>' +
'</span>' + '</span>' +
'</span>' +
'</button>' + '</button>' +
'</div>'; '</div>';
@ -342,6 +343,20 @@ define([
} else { } else {
this.template = _.template(templateHugeCaption); this.template = _.template(templateHugeCaption);
} }
var words = me.caption.split(' '),
newCaption = null;
if (words.length > 1) {
if (words.length < 3) {
newCaption = words[0] + '<br>' + words[1];
} else {
newCaption = words[0] + ' ' + words[1] + '<br>' + words[2];
}
} else if (!!me.menu || me.split === true) {
newCaption = me.caption + '<br>';
}
if (newCaption) {
me.caption = newCaption;
}
} }
me.cmpEl = $(this.template({ me.cmpEl = $(this.template({

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

@ -1,4 +1,4 @@
@x-huge-btn-height: 46px; @x-huge-btn-height: 48px;
@x-huge-btn-icon-size: 28px; @x-huge-btn-icon-size: 28px;
.btn { .btn {
@ -70,8 +70,6 @@
transition: transform 0.2s ease; transition: transform 0.2s ease;
transform: rotate(-135deg) translate(1px,1px); transform: rotate(-135deg) translate(1px,1px);
margin: 0 1px 0 4px;
} }
//&:active, //&:active,
@ -233,17 +231,21 @@
line-height: 18px; line-height: 18px;
padding: 0 2px; padding: 0 2px;
display: flex; display: flex;
align-items: center; //align-items: center;
//align-items: start; align-items: start;
.caption { .caption {
//max-width: 107px; max-width: 85px;
max-height: 22px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
white-space: pre-line; white-space: pre-line;
line-height: 11px; line-height: 10px;
padding-right: 0; padding: 0 2px;
.caret {
margin: 0 1px 0 4px;
}
} }
} }
@ -277,6 +279,7 @@
//max-width: 100px; //max-width: 100px;
} }
} }
} }
.inner-box-icon { .inner-box-icon {
@ -302,7 +305,7 @@
.inner-box-caption { .inner-box-caption {
margin: 0; margin: 0;
height: 18px; height: 20px;
} }
div.inner-box-icon { div.inner-box-icon {

2
apps/common/main/resources/less/toolbar.less
View file

@ -162,7 +162,7 @@
.box-controls { .box-controls {
//height: @height-controls; // button has strange offset in IE when odd height //height: @height-controls; // button has strange offset in IE when odd height
padding: 10px 0; padding: 9px 0;
display: flex; display: flex;
//background-color: #F2CBBF; //background-color: #F2CBBF;