From a149fb57c3fb6668c0928861ce806fd132453bd7 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 3 Feb 2022 00:00:46 +0300
Subject: [PATCH] [DE] Add share and users buttons to header

---
 apps/common/main/lib/view/Header.js           | 128 ++++++++++--------
 .../main/resources/img/header/buttons.svg     |   3 +
 apps/common/main/resources/less/header.less   |  41 +++++-
 apps/common/main/resources/less/toolbar.less  |  10 +-
 .../main/app/controller/Main.js               |   1 +
 apps/documenteditor/main/locale/en.json       |   2 +-
 6 files changed, 127 insertions(+), 58 deletions(-)

diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 61d10d6fa..2874ab047 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/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;
+        var $userList, $panelUsers, $btnUsers, $panelShare, $btnShare;
         var _readonlyRights = false;
 
         var templateUserItem =
@@ -84,17 +84,25 @@ define([
                                 '</div>' +
                                 '<div class="hedset" data-layout-name="header-users">' +
                                     // '<span class="btn-slot text" id="slot-btn-users"></span>' +
-                                    '<section id="tlb-box-users" class="box-cousers dropdown"">' +
-                                        '<div class="btn-users" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
-                                            '<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
-                                            '<label class="caption">&plus;</label>' +
+                                    '<section id="tlb-box-users" class="box-cousers dropdown">' +
+                                        '<div class="btn-users dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
+                                            '<div class="inner-box-icon">' +
+                                                '<svg class=""><use xlink:href="#svg-icon-users"></use></svg>' +
+                                            '</div>' +
+                                            // '<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
+                                            '<label class="caption"></label>' +
                                         '</div>' +
                                         '<div class="cousers-menu dropdown-menu">' +
                                             '<label id="tlb-users-menu-descr"><%= tipUsers %></label>' +
                                             '<div class="cousers-list"></div>' +
-                                            '<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
                                         '</div>' +
                                     '</section>'+
+                                    '<section id="tlb-box-share" class="box-share">' +
+                                        '<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>' +
@@ -166,54 +174,49 @@ define([
 
             var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document
             if ( has_edit_users ) {
-                $btnUsers
-                    .attr('data-toggle', 'dropdown')
-                    .addClass('dropdown-toggle')
-                    .menu = true;
+                // $btnUsers
+                //     .attr('data-toggle', 'dropdown')
+                //     .addClass('dropdown-toggle')
+                //     .menu = true;
 
                 $panelUsers['show']();
+
+                $btnUsers.find('.caption')
+                    // .css({'font-size': '12px',
+                    //     'margin-top': '0'})
+                    .html(originalCount);
             } else {
-                $btnUsers
-                    .removeAttr('data-toggle')
-                    .removeClass('dropdown-toggle')
-                    .menu = false;
-
-                $panelUsers[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
+                // $btnUsers
+                //     .removeAttr('data-toggle')
+                //     .removeClass('dropdown-toggle')
+                //     .menu = false;
+                $panelUsers['hide']();
             }
 
-            $btnUsers.find('.caption')
-                .css({'font-size': ((has_edit_users) ? '12px' : '14px'),
-                    'margin-top': ((has_edit_users) ? '0' : '-1px')})
-                .html((has_edit_users) ? originalCount : '&plus;');
-
-            var usertip = $btnUsers.data('bs.tooltip');
-            if ( usertip ) {
-                usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm;
-                usertip.setContent();
-            }
         }
 
         function onLostEditRights() {
             _readonlyRights = true;
-            $panelUsers && $panelUsers.find('#tlb-change-rights').hide();
-            $btnUsers && !$btnUsers.menu && $panelUsers.hide();
+            // $panelUsers && $panelUsers.find('#tlb-change-rights').hide();
+            // $btnUsers && !$btnUsers.menu && $panelUsers.hide();
+            $panelShare && $panelShare.hide();
         }
 
         function onUsersClick(e) {
-            if ( !$btnUsers.menu ) {
-                $panelUsers.removeClass('open');
-                Common.NotificationCenter.trigger('collaboration:sharing');
-            } else {
-                var usertip = $btnUsers.data('bs.tooltip');
-                if ( usertip ) {
-                    if ( usertip.dontShow===undefined)
-                        usertip.dontShow = true;
+            var usertip = $btnUsers.data('bs.tooltip');
+            if ( usertip ) {
+                if ( usertip.dontShow===undefined)
+                    usertip.dontShow = true;
 
-                    usertip.hide();
-                }
+                usertip.hide();
             }
         }
 
+        function onShareClick(e) {
+            $panelUsers.removeClass('open');
+            Common.NotificationCenter.trigger('collaboration:sharing');
+        }
+
         function onAppShowed(config) {
             //config.isCrypted =true; //delete fore merge!
             if ( this.labelDocName ) {
@@ -276,23 +279,28 @@ define([
 
                 var editingUsers = storeUsers.getVisibleEditingCount();
                 $btnUsers.tooltip({
-                    title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights,
-                    titleNorm: me.tipAccessRights,
-                    titleExt: me.tipViewUsers,
+                    title: me.tipViewUsers,
                     placement: 'bottom',
                     html: true
                 });
-
                 $btnUsers.on('click', onUsersClick.bind(me));
 
-                var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
-                $labelChangeRights.on('click', function(e) {
-                    $panelUsers.removeClass('open');
-                    Common.NotificationCenter.trigger('collaboration:sharing');
+                $btnShare.tooltip({
+                    title: me.tipAccessRights,
+                    placement: 'bottom',
+                    html: true
                 });
+                $btnShare.on('click', onShareClick.bind(me));
 
-                $labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide']();
-                $panelUsers[(editingUsers > 1  || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide']();
+                // var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
+                // $labelChangeRights.on('click', function(e) {
+                //     $panelUsers.removeClass('open');
+                //     Common.NotificationCenter.trigger('collaboration:sharing');
+                // });
+                //
+                // $labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide']();
+                $panelShare[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
+                $panelUsers[(editingUsers > 1  || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? 'show' : 'hide']();
             }
 
 
@@ -444,7 +452,7 @@ define([
                     id: 'btn-goback',
                     cls: 'btn-header',
                     iconCls: 'toolbar__icon icon--inverse btn-goback',
-                    split: true,
+                    // split: true,
                     dataHint: '0',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'big'
@@ -523,7 +531,7 @@ define([
                 if ( role == 'right' ) {
                     var $html = $(_.template(templateRightBox)({
                         tipUsers: this.labelCoUsersDescr,
-                        txtAccessRights: this.txtAccessRights
+                        textShare: this.textShare
                     }));
 
                     if ( !me.labelDocName ) {
@@ -577,9 +585,12 @@ define([
 
                     $userList = $html.find('.cousers-list');
                     $panelUsers = $html.find('.box-cousers');
-                    $btnUsers = $html.find('.btn-users');
+                    $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' ) {
@@ -785,14 +796,20 @@ define([
                     return this.btnSave;
                 else if (type == 'users')
                     return $panelUsers;
+                else if (type == 'share')
+                    return $panelShare;
             },
 
             lockHeaderBtns: function (alias, lock) {
                 var me = this;
                 if ( alias == 'users' ) {
-                    if ( lock )
-                        $btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
+                    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');
+                    }
                 } else if ( alias == 'rename-user' ) {
                     if (me.labelUserName) {
                         if ( lock ) {
@@ -844,7 +861,7 @@ define([
             txtAccessRights: 'Change access rights',
             tipAccessRights: 'Manage document access rights',
             labelCoUsersDescr: 'Document is currently being edited by several users.',
-            tipViewUsers: 'View users and manage document access rights',
+            tipViewUsers: 'View users',
             tipDownload: 'Download file',
             tipPrint: 'Print file',
             tipGoEdit: 'Edit current file',
@@ -859,7 +876,8 @@ define([
             tipViewSettings: 'View Settings',
             textRemoveFavorite: 'Remove from Favorites',
             textAddFavorite: 'Mark as favorite',
-            textHideNotes: 'Hide Notes'
+            textHideNotes: 'Hide Notes',
+            textShare: 'Share'
         }
     }(), Common.Views.Header || {}))
 });
diff --git a/apps/common/main/resources/img/header/buttons.svg b/apps/common/main/resources/img/header/buttons.svg
index 3e4d0dbf8..25c94131f 100644
--- a/apps/common/main/resources/img/header/buttons.svg
+++ b/apps/common/main/resources/img/header/buttons.svg
@@ -178,4 +178,7 @@
     <symbol id="svg-icon-crypted" viewBox="0 0 20 20">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.00049C6.99987 4.99948 4 5.00023 4 5.00023V8.50023C4 10.5001 4.56284 15.9767 9.99961 17.0001C15.4364 15.9767 16 10.5001 16 8.50023V5.00023C16 5.00023 13.0001 4.99948 10 3.00049ZM14.0232 7.96528L12.9768 7.03517L9.42726 11.0284L6.94813 8.96247L6.05187 10.038L9.57274 12.972L14.0232 7.96528Z" fill="white"/>
     </symbol>
+    <symbol id="svg-icon-users" viewBox="0 0 28 20">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M27 10C27 14.9706 22.9706 19 18 19C13.0294 19 9 14.9706 9 10C9 5.02944 13.0294 1 18 1C22.9706 1 27 5.02944 27 10ZM28 10C28 15.5228 23.5228 20 18 20C15.3747 20 12.9857 18.9884 11.2016 17.3336C10.2212 17.7622 9.13838 18 8 18C3.58172 18 0 14.4183 0 10C0 5.58172 3.58172 2 8 2C9.13838 2 10.2212 2.23777 11.2016 2.66636C12.9857 1.01164 15.3747 0 18 0C23.5228 0 28 4.47715 28 10ZM10.4512 3.44117C9.68831 3.15594 8.86237 3 8 3C4.13401 3 1 6.13401 1 10C1 11.5218 1.48561 12.9302 2.31032 14.0786C2.59986 13.8548 2.9787 13.5869 3.43399 13.319C4.5435 12.6664 6.13166 12 8 12C8.06722 12 8.13407 12.0009 8.20056 12.0026C8.13373 11.6738 8.08304 11.3392 8.04934 10.9996C8.03292 10.9999 8.01648 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C8.42609 5 8.83142 5.08883 9.19851 5.24898C9.54968 4.59978 9.97058 3.99383 10.4512 3.44117ZM8.76702 6.15236C8.53082 6.05419 8.27174 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10C8 8.63651 8.27289 7.33675 8.76702 6.15236ZM8.46271 13.0156C8.31059 13.0054 8.1563 13 8 13C6.36834 13 4.9565 13.5836 3.94101 14.181C3.54196 14.4157 3.20793 14.6503 2.95039 14.8478C4.22421 16.1743 6.01568 17 8 17C8.86237 17 9.68831 16.8441 10.4512 16.5588C9.56377 15.5384 8.87988 14.3362 8.46271 13.0156Z"/>
+    </symbol>
 </svg>
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index db1633f71..9fd5b2c81 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -70,6 +70,7 @@
     }
 
     .btn-users,
+    .btn-users-share,
     .btn-header {
         &:hover {
             &:not(.disabled):not(.icon) {
@@ -163,6 +164,43 @@
 }
 
 .btn-users {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 10px 0 8px;
+    height: 100%;
+
+    .inner-box-icon {
+        width: 28px;
+        position: relative;
+
+        > svg {
+            position: absolute;
+            width: 28px;
+            height: 20px;
+            top: 50%;
+            margin-top: -10px;
+            fill: @icon-toolbar-header-ie;
+            fill: @icon-toolbar-header;
+        }
+    }
+
+    .caption {
+        cursor: pointer;
+        font-size: 9px;
+        margin-left: -18px;
+        width: 16px;
+        text-align: center;
+        overflow: hidden;
+    }
+
+    &.disabled {
+        opacity: @component-disabled-opacity;
+        pointer-events: none;
+    }
+}
+
+.btn-users-share {
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -184,7 +222,8 @@
 
     .caption {
         cursor: pointer;
-        font-size: 14px;
+        font-size: 11px;
+        margin: 2px 0 0 2px;
     }
 
     &.disabled {
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 8c9e8c6d0..7d39df986 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -461,7 +461,7 @@
         }
 
         // TODO: move to appropriate module
-        .btn-header, .btn-users {
+        .btn-header, .btn-users, .btn-users-share {
             &:not(:active) .icon--inverse {
                 background-position-x: 0;
                 background-position-x: @button-small-normal-icon-offset-x;
@@ -503,6 +503,14 @@
                 }
             }
         }
+        .btn-users {
+            .inner-box-icon {
+                > svg {
+                    fill: @text-normal-ie;
+                    fill: @text-normal;
+                }
+            }
+        }
 
         .btn-current-user {
             .icon--inverse {
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index b46515549..68dfbb907 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -607,6 +607,7 @@ define([
                     this.api.asc_coAuthoringDisconnect();
                     appHeader.setCanRename(false);
                     appHeader.getButton('users') && appHeader.getButton('users').hide();
+                    appHeader.getButton('share') && appHeader.getButton('share').hide();
                     this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
                     this.disableEditing(true);
                     this._renameDialog && this._renameDialog.close();
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index 6bce19a56..2c310c3f2 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -293,7 +293,7 @@
   "Common.Views.Header.tipSave": "Save",
   "Common.Views.Header.tipUndo": "Undo",
   "Common.Views.Header.tipViewSettings": "View settings",
-  "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
+  "Common.Views.Header.tipViewUsers": "View users",
   "Common.Views.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.txtRename": "Rename",
   "Common.Views.History.textCloseHistory": "Close History",