[Header] Refactoring sharing button

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

@@ -52,7 +52,7 @@ define([
 
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
         var storeUsers, appConfig;
-        var $userList, $panelUsers, $btnUsers, $panelShare, $btnShare, $btnUserName;
+        var $userList, $panelUsers, $btnUsers, $btnUserName;
         var _readonlyRights = false;
 
         var templateUserItem =
@@ -98,12 +98,7 @@ define([
                                     '</section>'+
                                 '</div>' +
                                 '<div class="hedset">' +
-                                    '<section id="tlb-box-share" class="box-share">' +
+                                    '<div class="btn-slot" id="slot-btn-share"></div>' +
-                                        '<div class="btn-users-share" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
-                                            '<i class="icon toolbar__icon icon--inverse btn-users-share"></i>' +
-                                            '<label class="caption"><%= textShare %></label>' +
-                                        '</div>' +
-                                     '</section>'+
                                 '</div>' +
                                 '<div class="hedset">' +
                                     '<div class="btn-slot" id="slot-btn-mode"></div>' +
@@ -194,7 +189,7 @@ define([
 
         function onLostEditRights() {
             _readonlyRights = true;
-            $panelShare && $panelShare.hide();
+            this.btnShare && this.btnShare.setVisible(false);
         }
 
         function onUsersClick(e) {
@@ -207,10 +202,6 @@ define([
             }
         }
 
-        function onShareClick(e) {
-            Common.NotificationCenter.trigger('collaboration:sharing');
-        }
-
         function onAppShowed(config) {
             //config.isCrypted =true; //delete fore merge!
             if ( this.labelDocName ) {
@@ -251,6 +242,14 @@ define([
                 Common.NotificationCenter.trigger('markfavorite', !me.options.favorite);
             });
 
+            if (me.btnShare) {
+                me.btnShare.on('click', function (e) {
+                    Common.NotificationCenter.trigger('collaboration:sharing');
+                });
+                me.btnShare.updateHint(me.tipAccessRights);
+                me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
+            }
+
             if ( me.logo )
                 me.logo.children(0).on('click', function (e) {
                     var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ?
@@ -278,19 +277,9 @@ define([
                     html: true
                 });
                 $btnUsers.on('click', onUsersClick.bind(me));
-
-                $btnShare.tooltip({
-                    title: me.tipAccessRights,
-                    placement: 'bottom',
-                    html: true
-                });
-                $btnShare.on('click', onShareClick.bind(me));
-
-                $panelShare[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
                 $panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
             }
 
-
             if (appConfig.user.guest && appConfig.canRenameAnonymous) {
                 if (me.btnUserName) {
                     me.btnUserName.on('click', function (e) {
@@ -451,9 +440,9 @@ define([
 
                 Common.NotificationCenter.on({
                     'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);},
-                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
+                    'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);},
+                    'collaboration:sharingdeny': function(mode) {Common.Utils.asyncCall(onLostEditRights, me, mode);}
                 });
-                Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
                 Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
             },
 
@@ -554,14 +543,24 @@ define([
                         me.setUserName(me.options.userName);
                     }
 
+                    if (!_readonlyRights && config && (config.sharingSettingsUrl && config.sharingSettingsUrl.length || config.canRequestSharingSettings)) {
+                        me.btnShare = new Common.UI.Button({
+                            cls: 'btn-header btn-header-share',
+                            iconCls: 'toolbar__icon icon--inverse btn-users-share',
+                            caption: me.textShare,
+                            dataHint: '0',
+                            dataHintDirection: 'bottom',
+                            dataHintOffset: 'big'
+                        });
+                        me.btnShare.render($html.find('#slot-btn-share'));
+                    } else {
+                        $html.find('#slot-btn-share').hide();
+                    }
+
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
                     $btnUsers = $panelUsers.find('> .btn-users');
-                    $panelShare = $html.find('.box-share');
-                    $btnShare = $panelShare.find('> .btn-users-share');
-
                     $panelUsers.hide();
-                    $panelShare.hide();
                     return $html;
                 } else
                 if ( role == 'title' ) {
@@ -777,7 +776,7 @@ define([
                 else if (type == 'users')
                     return $panelUsers;
                 else if (type == 'share')
-                    return $panelShare;
+                    return this.btnShare;
             },
 
             lockHeaderBtns: function (alias, lock) {
@@ -785,10 +784,11 @@ define([
                 if ( alias == 'users' ) {
                     if ( lock ) {
                         $btnUsers.addClass('disabled').attr('disabled', 'disabled');
-                        $btnShare.addClass('disabled').attr('disabled', 'disabled');
                     } else {
                         $btnUsers.removeClass('disabled').removeAttr('disabled');
-                        $btnShare.removeClass('disabled').removeAttr('disabled');
+                    }
+                    if (me.btnShare) {
+                        me.btnShare.setDisabled(lock);
                     }
                 } else if ( alias == 'rename-user' ) {
                     if (me.btnUserName) {

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

@@ -70,7 +70,6 @@
     }
 
     .btn-users,
-    .btn-users-share,
     .btn-header {
         &:hover {
             &:not(.disabled):not(.icon) {
@@ -163,6 +162,92 @@
     margin-top: 15px;
 }
 
+.hedset {
+    font-size: 0;
+    display: flex;
+
+    .btn-group {
+        height: 100%;
+    }
+
+}
+
+.btn-header {
+    height: 100%;
+    background-color: transparent;
+    width: 40px;
+
+    .icon {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        position: relative;
+
+        &.icon--inverse {
+            background-position-x: @button-header-normal-icon-offset-x-ie;
+            background-position-x: @button-header-normal-icon-offset-x;
+        }
+    }
+
+    .btn& {
+        &:not(:disabled) .icon {
+            opacity: @header-component-normal-icon-opacity;
+        }
+
+        &:active, &.active {
+            .icon.toolbar__icon {
+                &.icon--inverse {
+                    background-position-x: @button-header-active-icon-offset-x-ie;
+                    opacity: @header-component-active-icon-opacity;
+                }
+            }
+        }
+
+        &:hover:not(:disabled) {
+            .icon {
+                opacity: @header-component-hover-icon-opacity;
+            }
+        }
+    }
+
+    svg.icon {
+        vertical-align: middle;
+
+        @media
+        only screen and (-webkit-min-device-pixel-ratio: 1.5),
+        only screen and (min-resolution: 1.5dppx),
+        only screen and (min-resolution: 144dpi) {
+            width:calc(~"28px/1.5");
+            height:calc(~"28px/1.5");
+        }
+    }
+
+    .btn&[disabled],
+    &.disabled {
+        opacity: @component-disabled-opacity;
+    }
+
+    &:hover {
+        &:not(.disabled) {
+            background-color: @highlight-header-button-hover-ie;
+            background-color: @highlight-header-button-hover;
+        }
+    }
+
+    &:active {
+        &:not(.disabled) {
+            background-color: @highlight-header-button-pressed-ie;
+            background-color: @highlight-header-button-pressed;
+        }
+    }
+
+    &.no-caret {
+        .inner-box-caret {
+            display: none;
+        }
+    }
+}
+
 .btn-users {
     display: flex;
     align-items: center;
@@ -218,53 +303,34 @@
     }
 }
 
-.btn-users-share {
+.btn-header-share {
     display: flex;
     align-items: center;
-    cursor: pointer;
     padding: 0 12px;
-    height: 100%;
+    width: auto;
-
-    .icon {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        background-repeat: no-repeat;
-        padding: 0;
-
-        &.icon--inverse {
-            background-position-x: @button-header-normal-icon-offset-x-ie;
-            background-position-x: @button-header-normal-icon-offset-x;
-        }
-    }
 
     .caption {
-        cursor: pointer;
-        font-size: 11px;
         margin: 2px 0 0 2px;
+        color: @text-toolbar-header-ie;
+        color: @text-toolbar-header;
     }
 
     &:not(:disabled) {
-        .icon, .caption {
+        .caption {
             opacity: @header-component-normal-icon-opacity;
         }
     }
 
-    &:active, &.active {
-        .icon, .caption {
-            opacity: @header-component-active-icon-opacity;
-        }
-    }
-
     &:hover:not(:disabled)  {
-        .icon, .caption {
+        .caption {
             opacity: @header-component-hover-icon-opacity;
         }
     }
 
-    &.disabled {
+    &:active:not(:disabled), &.active:not(:disabled) {
-        opacity: @component-disabled-opacity;
+        .caption {
-        pointer-events: none;
+            opacity: @header-component-active-icon-opacity;
+        }
     }
 }
 
@@ -379,92 +445,6 @@
     }
 }
 
-.hedset {
-    font-size: 0;
-    display: flex;
-
-    .btn-group {
-        height: 100%;
-    }
-
-}
-
-.btn-header {
-    height: 100%;
-    background-color: transparent;
-    width: 40px;
-
-    .icon {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        position: relative;
-
-        &.icon--inverse {
-            background-position-x: @button-header-normal-icon-offset-x-ie;
-            background-position-x: @button-header-normal-icon-offset-x;
-        }
-    }
-
-    .btn& {
-        &:not(:disabled) .icon {
-            opacity: @header-component-normal-icon-opacity;
-        }
-
-        &:active, &.active {
-            .icon.toolbar__icon {
-                &.icon--inverse {
-                    background-position-x: @button-header-active-icon-offset-x-ie;
-                    opacity: @header-component-active-icon-opacity;
-                }
-            }
-        }
-
-        &:hover:not(:disabled) {
-            .icon {
-                opacity: @header-component-hover-icon-opacity;
-            }
-        }
-    }
-
-    svg.icon {
-        vertical-align: middle;
-
-        @media
-        only screen and (-webkit-min-device-pixel-ratio: 1.5),
-        only screen and (min-resolution: 1.5dppx),
-        only screen and (min-resolution: 144dpi) {
-            width:calc(~"28px/1.5");
-            height:calc(~"28px/1.5");
-        }
-    }
-
-    .btn&[disabled],
-    &.disabled {
-        opacity: @component-disabled-opacity;
-    }
-
-    &:hover {
-        &:not(.disabled) {
-            background-color: @highlight-header-button-hover-ie;
-            background-color: @highlight-header-button-hover;
-        }
-    }
-
-    &:active {
-        &:not(.disabled) {
-            background-color: @highlight-header-button-pressed-ie;
-            background-color: @highlight-header-button-pressed;
-        }
-    }
-
-    &.no-caret {
-        .inner-box-caret {
-            display: none;
-        }
-    }
-}
-
 #box-document-title {
     background-color: @header-background-color-ie;
     background-color: @header-background-color;

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

@@ -461,7 +461,7 @@
         }
 
         // TODO: move to appropriate module
-        .btn-header, .btn-users, .btn-users-share {
+        .btn-header, .btn-users, .btn-header-share {
             &:not(:active) .icon--inverse {
                 background-position-x: 0;
                 background-position-x: @button-small-normal-icon-offset-x;

apps/documenteditor/main/app/controller/Main.js

@@ -607,7 +607,7 @@ define([
                     this.api.asc_coAuthoringDisconnect();
                     appHeader.setCanRename(false);
                     appHeader.getButton('users') && appHeader.getButton('users').hide();
-                    appHeader.getButton('share') && appHeader.getButton('share').hide();
+                    appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
                     this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
                     this.disableEditing(true);
                     this._renameDialog && this._renameDialog.close();