Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Add share and users buttons to header

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-03 00:00:46 +03:00
parent 4a5ce7f6c4
commit a149fb57c3
6 changed files with 127 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
apps/common/main/lib/view/Header.js
View file

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

3
apps/common/main/resources/img/header/buttons.svg
View file

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

41
apps/common/main/resources/less/header.less
View file

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

10
apps/common/main/resources/less/toolbar.less
View file

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

1
apps/documenteditor/main/app/controller/Main.js
View file

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

2
apps/documenteditor/main/locale/en.json
View file

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