[SSE] Show view tab in view/commenting mode

This commit is contained in:
Julia Radzhabova 2022-02-08 13:01:04 +03:00
parent 633b44b7bd
commit 9ef458336c
6 changed files with 202 additions and 186 deletions

View file

@ -1406,14 +1406,12 @@ define([
Common.Utils.Metric.setCurrentMetric(value);
Common.Utils.InternalSettings.set("sse-settings-unit", value);
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (this.appOptions.isRestrictedEdit) {
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
application.getController('WBProtection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
} else if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
var statusbarController = application.getController('Statusbar'),
rightmenuController = application.getController('RightMenu'),
fontsControllers = application.getController('Common.Controllers.Fonts');

View file

@ -3810,12 +3810,19 @@ define([
me.toolbar.addTab(tab, $panel, 7);
Array.prototype.push.apply(me.toolbar.lockControls, wbtab.getView('WBProtection').getButtons());
}
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
}
}
if ( !config.isEditDiagram && !config.isEditMailMerge ) {
tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
$panel = viewtab.createToolbarPanel();
if ($panel) {
me.toolbar.addTab(tab, $panel, 8);
me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
}
config.isEdit && Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
}
},
onAppReady: function (config) {

View file

@ -84,26 +84,6 @@ define([
mode: mode,
compactToolbar: this.toolbar.toolbar.isCompactView
});
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': {
@ -141,6 +121,10 @@ define([
this.view && this.view.SetDisabled(state);
},
createToolbarPanel: function() {
return this.view.getPanel();
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);

View file

@ -245,62 +245,6 @@
<!--</div>-->
<!--</div>-->
</section>
<section class="panel" data-tab="view">
<div class="group sheet-views">
<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
</div>
<div class="group sheet-views small">
<div class="elset">
<span class="btn-slot text" id="slot-createview"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-closeview"></span>
</div>
</div>
<div class="separator long sheet-views"></div>
<div class="group small">
<div class="elset" style="display: flex;">
<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
</div>
<div class="elset" style="text-align: center;">
<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-formula"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-heading"></span>
</div>
</div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-gridlines"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-zeros"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-toolbar"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-statusbar"></span>
</div>
</div>
</section>
</section>
</section>
</section>

View file

@ -390,9 +390,8 @@ define([
{ caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
{caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
{caption: me.textTabFormula, action: 'formula', extcls: 'canedit', dataHintTitle: 'O'},
{caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'},
undefined, undefined, undefined,
{caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
{caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'}
// undefined, undefined, undefined, undefined
]}
);

View file

@ -46,9 +46,66 @@ define([
'use strict';
SSE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
var template = '<section class="panel" data-tab="view">' +
'<div class="group sheet-views">' +
'<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>' +
'</div>' +
'<div class="group sheet-views small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-createview"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-closeview"></span>' +
'</div>' +
'</div>' +
'<div class="separator long sheet-views"></div>' +
'<div class="group small">' +
'<div class="elset" style="display: flex;">' +
'<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
'</div>' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
'</div>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group sheet-freeze">' +
'<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>' +
'</div>' +
'<div class="separator long sheet-freeze"></div>' +
'<div class="group small sheet-formula">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-formula"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-heading"></span>' +
'</div>' +
'</div>' +
'<div class="group small sheet-gridlines">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-gridlines"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-zeros"></span>' +
'</div>' +
'</div>' +
'<div class="separator long separator-formula"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
'</div>' +
'</div>' +
'</section>';
function setEvents() {
var me = this;
if ( me.appConfig.canFeatureViews ) {
if ( me.appConfig.canFeatureViews && me.appConfig.isEdit) {
me.btnCloseView.on('click', function (btn, e) {
me.fireEvent('viewtab:openview', [{name: 'default', value: 'default'}]);
});
@ -57,7 +114,7 @@ define([
});
}
me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
me.btnFreezePanes && me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
if (item.value === 'shadow') {
me.fireEvent('viewtab:freezeshadow', [item.checked]);
} else {
@ -67,13 +124,13 @@ define([
this.chFormula.on('change', function (field, value) {
me.fireEvent('viewtab:formula', [0, value=='checked']);
});
this.chHeadings.on('change', function (field, value) {
this.chHeadings && this.chHeadings.on('change', function (field, value) {
me.fireEvent('viewtab:headings', [1, value=='checked']);
});
this.chGridlines.on('change', function (field, value) {
this.chGridlines && this.chGridlines.on('change', function (field, value) {
me.fireEvent('viewtab:gridlines', [2, value=='checked']);
});
this.chZeros.on('change', function (field, value) {
this.chZeros && this.chZeros.on('change', function (field, value) {
me.fireEvent('viewtab:zeros', [3, value=='checked']);
});
this.chToolbar.on('change', function (field, value) {
@ -105,12 +162,10 @@ define([
this.lockedControls = [];
var me = this,
$host = me.toolbar.$el,
_set = Common.enumLock;
if ( me.appConfig.canFeatureViews ) {
if ( me.appConfig.canFeatureViews && me.appConfig.isEdit ) {
this.btnSheetView = new Common.UI.Button({
parentEl: $host.find('#slot-btn-sheet-view'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-sheet-view',
caption: me.capBtnSheetView,
@ -133,7 +188,6 @@ define([
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnCreateView);
Common.Utils.injectComponent($host.find('#slot-createview'), this.btnCreateView);
this.btnCloseView = new Common.UI.Button({
id : 'id-toolbar-btn-closeview',
@ -146,29 +200,55 @@ define([
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnCloseView);
Common.Utils.injectComponent($host.find('#slot-closeview'), this.btnCloseView);
}
this.btnFreezePanes = new Common.UI.Button({
parentEl: $host.find('#slot-btn-freeze'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-freeze-panes',
caption: this.capBtnFreeze,
menu: true,
lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnFreezePanes);
if (me.appConfig.isEdit) {
this.btnFreezePanes = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-freeze-panes',
caption: this.capBtnFreeze,
menu: true,
lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnFreezePanes);
this.chHeadings = new Common.UI.CheckBox({
labelText: this.textHeadings,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chHeadings);
this.chGridlines = new Common.UI.CheckBox({
labelText: this.textGridlines,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chGridlines);
this.chZeros = new Common.UI.CheckBox({
labelText: this.textZeros,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chZeros);
}
this.cmbZoom = new Common.UI.ComboBox({
el : $host.find('#slot-field-zoom'),
cls : 'input-group-nr',
menuStyle : 'min-width: 55px;',
hint : me.tipFontSize,
editable : true,
lock : [_set.coAuth, _set.lostConnect, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
data : [
{ displayValue: "50%", value: 50 },
{ displayValue: "75%", value: 75 },
@ -185,52 +265,9 @@ define([
dataHintDirection: 'top',
dataHintOffset: 'small'
});
this.cmbZoom.setValue(100);
this.lockedControls.push(this.cmbZoom);
this.chFormula = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-formula'),
labelText: this.textFormula,
value: !Common.localStorage.getBool('sse-hidden-formula'),
lock : [_set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chFormula);
this.chHeadings = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-heading'),
labelText: this.textHeadings,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chHeadings);
this.chGridlines = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-gridlines'),
labelText: this.textGridlines,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chGridlines);
this.chZeros = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-zeros'),
labelText: this.textZeros,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chZeros);
this.btnInterfaceTheme = new Common.UI.Button({
parentEl: $host.find('#slot-btn-interface-theme'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon day',
caption: this.textInterfaceTheme,
@ -241,11 +278,20 @@ define([
});
this.lockedControls.push(this.btnInterfaceTheme);
this.chFormula = new Common.UI.CheckBox({
labelText: this.textFormula,
value: !Common.localStorage.getBool('sse-hidden-formula'),
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chFormula);
this.chStatusbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-statusbar'),
labelText: this.textCombineSheetAndStatusBars,
value : Common.localStorage.getBool('sse-compact-statusbar', true),
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
@ -253,31 +299,51 @@ define([
this.lockedControls.push(this.chStatusbar);
this.chToolbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-toolbar'),
labelText: this.textAlwaysShowToolbar,
value : !options.compactToolbar,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chToolbar);
$host.find('#slot-lbl-zoom').text(this.textZoom);
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
},
getPanel: function () {
this.$el = $(_.template(template)( {} ));
var $host = this.$el;
this.btnSheetView && this.btnSheetView.render($host.find('#slot-btn-sheet-view'));
this.btnCreateView && this.btnCreateView.render($host.find('#slot-createview'));
this.btnCloseView && this.btnCloseView.render($host.find('#slot-closeview'));
this.btnFreezePanes && this.btnFreezePanes.render($host.find('#slot-btn-freeze'));
this.cmbZoom.render($host.find('#slot-field-zoom'));
this.cmbZoom.setValue(100);
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
this.chFormula.render($host.find('#slot-chk-formula'));
this.chStatusbar.render($host.find('#slot-chk-statusbar'));
this.chToolbar.render($host.find('#slot-chk-toolbar'));
this.chHeadings && this.chHeadings.render($host.find('#slot-chk-heading'));
this.chGridlines && this.chGridlines.render($host.find('#slot-chk-gridlines'));
this.chZeros && this.chZeros.render($host.find('#slot-chk-zeros'));
return this.$el;
},
onAppReady: function (config) {
var me = this;
(new Promise(function (accept, reject) {
accept();
})).then(function(){
if (!config.canFeatureViews) {
if (!(config.canFeatureViews && me.appConfig.isEdit)) {
me.toolbar && me.toolbar.$el.find('.group.sheet-views').hide();
me.toolbar && me.toolbar.$el.find('.separator.sheet-views').hide();
} else {
@ -287,31 +353,49 @@ define([
me.btnCreateView.updateHint(me.tipCreate);
me.btnCloseView.updateHint(me.tipClose);
}
me.btnFreezePanes.setMenu(new Common.UI.Menu({
items: [
{
caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
value: undefined
},
{
caption: me.textFreezeRow,
value: Asc.c_oAscFrozenPaneAddType.firstRow
},
{
caption: me.textFreezeCol,
value: Asc.c_oAscFrozenPaneAddType.firstCol
},
{ caption: '--' },
{
caption: me.textShowFrozenPanesShadow,
value: 'shadow',
checkable: true,
checked: Common.localStorage.getBool('sse-freeze-shadow', true)
}
]
}));
me.btnFreezePanes.updateHint(me.tipFreeze);
if (config.isEdit) {
me.btnFreezePanes.setMenu(new Common.UI.Menu({
items: [
{
caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
value: undefined
},
{
caption: me.textFreezeRow,
value: Asc.c_oAscFrozenPaneAddType.firstRow
},
{
caption: me.textFreezeCol,
value: Asc.c_oAscFrozenPaneAddType.firstCol
},
{ caption: '--' },
{
caption: me.textShowFrozenPanesShadow,
value: 'shadow',
checkable: true,
checked: Common.localStorage.getBool('sse-freeze-shadow', true)
}
]
}));
me.btnFreezePanes.updateHint(me.tipFreeze);
} else {
me.toolbar && me.toolbar.$el.find('.group.sheet-freeze').hide();
me.toolbar && me.toolbar.$el.find('.separator.sheet-freeze').hide();
me.toolbar && me.toolbar.$el.find('.group.sheet-gridlines').hide();
}
if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
me.chStatusbar.$el.remove();
if (!config.isEdit) {
var slotChkFormula = me.chFormula.$el,
groupFormula = slotChkFormula.closest('.group'),
groupToolbar = me.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkFormula[0]);
groupFormula.remove();
me.$el.find('.separator-formula').remove();
}
}
var menuItems = [],
currentTheme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId();
for (var t in Common.UI.Themes.map()) {