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

[SSE] Change buttons in the header

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-06 14:50:17 +03:00
parent c062a743ee
commit a8a11d20db
12 changed files with 57 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/spreadsheeteditor/main/app/controller/CellEditor.js
View file

@ -68,11 +68,11 @@ define([
'Viewport': {
'layout:resizedrag': _.bind(this.onLayoutResize, this)
},
'Common.Views.Header': {
'formulabar:hide': function (state) {
this.editor.setVisible(!state);
Common.localStorage.setBool('sse-hidden-formula', state);
Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
'ViewTab': {
'viewtab:formula': function (type, state) {
this.editor.setVisible(state);
Common.localStorage.setBool('sse-hidden-formula', !state);
Common.NotificationCenter.trigger('layout:changed', 'celleditor', !state?'hidden':'showed');
}.bind(this)
}
});

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

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

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

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

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

@ -68,9 +68,6 @@ define([
'sheet:updateColors': _.bind(this.updateTabsColors, this),
'sheet:move': _.bind(this.moveWorksheet, this)
},
'Common.Views.Header': {
'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
},
'ViewTab': {
'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
}

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

@ -94,7 +94,6 @@ define([
'sheet:changed': _.bind(this.onApiSheetChanged, this)
},
'Common.Views.Header': {
'toolbar:setcompact': this.onChangeViewMode.bind(this),
'print': function (opts) {
var _main = this.getApplication().getController('Main');
_main.onPrint();

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

@ -87,6 +87,24 @@ define([
if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
this.view.chStatusbar.$el.remove();
}
if (!mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge) { // 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));
}
if (!mode.isEdit) {
this.view.chHeadings.hide();
this.view.chGridlines.hide();
this.view.btnFreezePanes.hide();
this.view.btnFreezePanes.$el.parents('.group').hide().prev().hide();
}
this.addListeners({
'ViewTab': {
'zoom:selected': _.bind(this.onSelectedZoomValue, this),
@ -114,11 +132,6 @@ define([
'view:compact': _.bind(function (toolbar, state) {
this.view.chToolbar.setValue(!state, true);
}, this)
},
'Common.Views.Header': {
'toolbar:freezeshadow': _.bind(function (isChecked) {
this.view.btnFreezePanes.menu.items[4].setChecked(isChecked, true);
}, this)
}
});
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
@ -154,7 +167,6 @@ define([
onFreezeShadow: function (checked) {
this.api.asc_setFrozenPaneBorderType(checked ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
Common.localStorage.setBool('sse-freeze-shadow', checked);
this.view.fireEvent('freeze:shadow', [checked]);
Common.NotificationCenter.trigger('edit:complete', this.view);
},
@ -191,10 +203,9 @@ define([
onViewSettings: function(type, value){
if (this.api) {
switch (type) {
case 0: this.getApplication().getController('Viewport').header.fireEvent('formulabar:hide', [ value!=='checked']); break;
case 1: this.api.asc_setDisplayHeadings(value=='checked'); break;
case 2: this.api.asc_setDisplayGridlines( value=='checked'); break;
case 3: this.api.asc_setShowZeros( value=='checked'); break;
case 1: this.api.asc_setDisplayHeadings(value); break;
case 2: this.api.asc_setDisplayGridlines(value); break;
case 3: this.api.asc_setShowZeros(value); break;
}
}
Common.NotificationCenter.trigger('edit:complete', this.view);

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

@ -72,9 +72,7 @@ define([
'menu:show': me.onFileMenu.bind(me, 'show')
},
'Statusbar': {
'sheet:changed': me.onApiSheetChanged.bind(me),
'view:compact': function (statusbar, state) {
me.header.mnuitemCompactStatusBar.setChecked(state, true);
me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50;
}
},
@ -92,7 +90,6 @@ define([
},
'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');
},
@ -118,26 +115,15 @@ define([
if ( me.header.btnSave )
me.header.btnSave.setDisabled(state);
}
},
'ViewTab': {
'freeze:shadow': function (checked) {
me.header.mnuitemFreezePanesShadow.setChecked(checked, true);
}
}
});
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('cells:range', this.onCellsRange.bind(this));
},
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChanged', this.onApiZoomChange.bind(this));
this.api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetChanged.bind(this));
this.api.asc_registerCallback('asc_onUpdateSheetViewSettings', this.onApiSheetChanged.bind(this));
this.api.asc_registerCallback('asc_onWorksheetLocked', this.onWorksheetLocked.bind(this));
this.api.asc_registerCallback('asc_onEditCell', this.onApiEditCell.bind(this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
},
@ -193,161 +179,6 @@ define([
},
onAppReady: function (config) {
var me = this;
if ( me.header.btnOptions ) {
var compactview = !config.isEdit;
if ( config.isEdit && !config.isEditDiagram && !config.isEditMailMerge ) {
if ( Common.localStorage.itemExists("sse-compact-toolbar") ) {
compactview = Common.localStorage.getBool("sse-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 && !config.isEditDiagram && !config.isEditMailMerge) {
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.mnuitemCompactStatusBar = new Common.UI.MenuItem({
caption: me.header.textHideStatusBar,
checked: Common.localStorage.getBool("sse-compact-statusbar", true),
checkable: true,
value: 'statusbar'
});
if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
me.header.mnuitemCompactStatusBar.hide();
me.header.mnuitemHideFormulaBar = new Common.UI.MenuItem({
caption : me.textHideFBar,
checked : Common.localStorage.getBool('sse-hidden-formula'),
checkable : true,
value : 'formula'
});
me.header.mnuitemHideHeadings = new Common.UI.MenuItem({
caption : me.textHideHeadings,
checkable : true,
checked : me.header.mnuitemHideHeadings.isChecked(),
disabled : me.header.mnuitemHideHeadings.isDisabled(),
value : 'headings'
});
me.header.mnuitemHideGridlines = new Common.UI.MenuItem({
caption : me.textHideGridlines,
checkable : true,
checked : me.header.mnuitemHideGridlines.isChecked(),
disabled : me.header.mnuitemHideGridlines.isDisabled(),
value : 'gridlines'
});
me.header.mnuitemFreezePanes = new Common.UI.MenuItem({
caption : me.textFreezePanes,
checkable : true,
checked : me.header.mnuitemFreezePanes.isChecked(),
disabled : me.header.mnuitemFreezePanes.isDisabled(),
value : 'freezepanes'
});
me.header.mnuitemFreezePanesShadow = new Common.UI.MenuItem({
caption : me.textFreezePanesShadow,
checkable : true,
checked : Common.localStorage.getBool('sse-freeze-shadow', true),
value : 'freezepanesshadow'
});
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
});
var mnuitemAdvSettings = new Common.UI.MenuItem({
caption: me.header.textAdvSettings,
value: 'advanced'
});
me.header.btnOptions.setMenu(new Common.UI.Menu({
cls: 'pull-right',
style: 'min-width: 180px;',
items: [
me.header.mnuitemCompactToolbar,
me.header.mnuitemHideFormulaBar,
me.header.mnuitemCompactStatusBar,
{caption:'--'},
me.header.mnuitemHideHeadings,
me.header.mnuitemHideGridlines,
{caption:'--'},
me.header.mnuitemFreezePanes,
me.header.mnuitemFreezePanesShadow,
{caption:'--'},
me.header.mnuZoom,
{caption:'--'},
mnuitemAdvSettings
]
})
);
if (!config.isEdit) {
var menu = me.header.btnOptions.menu;
me.header.mnuitemHideHeadings.hide();
me.header.mnuitemHideGridlines.hide();
me.header.mnuitemFreezePanes.hide();
menu.items[6].hide();
if (!config.canViewComments) { // show advanced settings for editing and commenting mode
// mnuitemAdvSettings.hide();
// menu.items[9].hide();
}
}
var _on_btn_zoom = function (btn) {
if ( btn == 'up' ) {
var _f = Math.floor(this.api.asc_getZoom() * 10)/10;
_f += .1;
if (_f > 0 && !(_f > 5.))
this.api.asc_setZoom(_f);
} else {
_f = Math.ceil(this.api.asc_getZoom() * 10)/10;
_f -= .1;
if (!(_f < .5))
this.api.asc_setZoom(_f);
}
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));
}
},
// When our application is ready, lets get started
@ -386,10 +217,6 @@ define([
this.boxFormula = $('#cell-editing-box');
this.boxSdk.css('border-left', 'none');
this.boxFormula.css('border-left', 'none');
this.header.mnuitemHideHeadings = this.header.fakeMenuItem();
this.header.mnuitemHideGridlines = this.header.fakeMenuItem();
this.header.mnuitemFreezePanes = this.header.fakeMenuItem();
},
onLayoutChanged: function(area) {
@ -432,7 +259,6 @@ define([
case 'celleditor':
if (arguments[1]) {
this.boxSdk.css('border-top', arguments[1]=='hidden'?'none':'');
this.header.mnuitemHideFormulaBar && this.header.mnuitemHideFormulaBar.setChecked(arguments[1]=='hidden', true);
}
this.viewport.celayout.doLayout();
break;
@ -451,79 +277,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(zf, type){
switch (type) {
case 1: // FitWidth
case 2: // FitPage
case 0:
default: {
this.header.mnuZoom.options.value = Math.floor((zf + .005) * 100);
$('.menu-zoom .zoom', this.header.mnuZoom.$el).html(Math.floor((zf + .005) * 100) + '%');
}
}
},
onApiSheetChanged: function() {
var me = this;
var appConfig = me.viewport.mode;
if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
var params = me.api.asc_getSheetViewSettings();
me.header.mnuitemHideHeadings.setChecked(!params.asc_getShowRowColHeaders());
me.header.mnuitemHideGridlines.setChecked(!params.asc_getShowGridLines());
me.header.mnuitemFreezePanes.setChecked(params.asc_getIsFreezePane());
var currentSheet = me.api.asc_getActiveWorksheetIndex();
this.onWorksheetLocked(currentSheet, this.api.asc_isWorksheetLockedOrDeleted(currentSheet));
}
},
onWorksheetLocked: function(index,locked) {
var me = this;
var appConfig = me.viewport.mode;
if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
if (index == this.api.asc_getActiveWorksheetIndex()) {
locked = locked || me.viewmode;
me.header.mnuitemHideHeadings.setDisabled(locked);
me.header.mnuitemHideGridlines.setDisabled(locked);
me.header.mnuitemFreezePanes.setDisabled(locked);
}
}
},
onApiEditCell: function(state) {
if ( state == Asc.c_oAscCellEditorState.editStart )
this.header.lockHeaderBtns('opts', true); else
if ( state == Asc.c_oAscCellEditorState.editEnd )
this.header.lockHeaderBtns('opts', false);
},
onCellsRange: function(status) {
this.onApiEditCell(status != Asc.c_oAscSelectionDialogType.None ? Asc.c_oAscCellEditorState.editStart : Asc.c_oAscCellEditorState.editEnd);
},
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:setcompact', [menu, item.isChecked()]); break;
case 'formula': me.header.fireEvent('formulabar:hide', [item.isChecked()]); break;
case 'headings': me.api.asc_setDisplayHeadings(!item.isChecked()); break;
case 'gridlines': me.api.asc_setDisplayGridlines(!item.isChecked()); break;
case 'freezepanes': me.api.asc_freezePane(); break;
case 'freezepanesshadow':
me.api.asc_setFrozenPaneBorderType(item.isChecked() ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
Common.localStorage.setBool('sse-freeze-shadow', item.isChecked());
me.header.fireEvent('toolbar:freezeshadow', [item.isChecked()]);
break;
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
if (this.header) {
if (this.header.btnDownload && !enableDownload)
@ -536,10 +292,6 @@ define([
},
SetDisabled: function (disabled) {
this.viewmode = disabled;
this.header.mnuitemHideHeadings.setDisabled(disabled);
this.header.mnuitemHideGridlines.setDisabled(disabled);
this.header.mnuitemFreezePanes.setDisabled(disabled);
},
textHideFBar: 'Hide Formula Bar',

8
apps/spreadsheeteditor/main/app/view/ViewTab.js
View file

@ -65,16 +65,16 @@ define([
}
});
this.chFormula.on('change', function (field, value) {
me.fireEvent('viewtab:formula', [0, value]);
me.fireEvent('viewtab:formula', [0, value=='checked']);
});
this.chHeadings.on('change', function (field, value) {
me.fireEvent('viewtab:headings', [1, value]);
me.fireEvent('viewtab:headings', [1, value=='checked']);
});
this.chGridlines.on('change', function (field, value) {
me.fireEvent('viewtab:gridlines', [2, value]);
me.fireEvent('viewtab:gridlines', [2, value=='checked']);
});
this.chZeros.on('change', function (field, value) {
me.fireEvent('viewtab:zeros', [3, value]);
me.fireEvent('viewtab:zeros', [3, value=='checked']);
});
this.chToolbar.on('change', function (field, value) {
me.fireEvent('viewtab:showtoolbar', [field, value !== 'checked']);

12
apps/spreadsheeteditor/main/index.html
View file

@ -84,6 +84,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -284,7 +294,7 @@
<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><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></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><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"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

12
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -63,6 +63,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -265,7 +275,7 @@
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;"><div>
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/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><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></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><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"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

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

@ -234,9 +234,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",

2
apps/spreadsheeteditor/main/resources/less/variables.less
View file

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