[DE] moved "coauthoring users" panel to toolbar

This commit is contained in:
Maxim Kadushkin 2017-03-13 19:29:05 +03:00
parent 52a8419371
commit 10a55236d0
7 changed files with 286 additions and 163 deletions

View file

@ -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" id="slot-btn-users"></span>' +
// '<span class="btn-slot text" 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>' +
'<div id="header-logo"></div>'
'</section>';
var templateLeftBox = '<section>' +
'<div id="header-logo"></div>'
'</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({
cls: 'btn-toolbar',
iconCls: 'img-commonctrl review-next'
storeUsers = DE.getCollection('Common.Collections.Users')
storeUsers.bind({
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;
}

View file

@ -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;
}
}
}

View file

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

View file

@ -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;

View file

@ -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>

View file

@ -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',
tipAccessRights : 'Manage document access rights',
tipViewUsers : 'View users and manage document access rights',
txAccessRights : 'Change access rights'
textChangesPanel : 'Changes panel'
}, DE.Views.Statusbar || {}));
DE.Views.Statusbar.LanguageDialog = Common.UI.Window.extend(_.extend({

View file

@ -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",