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

Refactoring header (show/hide buttons in header, resize)

Browse source
This commit is contained in:
Julia Radzhabova 2022-05-11 21:40:00 +03:00
parent 453c1e4e8d
commit db1e6c4496
2 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/main/lib/component/Mixtbar.js
View file

@ -120,6 +120,7 @@ define([
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){ Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
this.setVisible(action, visible); this.setVisible(action, visible);
}, this)); }, this));
Common.NotificationCenter.on('tab:resize', _.bind(this.onResizeTabs, this));
}, },
afterRender: function() { afterRender: function() {
@ -229,7 +230,7 @@ define([
// optsFold.timer = setTimeout(this.collapse, optsFold.timeout); // optsFold.timer = setTimeout(this.collapse, optsFold.timeout);
}, },
onResize: function(e) { onResizeTabs: function(e) {
if ( this.hasTabInvisible() ) { if ( this.hasTabInvisible() ) {
if ( !$boxTabs.parent().hasClass('short') ) if ( !$boxTabs.parent().hasClass('short') )
$boxTabs.parent().addClass('short'); $boxTabs.parent().addClass('short');
@ -237,6 +238,10 @@ define([
if ( $boxTabs.parent().hasClass('short') ) { if ( $boxTabs.parent().hasClass('short') ) {
$boxTabs.parent().removeClass('short'); $boxTabs.parent().removeClass('short');
} }
},
onResize: function(e) {
this.onResizeTabs();
this.hideMoreBtns(); this.hideMoreBtns();
this.processPanelVisible(); this.processPanelVisible();
}, },

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

@ -52,7 +52,7 @@ define([
Common.Views.Header = Backbone.View.extend(_.extend(function(){ Common.Views.Header = Backbone.View.extend(_.extend(function(){
var storeUsers, appConfig; var storeUsers, appConfig;
var $userList, $panelUsers, $btnUsers, $btnUserName; var $userList, $panelUsers, $btnUsers, $btnUserName, $labelDocName;
var _readonlyRights = false; var _readonlyRights = false;
var templateUserItem = var templateUserItem =
@ -186,11 +186,13 @@ define([
} else { } else {
$panelUsers['hide'](); $panelUsers['hide']();
} }
updateDocNamePosition(appConfig);
} }
function onLostEditRights() { function onLostEditRights() {
_readonlyRights = true; _readonlyRights = true;
this.btnShare && this.btnShare.setVisible(false); this.btnShare && this.btnShare.setVisible(false);
updateDocNamePosition(appConfig);
} }
function onUsersClick(e) { function onUsersClick(e) {
@ -203,19 +205,9 @@ define([
} }
} }
function onAppShowed(config) { function updateDocNamePosition(config) {
// config.isCrypted =true; //delete fore merge! if ( $labelDocName && config) {
if ( this.labelDocName ) { var $parent = $labelDocName.parent();
if ( config.isCrypted ) {
this.labelDocName.before(
'<div class="inner-box-icon crypted hidden">' +
'<svg class="icon"><use xlink:href="#svg-icon-crypted"></use></svg>' +
'</div>');
this.imgCrypted = this.labelDocName.parent().find('.crypted');
this._showImgCrypted = true;
}
var $parent = this.labelDocName.parent();
if (!config.isEdit || !config.customization || !config.customization.compactHeader) { if (!config.isEdit || !config.customization || !config.customization.compactHeader) {
var _left_width = $parent.position().left, var _left_width = $parent.position().left,
_right_width = $parent.next().outerWidth(); _right_width = $parent.next().outerWidth();
@ -227,14 +219,31 @@ define([
} }
if (!(config.customization && config.customization.toolbarHideFileName) && (!config.isEdit || config.customization && config.customization.compactHeader)) { if (!(config.customization && config.customization.toolbarHideFileName) && (!config.isEdit || config.customization && config.customization.compactHeader)) {
var basis = parseFloat($parent.css('padding-left') || 0) + parseFloat($parent.css('padding-right') || 0) + parseInt(this.labelDocName.css('min-width') || 50); // 2px - box-shadow var basis = parseFloat($parent.css('padding-left') || 0) + parseFloat($parent.css('padding-right') || 0) + parseInt($labelDocName.css('min-width') || 50); // 2px - box-shadow
config.isCrypted && (basis += 20); config.isCrypted && (basis += 20);
$parent.css('flex-basis', Math.ceil(basis) + 'px'); $parent.css('flex-basis', Math.ceil(basis) + 'px');
$parent.closest('.extra.right').css('flex-basis', Math.ceil(basis) + $parent.next().outerWidth() + 'px'); $parent.closest('.extra.right').css('flex-basis', Math.ceil(basis) + $parent.next().outerWidth() + 'px');
Common.NotificationCenter.trigger('tab:resize');
} }
} }
} }
function onAppShowed(config) {
// config.isCrypted =true; //delete fore merge!
if ( $labelDocName ) {
if ( config.isCrypted ) {
$labelDocName.before(
'<div class="inner-box-icon crypted hidden">' +
'<svg class="icon"><use xlink:href="#svg-icon-crypted"></use></svg>' +
'</div>');
this.imgCrypted = $labelDocName.parent().find('.crypted');
this._showImgCrypted = true;
}
updateDocNamePosition(config);
}
}
function onAppReady(mode) { function onAppReady(mode) {
appConfig = mode; appConfig = mode;
@ -257,6 +266,7 @@ define([
}); });
me.btnShare.updateHint(me.tipAccessRights); me.btnShare.updateHint(me.tipAccessRights);
me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)); me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
updateDocNamePosition(appConfig);
} }
if ( me.logo ) if ( me.logo )
@ -287,6 +297,7 @@ define([
}); });
$btnUsers.on('click', onUsersClick.bind(me)); $btnUsers.on('click', onUsersClick.bind(me));
$panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide'](); $panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
updateDocNamePosition(appConfig);
} }
if (appConfig.user.guest && appConfig.canRenameAnonymous) { if (appConfig.user.guest && appConfig.canRenameAnonymous) {
@ -347,18 +358,18 @@ define([
me.imgCrypted && me.imgCrypted.toggleClass('hidden', true); me.imgCrypted && me.imgCrypted.toggleClass('hidden', true);
me.isSaveDocName =false; me.isSaveDocName =false;
if(me.withoutExt) return; if(me.withoutExt) return;
var name = me.cutDocName(me.labelDocName.val()); var name = me.cutDocName($labelDocName.val());
me.withoutExt = true; me.withoutExt = true;
_.delay(function(){ _.delay(function(){
me.setDocTitle(name); me.setDocTitle(name);
me.labelDocName.select(); $labelDocName.select();
},100); },100);
} }
function onDocNameKeyDown(e) { function onDocNameKeyDown(e) {
var me = this; var me = this;
var name = me.labelDocName.val(); var name = $labelDocName.val();
if ( e.keyCode == Common.UI.Keys.RETURN ) { if ( e.keyCode == Common.UI.Keys.RETURN ) {
name = name.trim(); name = name.trim();
if ( !_.isEmpty(name) && me.cutDocName(me.documentCaption) !== name ) { if ( !_.isEmpty(name) && me.cutDocName(me.documentCaption) !== name ) {
@ -369,12 +380,11 @@ define([
msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/" msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/"
, callback: function() { , callback: function() {
_.delay(function() { _.delay(function() {
me.labelDocName.focus(); $labelDocName.focus();
me.isSaveDocName =true; me.isSaveDocName =true;
}, 50); }, 50);
} }
}); });
//me.labelDocName.blur();
}) })
} else } else
if(me.withoutExt) { if(me.withoutExt) {
@ -497,8 +507,8 @@ define([
textShare: this.textShare textShare: this.textShare
})); }));
if ( !me.labelDocName ) { if ( !$labelDocName ) {
me.labelDocName = $html.find('#rib-doc-name'); $labelDocName = $html.find('#rib-doc-name');
if ( me.documentCaption ) { if ( me.documentCaption ) {
me.setDocTitle(me.documentCaption); me.setDocTitle(me.documentCaption);
} }
@ -575,11 +585,11 @@ define([
if ( role == 'title' ) { if ( role == 'title' ) {
var $html = $(_.template(templateTitleBox)()); var $html = $(_.template(templateTitleBox)());
!!me.labelDocName && me.labelDocName.hide().off(); // hide document title if it was created in right box !!$labelDocName && $labelDocName.hide().off(); // hide document title if it was created in right box
me.labelDocName = $html.find('#title-doc-name'); $labelDocName = $html.find('#title-doc-name');
me.setDocTitle( me.documentCaption ); me.setDocTitle( me.documentCaption );
me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength); me.options.wopi && $labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
if (config.user.guest && config.canRenameAnonymous) { if (config.user.guest && config.canRenameAnonymous) {
me.btnUserName = new Common.UI.Button({ me.btnUserName = new Common.UI.Button({
@ -664,7 +674,7 @@ define([
if (idx>0) if (idx>0)
this.fileExtention = this.documentCaption.substring(idx); this.fileExtention = this.documentCaption.substring(idx);
this.isModified && (value += '*'); this.isModified && (value += '*');
if ( this.labelDocName ) { if ( $labelDocName ) {
this.setDocTitle( value ); this.setDocTitle( value );
} }
return value; return value;
@ -688,7 +698,7 @@ define([
this.btnGoBack[value ? 'show' : 'hide'](); this.btnGoBack[value ? 'show' : 'hide']();
if (value) if (value)
this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack); this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack);
updateDocNamePosition(appConfig);
return this; return this;
}, },
@ -701,7 +711,7 @@ define([
this.btnFavorite[value!==undefined && value!==null ? 'show' : 'hide'](); this.btnFavorite[value!==undefined && value!==null ? 'show' : 'hide']();
this.btnFavorite.changeIcon(!!value ? {next: 'btn-in-favorite'} : {curr: 'btn-in-favorite'}); this.btnFavorite.changeIcon(!!value ? {next: 'btn-in-favorite'} : {curr: 'btn-in-favorite'});
this.btnFavorite.updateHint(!value ? this.textAddFavorite : this.textRemoveFavorite); this.btnFavorite.updateHint(!value ? this.textAddFavorite : this.textRemoveFavorite);
updateDocNamePosition(appConfig);
return this; return this;
}, },
@ -712,8 +722,8 @@ define([
setCanRename: function (rename) { setCanRename: function (rename) {
var me = this; var me = this;
me.options.canRename = rename; me.options.canRename = rename;
if ( me.labelDocName ) { if ( $labelDocName ) {
var label = me.labelDocName; var label = $labelDocName;
if ( rename ) { if ( rename ) {
label.removeAttr('disabled').tooltip({ label.removeAttr('disabled').tooltip({
title: me.txtRename, title: me.txtRename,
@ -733,7 +743,7 @@ define([
}, },
'paste': function (e) { 'paste': function (e) {
setTimeout(function() { setTimeout(function() {
var name = me.cutDocName(me.labelDocName.val()); var name = me.cutDocName($labelDocName.val());
me.setDocTitle(name); me.setDocTitle(name);
}); });
} }
@ -761,11 +771,11 @@ define([
setDocTitle: function(name){ setDocTitle: function(name){
if(name) if(name)
this.labelDocName.val(name); $labelDocName.val(name);
else else
name = this.labelDocName.val(); name = $labelDocName.val();
var width = this.getTextWidth(name); var width = this.getTextWidth(name);
(width>=0) && this.labelDocName.width(width); (width>=0) && $labelDocName.width(width);
if (this._showImgCrypted && width>=0) { if (this._showImgCrypted && width>=0) {
this.imgCrypted.toggleClass('hidden', false); this.imgCrypted.toggleClass('hidden', false);
this._showImgCrypted = false; this._showImgCrypted = false;
@ -774,7 +784,7 @@ define([
getTextWidth: function(text) { getTextWidth: function(text) {
if (!this._testCanvas ) { if (!this._testCanvas ) {
var font = (this.labelDocName.css('font-size') + ' ' + this.labelDocName.css('font-family')).trim(); var font = ($labelDocName.css('font-size') + ' ' + $labelDocName.css('font-family')).trim();
if (font) { if (font) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
this._testCanvas = canvas.getContext('2d'); this._testCanvas = canvas.getContext('2d');