From 4dc8bdba37f7da83fe19b83aad9af88d8257ac08 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 9 Mar 2017 11:58:19 +0300
Subject: [PATCH] [Common] implemented a big button with caption under the icon

---
 apps/common/main/lib/component/Button.js     | 32 +++++++++
 apps/common/main/resources/less/buttons.less | 68 ++++++++++++++++++++
 2 files changed, 100 insertions(+)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 2a07a731f..ecfee549d 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -119,6 +119,28 @@ define([
 ], function () {
     'use strict';
 
+    var templateHugeCaption =
+        '<div class="btn-group" id="<%= id %>" style="<%= style %>">' +
+            '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+                '<i class="icon <%= iconCls %>">&nbsp;</i>' +
+                '<div class="inner-box-caption">' +
+                    '<span class="caption"><%= caption %></span>' +
+                    '<span class="caret img-commonctrl"></span>' +
+                '</div>' +
+            '</button>' +
+        '</div>';
+
+    var templateHugeSplitCaption =
+        '<div class="btn-group x-huge split icon-top" id="<%= id %>" style="<%= style %>">' +
+            '<button type="button" class="btn <%= cls %> inner-box-icon">' +
+                '<i class="icon <%= iconCls %>">&nbsp;</i>' +
+            '</button>' +
+            '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
+                '<span class="caption"><%= caption %></span>' +
+                '<span class="caret img-commonctrl"></span>' +
+            '</button>' +
+        '</div>';
+
     Common.UI.Button = Common.UI.BaseView.extend({
         options : {
             id              : null,
@@ -206,6 +228,16 @@ define([
                 me.setElement(parentEl, false);
 
                 if (!me.rendered) {
+                    if ( /icon-top/.test(me.cls) && !!me.caption && /huge/.test(me.cls) ) {
+                        if ( me.split === true ) {
+                            !!me.cls && (me.cls = me.cls.replace(/\s?(?:x-huge|icon-top)/g, ''));
+                            this.template = _.template(templateHugeSplitCaption);
+                        } else
+                        if ( !!me.menu ) {
+                            this.template = _.template(templateHugeCaption);
+                        }
+                    }
+
                     me.cmpEl = $(this.template({
                         id           : me.id,
                         cls          : me.cls,
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 0b5ac6e23..2fa93ffc1 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -68,6 +68,73 @@
             outline: none;
         }
     }
+
+    &.icon-top {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+
+        .icon {
+            flex-grow: 1;
+        }
+
+        .caption {
+            line-height: 18px;
+            padding: 0 5px;
+        }
+    }
+}
+
+.btn-group.icon-top {
+    display: inline-flex;
+    flex-direction: column;
+
+    &.open,
+    &.over {
+        &.split {
+            > .inner-box-icon {
+                .box-shadow(none);
+            }
+        }
+    }
+
+    &.over:not(.open):not(.active):not(:active) {
+        &.split {
+            .inner-box-icon {
+                background-color: #e9e9e9;
+
+                &:hover {
+                    background-color: #d8d8d8;
+                }
+            }
+
+            .inner-box-caption {
+                background-color: #d8d8d8;
+            }
+        }
+    }
+
+    &.x-huge {
+        min-width: 45px;
+        height: 45px;
+    }
+
+    .inner-box-icon {
+        flex-grow: 1;
+    }
+
+    .inner-box-caption {
+        margin: 0;
+        height: 18px;
+    }
+}
+
+.btn-group {
+    .x-huge {
+        .inner-box-caption {
+            line-height: 18px;
+        }
+    }
 }
 
 .btn-toolbar {
@@ -99,6 +166,7 @@
         background-color: @primary;
     }
 
+    &:not(.icon-top)
     .caption:not(:empty) {
         padding: 0 5px 0 2px;
     }