[DE] repaired header
This commit is contained in:
Maxim Kadushkin
parent
73364f7f8b
commit
a3a896ac79
|
|
@ -50,214 +50,216 @@ define([
|
|||
'common/main/lib/view/RenameDialog'
|
||||
], function (Backbone, headerTemplate) { 'use strict';
|
||||
|
||||
Common.Views.Header = Backbone.View.extend(_.extend({
|
||||
options : {
|
||||
branding: {},
|
||||
headerCaption: 'Default Caption',
|
||||
headerDeveloper: 'DEVELOPER MODE',
|
||||
documentCaption: '',
|
||||
canBack: false
|
||||
},
|
||||
Common.Views.Header = Backbone.View.extend(_.extend(function(){
|
||||
var templateR = '<section>' +
|
||||
'<label id="doc-name"></label>' +
|
||||
'<div class="elset">' +
|
||||
'<span class="btn-slot split" id="slot-btn-back"></span>' +
|
||||
'<span class="btn-slot" id="slot-btn-users"></span>' +
|
||||
'</div>' +
|
||||
'</section>';
|
||||
|
||||
el: '#header',
|
||||
var templateL = '<section>' +
|
||||
'<div id="header-logo"></div>'
|
||||
'</section>';
|
||||
return {
|
||||
options: {
|
||||
branding: {},
|
||||
headerCaption: 'Default Caption',
|
||||
// headerDeveloper: 'DEVELOPER MODE',
|
||||
documentCaption: '',
|
||||
canBack: false
|
||||
},
|
||||
|
||||
// Compile our stats template
|
||||
template: _.template(headerTemplate),
|
||||
el: '#header',
|
||||
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
'click #header-logo': function(e) {
|
||||
var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
|
||||
this.branding.logo.url : 'http://www.onlyoffice.com';
|
||||
// Compile our stats template
|
||||
template: _.template(headerTemplate),
|
||||
|
||||
var newDocumentPage = window.open(_url);
|
||||
newDocumentPage && newDocumentPage.focus();
|
||||
}
|
||||
},
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
// 'click #header-logo': function (e) {}
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
this.options = this.options ? _({}).extend(this.options, options) : options;
|
||||
initialize: function (options) {
|
||||
var me = this;
|
||||
this.options = this.options ? _({}).extend(this.options, options) : options;
|
||||
|
||||
this.headerCaption = this.options.headerCaption;
|
||||
this.headerDeveloper = this.txtHeaderDeveloper;
|
||||
this.documentCaption = this.options.documentCaption;
|
||||
this.canBack = this.options.canBack;
|
||||
this.branding = this.options.customization;
|
||||
},
|
||||
this.headerCaption = this.options.headerCaption;
|
||||
// this.headerDeveloper = this.txtHeaderDeveloper;
|
||||
this.documentCaption = this.options.documentCaption;
|
||||
this.canBack = this.options.canBack;
|
||||
this.branding = this.options.customization;
|
||||
|
||||
render: function () {
|
||||
$(this.el).html(this.template({
|
||||
headerCaption : this.headerCaption,
|
||||
headerDeveloper : this.headerDeveloper,
|
||||
documentCaption : Common.Utils.String.htmlEncode(this.documentCaption),
|
||||
canBack : this.canBack,
|
||||
textBack : this.textBack
|
||||
}));
|
||||
me.btnGoBack = new Common.UI.Button({
|
||||
id: 'btn-goback',
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'img-commonctrl review-prev',
|
||||
split: true,
|
||||
menu: new Common.UI.Menu({
|
||||
style: 'min-width: 60px;',
|
||||
items: [
|
||||
{caption: me.openNewTabText}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
var menuNewTab = new Common.UI.MenuItem({
|
||||
caption : this.openNewTabText
|
||||
}).on('click', function(item, e) {
|
||||
Common.NotificationCenter.trigger('goback', true);
|
||||
Common.component.Analytics.trackEvent('Back to Folder');
|
||||
});
|
||||
this.gotoDocsMenu = new Common.UI.Menu({
|
||||
style: 'min-width: 100px;',
|
||||
items: [
|
||||
menuNewTab
|
||||
]
|
||||
});
|
||||
},
|
||||
me.btnUsers = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'img-commonctrl review-next'
|
||||
});
|
||||
|
||||
setVisible: function(visible) {
|
||||
visible
|
||||
? this.show()
|
||||
: this.hide();
|
||||
},
|
||||
(new Promise(function (accept, reject) {
|
||||
Common.NotificationCenter.on('app:ready', function() { accept(); });
|
||||
})).then(function(){
|
||||
me.btnGoBack.updateHint(me.textBack);
|
||||
me.btnUsers.updateHint('Users');
|
||||
|
||||
setBranding: function(value) {
|
||||
var element;
|
||||
me.btnGoBack.on('click', function (e) {
|
||||
me.fireEvent('go:back', ['page:current']);
|
||||
});
|
||||
me.btnGoBack.menu.on('item:click', function (e) {
|
||||
me.fireEvent('go:back', ['page:new']);
|
||||
})
|
||||
|
||||
this.branding = value;
|
||||
me.logo.on('click', function (e) {
|
||||
var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
|
||||
this.branding.logo.url : 'http://www.onlyoffice.com';
|
||||
|
||||
if (value && value.logo && value.logo.image) {
|
||||
element = $('#header-logo');
|
||||
if (element) {
|
||||
element.html('<img src="'+value.logo.image+'" style="max-width:86px; max-height:20px; margin: 0 8px 0 15px;"/>');
|
||||
element.css({'background-image': 'none', width: 'auto'});
|
||||
}
|
||||
}
|
||||
var newDocumentPage = window.open(_url);
|
||||
newDocumentPage && newDocumentPage.focus();
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// if (value && value.backgroundColor) {
|
||||
// element = Ext.select(".common-header");
|
||||
// if (element) {
|
||||
// element.setStyle("background-image", "none");
|
||||
// element.setStyle("background-color", value.backgroundColor);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// if (value && value.textColor) {
|
||||
// var allSpanEl = element.select('span');
|
||||
// allSpanEl.each(function(el){
|
||||
// el.setStyle("color", value.textColor);
|
||||
// });
|
||||
// }
|
||||
},
|
||||
render: function (el, role) {
|
||||
$(el).html(this.getPanel(role));
|
||||
|
||||
setHeaderCaption: function(value) {
|
||||
this.headerCaption = value;
|
||||
return this;
|
||||
},
|
||||
|
||||
var caption = $('#header-caption > div');
|
||||
getPanel: function (role) {
|
||||
if ( role == 'left' ) {
|
||||
$html = $(templateL);
|
||||
this.logo = $html.find('#header-logo');
|
||||
return $html;
|
||||
} else
|
||||
if ( role == 'right' ) {
|
||||
var $html = $(templateR);
|
||||
|
||||
if (caption)
|
||||
caption.html(value);
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
getHeaderCaption: function() {
|
||||
return this.headerCaption;
|
||||
},
|
||||
|
||||
setDocumentCaption: function(value, applyOnly) {
|
||||
if (_.isUndefined(applyOnly)) {
|
||||
this.documentCaption = value;
|
||||
}
|
||||
|
||||
if (!value)
|
||||
value = '';
|
||||
|
||||
var dc = $('#header-documentcaption div');
|
||||
if (dc)
|
||||
dc.html(Common.Utils.String.htmlEncode(value));
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
getDocumentCaption: function() {
|
||||
return this.documentCaption;
|
||||
},
|
||||
|
||||
setCanBack: function(value) {
|
||||
this.canBack = value;
|
||||
var back = $('#header-back');
|
||||
|
||||
if (back) {
|
||||
back.off('mouseup');
|
||||
back.css('display', value ? 'table-cell' : 'none');
|
||||
|
||||
if (value)
|
||||
back.on('mouseup', _.bind(this.onBackClick, this));
|
||||
}
|
||||
},
|
||||
|
||||
getCanBack: function() {
|
||||
return this.canBack;
|
||||
},
|
||||
|
||||
onBackClick: function(e) {
|
||||
if (e.which == 3) { // right button click
|
||||
Common.UI.Menu.Manager.hideAll();
|
||||
var me = this,
|
||||
showPoint = [e.pageX*Common.Utils.zoom(), e.pageY*Common.Utils.zoom()],
|
||||
menuContainer = $(this.el).find(Common.Utils.String.format('#menu-container-{0}', this.gotoDocsMenu.id));
|
||||
if (!this.gotoDocsMenu.rendered) {
|
||||
// Prepare menu container
|
||||
if (menuContainer.length < 1) {
|
||||
menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', this.gotoDocsMenu.id));
|
||||
$(this.el).append(menuContainer);
|
||||
if ( this.canBack === true ) {
|
||||
this.btnGoBack.render($html.find('#slot-btn-back'));
|
||||
this.btnUsers.render($html.find('#slot-btn-users'));
|
||||
}
|
||||
|
||||
this.gotoDocsMenu.render(menuContainer);
|
||||
this.gotoDocsMenu.cmpEl.attr({tabindex: "-1"});
|
||||
if ( this.documentCaption ) {
|
||||
$html.find('#doc-name').html(
|
||||
Common.Utils.String.htmlEncode(this.documentCaption) );
|
||||
}
|
||||
|
||||
this.labelDocName = $html.find('#doc-name');
|
||||
|
||||
return $html;
|
||||
}
|
||||
_.delay(function(){
|
||||
menuContainer.css({
|
||||
left: showPoint[0] - me.gotoDocsMenu.cmpEl.width(),
|
||||
top : showPoint[1] + 3
|
||||
});
|
||||
me.gotoDocsMenu.show();
|
||||
},10);
|
||||
} else {
|
||||
Common.NotificationCenter.trigger('goback', e.which == 2);
|
||||
Common.component.Analytics.trackEvent('Back to Folder');
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
setDeveloperMode: function(mode) {
|
||||
$('#header-developer').toggleClass('hidden', !mode);
|
||||
},
|
||||
setVisible: function (visible) {
|
||||
// visible
|
||||
// ? this.show()
|
||||
// : this.hide();
|
||||
},
|
||||
|
||||
setCanRename: function(rename) {
|
||||
var dc = $('#header-documentcaption div');
|
||||
if (rename) {
|
||||
var me = this;
|
||||
dc.tooltip({title: me.txtRename, placement: 'cursor'});
|
||||
dc.on('click', function(e) {
|
||||
(new Common.Views.RenameDialog({
|
||||
filename: me.documentCaption,
|
||||
handler: function(result, value) {
|
||||
if (result == 'ok' && !_.isEmpty(value.trim()) && me.documentCaption !== value.trim()) {
|
||||
Common.Gateway.requestRename(value);
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me);
|
||||
}
|
||||
})).show(dc.position().left-1, 20);
|
||||
});
|
||||
} else {
|
||||
var tip = dc.data('bs.tooltip');
|
||||
if (tip) {
|
||||
tip.options.title = '';
|
||||
tip.setContent();
|
||||
setBranding: function (value) {
|
||||
var element;
|
||||
|
||||
this.branding = value;
|
||||
|
||||
if (value && value.logo && value.logo.image) {
|
||||
element = $('#header-logo');
|
||||
if ( element ) {
|
||||
element.html('<img src="' + value.logo.image + '" style="max-width:86px; max-height:42px; margin: 0 8px 0 15px;"/>');
|
||||
element.css({'background-image': 'none', width: 'auto'});
|
||||
}
|
||||
}
|
||||
dc.off('click');
|
||||
}
|
||||
dc.css('cursor', rename ? 'pointer' : 'default');
|
||||
dc.toggleClass('renamed', rename);
|
||||
},
|
||||
},
|
||||
|
||||
textBack: 'Go to Documents',
|
||||
openNewTabText: 'Open in New Tab',
|
||||
txtHeaderDeveloper: 'DEVELOPER MODE',
|
||||
txtRename: 'Rename'
|
||||
}, Common.Views.Header || {}))
|
||||
setHeaderCaption: function (value) {
|
||||
this.headerCaption = value;
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
getHeaderCaption: function () {
|
||||
return this.headerCaption;
|
||||
},
|
||||
|
||||
setDocumentCaption: function (value, applyOnly) {
|
||||
!value && (value = '');
|
||||
|
||||
this.documentCaption = value;
|
||||
if ( this.labelDocName )
|
||||
this.labelDocName.html(Common.Utils.String.htmlEncode(value));
|
||||
|
||||
return value;
|
||||
},
|
||||
|
||||
getDocumentCaption: function () {
|
||||
return this.documentCaption;
|
||||
},
|
||||
|
||||
setDocumentChanged: function (changed) {
|
||||
var _name = Common.Utils.String.htmlEncode(this.documentCaption);
|
||||
changed && (_name += '*');
|
||||
|
||||
this.labelDocName.html(_name);
|
||||
},
|
||||
|
||||
setCanBack: function (value) {
|
||||
this.canBack = value;
|
||||
|
||||
this.btnGoBack[value ? 'show' : 'hide']();
|
||||
},
|
||||
|
||||
getCanBack: function () {
|
||||
return this.canBack;
|
||||
},
|
||||
|
||||
setDeveloperMode: function (mode) {
|
||||
// $('#header-developer').toggleClass('hidden', !mode);
|
||||
},
|
||||
|
||||
setCanRename: function (rename) {
|
||||
// var dc = $('#header-documentcaption div');
|
||||
// if (rename) {
|
||||
// var me = this;
|
||||
// dc.tooltip({title: me.txtRename, placement: 'cursor'});
|
||||
// dc.on('click', function (e) {
|
||||
// (new Common.Views.RenameDialog({
|
||||
// filename: me.documentCaption,
|
||||
// handler: function (result, value) {
|
||||
// if (result == 'ok' && !_.isEmpty(value.trim()) && me.documentCaption !== value.trim()) {
|
||||
// Common.Gateway.requestRename(value);
|
||||
// }
|
||||
// Common.NotificationCenter.trigger('edit:complete', me);
|
||||
// }
|
||||
// })).show(dc.position().left - 1, 20);
|
||||
// });
|
||||
// } else {
|
||||
// var tip = dc.data('bs.tooltip');
|
||||
// if (tip) {
|
||||
// tip.options.title = '';
|
||||
// tip.setContent();
|
||||
// }
|
||||
// dc.off('click');
|
||||
// }
|
||||
// dc.css('cursor', rename ? 'pointer' : 'default');
|
||||
// dc.toggleClass('renamed', rename);
|
||||
},
|
||||
|
||||
textBack: 'Go to Documents',
|
||||
openNewTabText: 'Open in New Tab',
|
||||
// txtHeaderDeveloper: 'DEVELOPER MODE',
|
||||
txtRename: 'Rename'
|
||||
}
|
||||
}(), Common.Views.Header || {}))
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,118 +1,89 @@
|
|||
#header-container {
|
||||
height: @app-header-height;
|
||||
display: table;
|
||||
//#header-logo {
|
||||
// background-color: @app-header-bg-color-dark;
|
||||
// min-width: 15px + 90px + 5px;
|
||||
// .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: 15px center;
|
||||
// cursor: pointer;
|
||||
//}
|
||||
|
||||
& > div {
|
||||
display: table-cell;
|
||||
height: @app-header-height;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
//#header-developer {
|
||||
// background-color: #ffb400;
|
||||
// padding-left: 15px + @app-header-height / 3;
|
||||
// & > div {
|
||||
// position: relative;
|
||||
// background-color: #ffb400;
|
||||
// color: #6e4e00 !important;
|
||||
// padding-right: 15px;
|
||||
// cursor: default;
|
||||
// z-index: 1;
|
||||
// white-space: nowrap;
|
||||
// height: @app-header-height;
|
||||
// line-height: @app-header-height;
|
||||
//
|
||||
// &:after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: -@app-header-height / 2;
|
||||
// width: @app-header-height / 2;
|
||||
// height: @app-header-height;
|
||||
// border-top: @app-header-height / 2 solid transparent;
|
||||
// border-left: @app-header-height / 3 solid #ffb400;
|
||||
// border-bottom: @app-header-height / 2 solid transparent;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
#header-logo {
|
||||
background-color: @app-header-bg-color-dark;
|
||||
min-width: 15px + 90px + 5px;
|
||||
.background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 15px center;
|
||||
cursor: pointer;
|
||||
}
|
||||
//#header-documentcaption {
|
||||
// width: 100%;
|
||||
// max-width: 100px;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// background-color: @app-header-bg-color;
|
||||
// padding: 0 7px + @app-header-height / 3;
|
||||
// cursor: default;
|
||||
//
|
||||
// div {
|
||||
// display: inline-block;
|
||||
// padding: 2px 8px;
|
||||
//
|
||||
// &.renamed:hover {
|
||||
// background-color: @app-header-bg-color-dark;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
#header-caption {
|
||||
& > div {
|
||||
position: relative;
|
||||
background-color: @app-header-bg-color-dark;
|
||||
color: lighten(@app-header-bg-color-light, 20%) !important;
|
||||
padding-right: 15px;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
height: @app-header-height;
|
||||
line-height: @app-header-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -@app-header-height / 2;
|
||||
width: @app-header-height / 2;
|
||||
height: @app-header-height;
|
||||
border-top: @app-header-height / 2 solid transparent;
|
||||
border-left: @app-header-height / 3 solid @app-header-bg-color-dark;
|
||||
border-bottom: @app-header-height / 2 solid transparent;
|
||||
.toolbar {
|
||||
.extra {
|
||||
.elset:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header-developer {
|
||||
background-color: #ffb400;
|
||||
padding-left: 15px + @app-header-height / 3;
|
||||
& > div {
|
||||
position: relative;
|
||||
background-color: #ffb400;
|
||||
color: #6e4e00 !important;
|
||||
padding-right: 15px;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
height: @app-header-height;
|
||||
line-height: @app-header-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -@app-header-height / 2;
|
||||
width: @app-header-height / 2;
|
||||
height: @app-header-height;
|
||||
border-top: @app-header-height / 2 solid transparent;
|
||||
border-left: @app-header-height / 3 solid #ffb400;
|
||||
border-bottom: @app-header-height / 2 solid transparent;
|
||||
}
|
||||
.extra {
|
||||
> section {
|
||||
line-height: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
#header-documentcaption {
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: @app-header-bg-color;
|
||||
padding: 0 7px + @app-header-height / 3;
|
||||
cursor: default;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
|
||||
&.renamed:hover {
|
||||
background-color: @app-header-bg-color-dark;
|
||||
}
|
||||
&.left {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
#header-back {
|
||||
& > div {
|
||||
position: relative;
|
||||
background-color: @app-header-bg-color-light;
|
||||
padding: 0 15px 0 15px + @app-header-height / 3;
|
||||
#doc-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
height: @app-header-height;
|
||||
line-height: @app-header-height - 2px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: @app-header-height / 2;
|
||||
height: @app-header-height;
|
||||
border-top: @app-header-height / 2 solid transparent;
|
||||
border-left: @app-header-height / 3 solid @app-header-bg-color;
|
||||
border-bottom: @app-header-height / 2 solid transparent;
|
||||
}
|
||||
.background-ximage('@{app-image-path}/logo.png', '@{app-image-path}/logo.png', 240px);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
@ -1041,19 +1041,19 @@ define([
|
|||
applyModeCommonElements: function() {
|
||||
window.editor_elements_prepared = true;
|
||||
|
||||
var value = Common.localStorage.getItem("de-hidden-title");
|
||||
value = this.appOptions.isEdit && (value!==null && parseInt(value) == 1);
|
||||
// var value = Common.localStorage.getItem("de-hidden-title");
|
||||
// value = this.appOptions.isEdit && (value!==null && parseInt(value) == 1);
|
||||
|
||||
var app = this.getApplication(),
|
||||
viewport = app.getController('Viewport').getView('Viewport'),
|
||||
headerView = app.getController('Viewport').getView('Common.Views.Header'),
|
||||
// headerView = app.getController('Viewport').getView('Common.Views.Header'),
|
||||
statusbarView = app.getController('Statusbar').getView('Statusbar'),
|
||||
documentHolder = app.getController('DocumentHolder').getView('DocumentHolder');
|
||||
|
||||
if (headerView) {
|
||||
headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer');
|
||||
headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
|
||||
}
|
||||
// if (headerView) {
|
||||
// headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer');
|
||||
// headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
|
||||
// }
|
||||
|
||||
if (this.appOptions.nativeApp) {
|
||||
$('body').removeClass('safari');
|
||||
|
|
@ -1388,10 +1388,10 @@ define([
|
|||
if (isModified) {
|
||||
if (!_.isUndefined(title) && (!this._state.fastCoauth || this._state.usersCount<2 )) {
|
||||
title = '* ' + title;
|
||||
headerView.setDocumentCaption(headerView.getDocumentCaption() + '*', true);
|
||||
headerView.setDocumentChanged(true);
|
||||
}
|
||||
} else {
|
||||
headerView.setDocumentCaption(headerView.getDocumentCaption());
|
||||
headerView.setDocumentChanged(false);
|
||||
}
|
||||
|
||||
if (window.document.title != title)
|
||||
|
|
|
|||
|
|
@ -65,6 +65,22 @@ define([
|
|||
// When controller is created let's setup view event listeners
|
||||
initialize: function() {
|
||||
// This most important part when we will tell our controller what events should be handled
|
||||
|
||||
var me = this;
|
||||
this.addListeners({
|
||||
'Toolbar': {
|
||||
'render:before' : function (toolbar) {
|
||||
toolbar.setExtra('right', me.header.getPanel('right'));
|
||||
toolbar.setExtra('left', me.header.getPanel('left'));
|
||||
}
|
||||
},
|
||||
'Common.Views.Header': {
|
||||
'go:back': function (opts) {
|
||||
Common.NotificationCenter.trigger('goback', /new/.test(opts));
|
||||
// Common.component.Analytics.trackEvent('Back to Folder');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
|
@ -78,7 +94,7 @@ define([
|
|||
this.viewport = this.createView('Viewport').render();
|
||||
this.header = this.createView('Common.Views.Header', {
|
||||
headerCaption: 'Document Editor'
|
||||
}).render();
|
||||
});
|
||||
|
||||
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
|
||||
$(window).on('resize', _.bind(this.onWindowResize, this));
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
<i class="icon">></i>
|
||||
</a>
|
||||
</section>
|
||||
<div class="extra right">SomeDocument.docx</div>
|
||||
<div class="extra right">
|
||||
</div>
|
||||
</div>
|
||||
<section class="box-controls">
|
||||
<section class="panel">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<div class="layout-region">
|
||||
<div id="viewport-vbox-layout" class="layout-ct vbox">
|
||||
<div id="header" class="layout-item"></div>
|
||||
<div id="toolbar" class="layout-item"></div>
|
||||
<div class="layout-item">
|
||||
<div class="layout-item middle">
|
||||
<div id="viewport-hbox-layout" class="layout-ct hbox">
|
||||
<div id="left-menu" class="layout-item" style="width: 40px;"></div>
|
||||
<div id="file-menu-panel" class="left-menu-full-ct" style="display:none;"></div>
|
||||
|
|
|
|||
|
|
@ -1290,7 +1290,7 @@ define([
|
|||
* Render UI layout
|
||||
*/
|
||||
|
||||
this.trigger('render:before', this);
|
||||
this.fireEvent('render:before', [this]);
|
||||
|
||||
var top = Common.localStorage.getItem("de-pgmargins-top"),
|
||||
left = Common.localStorage.getItem("de-pgmargins-left"),
|
||||
|
|
@ -1311,7 +1311,7 @@ define([
|
|||
|
||||
me.isCompactView = valueCompact;
|
||||
|
||||
this.trigger('render:after', this);
|
||||
this.fireEvent('render:after', [this]);
|
||||
|
||||
/** coauthoring begin **/
|
||||
value = Common.localStorage.getItem("de-hide-synch");
|
||||
|
|
@ -2371,6 +2371,18 @@ define([
|
|||
setFolded.call(this, f);
|
||||
},
|
||||
|
||||
setExtra: function (place, el) {
|
||||
if ( $tabs ) {
|
||||
} else {
|
||||
if ( place == 'right' ) {
|
||||
config.$dom.find('.extra.right').html(el);
|
||||
} else
|
||||
if ( place == 'left' ) {
|
||||
config.$dom.find('.extra.left').html(el);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
textBold: 'Bold',
|
||||
textItalic: 'Italic',
|
||||
textUnderline: 'Underline',
|
||||
|
|
|
|||
BIN
apps/documenteditor/main/resources/img/logo.png
Normal file
BIN
apps/documenteditor/main/resources/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -12,10 +12,3 @@
|
|||
|
||||
@brand-active: @blue-dark;
|
||||
@brand-active-light: @blue-light;
|
||||
|
||||
// Header
|
||||
// -------------------------
|
||||
@app-header-height: 20px;
|
||||
@app-header-bg-color: @blue;
|
||||
@app-header-bg-color-dark: @blue-dark;
|
||||
@app-header-bg-color-light: @blue-light;
|
||||
Loading…
Reference in a new issue