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

[PE] Change buttons in the header

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-05 22:20:13 +03:00
parent 39ecf9170b
commit c062a743ee
12 changed files with 49 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -362,8 +362,8 @@
border-radius: 20px;
background-color: @icon-toolbar-header-ie;
background-color: @icon-toolbar-header;
color: @toolbar-header-text-on-background-document-ie;
color: @toolbar-header-text-on-background-document;
color: @toolbar-header-text-on-background-ie;
color: @toolbar-header-text-on-background;
font-size: 10px;
line-height: 20px;
overflow: hidden;

4
apps/documenteditor/main/resources/less/variables.less
View file

@ -3,8 +3,8 @@
// --------------------------------------------------
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);
@toolbar-header-text-on-background-document-ie: @text-toolbar-header-on-background-document-ie;
@toolbar-header-text-on-background-document: var(--text-toolbar-header-on-background-document);
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-document-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-document);
// Active color
// -------------------------

1
apps/presentationeditor/main/app/controller/LeftMenu.js
View file

@ -62,7 +62,6 @@ define([
'hide': _.bind(this.onHideChat, this)
},
'Common.Views.Header': {
'file:settings': _.bind(this.clickToolbarSettings,this),
'history:show': function () {
if ( !this.leftMenu.panelHistory.isVisible() )
this.clickMenuFileItem('header', 'history');

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

@ -2338,6 +2338,7 @@ define([
this.api.asc_coAuthoringDisconnect();
appHeader.setCanRename(false);
appHeader.getButton('users') && appHeader.getButton('users').hide();
appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
this.disableEditing(true);
this._renameDialog && this._renameDialog.close();

3
apps/presentationeditor/main/app/controller/Statusbar.js
View file

@ -61,9 +61,6 @@ define([
'Statusbar': {
'langchanged': this.onLangMenu
},
'Common.Views.Header': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
},
'ViewTab': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
}

1
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -141,7 +141,6 @@ define([
'menu:show': this.onFileMenu.bind(this, 'show')
},
'Common.Views.Header': {
'toolbar:setcompact': this.onChangeCompactView.bind(this),
'print': function (opts) {
var _main = this.getApplication().getController('Main');
_main.onPrint();

31
apps/presentationeditor/main/app/controller/ViewTab.js
View file

@ -69,6 +69,7 @@ define([
if (api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
this.api.asc_registerCallback('asc_onNotesShow', _.bind(this.onNotesShow, this));
}
return this;
},
@ -84,12 +85,25 @@ define([
if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
this.view.chStatusbar.$el.remove();
}
if (!mode.isEdit) { // if view tab will be visible in view/restricted-editing mode
this.view.chToolbar.hide();
var me = this;
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
if ((action=='plugins' || action=='review') && visible) {
me.view.chToolbar.show();
}
}, this));
this.view.chRulers.hide();
}
this.addListeners({
'ViewTab': {
'zoom:toslide': _.bind(this.onBtnZoomTo, this, 'toslide'),
'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
'rulers:change': _.bind(this.onChangeRulers, this),
'notes:change': _.bind(this.onChangeNotes, this),
'notes:change': _.bind(this.onChangeNotes, this)
},
'Toolbar': {
'view:compact': _.bind(function (toolbar, state) {
@ -100,14 +114,6 @@ define([
'view:hide': _.bind(function (statusbar, state) {
this.view.chStatusbar.setValue(!state, true);
}, this)
},
'Common.Views.Header': {
'rulers:hide': _.bind(function (isChecked) {
this.view.chRulers.setValue(!isChecked, true);
}, this),
'notes:hide': _.bind(function (isChecked) {
this.view.chNotes.setValue(!isChecked, true);
}, this),
}
});
},
@ -137,6 +143,11 @@ define([
}
},
onNotesShow: function(bIsShow) {
this.view.chNotes.setValue(bIsShow, true);
Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
},
onAppReady: function (config) {
var me = this;
if (me.view) {
@ -186,7 +197,6 @@ define([
this.api.asc_SetViewRulers(checked);
Common.localStorage.setBool('pe-hidden-rulers', !checked);
Common.Utils.InternalSettings.set("pe-hidden-rulers", !checked);
this.view.fireEvent('rulers:hide', [!checked]);
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', this.view);
},
@ -194,7 +204,6 @@ define([
onChangeNotes: function (btn, checked) {
this.api.asc_ShowNotes(checked);
Common.localStorage.setBool('pe-hidden-notes', !checked);
this.view.fireEvent('notes:hide', [!checked]);
Common.NotificationCenter.trigger('edit:complete', this.view);
},

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

@ -81,7 +81,6 @@ define([
toolbar.setExtra('left', me.header.getPanel('left', config));
},
'view:compact' : function (toolbar, state) {
me.header.mnuitemCompactToolbar.setChecked(state, true);
me.viewport.vlayout.getItem('toolbar').height = state ?
Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
},
@ -107,21 +106,6 @@ define([
if ( me.header.btnSave )
me.header.btnSave.setDisabled(state);
}
},
// Events generated by main view
'Viewport': {
},
'ViewTab': {
'rulers:hide': function (state) {
me.header.mnuitemHideRulers.setChecked(state, true);
},
'notes:hide': function (state) {
me.header.mnuitemHideNotes.setChecked(state, true);
},
'statusbar:hide': function (view, state) {
me.header.mnuitemHideStatusBar.setChecked(state, true);
}
}
});
Common.NotificationCenter.on('preview:start', this.onPreviewStart.bind(this));
@ -129,9 +113,7 @@ define([
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
this.api.asc_registerCallback('asc_onNotesShow', this.onNotesShow.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
},
@ -168,9 +150,6 @@ define([
this.boxSdk = $('#editor_sdk');
this.boxSdk.css('border-left', 'none');
this.header.mnuitemFitPage = this.header.fakeMenuItem();
this.header.mnuitemFitWidth = this.header.fakeMenuItem();
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
@ -222,126 +201,6 @@ define([
},
onAppReady: function (config) {
var me = this;
if ( me.header.btnOptions ) {
var compactview = !config.isEdit;
if ( config.isEdit ) {
if ( Common.localStorage.itemExists("pe-compact-toolbar") ) {
compactview = Common.localStorage.getBool("pe-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption: me.header.textCompactView,
checked: compactview,
checkable: true,
value: 'toolbar'
});
if (!config.isEdit) {
me.header.mnuitemCompactToolbar.hide();
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
if ((action=='plugins' || action=='review') && visible) {
me.header.mnuitemCompactToolbar.show();
}
}, this));
}
me.header.mnuitemHideStatusBar = new Common.UI.MenuItem({
caption: me.header.textHideStatusBar,
checked: Common.localStorage.getBool("pe-hidden-status"),
checkable: true,
value: 'statusbar'
});
if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
me.header.mnuitemHideStatusBar.hide();
me.header.mnuitemHideRulers = new Common.UI.MenuItem({
caption: me.header.textHideLines,
checked: Common.Utils.InternalSettings.get("pe-hidden-rulers"),
checkable: true,
value: 'rulers'
});
if (!config.isEdit)
me.header.mnuitemHideRulers.hide();
me.header.mnuitemHideNotes = new Common.UI.MenuItem({
caption: me.header.textHideNotes,
checked: Common.localStorage.getBool('pe-hidden-notes', config.customization && config.customization.hideNotes===true),
checkable: true,
value: 'notes'
});
me.header.mnuitemFitPage = new Common.UI.MenuItem({
caption: me.textFitPage,
checkable: true,
checked: me.header.mnuitemFitPage.isChecked(),
value: 'zoom:page'
});
me.header.mnuitemFitWidth = new Common.UI.MenuItem({
caption: me.textFitWidth,
checkable: true,
checked: me.header.mnuitemFitWidth.isChecked(),
value: 'zoom:width'
});
me.header.mnuZoom = new Common.UI.MenuItem({
template: _.template([
'<div id="hdr-menu-zoom" class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.header.textZoom + '</label>',
'<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
'<label class="zoom"><%= options.value %>%</label>',
'<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
'</div>'
].join('')),
stopPropagation: true,
value: me.header.mnuZoom.options.value
});
me.header.btnOptions.setMenu(new Common.UI.Menu({
cls: 'pull-right',
style: 'min-width: 180px;',
items: [
me.header.mnuitemCompactToolbar,
me.header.mnuitemHideStatusBar,
me.header.mnuitemHideRulers,
me.header.mnuitemHideNotes,
{caption:'--'},
me.header.mnuitemFitPage,
me.header.mnuitemFitWidth,
me.header.mnuZoom,
{caption:'--'},
new Common.UI.MenuItem({
caption: me.header.textAdvSettings,
value: 'advanced'
})
]
})
);
var _on_btn_zoom = function (btn) {
btn == 'up' ? me.api.zoomIn() : me.api.zoomOut();
Common.NotificationCenter.trigger('edit:complete', me.header);
};
(new Common.UI.Button({
el : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'down'));
(new Common.UI.Button({
el : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'up'));
me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
}
},
onLayoutChanged: function(area) {
@ -446,51 +305,9 @@ define([
me.header.lockHeaderBtns( 'undo', _need_disable );
me.header.lockHeaderBtns( 'redo', _need_disable );
me.header.lockHeaderBtns( 'opts', _need_disable );
me.header.lockHeaderBtns( 'users', _need_disable );
},
onApiZoomChange: function(percent, type) {
this.header.mnuitemFitPage.setChecked(type == 2, true);
this.header.mnuitemFitWidth.setChecked(type == 1, true);
this.header.mnuZoom.options.value = percent;
if ( this.header.mnuZoom.$el )
$('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%');
},
onOptionsItemClick: function (menu, item, e) {
var me = this;
switch ( item.value ) {
case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break;
case 'rulers':
me.api.asc_SetViewRulers(!item.isChecked());
Common.localStorage.setBool('pe-hidden-rulers', item.isChecked());
Common.Utils.InternalSettings.set("pe-hidden-rulers", item.isChecked());
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', me.header);
me.header.fireEvent('rulers:hide', [item.isChecked()]);
break;
case 'notes':
me.api.asc_ShowNotes(!item.isChecked());
Common.localStorage.setBool('pe-hidden-notes', item.isChecked());
Common.NotificationCenter.trigger('edit:complete', me.header);
me.header.fireEvent('notes:hide', [item.isChecked()]);
break;
case 'zoom:page':
item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'zoom:width':
item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
if (this.header) {
if (this.header.btnDownload && !enableDownload)
@ -507,11 +324,6 @@ define([
this.header && this.header.lockHeaderBtns( 'rename-user', disable);
},
onNotesShow: function(bIsShow) {
this.header && this.header.mnuitemHideNotes.setChecked(!bIsShow, true);
Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width'
}, PE.Controllers.Viewport));

11
apps/presentationeditor/main/index.html
View file

@ -75,6 +75,15 @@
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
@ -273,7 +282,7 @@
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

11
apps/presentationeditor/main/index.html.deploy
View file

@ -63,6 +63,15 @@
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
@ -263,7 +272,7 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

3
apps/presentationeditor/main/locale/en.json
View file

@ -378,9 +378,10 @@
"Common.Views.Header.tipUndo": "Undo",
"Common.Views.Header.tipUndock": "Undock into separate window",
"Common.Views.Header.tipViewSettings": "View settings",
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.tipViewUsers": "View users",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.textShare": "Share",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

3
apps/presentationeditor/main/resources/less/variables.less
View file

@ -2,7 +2,8 @@
// -------------------------
@header-background-color-ie: @toolbar-header-presentation-ie;
@header-background-color: var(--toolbar-header-presentation);
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-presentation-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-presentation);
// Grays
// -------------------------