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

Feature/two lines buttons

apps/common/main/lib/component/Button.js

@@ -210,8 +210,10 @@ define([
                     templateBtnIcon +
                 '</div>' +
                 '<div class="inner-box-caption">' +
-                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caption"><%= caption %>' +
-                    '<i class="caret"></i>' +
+                        '<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>' +
+                    '<span class="caption"><%= caption %>' +
-                    '<i class="caret"></i>' +
+                        '<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);
                     }
                 }
             }

apps/common/main/resources/less/buttons.less

@@ -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 {

apps/common/main/resources/less/plugins.less

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

apps/common/main/resources/less/toolbar.less

@@ -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 {