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

[DE] Added print, save, undo, redo buttons and user name to header panel.

Browse source
This commit is contained in:
Julia Radzhabova 2018-01-24 13:57:58 +03:00
parent 826ac6aef1
commit bb36c63c13
8 changed files with 161 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/api/documents/api.js
View file

@ -358,7 +358,7 @@
if (!!result && result.length) {
if (result[1] == 'desktop') {
_config.editorConfig.targetApp = result[1];
_config.editorConfig.canBackToFolder = false;
// _config.editorConfig.canBackToFolder = false;
_config.editorConfig.canUseHistory = false;
if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
_config.editorConfig.customization.about = false;

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

@ -260,6 +260,34 @@ define([
}
}
if ( me.btnPrint ) {
me.btnPrint.updateHint(me.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
me.btnPrint.on('click', function (e) {
me.fireEvent('print', me);
});
}
if ( me.btnSave ) {
me.btnSave.updateHint(me.tipSave + Common.Utils.String.platformKey('Ctrl+S'));
me.btnSave.on('click', function (e) {
me.fireEvent('save', me);
});
}
if ( me.btnUndo ) {
me.btnUndo.updateHint(me.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
me.btnUndo.on('click', function (e) {
me.fireEvent('undo', me);
});
}
if ( me.btnRedo ) {
me.btnRedo.updateHint(me.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
me.btnRedo.on('click', function (e) {
me.fireEvent('redo', me);
});
}
if ( !mode.isEdit ) {
if ( me.btnDownload ) {
me.btnDownload.updateHint(me.tipDownload);
@ -268,13 +296,6 @@ define([
});
}
if ( me.btnPrint ) {
me.btnPrint.updateHint(me.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
me.btnPrint.on('click', function (e) {
me.fireEvent('print', me);
});
}
if ( me.btnEdit ) {
me.btnEdit.updateHint(me.tipGoEdit);
me.btnEdit.on('click', function (e) {
@ -325,6 +346,7 @@ define([
branding: {},
headerCaption: 'Default Caption',
documentCaption: '',
userName: '',
canBack: false
},
@ -344,6 +366,7 @@ define([
this.headerCaption = this.options.headerCaption;
this.documentCaption = this.options.documentCaption;
this.userName = this.options.userName;
this.canBack = this.options.canBack;
this.branding = this.options.customization;
this.isModified = false;
@ -411,7 +434,7 @@ define([
if ( config && config.isDesktopApp ) {
$html.addClass('desktop');
$html.find('#slot-btn-back').hide();
// $html.find('#slot-btn-back').hide();
this.labelDocName.hide();
//TODO: for new design representation only
@ -419,18 +442,49 @@ define([
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 {
}
// else {
if ( this.canBack === true ) {
this.btnGoBack.render($html.find('#slot-btn-back'));
} else {
$html.find('#slot-btn-back').hide();
}
}
// }
if ( !config.isEdit ) {
if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline ) {
@ -576,6 +630,16 @@ define([
}
},
setUserName: function (value) {
this.userName = value.fullname;
return value;
},
getButton: function(type) {
if (type == 'save')
return this.btnSave;
},
textBack: 'Go to Documents',
txtRename: 'Rename',
textSaveBegin: 'Saving...',
@ -588,7 +652,10 @@ define([
tipViewUsers: 'View users and manage document access rights',
tipDownload: 'Download file',
tipPrint: 'Print file',
tipGoEdit: 'Edit current file'
tipGoEdit: 'Edit current file',
tipSave: 'Save',
tipUndo: 'Undo',
tipRedo: 'Redo'
}
}(), Common.Views.Header || {}))
});

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

@ -32,4 +32,19 @@
<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
</symbol>
<symbol id="svg-btn-save" viewBox="0 0 20 20">
<polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
</symbol>
<symbol id="svg-btn-undo" viewBox="0 0 20 20">
<polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
</symbol>
<symbol id="svg-btn-redo" viewBox="0 0 20 20">
<polygon points="11.738,7.891 6.434,13.195 5.02,14.859 4.5,17.5 7,17.5 8.555,15.566 13.859,10.137"/>
<path d="M15.273,8.598l-2.121-2.121l1.414-1.414c0.391-0.391,1.023-0.391,1.414,0l0.707,0.707
c0.391,0.391,0.391,1.023,0,1.414L15.273,8.598z"/>
</symbol>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

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

@ -243,16 +243,62 @@
#box-document-title {
background-color: @tabs-bg-color;
display: flex;
.btn-slot {
display: inline-block;
}
.btn-header {
height: 26px;
padding: 3px 6px;
&[disabled],
&.disabled {
opacity: 0.65;
}
&:hover {
&:not(.disabled) {
background-color: rgba(255,255,255,0.2);
}
}
&:active {
&:not(.disabled) {
background-color: rgba(0,0,0,0.2);
}
}
}
svg.icon {
fill: #fff;
}
#title-doc-name {
flex-grow: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
font-size: 12px;
width: 100%;
height: 100%;
color: #d3d9e3;
background-color: transparent;
border: 0 none;
cursor: default;
}
#title-user-name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: right;
font-size: 12px;
width: 150px;
height: 100%;
padding: 4px 12px 4px 0;
color: #d3d9e3;
background-color: transparent;
border: 0 none;

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

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

5
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -119,6 +119,11 @@ define([
var _main = this.getApplication().getController('Main');
_main.onPrint();
},
'save': function (opts) {
this.api.asc_Save();
},
'undo': this.onUndo,
'redo': this.onRedo,
'downloadas': function (opts) {
var _main = this.getApplication().getController('Main');
var _file_type = _main.document.fileType,

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

@ -1,10 +1,14 @@
<div class="layout-region">
<div id="viewport-vbox-layout" class="layout-ct vbox">
<section id="box-document-title" class="layout-item">
<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">
</section>
<section class="layout-ct">
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
<label id="title-user-name"></label>
</section>
<div id="toolbar" class="layout-item"></div>
<div class="layout-item middle">

7
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -2037,6 +2037,13 @@ define([
this.toolbarControls.push(btnsave);
btnsave.setDisabled(this.btnsSave[0].isDisabled());
}
btnsave = DE.getController('Viewport').getView('Common.Views.Header').getButton('save');
if (btnsave && this.btnsSave) {
this.btnsSave.push(btnsave);
this.toolbarControls.push(btnsave);
btnsave.setDisabled(this.btnsSave[0].isDisabled());
}
},
onToolbarAfterRender: function(toolbar) {