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

refactoring

Browse source
This commit is contained in:
Maxim Kadushkin 2018-02-03 16:10:38 +03:00
parent c8e9fe9a63
commit f328e83a4f
14 changed files with 108 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,7 @@ define([
var templateRightBox = '<section>' + var templateRightBox = '<section>' +
'<section id="box-doc-name">' + '<section id="box-doc-name">' +
'<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false"></input>' + '<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
'</section>' + '</section>' +
'<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' + '<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
'<div class="hedset">' + '<div class="hedset">' +
@ -102,6 +102,17 @@ define([
'<div id="header-logo"><i /></div>' + '<div id="header-logo"><i /></div>' +
'</section>'; '</section>';
var templateTitleBox = '<section id="box-document-title">' +
'<div class="hedset">' +
'<div class="btn-slot" id="slot-btn-dt-save"></div>' +
'<div class="btn-slot" id="slot-btn-dt-print"></div>' +
'<div class="btn-slot" id="slot-btn-dt-undo"></div>' +
'<div class="btn-slot" id="slot-btn-dt-redo"></div>' +
'</div>' +
'<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
'<label id="title-user-name" style="pointer-events: none;"></label>' +
'</section>';
function onAddUser(model, collection, opts) { function onAddUser(model, collection, opts) {
if ( $userList ) { if ( $userList ) {
var $ul = $userList.find('ul'); var $ul = $userList.find('ul');
@ -346,9 +357,7 @@ define([
return { return {
options: { options: {
branding: {}, branding: {},
headerCaption: 'Default Caption',
documentCaption: '', documentCaption: '',
userName: '',
canBack: false canBack: false
}, },
@ -366,10 +375,7 @@ define([
var me = this; var me = this;
this.options = this.options ? _({}).extend(this.options, options) : options; this.options = this.options ? _({}).extend(this.options, options) : options;
this.headerCaption = this.options.headerCaption;
this.documentCaption = this.options.documentCaption; this.documentCaption = this.options.documentCaption;
this.userName = this.options.userName;
this.canBack = this.options.canBack;
this.branding = this.options.customization; this.branding = this.options.customization;
this.isModified = false; this.isModified = false;
@ -399,6 +405,15 @@ define([
}, },
getPanel: function (role, config) { getPanel: function (role, config) {
var me = this;
function createTitleButton(iconid, slot) {
return (new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon ' + iconid
})).render(slot);
}
if ( role == 'left' && (!config || !config.isDesktopApp)) { if ( role == 'left' && (!config || !config.isDesktopApp)) {
$html = $(templateLeftBox); $html = $(templateLeftBox);
this.logo = $html.find('#header-logo'); this.logo = $html.find('#header-logo');
@ -417,103 +432,41 @@ define([
textSaveEnd: this.textSaveEnd textSaveEnd: this.textSaveEnd
})); }));
if ( this.labelDocName ) this.labelDocName.off(); if ( !me.labelDocName ) {
this.labelDocName = $html.find('#rib-doc-name'); me.labelDocName = $html.find('#rib-doc-name');
// this.labelDocName.attr('maxlength', 50); // this.labelDocName.attr('maxlength', 50);
this.labelDocName.text = function (text) { me.labelDocName.text = function (text) {
this.val(text).attr('size', text.length); this.val(text).attr('size', text.length);
} }
if ( this.documentCaption ) { if ( me.documentCaption ) {
this.labelDocName.text( this.documentCaption ); me.labelDocName.text(me.documentCaption);
}
} }
if ( !_.isUndefined(this.options.canRename) ) { if ( !_.isUndefined(this.options.canRename) ) {
this.setCanRename(this.options.canRename); this.setCanRename(this.options.canRename);
} }
$saveStatus = $html.find('#rib-save-status'); // $saveStatus = $html.find('#rib-save-status');
$saveStatus.hide(); $html.find('#rib-save-status').hide();
// if ( config.isOffline ) $saveStatus = false;
if ( config && config.isDesktopApp ) { if ( this.options.canBack === true ) {
$html.addClass('desktop'); me.btnGoBack.render($html.find('#slot-btn-back'));
// $html.find('#slot-btn-back').hide();
this.labelDocName.hide();
//TODO: for new design representation only
this.labelDocName = $('#box-document-title > #title-doc-name');
this.labelDocName.text = function (str) {this.val(str);};
this.labelDocName.text( this.documentCaption );
this.labelUserName = $('#box-document-title > #title-user-name');
this.labelUserName.text( this.userName );
if ( config.canPrint ) {
this.btnPrint = new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon svg-btn-print'
});
this.btnPrint.render($('#box-document-title #slot-btn-dt-print'));
}
this.btnSave = new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon svg-btn-save'
});
this.btnSave.render($('#box-document-title #slot-btn-dt-save'));
this.btnUndo = new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon svg-btn-undo'
});
this.btnUndo.render($('#box-document-title #slot-btn-dt-undo'));
this.btnRedo = new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon svg-btn-redo'
});
this.btnRedo.render($('#box-document-title #slot-btn-dt-redo'));
$('.toolbar-fullview-panel').addClass('new-doctitle-offset');
/***********/
if ( config.isOffline )
$saveStatus = false;
}
// else {
if ( this.canBack === true ) {
this.btnGoBack.render($html.find('#slot-btn-back'));
} else { } else {
$html.find('#slot-btn-back').hide(); $html.find('#slot-btn-back').hide();
} }
// }
if ( !config.isEdit ) { if ( !config.isEdit ) {
if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline ) { if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline )
this.btnDownload = new Common.UI.Button({ this.btnDownload = createTitleButton('svg-btn-download', $html.find('#slot-hbtn-download'));
cls: 'btn-header',
iconCls: 'svgicon svg-btn-download'
});
this.btnDownload.render($html.find('#slot-hbtn-download')); if ( config.canPrint )
} this.btnPrint = createTitleButton('svg-btn-print', $html.find('#slot-hbtn-print'));
if ( config.canPrint ) { if ( config.canEdit && config.canRequestEditRights )
this.btnPrint = new Common.UI.Button({ this.btnEdit = createTitleButton('svg-btn-edit', $html.find('#slot-hbtn-edit'));
cls: 'btn-header',
iconCls: 'svgicon svg-btn-print'
});
this.btnPrint.render($html.find('#slot-hbtn-print'));
}
if ( config.canEdit && config.canRequestEditRights ) {
(this.btnEdit = new Common.UI.Button({
cls: 'btn-header',
iconCls: 'svgicon svg-btn-edit'
})).render($html.find('#slot-hbtn-edit'));
}
} }
$userList = $html.find('.cousers-list'); $userList = $html.find('.cousers-list');
@ -522,6 +475,27 @@ define([
$panelUsers.hide(); $panelUsers.hide();
return $html;
} else
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.text = function (str) {this.val(str);}; // redefine text function to lock temporaly rename docuemnt option
me.labelDocName.text( me.documentCaption );
me.labelUserName = $('> #title-user-name', $html);
me.setUserName(me.options.userName);
if ( config.canPrint && config.isEdit ) {
me.btnPrint = createTitleButton('svg-btn-print', $('#slot-btn-dt-print', $html));
}
me.btnSave = createTitleButton('svg-btn-save', $('#slot-btn-dt-save', $html));
me.btnUndo = createTitleButton('svg-btn-undo', $('#slot-btn-dt-undo', $html));
me.btnRedo = createTitleButton('svg-btn-redo', $('#slot-btn-dt-redo', $html));
return $html; return $html;
} }
}, },
@ -546,16 +520,6 @@ define([
} }
}, },
setHeaderCaption: function (value) {
this.headerCaption = value;
return value;
},
getHeaderCaption: function () {
return this.headerCaption;
},
setDocumentCaption: function(value) { setDocumentCaption: function(value) {
!value && (value = ''); !value && (value = '');
@ -585,13 +549,14 @@ define([
}, },
setCanBack: function (value) { setCanBack: function (value) {
this.canBack = value; this.options.canBack = value;
this.btnGoBack[value ? 'show' : 'hide'](); this.btnGoBack[value ? 'show' : 'hide']();
return this;
}, },
getCanBack: function () { getCanBack: function () {
return this.canBack; return this.options.canBack;
}, },
setCanRename: function (rename) { setCanRename: function (rename) {
@ -642,9 +607,16 @@ define([
} }
}, },
setUserName: function (value) { setUserName: function(name) {
this.userName = value.fullname; if ( !!this.labelUserName ) {
return value; if ( !!name ) {
this.labelUserName.text(name).show();
} else this.labelUserName.hide();
} else {
this.options.userName = name;
}
return this;
}, },
getButton: function(type) { getButton: function(type) {

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

@ -53,11 +53,6 @@
&.right { &.right {
flex-grow: 1; flex-grow: 1;
min-width: 100px; min-width: 100px;
.desktop {
padding: 10px 0;
text-align: right;
}
} }
.status-label { .status-label {

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

@ -306,8 +306,8 @@ define([
this.plugins = this.editorConfig.plugins; this.plugins = this.editorConfig.plugins;
appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header'); appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header');
appHeader.setCanBack(this.appOptions.canBackToFolder === true); appHeader.setCanBack(this.appOptions.canBackToFolder === true)
appHeader.setUserName(this.appOptions.user); .setUserName(this.appOptions.user.fullname);
if (this.editorConfig.lang) if (this.editorConfig.lang)
this.api.asc_setLocale(this.editorConfig.lang); this.api.asc_setLocale(this.editorConfig.lang);

7
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -124,8 +124,11 @@ define([
if ( panel ) panel.height = Common.Utils.InternalSettings.get('toolbar-height-compact'); if ( panel ) panel.height = Common.Utils.InternalSettings.get('toolbar-height-compact');
} }
if ( config.isDesktopApp ) { if ( config.isDesktopApp && config.isEdit ) {
me.viewport.vlayout.getItem('doc-title').el.show(); var $title = me.viewport.vlayout.getItem('title').el;
$title.html(me.header.getPanel('title', config)).show();
$('.toolbar-fullview-panel').addClass('new-doctitle-offset');
} }
}, },

11
apps/documenteditor/main/app/template/Viewport.template
View file

@ -3,16 +3,7 @@
<section class="layout-ct"> <section class="layout-ct">
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div> <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
</section> </section>
<section id="box-document-title" class="layout-item"> <section id="title" class="layout-item"></section>
<div class="hedset">
<div class="btn-slot" id="slot-btn-dt-save"></div>
<div class="btn-slot" id="slot-btn-dt-print"></div>
<div class="btn-slot" id="slot-btn-dt-undo"></div>
<div class="btn-slot" id="slot-btn-dt-redo"></div>
</div>
<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
<label id="title-user-name"></label>
</section>
<div id="toolbar" class="layout-item"></div> <div id="toolbar" class="layout-item"></div>
<div class="layout-item middle"> <div class="layout-item middle">
<div id="viewport-hbox-layout" class="layout-ct hbox"> <div id="viewport-hbox-layout" class="layout-ct hbox">

4
apps/documenteditor/main/app/view/Viewport.js
View file

@ -84,8 +84,8 @@ define([
box: $container, box: $container,
items: [ items: [
{ {
el: $container.find(' > .layout-item#box-document-title').hide(), el: $container.find('> .layout-item#title').hide(),
alias: 'doc-title', alias: 'title',
height: Common.Utils.InternalSettings.get('doc-title-height') height: Common.Utils.InternalSettings.get('doc-title-height')
}, },
{ {

4
apps/presentationeditor/main/app/controller/Main.js
View file

@ -287,8 +287,8 @@ define([
this.plugins = this.editorConfig.plugins; this.plugins = this.editorConfig.plugins;
appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header'); appHeader = this.getApplication().getController('Viewport').getView('Common.Views.Header');
appHeader.setCanBack(this.appOptions.canBackToFolder === true); appHeader.setCanBack(this.appOptions.canBackToFolder === true)
appHeader.setUserName(this.appOptions.user); .setUserName(this.appOptions.user.fullname);
if (this.editorConfig.lang) if (this.editorConfig.lang)
this.api.asc_setLocale(this.editorConfig.lang); this.api.asc_setLocale(this.editorConfig.lang);

7
apps/presentationeditor/main/app/controller/Viewport.js
View file

@ -126,8 +126,11 @@ define([
me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact'); me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact');
} }
if ( config.isDesktopApp ) { if ( config.isDesktopApp && config.isEdit ) {
me.viewport.vlayout.getItem('doc-title').el.show(); var $title = me.viewport.vlayout.getItem('title').el;
$title.html(me.header.getPanel('title', config)).show();
$('.toolbar-fullview-panel').addClass('new-doctitle-offset');
} }
}, },

11
apps/presentationeditor/main/app/template/Viewport.template
View file

@ -4,16 +4,7 @@
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div> <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
</section> </section>
<div id="viewport-vbox-layout" class="layout-ct vbox"> <div id="viewport-vbox-layout" class="layout-ct vbox">
<section id="box-document-title" class="layout-item"> <section id="title" class="layout-item"></section>
<div class="hedset">
<div class="btn-slot" id="slot-btn-dt-save"></div>
<div class="btn-slot" id="slot-btn-dt-print"></div>
<div class="btn-slot" id="slot-btn-dt-undo"></div>
<div class="btn-slot" id="slot-btn-dt-redo"></div>
</div>
<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
<label id="title-user-name"></label>
</section>
<div id="toolbar" class="layout-item"></div> <div id="toolbar" class="layout-item"></div>
<div class="layout-item middle"> <div class="layout-item middle">
<div id="viewport-hbox-layout" class="layout-ct hbox"> <div id="viewport-hbox-layout" class="layout-ct hbox">

4
apps/presentationeditor/main/app/view/Viewport.js
View file

@ -87,8 +87,8 @@ define([
box: $container, box: $container,
items: [ items: [
{ {
el: $container.find(' > .layout-item#box-document-title').hide(), el: $container.find('> .layout-item#title').hide(),
alias: 'doc-title', alias: 'title',
height: Common.Utils.InternalSettings.get('doc-title-height') height: Common.Utils.InternalSettings.get('doc-title-height')
}, },
{ {

4
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -309,8 +309,8 @@ define([
this.plugins = this.editorConfig.plugins; this.plugins = this.editorConfig.plugins;
this.headerView = this.getApplication().getController('Viewport').getView('Common.Views.Header'); this.headerView = this.getApplication().getController('Viewport').getView('Common.Views.Header');
this.headerView.setCanBack(this.appOptions.canBackToFolder === true); this.headerView.setCanBack(this.appOptions.canBackToFolder === true)
this.headerView.setUserName(this.appOptions.user); .setUserName(this.appOptions.user.fullname);
var value = Common.localStorage.getItem("sse-settings-reg-settings"); var value = Common.localStorage.getItem("sse-settings-reg-settings");
if (value!==null) if (value!==null)

7
apps/spreadsheeteditor/main/app/controller/Viewport.js
View file

@ -101,8 +101,11 @@ define([
me.viewport.vlayout.getItem('toolbar').height = 41; me.viewport.vlayout.getItem('toolbar').height = 41;
} }
if ( config.isDesktopApp ) { if ( config.isDesktopApp && config.isEdit ) {
me.viewport.vlayout.getItem('doc-title').el.show(); var $title = me.viewport.vlayout.getItem('title').el;
$title.html(me.header.getPanel('title', config)).show();
$('.toolbar-fullview-panel').addClass('new-doctitle-offset');
} }
}, },

11
apps/spreadsheeteditor/main/app/template/Viewport.template
View file

@ -3,16 +3,7 @@
<section class="layout-ct"> <section class="layout-ct">
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div> <div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
</section> </section>
<section id="box-document-title" class="layout-item"> <section id="title" class="layout-item"></section>
<div class="hedset">
<div class="btn-slot" id="slot-btn-dt-save"></div>
<div class="btn-slot" id="slot-btn-dt-print"></div>
<div class="btn-slot" id="slot-btn-dt-undo"></div>
<div class="btn-slot" id="slot-btn-dt-redo"></div>
</div>
<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false">
<label id="title-user-name"></label>
</section>
<div id="toolbar" class="layout-item"></div> <div id="toolbar" class="layout-item"></div>
<div class="layout-item"> <div class="layout-item">
<div id="viewport-hbox-layout" class="layout-ct hbox"> <div id="viewport-hbox-layout" class="layout-ct hbox">

4
apps/spreadsheeteditor/main/app/view/Viewport.js
View file

@ -87,8 +87,8 @@ define([
box: $container, box: $container,
items: [ items: [
{ {
el: $container.find(' > .layout-item#box-document-title').hide(), el: $container.find('> .layout-item#title').hide(),
alias: 'doc-title', alias: 'title',
height: Common.Utils.InternalSettings.get('doc-title-height') height: Common.Utils.InternalSettings.get('doc-title-height')
}, },
{ {