[DE PE SSE] Make two line buttons in toolbar

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

@@ -226,9 +226,10 @@ 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>' +
                     '</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({

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

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;