[DE] moved "coauthoring users" panel to toolbar

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

@@ -51,17 +51,149 @@ define([
 ], function (Backbone, headerTemplate) { 'use strict';
 
     Common.Views.Header =  Backbone.View.extend(_.extend(function(){
-        var templateR = '<section>' +
+        var storeUsers, mode;
+        var $userList, $panelUsers, $btnUsers;
+
+        var templateUserItem =
+                '<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
+                    '<div class="color" style="background-color: <%= user.get("color") %>;" >' +
+                        '<label class="name"><%= fnEncode(user.get("username")) %></label>' +
+                    '</div>' +
+                '</li>';
+
+        var templateUserList = _.template(
+                '<ul>' +
+                    '<% _.each(users, function(item) { %>' +
+                        '<%= usertpl({user: item, fnEncode: fnEncode}) %>' +
+                    '<% }); %>' +
+                '</ul>');
+
+        var templateRightBox = '<section>' +
                             '<label id="doc-name"></label>' +
                             '<div class="elset">' +
-                                '<span class="btn-slot split" id="slot-btn-back"></span>' +
+                                // '<span class="btn-slot text" id="slot-btn-users"></span>' +
-                                '<span class="btn-slot" id="slot-btn-users"></span>' +
+                                '<section id="tlb-box-users" class="box-cousers dropdown"">' +
+                                    '<div class="btn-users">' +
+                                        '<i class="img-commonctrl icon"></i>' +
+                                        '<label class="caption">&plus;</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>'+
+                                '<div class="btn-slot split" id="slot-btn-back"></div>' +
                             '</div>' +
                         '</section>';
 
-        var templateL = '<section>' +
+        var templateLeftBox = '<section>' +
-                            '<div id="header-logo"></div>'
+                                '<div id="header-logo"></div>'
-                        '</section>';
+                            '</section>';
+
+        function onAddUser(model, collection, opts) {
+            if ( $userList ) {
+                var $ul = $userList.find('ul');
+                if ( !$ul.length ) {
+                    $userList.html( templateUserList({
+                                        users: collection.models,
+                                        usertpl: _.template(templateUserItem),
+                                        fnEncode: Common.Utils.String.htmlEncode
+                                    })
+                    );
+                } else {
+                    $ul.append( _.template(templateUserItem, {
+                        user: model,
+                        fnEncode: Common.Utils.String.htmlEncode
+                    }) );
+                }
+
+                $userList.scroller && $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
+            }
+
+            applyUsers( collection.getOnlineCount() );
+        };
+
+        function onUsersChanged(model, collection) {
+            if (model.changed.online != undefined && $userList) {
+                $userList.find('#status-chat-user-'+ model.get('id'))[model.changed.online ? 'removeClass' : 'addClass']('offline');
+                $userList.scroller && $userList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
+            }
+
+            applyUsers(model.collection.getOnlineCount());
+        };
+
+        function onResetUsers(collection, opts) {
+            var usercount = collection.getOnlineCount();
+            if ( $userList ) {
+                if ( usercount > 1 ) {
+                    $userList.html(templateUserList({
+                        users: collection.models,
+                        usertpl: _.template(templateUserItem),
+                        fnEncode: Common.Utils.String.htmlEncode
+                    }));
+
+                    $userList.scroller = new Common.UI.Scroller({
+                        el: $userList.find('ul'),
+                        useKeyboard: true,
+                        minScrollbarLength: 40,
+                        alwaysVisibleY: true
+                    });
+                } else {
+                    $userList.empty();
+                }
+            }
+
+            applyUsers( usercount );
+        };
+
+        function applyUsers(count) {
+            if ( count > 1 ) {
+                $btnUsers
+                    .attr('data-toggle', 'dropdown')
+                    .addClass('dropdown-toggle')
+                    .menu = true;
+
+                $panelUsers['show']();
+            } else {
+                $btnUsers
+                    .removeAttr('data-toggle')
+                    .removeClass('dropdown-toggle')
+                    .menu = false;
+
+                $panelUsers[(mode && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
+            }
+
+            $btnUsers.find('.caption')
+                .css({'font-size': (count > 1 ? '11px' : '14px'),
+                    'font-weight': (count > 1 ? 'bold' : 'normal'),
+                    'margin-top': (count > 1 ? '0' : '-1px')})
+                .html(count > 1 ? count : '&plus;');
+
+            var usertip = $btnUsers.data('bs.tooltip');
+            if ( usertip ) {
+                usertip.options.title = count > 1 ? usertip.options.titleExt : usertip.options.titleNorm;
+                usertip.setContent();
+            }
+        }
+
+        function onUsersClick(e) {
+            if ( !$btnUsers.menu ) {
+                $panelUsers.removeClass('open');
+                this.fireEvent('click:users', this);
+
+                return false;
+            }
+
+            var usertip = $btnUsers.data('bs.tooltip');
+            if ( usertip ) {
+                if ( usertip.dontShow===undefined)
+                    usertip.dontShow = true;
+
+                usertip.hide();
+            }
+        }
+
         return {
             options: {
                 branding: {},
@@ -104,17 +236,20 @@ define([
                     })
                 });
 
-                me.btnUsers = new Common.UI.Button({
+                storeUsers = DE.getCollection('Common.Collections.Users')
-                    cls: 'btn-toolbar',
+                storeUsers.bind({
-                    iconCls: 'img-commonctrl review-next'
+                    add     : onAddUser,
+                    change  : onUsersChanged,
+                    reset   : onResetUsers
                 });
 
-                (new Promise(function (accept, reject) {
-                    Common.NotificationCenter.on('app:ready', function() { accept(); });
-                })).then(function(){
-                    me.btnGoBack.updateHint(me.textBack);
-                    me.btnUsers.updateHint('Users');
 
+                (new Promise(function (accept, reject) {
+                    Common.NotificationCenter.on('app:ready', function(mode) { accept(mode); });
+                })).then(function(m){
+                    mode = m;
+
+                    me.btnGoBack.updateHint(me.textBack);
                     me.btnGoBack.on('click', function (e) {
                         me.fireEvent('go:back', ['page:current']);
                     });
@@ -129,6 +264,31 @@ define([
                         var newDocumentPage = window.open(_url);
                         newDocumentPage && newDocumentPage.focus();
                     })
+
+                    $panelUsers.on('shown.bs.dropdown', function () {
+                        $userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
+                    });
+
+                    $panelUsers.find('.cousers-menu')
+                        .on('click', function (e) {
+                            return false;
+                        });
+
+                    $btnUsers.tooltip({
+                        title: 'Manage document access rights',
+                        titleNorm: me.tipAccessRights,
+                        titleExt: me.tipViewUsers,
+                        placement: 'bottom',
+                        html: true
+                    });
+
+                    $btnUsers.on('click', onUsersClick.bind(me));
+
+                    var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
+                    $labelChangeRights.on('click', onUsersClick.bind(me));
+
+                    $labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
+                    $panelUsers[(storeUsers.size() > 1 || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
                 });
             },
 
@@ -140,16 +300,18 @@ define([
 
             getPanel: function (role) {
                 if ( role == 'left' ) {
-                    $html = $(templateL);
+                    $html = $(templateLeftBox);
                     this.logo = $html.find('#header-logo');
                     return $html;
                 } else
                 if ( role == 'right' ) {
-                    var $html = $(templateR);
+                    var $html = $(_.template(templateRightBox, {
+                        tipUsers: this.labelCoUsersDescr,
+                        txtAccessRights: this.txtAccessRights
+                    }));
 
                     if ( this.canBack === true ) {
                         this.btnGoBack.render($html.find('#slot-btn-back'));
-                        this.btnUsers.render($html.find('#slot-btn-users'));
                     }
 
                     if ( this.documentCaption ) {
@@ -158,6 +320,11 @@ define([
                     }
 
                     this.labelDocName = $html.find('#doc-name');
+                    $userList = $html.find('.cousers-list');
+                    $panelUsers = $html.find('.box-cousers');
+                    $btnUsers = $html.find('.btn-users');
+
+                    $panelUsers.hide();
 
                     return $html;
                 }

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

@@ -71,6 +71,11 @@
 
     &.left {
         min-width: 150px;
+        padding-left: 12px;
+    }
+
+    &.right {
+        padding-right: 12px;
     }
 
     #doc-name {
@@ -86,4 +91,93 @@
         background-size: contain;
         background-repeat: no-repeat;
     }
-}
+}
+
+#tlb-box-users {
+    display: inline-block;
+    margin-right: 10px;
+}
+
+#tlb-change-rights {
+    margin-top: 15px;
+}
+
+#slot-btn-back {
+    float: right;
+}
+
+.btn-users {
+    display: inline-flex;
+    cursor: pointer;
+    padding: 0 7px;
+
+    .icon {
+        display: inline-block;
+        background-position: -14px -197px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .caption {
+        cursor: pointer;
+        font-size: 14px;
+    }
+}
+
+//.icusers {background-position: -14px -197px;}
+//button.active   > .icusers,
+//button:active   > .icusers {background-position: -14px -197px !important;}
+
+.cousers-menu {
+    position: fixed;
+    top: @height-tabs - 8px;
+    left: 100%;
+    margin-left: -285px;
+
+    padding: 14px;
+    width: 285px;
+    font-size: 12px;
+
+    > label {
+        white-space: normal;
+    }
+
+    .cousers-list {
+        margin-top: 15px;
+
+        ul {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            max-height: 190px;
+            position: relative;
+
+            li {
+                list-style: none;
+                padding: 2px 0;
+                overflow: hidden;
+
+                &.offline, &.viewmode {
+                    display: none;
+                }
+            }
+        }
+
+        .color {
+            width: 12px;
+            height: 12px;
+            display: inline-block;
+            vertical-align: middle;
+            border: 1px solid @gray-dark;
+        }
+
+        .name {
+            display: block;
+            padding-left: 16px;
+            margin-top: -3px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            vertical-align: middle;
+        }
+    }
+}

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

@@ -61,7 +61,7 @@ define([
                 'Common.Views.Chat': {
                     'hide': _.bind(this.onHideChat, this)
                 },
-                'Statusbar': {
+                'Common.Views.Header': {
                     'click:users': _.bind(this.clickStatusbarUsers, this)
                 },
                 'LeftMenu': {

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

@@ -763,7 +763,7 @@ define([
                 if (this._isDocReady)
                     return;
 
-                Common.NotificationCenter.trigger('app:ready');
+                Common.NotificationCenter.trigger('app:ready', [this.appOptions]);
 
                 var me = this,
                     value;

apps/documenteditor/main/app/template/StatusBar.template

@@ -7,21 +7,6 @@
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
-    <!-- /** coauthoring begin **/ -->
-    <div id="status-users-ct" class="status-group dropup" style="display:none;">
-        <div class="separator short" style="margin-right: 12px; margin-left: 40px;" />
-        <div id="status-users-block" style="display:inline-block; cursor:pointer;">
-            <span id="users-icon" class="img-commonctrl" style="margin-bottom: 2px;"/>
-            <label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label>
-        </div>
-        <div id="status-users-menu" class="dropdown-menu">
-            <label style="display: block;margin-right: 14px;"><%= scope.tipUsers %></label>
-            <div id="status-users-list"></div>
-            <label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label>
-        </div>
-        <div class="separator short" style="margin-left: 10px;" />
-    </div>
-    <!-- /** coauthoring end **/ -->
     <div class="status-group" style="width:100%; text-align:center;">
         <label id="label-action" class="status-label"></label>
     </div>

apps/documenteditor/main/app/view/Statusbar.js

@@ -86,20 +86,6 @@ define([
             el: '#statusbar',
             template: _.template(template),
 
-            storeUsers: undefined,
-            
-            tplUser: ['<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">',
-                '<div class="color" style="background-color: <%= user.get("color") %>;" >',
-                    '<label class="name"><%= scope.getUserName(user.get("username")) %></label>',
-                '</div>',
-            '</li>'].join(''),
-
-            templateUserList: _.template('<ul>' +
-                '<% _.each(users, function(item) { %>' +
-                    '<%= _.template(usertpl, {user: item, scope: scope}) %>' +
-                '<% }); %>' +
-            '</ul>'),
-
             events: {
             },
 
@@ -265,37 +251,6 @@ define([
                 this.langMenu.prevTip = 'en';
                 this.langMenu.on('item:click', _.bind(_clickLanguage,this));
 
-                /** coauthoring begin **/
-                this.panelUsersList = $('#status-users-list', this.el);
-                this.storeUsers.bind({
-                    add     : _.bind(this._onAddUser, this),
-                    change  : _.bind(this._onUsersChanged, this),
-                    reset   : _.bind(this._onResetUsers, this)
-                });
-
-                this.panelUsers = $('#status-users-ct', this.el);
-                this.panelUsers.on('shown.bs.dropdown', function () {
-                    me.panelUsersList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
-                });
-
-                this.panelUsersBlock = this.panelUsers.find('#status-users-block');
-                this.panelUsersBlock.tooltip({
-                    title: this.tipAccessRights,
-                    html: true,
-                    placement: 'top'
-                });
-                this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
-
-                this.lblUserCount = this.panelUsers.find('#status-users-count');
-
-                this.lblChangeRights = this.panelUsers.find('#status-change-rights');
-                this.lblChangeRights.on('click', _.bind(this.onUsersClick, this));
-
-                this.$el.find('#status-users-menu').on('click', function() {
-                    return false;
-                });
-                /** coauthoring end **/
-
                 // Go To Page
 
                 this.txtGoToPage = new Common.UI.InputField({
@@ -375,11 +330,6 @@ define([
                 if (this.api) {
                     this.api.asc_registerCallback('asc_onCountPages',   _.bind(_onCountPages, this));
                     this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(_onCurrentPage, this));
-
-                    /** coauthoring begin **/
-                    this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onApiUsersChanged, this));
-                    this.api.asc_registerCallback('asc_onParticipantsChanged', _.bind(this.onApiUsersChanged, this));
-                    /** coauthoring end **/
                 }
 
                 return this;
@@ -390,8 +340,6 @@ define([
                 this.mode = mode;
                 this.$el.find('.el-edit')[mode.isEdit?'show':'hide']();
                 this.$el.find('.el-review')[(mode.canReview && !mode.isLightVersion)?'show':'hide']();
-                this.lblChangeRights[(!this.mode.isOffline && !this.mode.isReviewOnly && this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
-                this.panelUsers[(!this.mode.isOffline && !this.mode.isReviewOnly && this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
             },
 
             setVisible: function(visible) {
@@ -400,69 +348,6 @@ define([
                     : this.hide();
             },
 
-            /** coauthoring begin **/
-            onUsersClick: function() {
-                this.panelUsers.removeClass('open');
-                this.fireEvent('click:users', this);
-            },
-
-            onApiUsersChanged: function(users) {
-                var length = 0;
-                _.each(users, function(item){
-                    if (!item.asc_getView())
-                        length++;
-                });
-
-                this.panelUsers[(length>1 || !this.mode.isReviewOnly && this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
-                this.lblUserCount.css({
-                    'font-size': (length > 1 ? '11px' : '14px'),
-                    'font-weight': (length > 1 ? 'bold' : 'normal'),
-                    'margin-top': (length > 1 ? '0' : '-1px')
-                });
-                this.lblUserCount.text(length > 1 ? length : '+');
-                $('#users-icon').css('margin-bottom', length > 1 ? '0' : '2px');
-
-                var usertip = this.panelUsersBlock.data('bs.tooltip');
-                if (usertip) {
-                    usertip.options.title = (length > 1) ? this.tipViewUsers : this.tipAccessRights;
-                    usertip.setContent();
-                }
-                (length > 1) ? this.panelUsersBlock.attr('data-toggle', 'dropdown') : this.panelUsersBlock.removeAttr('data-toggle');
-                this.panelUsersBlock.toggleClass('dropdown-toggle', length > 1);
-                (length > 1) ? this.panelUsersBlock.off('click') : this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
-            },
-
-            _onAddUser: function(m, c, opts) {
-                if (this.panelUsersList) {
-                    this.panelUsersList.find('ul').append(_.template(this.tplUser, {user: m, scope: this}));
-                    this.panelUsersList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
-                }
-            },
-
-            _onUsersChanged: function(m) {
-                if (m.changed.online != undefined && this.panelUsersList) {
-                    this.panelUsersList.find('#status-chat-user-'+ m.get('id'))[m.changed.online?'removeClass':'addClass']('offline');
-                    this.panelUsersList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true});
-                }
-            },
-
-            _onResetUsers: function(c, opts) {
-                if (this.panelUsersList) {
-                    this.panelUsersList.html(this.templateUserList({users: c.models, usertpl: this.tplUser, scope: this}));
-                    this.panelUsersList.scroller = new Common.UI.Scroller({
-                        el              : $('#status-users-list ul'),
-                        useKeyboard     : true,
-                        minScrollbarLength  : 40,
-                        alwaysVisibleY: true
-                    });
-                }
-            },
-
-            getUserName: function (username) {
-                return Common.Utils.String.htmlEncode(username);
-            },
-            /** coauthoring end **/
-
             reloadLanguages: function(array) {
                 _.each(array, function(item) {
                     this.langMenu.addItem({
@@ -520,9 +405,6 @@ define([
 
             pageIndexText       : 'Page {0} of {1}',
             goToPageText        : 'Go to Page',
-            tipUsers            : 'Document is currently being edited by several users.',
-            tipMoreUsers        : 'and %1 users.',
-            tipShowUsers        : 'To see all users click the icon below.',
             tipFitPage          : 'Fit to Page',
             tipFitWidth         : 'Fit to Width',
             tipZoomIn           : 'Zoom In',
@@ -534,10 +416,7 @@ define([
             txtPageNumInvalid   : 'Page number invalid',
             tipReview           : 'Review',
             textTrackChanges    : 'Track Changes',
-            textChangesPanel    : 'Changes panel',
+            textChangesPanel    : 'Changes panel'
-            tipAccessRights     : 'Manage document access rights',
-            tipViewUsers        : 'View users and manage document access rights',
-            txAccessRights      : 'Change access rights'
         }, DE.Views.Statusbar || {}));
 
         DE.Views.Statusbar.LanguageDialog = Common.UI.Window.extend(_.extend({

apps/documenteditor/main/locale/en.json

@@ -143,6 +143,10 @@
   "Common.Views.Header.textBack": "Go to Documents",
   "Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
   "Common.Views.Header.txtRename": "Rename",
+  "Common.Views.Header.txtAccessRights": "Change access rights",
+  "Common.Views.Header.tipAccessRights": "Manage document access rights",
+  "Common.Views.Header.labelCoUsersDescr": "Document is currently being edited by several users.",
+  "Common.Views.Header.tipViewUsers": "View users and manage document access rights",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
   "Common.Views.History.textHideAll": "Hide detailed changes",
@@ -1289,21 +1293,15 @@
   "DE.Views.Statusbar.pageIndexText": "Page {0} of {1}",
   "DE.Views.Statusbar.textChangesPanel": "Changes Panel",
   "DE.Views.Statusbar.textTrackChanges": "Track Changes",
-  "DE.Views.Statusbar.tipAccessRights": "Manage document access rights",
   "DE.Views.Statusbar.tipFitPage": "Fit to Page",
   "DE.Views.Statusbar.tipFitWidth": "Fit to Width",
-  "DE.Views.Statusbar.tipMoreUsers": "and %1 users.",
   "DE.Views.Statusbar.tipReview": "Review",
   "DE.Views.Statusbar.tipSetDocLang": "Set Document Language",
   "DE.Views.Statusbar.tipSetLang": "Set Text Language",
   "DE.Views.Statusbar.tipSetSpelling": "Spell checking",
-  "DE.Views.Statusbar.tipShowUsers": "To see all users click the icon below.",
-  "DE.Views.Statusbar.tipUsers": "Document is currently being edited by several users.",
-  "DE.Views.Statusbar.tipViewUsers": "View users and manage document access rights",
   "DE.Views.Statusbar.tipZoomFactor": "Magnification",
   "DE.Views.Statusbar.tipZoomIn": "Zoom In",
   "DE.Views.Statusbar.tipZoomOut": "Zoom Out",
-  "DE.Views.Statusbar.txAccessRights": "Change access rights",
   "DE.Views.Statusbar.txtPageNumInvalid": "Page number invalid",
   "DE.Views.StyleTitleDialog.textHeader": "Create New Style",
   "DE.Views.StyleTitleDialog.textNextStyle": "Next paragraph style",