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

Merge pull request #1462 from ONLYOFFICE/feature/two-lines-buttons

Browse source 
Feature/two lines buttons
This commit is contained in:
JuliaSvinareva 2022-01-12 15:47:44 +03:00 committed by GitHub
parent de2b08f1bf 0d8f4526eb
commit cab404fc86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -210,8 +210,10 @@ define([
templateBtnIcon +
'</div>' +
'<div class="inner-box-caption">' +
'<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' +
'<span class="caption"><%= caption %>' +
'<i class="caret"></i>' +
'</span>' +
'<i class="caret compact-caret"></i>' +
'</div>' +
'</button>' +
'</div>';
@ -225,12 +227,38 @@ 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>' +
'<i class="caret compact-caret"></i>' +
'</span>' +
'</button>' +
'</div>';
var getWidthOfCaption = function (txt) {
var el = document.createElement('span');
el.style.fontSize = '11px';
el.style.fontFamily = 'Arial, Helvetica, "Helvetica Neue", sans-serif';
el.style.position = "absolute";
el.style.top = '-1000px';
el.style.left = '-1000px';
el.innerHTML = txt;
document.body.appendChild(el);
var result = el.offsetWidth;
document.body.removeChild(el);
return result;
};
var getShortText = function (txt, max) {
var lastIndex = txt.length - 1,
word = txt;
while (getWidthOfCaption(word) > max) {
word = txt.slice(0, lastIndex).trim() + '...';
lastIndex--;
}
return word;
};
Common.UI.Button = Common.UI.BaseView.extend({
options : {
id : null,
@ -320,6 +348,37 @@ define([
me.render(me.options.parentEl);
},
getCaptionWithBreaks: function (caption) {
var words = caption.split(' '),
newCaption = null,
maxWidth = 85 - 4;
if (words.length > 1) {
maxWidth = !!this.menu || this.split === true ? maxWidth - 10 : maxWidth;
if (words.length < 3) {
words[1] = getShortText(words[1], maxWidth);
newCaption = words[0] + '<br>' + words[1];
} else {
if (getWidthOfCaption(words[0] + ' ' + words[1]) < maxWidth) { // first and second words in first line
words[2] = getShortText(words[2], maxWidth);
newCaption = words[0] + ' ' + words[1] + '<br>' + words[2];
} else if (getWidthOfCaption(words[1] + ' ' + words[2]) < maxWidth) { // second and third words in second line
words[2] = getShortText(words[2], maxWidth);
newCaption = words[0] + '<br>' + words[1] + ' ' + words[2];
} else {
words[1] = getShortText(words[1] + ' ' + words[2], maxWidth);
newCaption = words[0] + '<br>' + words[1];
}
}
} else {
var width = getWidthOfCaption(caption);
newCaption = width < maxWidth ? caption : getShortText(caption, maxWidth);
if (!!this.menu || this.split === true) {
newCaption += '<br>';
}
}
return newCaption;
},
render: function(parentEl) {
var me = this;
@ -341,6 +400,10 @@ define([
} else {
this.template = _.template(templateHugeCaption);
}
var newCaption = this.getCaptionWithBreaks(this.caption);
if (newCaption) {
me.caption = newCaption;
}
}
me.cmpEl = $(this.template({
@ -748,15 +811,19 @@ define([
setCaption: function(caption) {
if (this.caption != caption) {
this.caption = caption;
if ( /icon-top/.test(this.cls) && !!this.caption && /huge/.test(this.cls) ) {
var newCaption = this.getCaptionWithBreaks(caption);
this.caption = newCaption || caption;
} else
this.caption = caption;
if (this.rendered) {
var captionNode = this.cmpEl.find('.caption');
if (captionNode.length > 0) {
captionNode.text(caption);
captionNode.html(this.caption);
} else {
this.cmpEl.find('button:first').addBack().filter('button').text(caption);
this.cmpEl.find('button:first').addBack().filter('button').html(this.caption);
}
}
}

27
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;
.btn {
@ -70,6 +70,9 @@
transition: transform 0.2s ease;
transform: rotate(-135deg) translate(1px,1px);
&.compact-caret {
display: none;
}
}
//&:active,
@ -229,14 +232,23 @@
.inner-box-caption {
line-height: 18px;
padding: 0 2px;
padding: 0 3px;
display: flex;
align-items: center;
//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-height: 10px;
padding: 0 2px;
.caret {
margin: 0 1px 0 4px;
}
}
}
@ -267,9 +279,10 @@
&.dropdown-toggle {
.caption {
max-width: 100px;
//max-width: 100px;
}
}
}
.inner-box-icon {
@ -295,7 +308,7 @@
.inner-box-caption {
margin: 0;
height: 18px;
height: 20px;
}
div.inner-box-icon {

3
apps/common/main/resources/less/plugins.less
View file

@ -131,8 +131,7 @@
.x-huge.icon-top {
.caption {
text-overflow: ellipsis;
max-width: 60px;
overflow: hidden;
max-width: 85px;
}
}

11
apps/common/main/resources/less/toolbar.less
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;
@ -192,6 +192,11 @@
.inner-box-caption {
justify-content: center;
align-items: center;
}
.compact-caret {
display: block;
}
}
}
@ -237,7 +242,7 @@
font-size: 0;
&:not(:first-child) {
margin-top: 6px;
margin-top: 8px;
}
&.font-normal {
@ -253,7 +258,7 @@
}
&.long {
height: 46px;
height: 48px;
}
&.short {