Merge pull request #1719 from ONLYOFFICE/feature/long_title

Long title and Bug 56759
This commit is contained in:
Julia Radzhabova 2022-05-11 23:03:19 +03:00 committed by GitHub
commit b5ab67917b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 147 additions and 79 deletions

View file

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

View file

@ -52,7 +52,7 @@ define([
Common.Views.Header = Backbone.View.extend(_.extend(function(){
var storeUsers, appConfig;
var $userList, $panelUsers, $btnUsers, $btnUserName;
var $userList, $panelUsers, $btnUsers, $btnUserName, $labelDocName;
var _readonlyRights = false;
var templateUserItem =
@ -186,11 +186,13 @@ define([
} else {
$panelUsers['hide']();
}
updateDocNamePosition(appConfig);
}
function onLostEditRights() {
_readonlyRights = true;
this.btnShare && this.btnShare.setVisible(false);
updateDocNamePosition(appConfig);
}
function onUsersClick(e) {
@ -203,27 +205,42 @@ define([
}
}
function onAppShowed(config) {
//config.isCrypted =true; //delete fore merge!
if ( this.labelDocName ) {
if ( config.isCrypted ) {
this.labelDocName.attr({'style':'text-align: left;'});
this.labelDocName.before(
'<div class="inner-box-icon crypted">' +
'<svg class="icon"><use xlink:href="#svg-icon-crypted"></use></svg>' +
'</div>');
this.imgCrypted = this.labelDocName.parent().find('.crypted');
}
function updateDocNamePosition(config) {
if ( $labelDocName && config) {
var $parent = $labelDocName.parent();
if (!config.isEdit || !config.customization || !config.customization.compactHeader) {
var $parent = this.labelDocName.parent();
var _left_width = $parent.position().left,
_right_width = $parent.next().outerWidth();
if ( _left_width < _right_width )
this.labelDocName.parent().css('padding-left', _right_width - _left_width);
else this.labelDocName.parent().css('padding-right', _left_width - _right_width);
$parent.css('padding-left', Math.max(2, _right_width - _left_width));
else
$parent.css('padding-right', Math.max(2, _left_width - _right_width));
}
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($labelDocName.css('min-width') || 50); // 2px - box-shadow
config.isCrypted && (basis += 20);
$parent.css('flex-basis', Math.ceil(basis) + '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);
}
}
@ -249,6 +266,7 @@ define([
});
me.btnShare.updateHint(me.tipAccessRights);
me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
updateDocNamePosition(appConfig);
}
if ( me.logo )
@ -279,6 +297,7 @@ define([
});
$btnUsers.on('click', onUsersClick.bind(me));
$panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
updateDocNamePosition(appConfig);
}
if (appConfig.user.guest && appConfig.canRenameAnonymous) {
@ -336,56 +355,57 @@ define([
function onFocusDocName(e){
var me = this;
me.imgCrypted && me.imgCrypted.attr('hidden', true);
me.imgCrypted && me.imgCrypted.toggleClass('hidden', true);
me.isSaveDocName =false;
if(me.withoutExt) return;
var name = me.cutDocName(me.labelDocName.val());
_.delay(function(){
me.labelDocName.val(name);
},100);
var name = me.cutDocName($labelDocName.val());
me.withoutExt = true;
_.delay(function(){
me.setDocTitle(name);
$labelDocName.select();
},100);
}
function onDocNameKeyDown(e) {
var me = this;
var name = me.labelDocName.val();
var name = $labelDocName.val();
if ( e.keyCode == Common.UI.Keys.RETURN ) {
name = name.trim();
me.isSaveDocName =true;
if ( !_.isEmpty(name) && me.cutDocName(me.documentCaption) !== name ) {
me.isSaveDocName =true;
if ( /[\t*\+:\"<>?|\\\\/]/gim.test(name) ) {
_.defer(function() {
Common.UI.error({
msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/"
, callback: function() {
_.delay(function() {
me.labelDocName.focus();
$labelDocName.focus();
me.isSaveDocName =true;
}, 50);
}
});
//me.labelDocName.blur();
})
} else
if(me.withoutExt) {
name = me.cutDocName(name);
me.options.wopi ? me.api.asc_wopi_renameFile(name) : Common.Gateway.requestRename(name);
name += me.fileExtention;
me.labelDocName.val(name);
me.withoutExt = false;
me.setDocTitle(name);
Common.NotificationCenter.trigger('edit:complete', me);
}
} else {
Common.NotificationCenter.trigger('edit:complete', me);
}
} else
if ( e.keyCode == Common.UI.Keys.ESC ) {
Common.NotificationCenter.trigger('edit:complete', this);
} else {
me.labelDocName.attr('size', name.length + me.fileExtention.length > 10 ? name.length + me.fileExtention.length : 10);
_.delay(function(){
me.setDocTitle();
},10);
}
}
@ -487,18 +507,16 @@ define([
textShare: this.textShare
}));
if ( !me.labelDocName ) {
me.labelDocName = $html.find('#rib-doc-name');
if ( !$labelDocName ) {
$labelDocName = $html.find('#rib-doc-name');
if ( me.documentCaption ) {
me.labelDocName.val(me.documentCaption);
me.setDocTitle(me.documentCaption);
}
} else {
$html.find('#rib-doc-name').hide();
}
if ( !_.isUndefined(this.options.canRename) ) {
this.setCanRename(this.options.canRename);
}
this.setCanRename(!!this.options.canRename);
if ( this.options.canBack === true ) {
me.btnGoBack.render($html.find('#slot-btn-back'));
@ -567,10 +585,11 @@ define([
if ( role == 'title' ) {
var $html = $(_.template(templateTitleBox)());
!!me.labelDocName && me.labelDocName.hide().off(); // hide document title if it was created in right box
me.labelDocName = $html.find('#title-doc-name');
me.labelDocName.val( me.documentCaption );
me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
!!$labelDocName && $labelDocName.hide().off(); // hide document title if it was created in right box
$labelDocName = $html.find('#title-doc-name');
me.setDocTitle( me.documentCaption );
me.options.wopi && $labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
if (config.user.guest && config.canRenameAnonymous) {
me.btnUserName = new Common.UI.Button({
@ -642,12 +661,8 @@ define([
if (idx>0)
this.fileExtention = this.documentCaption.substring(idx);
this.isModified && (value += '*');
if ( this.labelDocName ) {
this.labelDocName.val( value );
// this.labelDocName.attr('size', value.length);
this.setCanRename(this.options.canRename);
//this.setCanRename(true);
if ( $labelDocName ) {
this.setDocTitle( value );
}
return value;
},
@ -662,7 +677,7 @@ define([
var _name = this.documentCaption;
changed && (_name += '*');
this.labelDocName.val(_name);
this.setDocTitle(_name);
},
setCanBack: function (value, text) {
@ -670,7 +685,7 @@ define([
this.btnGoBack[value ? 'show' : 'hide']();
if (value)
this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack);
updateDocNamePosition(appConfig);
return this;
},
@ -683,7 +698,7 @@ define([
this.btnFavorite[value!==undefined && value!==null ? 'show' : 'hide']();
this.btnFavorite.changeIcon(!!value ? {next: 'btn-in-favorite'} : {curr: 'btn-in-favorite'});
this.btnFavorite.updateHint(!value ? this.textAddFavorite : this.textRemoveFavorite);
updateDocNamePosition(appConfig);
return this;
},
@ -692,12 +707,10 @@ define([
},
setCanRename: function (rename) {
//rename = true; //comment out for merge
var me = this;
me.options.canRename = rename;
if ( me.labelDocName ) {
var label = me.labelDocName;
if ( $labelDocName ) {
var label = $labelDocName;
if ( rename ) {
label.removeAttr('disabled').tooltip({
title: me.txtRename,
@ -708,17 +721,17 @@ define([
'keydown': onDocNameKeyDown.bind(this),
'focus': onFocusDocName.bind(this),
'blur': function (e) {
me.imgCrypted && me.imgCrypted.attr('hidden', false);
me.imgCrypted && me.imgCrypted.toggleClass('hidden', false);
label[0].selectionStart = label[0].selectionEnd = 0;
if(!me.isSaveDocName) {
me.labelDocName.val(me.documentCaption);
me.withoutExt = false;
me.setDocTitle(me.documentCaption);
}
},
'paste': function (e) {
setTimeout(function() {
var name = me.cutDocName(me.labelDocName.val());
me.labelDocName.val(name);
me.labelDocName.attr('size', name.length + me.fileExtention.length > 10 ? name.length + me.fileExtention.length : 10);
var name = me.cutDocName($labelDocName.val());
me.setDocTitle(name);
});
}
});
@ -737,12 +750,37 @@ define([
},
cutDocName: function(name) {
if(name.length <= this.fileExtention.length) return;
if(name.length <= this.fileExtention.length) return name;
var idx =name.length - this.fileExtention.length;
return (name.substring(idx) == this.fileExtention) ? name.substring(0, idx) : name ;
},
setDocTitle: function(name){
if(name)
$labelDocName.val(name);
else
name = $labelDocName.val();
var width = this.getTextWidth(name);
(width>=0) && $labelDocName.width(width);
if (this._showImgCrypted && width>=0) {
this.imgCrypted.toggleClass('hidden', false);
this._showImgCrypted = false;
}
},
getTextWidth: function(text) {
if (!this._testCanvas ) {
var font = ($labelDocName.css('font-size') + ' ' + $labelDocName.css('font-family')).trim();
if (font) {
var canvas = document.createElement("canvas");
this._testCanvas = canvas.getContext('2d');
this._testCanvas.font = font;
}
}
return this._testCanvas ? this._testCanvas.measureText(text).width : -1;
},
setUserName: function(name) {
this.options.userName = name;
if ( this.btnUserName ) {

View file

@ -51,6 +51,8 @@
&.right {
flex-grow: 1;
flex-shrink: 0;
overflow: hidden;
}
.status-label {
@ -94,6 +96,9 @@
flex-grow: 1;
display: flex;
justify-content: center;
padding: 4px 2px;
overflow: hidden;
flex-shrink: 0;
}
#rib-doc-name {
@ -102,13 +107,20 @@
overflow: hidden;
min-width: 50px;
text-align: center;
color: @text-toolbar-header-ie;
color: @text-toolbar-header;
background-color: transparent;
border: 0 none;
padding: 1px 5px;
cursor: default;
line-height: 32px;
line-height: 24px;
&:hover:not(:disabled),&:focus {
box-shadow: 0 0 0 1px @highlight-header-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-header-button-hover;
border-radius: 1px;
cursor: text;
}
}
#rib-save-status {
@ -487,6 +499,7 @@
display: flex;
justify-content: center;
overflow: hidden;
padding: 4px 2px;
}
#title-doc-name {
@ -495,10 +508,19 @@
overflow: hidden;
text-align: center;
font-size: 12px;
line-height: 28px;
line-height: 24px;
padding: 1px 5px;
background-color: transparent;
border: 0 none;
cursor: default;
&:hover:not(:disabled),&:focus{
box-shadow: 0 0 0 1px @highlight-header-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-header-button-hover;
border-radius: 1px;
cursor: text;
}
}
.lr-separator {
@ -510,7 +532,9 @@
.inner-box-icon.crypted {
width: 20px;
position: relative;
margin-right: 1px;
flex-shrink: 0;
flex-grow: 0;
> svg {
position: absolute;
width: 20px;

View file

@ -60,6 +60,7 @@
position: relative;
overflow: hidden;
display: flex;
flex-shrink: 1;
> ul {
padding: 4px 0 0;
@ -544,6 +545,10 @@
#rib-doc-name {
color: @text-normal-ie;
color: @text-normal;
&:hover,&:focus {
box-shadow: 0 0 0 1px @highlight-button-hover-ie;
box-shadow: 0 0 0 1px @highlight-button-hover;
}
}
&.editor-native-color {
@ -555,7 +560,7 @@
}
&.style-skip-docname .toolbar {
#box-doc-name > label {
#box-doc-name > input {
display: none;
}
}

View file

@ -473,6 +473,9 @@ define([
docInfo.put_Lang(this.editorConfig.lang);
docInfo.put_Mode(this.editorConfig.mode);
if (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.mode!==undefined)
docInfo.put_CoEditingMode(this.editorConfig.coEditing.mode);
var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
docInfo.asc_putIsEnabledMacroses(!!enable);
enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false);
@ -1564,9 +1567,8 @@ define([
Common.NotificationCenter.on('comments:showdummy', _.bind(this.onShowDummyComment, this));
// change = true by default in editor
this.appOptions.canLiveView = !!params.asc_getLiveViewerSupport() && (this.editorConfig.mode === 'view') && !isPDFViewer; // viewer: change=false when no flag canLiveViewer (i.g. old license), change=true by default when canLiveViewer==true
this.appOptions.canChangeCoAuthoring = this.appOptions.isEdit && this.appOptions.canCoAuthoring && !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false) ||
this.appOptions.canLiveView && !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false);
!this.appOptions.isEdit && !this.appOptions.isRestrictedEdit && (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===true) ;
this.loadCoAuthSettings();
this.applyModeCommonElements();

View file

@ -430,10 +430,8 @@ define([
docInfo.put_Lang(this.editorConfig.lang);
docInfo.put_Mode(this.editorConfig.mode);
var coEditMode = !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object') ? 'fast' : // fast by default
this.editorConfig.mode === 'view' && this.editorConfig.coEditing.change!==false ? 'fast' : // if can change mode in viewer - set fast for using live viewer
this.editorConfig.coEditing.mode || 'fast';
docInfo.put_CoEditingMode(coEditMode);
if (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.mode!==undefined)
docInfo.put_CoEditingMode(this.editorConfig.coEditing.mode);
var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
docInfo.asc_putIsEnabledMacroses(!!enable);
@ -1210,9 +1208,8 @@ define([
this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);
// change = true by default in editor
this.appOptions.canLiveView = !!params.asc_getLiveViewerSupport() && (this.editorConfig.mode === 'view'); // viewer: change=false when no flag canLiveViewer (i.g. old license), change=true by default when canLiveViewer==true
this.appOptions.canChangeCoAuthoring = this.appOptions.isEdit && this.appOptions.canCoAuthoring && !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false) ||
this.appOptions.canLiveView && !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false);
!this.appOptions.isEdit && !this.appOptions.isRestrictedEdit && (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===true) ;
this.loadCoAuthSettings();
this.applyModeCommonElements();

View file

@ -504,10 +504,8 @@ define([
docInfo.put_Lang(this.editorConfig.lang);
docInfo.put_Mode(this.editorConfig.mode);
var coEditMode = !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object') ? 'fast' : // fast by default
this.editorConfig.mode === 'view' && this.editorConfig.coEditing.change!==false ? 'fast' : // if can change mode in viewer - set fast for using live viewer
this.editorConfig.coEditing.mode || 'fast';
docInfo.put_CoEditingMode(coEditMode);
if (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.mode!==undefined)
docInfo.put_CoEditingMode(this.editorConfig.coEditing.mode);
var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
docInfo.asc_putIsEnabledMacroses(!!enable);
@ -1297,11 +1295,10 @@ define([
this.appOptions.canHelp = !((typeof (this.editorConfig.customization) == 'object') && this.editorConfig.customization.help===false);
this.appOptions.isRestrictedEdit = !this.appOptions.isEdit && this.appOptions.canComments;
// change = true by default in editor
this.appOptions.canLiveView = !!params.asc_getLiveViewerSupport() && (this.editorConfig.mode === 'view'); // viewer: change=false when no flag canLiveViewer (i.g. old license), change=true by default when canLiveViewer==true
// change = true by default in editor, change = false by default in viewer
this.appOptions.canChangeCoAuthoring = this.appOptions.isEdit && !(this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge || this.appOptions.isEditOle) && this.appOptions.canCoAuthoring &&
!(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false) ||
this.appOptions.canLiveView && !(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false);
!(this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===false) ||
!this.appOptions.isEdit && !this.appOptions.isRestrictedEdit && (this.editorConfig.coEditing && typeof this.editorConfig.coEditing == 'object' && this.editorConfig.coEditing.change===true) ;
if (!this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle) {
this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);