[Common] added 'settings' button

apps/common/main/lib/view/Header.js

@@ -95,6 +95,7 @@ define([
                             '</div>' +
                             '<div class="hedset">' +
                                 '<div class="btn-slot" id="slot-btn-back"></div>' +
+                                '<div class="btn-slot" id="slot-btn-options"></div>' +
                             '</div>' +
                         '</section>';
 
@@ -216,6 +217,8 @@ define([
             }
         }
 
+        function onAppShowed(config) {}
+
         function onAppReady(mode) {
             appConfig = mode;
 
@@ -318,6 +321,9 @@ define([
                     });
                 }
             }
+
+            if ( me.btnOptions )
+                me.btnOptions.updateHint(me.tipViewSettings);
         }
 
         function onDocNameKeyDown(e) {
@@ -393,9 +399,18 @@ define([
                     reset   : onResetUsers
                 });
 
+                me.btnOptions = new Common.UI.Button({
+                    cls: 'btn-header no-caret',
+                    iconCls: 'svgicon svg-btn-options',
+                    menu: true
+                });
+
                 Common.NotificationCenter.on('app:ready', function(mode) {
                     Common.Utils.asyncCall(onAppReady, me, mode);
                 });
+                Common.NotificationCenter.on('app:face', function(mode) {
+                    Common.Utils.asyncCall(onAppShowed, me, mode);
+                });
             },
 
             render: function (el, role) {
@@ -468,6 +483,8 @@ define([
 
                         if ( config.canEdit && config.canRequestEditRights )
                             this.btnEdit = createTitleButton('svg-btn-edit', $html.find('#slot-hbtn-edit'));
+                    } else {
+                        me.btnOptions.render($html.find('#slot-btn-options'));
                     }
 
                     $userList = $html.find('.cousers-list');
@@ -657,18 +674,19 @@ define([
                                 btn.keepState = {
                                     disabled: btn.isDisabled()
                                 };
+                                btn.setDisabled( true );
                             } else {
                                 btn.setDisabled( btn.keepState.disabled );
-                                delete me.btnUndo.keepState;
+                                delete btn.keepState;
                             }
                         }
                     }
 
-                    if ( alias == 'undo' ) {
+                    switch ( alias ) {
-                        _lockButton(me.btnUndo);
+                    case 'undo': _lockButton(me.btnUndo); break;
-                    } else
+                    case 'redo': _lockButton(me.btnRedo); break;
-                    if ( alias == 'redo' ) {
+                    case 'opts': _lockButton(me.btnOptions); break;
-                        _lockButton(me.btnRedo);
+                    default: break;
                     }
                 }
             },

apps/common/main/resources/img/header/buttons.svg

@@ -59,7 +59,12 @@
 		c0.845-1.277,2.313-2.215,3.99-2.215c2.461,0,5.405,1.78,5.694,4.119C17.601,10.291,14.966,7.625,11.355,7.625z"/>
     </symbol>
     <symbol id="svg-btn-redo" viewBox="0 0 20 20">
-    	<path d="M10.645,7.625c1.965,0,3.863,0.777,5.15,2.033L18,7.625V14h-6.406l2.09-2.219
+        <path d="M10.645,7.625c1.965,0,3.863,0.777,5.15,2.033L18,7.625V14h-6.406l2.09-2.219
-		c-0.845-1.277-2.313-2.215-3.989-2.215c-2.461,0-5.405,1.78-5.694,4.119C4.399,10.291,7.034,7.625,10.645,7.625z"/>
+        c-0.845-1.277-2.313-2.215-3.989-2.215c-2.461,0-5.405,1.78-5.694,4.119C4.399,10.291,7.034,7.625,10.645,7.625z"/>
+    </symbol>
+    <symbol id="svg-btn-options" viewBox="0 0 20 20">
+        <rect x="4" y="6" width="12" height="1"/>
+        <rect x="4" y="9" width="12" height="1"/>
+        <rect x="4" y="12" width="12" height="1"/>
     </symbol>
 </svg>

apps/common/main/resources/less/header.less

@@ -62,6 +62,12 @@
         color: #fff;
     }
 
+    .dropdown-menu {
+        label {
+            color: @gray-deep;
+        }
+    }
+
     .btn-users,
     .btn-header {
         &:hover {
@@ -70,7 +76,7 @@
             }
         }
 
-        &:active {
+        &:active, &.active {
             &:not(.disabled) {
                 background-color: rgba(0,0,0,0.2);
             }
@@ -242,6 +248,11 @@
 .hedset {
     font-size: 0;
     display: flex;
+
+    .btn-group {
+        height: 100%;
+    }
+
 }
 
 .btn-header {
@@ -275,6 +286,12 @@
             background-color: rgba(0,0,0,0.2);
         }
     }
+
+    &.no-caret {
+        .inner-box-caret {
+            display: none;
+        }
+    }
 }
 
 #box-document-title {