[DE PE SSE] Make two line buttons in toolbar

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

View file

@ -226,8 +226,9 @@ define([
'</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 %>" <% } %>>' +
'<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' +
'<span class="caption"><%= caption %>' +
'<i class="caret"></i>' +
'</span>' +
'</span>' +
'</button>' +
'</div>';
@ -342,6 +343,20 @@ define([
} else {
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({

View file

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

View file

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