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

[Header] Refactoring sharing button

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-04 14:51:13 +03:00
parent b9d2c851d1
commit 34e0c295e1
4 changed files with 129 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
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, $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-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 class="btn-slot" id="slot-btn-share"></div>' +
'</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) {

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

@ -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%;
.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;
}
}
width: auto;
.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 {
opacity: @component-disabled-opacity;
pointer-events: none;
&:active:not(:disabled), &.active:not(:disabled) {
.caption {
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;

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

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

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

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