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

[SSE] changed toolbar's layout

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-27 18:40:27 +03:00
parent 30aff508fe
commit e3bee31af6
14 changed files with 1855 additions and 1755 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/common/main/lib/component/Mixtbar.js
View file

@ -84,7 +84,6 @@ define([
$tabs: undefined,
$panels: undefined,
$marker: undefined,
lastTab: undefined,
isFolded: false,
initialize : function(options) {
@ -191,7 +190,7 @@ define([
},
setTab: function (tab) {
if (!tab || !tab.length) {
if ( !tab ) {
if ( this.isFolded ) onShowFullviewPanel.call(this, false);
else tab = this.lastPanel;
}

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

@ -73,7 +73,9 @@ define([
'recent:open': _.bind(this.onOpenRecent, this)
},
'Toolbar': {
'file:settings': _.bind(this.clickToolbarSettings,this)
'file:settings': _.bind(this.clickToolbarSettings,this),
'file:open': this.clickToolbarTab.bind(this, 'file'),
'file:close': this.clickToolbarTab.bind(this, 'other')
},
'SearchDialog': {
'hide': _.bind(this.onSearchDlgHide, this),
@ -304,6 +306,11 @@ define([
clickToolbarSettings: function(obj) {
this.leftMenu.showMenu('file:opts');
},
clickToolbarTab: function (tab, e) {
if (tab == 'file')
this.leftMenu.showMenu('file'); else
this.leftMenu.menuFile.hide();
},
/** coauthoring begin **/

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

@ -374,7 +374,7 @@ define([
}
},
goBack: function(blank) {
goBack: function(blank) {
var href = this.appOptions.customization.goback.url;
if (blank) {
window.open(href, "_blank");
@ -535,6 +535,7 @@ define([
value;
me._isDocReady = true;
Common.NotificationCenter.trigger('app:ready', this.appOptions);
me.hidePreloader();
me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
@ -791,15 +792,17 @@ define([
this._state.licenseWarning = !(this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge) && (licType===Asc.c_oLicenseResult.Connections) && this.appOptions.canEdit && this.editorConfig.mode !== 'view';
this.applyModeCommonElements();
this.applyModeEditorElements();
if ( this.appOptions.isEdit ) {
this.applyModeEditorElements();
} else {
Common.NotificationCenter.trigger('app:face', this.appOptions);
this.api.asc_setViewMode(!this.appOptions.isEdit);
(this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) ? this.api.asc_LoadEmptyDocument() : this.api.asc_LoadDocument();
if (!this.appOptions.isEdit) {
this.hidePreloader();
this.onLongActionBegin(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
}
this.api.asc_setViewMode(!this.appOptions.isEdit);
(this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) ? this.api.asc_LoadEmptyDocument() : this.api.asc_LoadDocument();
},
applyModeCommonElements: function() {
@ -909,19 +912,10 @@ define([
var viewport = this.getApplication().getController('Viewport').getView('Viewport');
viewport.applyEditorMode();
rightmenuController.getView('RightMenu').setMode(me.appOptions).setApi(me.api);
this.toolbarView = toolbarController.getView('Toolbar');
_.each([
this.toolbarView,
rightmenuController.getView('RightMenu')
], function(view) {
if (view) {
view.setMode(me.appOptions);
view.setApi(me.api);
}
});
var value = Common.localStorage.getItem('sse-settings-unit');
Common.Utils.Metric.setCurrentMetric((value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric());
@ -943,6 +937,8 @@ define([
if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
} else if (!this._isDocReady) {
Common.NotificationCenter.trigger('app:face', this.appOptions);
me.hidePreloader();
me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
}

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

@ -65,6 +65,13 @@ define([
var me = this;
this.addListeners({
'Toolbar': {
'change:compact': this.onClickChangeCompact.bind(me)
},
'FileMenu': {
'menu:hide': me.onFileMenu.bind(me, 'hide'),
'menu:show': me.onFileMenu.bind(me, 'show')
},
'Statusbar': {
'sheet:changed': _.bind(this.onApiSheetChanged, this)
},
@ -165,7 +172,8 @@ define([
// Create toolbar view
this.toolbar = this.createView('Toolbar');
// this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
},
onToolbarAfterRender: function(toolbar) {
@ -174,111 +182,132 @@ define([
/**
* UI Events
*/
toolbar.btnPrint.on('click', _.bind(this.onPrint, this));
toolbar.btnSave.on('click', _.bind(this.onSave, this));
toolbar.btnUndo.on('click', _.bind(this.onUndo, this));
toolbar.btnRedo.on('click', _.bind(this.onRedo, this));
toolbar.btnCopy.on('click', _.bind(this.onCopyPaste, this, true));
toolbar.btnPaste.on('click', _.bind(this.onCopyPaste, this, false));
toolbar.btnIncFontSize.on('click', _.bind(this.onIncreaseFontSize, this));
toolbar.btnDecFontSize.on('click', _.bind(this.onDecreaseFontSize, this));
toolbar.btnBold.on('click', _.bind(this.onBold, this));
toolbar.btnItalic.on('click', _.bind(this.onItalic, this));
toolbar.btnUnderline.on('click', _.bind(this.onUnderline, this));
toolbar.btnTextColor.on('click', _.bind(this.onTextColor, this));
toolbar.btnBackColor.on('click', _.bind(this.onBackColor, this));
toolbar.mnuTextColorPicker.on('select', _.bind(this.onTextColorSelect, this));
toolbar.mnuBackColorPicker.on('select', _.bind(this.onBackColorSelect, this));
toolbar.btnBorders.on('click', _.bind(this.onBorders, this));
if (toolbar.btnBorders.rendered) {
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
toolbar.mnuBorderWidth.on('item:toggle', _.bind(this.onBordersWidth, this));
toolbar.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
}
toolbar.btnAlignLeft.on('click', _.bind(this.onHorizontalAlign, this, 'left'));
toolbar.btnAlignCenter.on('click', _.bind(this.onHorizontalAlign, this, 'center'));
toolbar.btnAlignRight.on('click', _.bind(this.onHorizontalAlign, this, 'right'));
toolbar.btnAlignJust.on('click', _.bind(this.onHorizontalAlign, this, 'justify'));
toolbar.btnHorizontalAlign.menu.on('item:click', _.bind(this.onHorizontalAlignMenu, this));
toolbar.btnVerticalAlign.menu.on('item:click', _.bind(this.onVerticalAlignMenu, this));
toolbar.btnMerge.on('click', _.bind(this.onMergeCellsMenu, this, toolbar.btnMerge.menu, toolbar.btnMerge.menu.items[0]));
toolbar.btnMerge.menu.on('item:click', _.bind(this.onMergeCellsMenu, this));
toolbar.btnAlignTop.on('click', _.bind(this.onVerticalAlign, this, 'top'));
toolbar.btnAlignMiddle.on('click', _.bind(this.onVerticalAlign, this, 'center'));
toolbar.btnAlignBottom.on('click', _.bind(this.onVerticalAlign, this, 'bottom'));
toolbar.btnWrap.on('click', _.bind(this.onWrap, this));
toolbar.btnTextOrient.menu.on('item:click', _.bind(this.onTextOrientationMenu, this));
toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageMenu, this));
toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlink, this));
toolbar.mnuInsertChartPicker.on('item:click', _.bind(this.onSelectChart, this));
toolbar.btnEditChart.on('click', _.bind(this.onEditChart, this));
toolbar.btnInsertText.on('click', _.bind(this.onBtnInsertTextClick, this));
toolbar.btnInsertText.menu.on('item:click', _.bind(this.onInsertTextClick, this));
toolbar.btnInsertShape.menu.on('hide:after', _.bind(this.onInsertShapeHide, this));
toolbar.btnInsertEquation.on('click', _.bind(this.onInsertEquationClick, this));
toolbar.btnSortDown.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
toolbar.btnSortUp.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
toolbar.mnuitemSortAZ.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
toolbar.mnuitemSortZA.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
toolbar.btnSetAutofilter.on('click', _.bind(this.onAutoFilter, this));
toolbar.mnuitemAutoFilter.on('click', _.bind(this.onAutoFilter, this));
toolbar.btnClearAutofilter.on('click', _.bind(this.onClearFilter, this));
toolbar.mnuitemClearFilter.on('click', _.bind(this.onClearFilter, this));
toolbar.btnSearch.on('click', _.bind(this.onSearch, this));
toolbar.btnTableTemplate.menu.on('show:after', _.bind(this.onTableTplMenuOpen, this));
toolbar.btnPercentStyle.on('click', _.bind(this.onNumberFormat, this));
toolbar.btnCurrencyStyle.on('click', _.bind(this.onNumberFormat, this));
toolbar.btnDecDecimal.on('click', _.bind(this.onDecrement, this));
toolbar.btnIncDecimal.on('click', _.bind(this.onIncrement, this));
toolbar.btnInsertFormula.on('click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnSettings.on('click', _.bind(this.onAdvSettingsClick, this));
toolbar.btnInsertFormula.menu.on('item:click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnNamedRange.menu.on('item:click', _.bind(this.onNamedRangeMenu, this));
toolbar.btnNamedRange.menu.on('show:after', _.bind(this.onNamedRangeMenuOpen, this));
toolbar.btnClearStyle.menu.on('item:click', _.bind(this.onClearStyleMenu, this));
toolbar.btnAddCell.menu.on('item:click', _.bind(this.onCellInsertMenu, this));
toolbar.btnCopyStyle.on('toggle', _.bind(this.onCopyStyleToggle, this));
toolbar.btnDeleteCell.menu.on('item:click', _.bind(this.onCellDeleteMenu, this));
toolbar.btnColorSchemas.menu.on('item:click', _.bind(this.onColorSchemaClick, this));
toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this));
toolbar.cmbFontName.on('show:after', _.bind(this.onComboOpen, this, true));
toolbar.cmbFontName.on('hide:after', _.bind(this.onHideMenus, this));
toolbar.cmbFontName.on('combo:blur', _.bind(this.onComboBlur, this));
toolbar.cmbFontName.on('combo:focusin', _.bind(this.onComboOpen, this, false));
toolbar.cmbFontSize.on('selected', _.bind(this.onFontSizeSelect, this));
toolbar.cmbFontSize.on('changed:before', _.bind(this.onFontSizeChanged, this, true));
toolbar.cmbFontSize.on('changed:after', _.bind(this.onFontSizeChanged, this, false));
toolbar.cmbFontSize.on('show:after', _.bind(this.onComboOpen, this, true));
toolbar.cmbFontSize.on('hide:after', _.bind(this.onHideMenus, this));
toolbar.cmbFontSize.on('combo:blur', _.bind(this.onComboBlur, this));
toolbar.cmbFontSize.on('combo:focusin', _.bind(this.onComboOpen, this, false));
if (toolbar.mnuZoomIn) toolbar.mnuZoomIn.on('click', _.bind(this.onZoomInClick, this));
if (toolbar.mnuZoomOut) toolbar.mnuZoomOut.on('click', _.bind(this.onZoomOutClick, this));
if (toolbar.btnShowMode.rendered) toolbar.btnShowMode.menu.on('item:click', _.bind(this.onHideMenu, this));
toolbar.listStyles.on('click', _.bind(this.onListStyleSelect, this));
toolbar.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this));
toolbar.cmbNumberFormat.on('show:before', _.bind(this.onNumberFormatOpenBefore, this, true));
if (toolbar.cmbNumberFormat.cmpEl)
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnCurrencyStyle.menu.on('item:click', _.bind(this.onNumberFormatMenu, this));
if (toolbar.mnuitemCompactToolbar) toolbar.mnuitemCompactToolbar.on('toggle', _.bind(this.onChangeViewMode, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewTextColor, this));
$('#id-toolbar-menu-new-paracolor').on('click', _.bind(this.onNewBackColor, this));
$('#id-toolbar-menu-new-bordercolor').on('click', _.bind(this.onNewBorderColor, this));
if ( me.appConfig.isEditDiagram ) {
toolbar.btnInsertFormula.on('click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnInsertFormula.menu.on('item:click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnDecDecimal.on('click', _.bind(this.onDecrement, this));
toolbar.btnIncDecimal.on('click', _.bind(this.onIncrement, this));
toolbar.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this));
toolbar.cmbNumberFormat.on('show:before', _.bind(this.onNumberFormatOpenBefore, this, true));
if (toolbar.cmbNumberFormat.cmpEl)
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnEditChart.on('click', _.bind(this.onEditChart, this));
} else
if ( me.appConfig.isEditMailMerge ) {
toolbar.btnSearch.on('click', _.bind(this.onSearch, this));
toolbar.btnSortDown.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
toolbar.btnSortUp.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
toolbar.btnSetAutofilter.on('click', _.bind(this.onAutoFilter, this));
toolbar.btnClearAutofilter.on('click', _.bind(this.onClearFilter, this));
} else {
toolbar.btnPrint.on('click', _.bind(this.onPrint, this));
toolbar.btnSave.on('click', _.bind(this.onSave, this));
toolbar.btnUndo.on('click', _.bind(this.onUndo, this));
toolbar.btnRedo.on('click', _.bind(this.onRedo, this));
toolbar.btnCopy.on('click', _.bind(this.onCopyPaste, this, true));
toolbar.btnPaste.on('click', _.bind(this.onCopyPaste, this, false));
toolbar.btnIncFontSize.on('click', _.bind(this.onIncreaseFontSize, this));
toolbar.btnDecFontSize.on('click', _.bind(this.onDecreaseFontSize, this));
toolbar.btnBold.on('click', _.bind(this.onBold, this));
toolbar.btnItalic.on('click', _.bind(this.onItalic, this));
toolbar.btnUnderline.on('click', _.bind(this.onUnderline, this));
toolbar.btnTextColor.on('click', _.bind(this.onTextColor, this));
toolbar.btnBackColor.on('click', _.bind(this.onBackColor, this));
toolbar.mnuTextColorPicker.on('select', _.bind(this.onTextColorSelect, this));
toolbar.mnuBackColorPicker.on('select', _.bind(this.onBackColorSelect, this));
toolbar.btnBorders.on('click', _.bind(this.onBorders, this));
if (toolbar.btnBorders.rendered) {
toolbar.btnBorders.menu.on('item:click', _.bind(this.onBordersMenu, this));
toolbar.mnuBorderWidth.on('item:toggle', _.bind(this.onBordersWidth, this));
toolbar.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
}
toolbar.btnAlignLeft.on('click', _.bind(this.onHorizontalAlign, this, 'left'));
toolbar.btnAlignCenter.on('click', _.bind(this.onHorizontalAlign, this, 'center'));
toolbar.btnAlignRight.on('click', _.bind(this.onHorizontalAlign, this, 'right'));
toolbar.btnAlignJust.on('click', _.bind(this.onHorizontalAlign, this, 'justify'));
toolbar.btnHorizontalAlign.menu.on('item:click', _.bind(this.onHorizontalAlignMenu, this));
toolbar.btnVerticalAlign.menu.on('item:click', _.bind(this.onVerticalAlignMenu, this));
toolbar.btnMerge.on('click', _.bind(this.onMergeCellsMenu, this, toolbar.btnMerge.menu, toolbar.btnMerge.menu.items[0]));
toolbar.btnMerge.menu.on('item:click', _.bind(this.onMergeCellsMenu, this));
toolbar.btnAlignTop.on('click', _.bind(this.onVerticalAlign, this, 'top'));
toolbar.btnAlignMiddle.on('click', _.bind(this.onVerticalAlign, this, 'center'));
toolbar.btnAlignBottom.on('click', _.bind(this.onVerticalAlign, this, 'bottom'));
toolbar.btnWrap.on('click', _.bind(this.onWrap, this));
toolbar.btnTextOrient.menu.on('item:click', _.bind(this.onTextOrientationMenu, this));
toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageMenu, this));
toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlink, this));
toolbar.mnuInsertChartPicker.on('item:click', _.bind(this.onSelectChart, this));
toolbar.btnInsertText.on('click', _.bind(this.onBtnInsertTextClick, this));
toolbar.btnInsertText.menu.on('item:click', _.bind(this.onInsertTextClick, this));
toolbar.btnInsertShape.menu.on('hide:after', _.bind(this.onInsertShapeHide, this));
toolbar.btnInsertEquation.on('click', _.bind(this.onInsertEquationClick, this));
toolbar.btnSortDown.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
toolbar.btnSortUp.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
toolbar.mnuitemSortAZ.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
toolbar.mnuitemSortZA.on('click', _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
toolbar.btnSetAutofilter.on('click', _.bind(this.onAutoFilter, this));
toolbar.mnuitemAutoFilter.on('click', _.bind(this.onAutoFilter, this));
toolbar.btnClearAutofilter.on('click', _.bind(this.onClearFilter, this));
toolbar.mnuitemClearFilter.on('click', _.bind(this.onClearFilter, this));
toolbar.btnTableTemplate.menu.on('show:after', _.bind(this.onTableTplMenuOpen, this));
toolbar.btnPercentStyle.on('click', _.bind(this.onNumberFormat, this));
toolbar.btnCurrencyStyle.on('click', _.bind(this.onNumberFormat, this));
toolbar.btnDecDecimal.on('click', _.bind(this.onDecrement, this));
toolbar.btnIncDecimal.on('click', _.bind(this.onIncrement, this));
toolbar.btnInsertFormula.on('click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnSettings.on('click', _.bind(this.onAdvSettingsClick, this));
toolbar.btnInsertFormula.menu.on('item:click', _.bind(this.onInsertFormulaMenu, this));
toolbar.btnNamedRange.menu.on('item:click', _.bind(this.onNamedRangeMenu, this));
toolbar.btnNamedRange.menu.on('show:after', _.bind(this.onNamedRangeMenuOpen, this));
toolbar.btnClearStyle.menu.on('item:click', _.bind(this.onClearStyleMenu, this));
toolbar.btnAddCell.menu.on('item:click', _.bind(this.onCellInsertMenu, this));
toolbar.btnCopyStyle.on('toggle', _.bind(this.onCopyStyleToggle, this));
toolbar.btnDeleteCell.menu.on('item:click', _.bind(this.onCellDeleteMenu, this));
toolbar.btnColorSchemas.menu.on('item:click', _.bind(this.onColorSchemaClick, this));
toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this));
toolbar.cmbFontName.on('show:after', _.bind(this.onComboOpen, this, true));
toolbar.cmbFontName.on('hide:after', _.bind(this.onHideMenus, this));
toolbar.cmbFontName.on('combo:blur', _.bind(this.onComboBlur, this));
toolbar.cmbFontName.on('combo:focusin', _.bind(this.onComboOpen, this, false));
toolbar.cmbFontSize.on('selected', _.bind(this.onFontSizeSelect, this));
toolbar.cmbFontSize.on('changed:before', _.bind(this.onFontSizeChanged, this, true));
toolbar.cmbFontSize.on('changed:after', _.bind(this.onFontSizeChanged, this, false));
toolbar.cmbFontSize.on('show:after', _.bind(this.onComboOpen, this, true));
toolbar.cmbFontSize.on('hide:after', _.bind(this.onHideMenus, this));
toolbar.cmbFontSize.on('combo:blur', _.bind(this.onComboBlur, this));
toolbar.cmbFontSize.on('combo:focusin', _.bind(this.onComboOpen, this, false));
if (toolbar.mnuZoomIn) toolbar.mnuZoomIn.on('click', _.bind(this.onZoomInClick, this));
if (toolbar.mnuZoomOut) toolbar.mnuZoomOut.on('click', _.bind(this.onZoomOutClick, this));
if (toolbar.btnShowMode.rendered) toolbar.btnShowMode.menu.on('item:click', _.bind(this.onHideMenu, this));
toolbar.listStyles.on('click', _.bind(this.onListStyleSelect, this));
toolbar.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this));
toolbar.cmbNumberFormat.on('show:before', _.bind(this.onNumberFormatOpenBefore, this, true));
if (toolbar.cmbNumberFormat.cmpEl)
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnCurrencyStyle.menu.on('item:click', _.bind(this.onNumberFormatMenu, this));
if (toolbar.mnuitemCompactToolbar) toolbar.mnuitemCompactToolbar.on('toggle', _.bind(this.onChangeViewMode, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewTextColor, this));
$('#id-toolbar-menu-new-paracolor').on('click', _.bind(this.onNewBackColor, this));
$('#id-toolbar-menu-new-bordercolor').on('click', _.bind(this.onNewBorderColor, this));
this.onSetupCopyStyleButton();
this.onSetupCopyStyleButton();
}
},
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
var config = SSE.getController('Main').appOptions;
if ( !config.isEditDiagram && !config.isEditMailMerge ) {
this.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this));
this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onMathTypes, this));
}
this.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(this.onApiInitEditorStyles, this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this, true));
Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
this.api.asc_registerCallback('asc_onLockDefNameManager', _.bind(this.onLockDefNameManager, this));
this.api.asc_registerCallback('asc_onZoomChanged', _.bind(this.onApiZoomChange, this));
this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onMathTypes, this));
},
// onNewDocument: function(btn, e) {
@ -1283,7 +1312,7 @@ define([
}
this.hideElements(params);
option && Common.localStorage.setItem(option, item.checked);
option && Common.localStorage.setBool(option, item.checked);
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
@ -1304,19 +1333,22 @@ define([
this.toolbar.createDelayedElements();
this.onToolbarAfterRender(this.toolbar);
if ( !this.appConfig.isEditDiagram && !this.appConfig.isEditMailMerge ) {
this.api.asc_registerCallback('asc_onSheetsChanged', _.bind(this.onApiSheetChanged, this));
this.api.asc_registerCallback('asc_onUpdateSheetViewSettings', _.bind(this.onApiSheetChanged, this));
}
this.api.asc_registerCallback('asc_onShowChartDialog', _.bind(this.onApiChartDblClick, this));
this.api.asc_registerCallback('asc_onCanUndoChanged', _.bind(this.onApiCanRevert, this, 'undo'));
this.api.asc_registerCallback('asc_onCanRedoChanged', _.bind(this.onApiCanRevert, this, 'redo'));
this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
this.api.asc_registerCallback('asc_onEndAddShape', _.bind(this.onApiEndAddShape, this));
this.api.asc_registerCallback('asc_onSheetsChanged', _.bind(this.onApiSheetChanged, this));
this.api.asc_registerCallback('asc_onStopFormatPainter', _.bind(this.onApiStyleChange, this));
this.api.asc_registerCallback('asc_onUpdateSheetViewSettings', _.bind(this.onApiSheetChanged, this));
Common.util.Shortcuts.delegateShortcuts({
shortcuts: {
'command+l,ctrl+l': function(e) {
if (me.editMode && !me._state.multiselect) {
if ( me.editMode && !me._state.multiselect ) {
var formattableinfo = me.api.asc_getCellInfo().asc_getFormatTableInfo();
if (!formattableinfo) {
if (_.isUndefined(me.toolbar.mnuTableTemplatePicker))
@ -1374,63 +1406,20 @@ define([
},
onChangeViewMode: function(item, compact) {
var me = this,
toolbarFull = $('#id-toolbar-full'),
toolbarShort = $('#id-toolbar-short');
this.toolbar.setFolded(compact);
this.toolbar.fireEvent('view:compact', [this, compact]);
me.toolbar.isCompactView = compact;
Common.localStorage.setBool('sse-compact-toolbar', compact);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
if (toolbarFull && toolbarShort) {
me.api.asc_unregisterCallback('asc_onSelectionChanged', me.wrapOnSelectionChanged);
if (compact) {
toolbarShort.css({
display: 'table'
});
toolbarFull.css({
display: 'none'
});
toolbarShort.parent().css({
height: '41px'
});
me.toolbar.rendererComponents('short');
} else {
toolbarShort.css({
display: 'none'
});
toolbarFull.css({
display: 'table'
});
toolbarShort.parent().css({
height: '67px'
});
me.toolbar.rendererComponents('full');
// layout styles
_.defer(function(){
var listStylesVisible = (me.toolbar.listStyles.rendered);
if (me.toolbar.listStyles.menuPicker.store.length > 0 && listStylesVisible){
me.toolbar.listStyles.fillComboView(me.toolbar.listStyles.menuPicker.getSelectedRec(), true);
}
if (me.toolbar.btnInsertText.rendered)
me.fillTextArt();
if (me.toolbar.btnTableTemplate.rendered)
me.fillTableTemplates();
if (me.toolbar.btnInsertEquation.rendered)
me.fillEquations();
}, 100);
}
me._state.coauthdisable = undefined;
me.api.asc_registerCallback('asc_onSelectionChanged', me.wrapOnSelectionChanged);
me.onApiSelectionChanged(me.api.asc_getCellInfo());
Common.localStorage.setItem('sse-toolbar-compact', compact ? 1 : 0);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
onClickChangeCompact: function (from) {
if ( from != 'file' ) {
Common.Utils.asyncCall(function () {
this.onChangeViewMode(null, !this.toolbar.isCompact());
this.toolbar.mnuitemCompactToolbar.setChecked(this.toolbar.isCompact(), true);
}, this);
}
},
@ -1638,7 +1627,7 @@ define([
},
onApiSheetChanged: function() {
if (this.api) {
if ( !this.appConfig.isEditDiagram && !this.appConfig.isEditMailMerge ) {
var params = this.api.asc_getSheetViewSettings();
this.toolbar.mnuitemHideHeadings.setChecked(!params.asc_getShowRowColHeaders());
this.toolbar.mnuitemHideGridlines.setChecked(!params.asc_getShowGridLines());
@ -1736,16 +1725,20 @@ define([
val, need_disable = false;
/* read font name */
var fontparam = fontobj.asc_getName();
if (fontparam != toolbar.cmbFontName.getValue()) {
Common.NotificationCenter.trigger('fonts:change', fontobj);
if ( toolbar.cmbFontName ) {
var fontparam = fontobj.asc_getName();
if (fontparam != toolbar.cmbFontName.getValue()) {
Common.NotificationCenter.trigger('fonts:change', fontobj);
}
}
/* read font size */
var str_size = fontobj.asc_getSize();
if (this._state.fontsize !== str_size) {
toolbar.cmbFontSize.setValue((str_size!==undefined) ? str_size : '');
this._state.fontsize = str_size;
if ( toolbar.cmbFontSize ) {
var str_size = fontobj.asc_getSize();
if (this._state.fontsize !== str_size) {
toolbar.cmbFontSize.setValue((str_size !== undefined) ? str_size : '');
this._state.fontsize = str_size;
}
}
toolbar.lockToolbar(SSE.enumLock.cantHyperlink, (selectionType == Asc.c_oAscSelectionType.RangeShapeText) && (this.api.asc_canAddShapeHyperlink()===false), { array: [toolbar.btnInsertHyperlink]});
@ -2520,20 +2513,22 @@ define([
case Asc.c_oAscSelectionType.RangeChartText: type = _set.selChartText; break;
}
toolbar.lockToolbar(type, type != seltype, {
array: [
toolbar.btnClearStyle.menu.items[1],
toolbar.btnClearStyle.menu.items[2],
toolbar.btnClearStyle.menu.items[3],
toolbar.btnClearStyle.menu.items[4],
toolbar.mnuitemSortAZ,
toolbar.mnuitemSortZA,
toolbar.mnuitemAutoFilter,
toolbar.mnuitemClearFilter
],
merge: true,
clear: [_set.selImage, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.coAuth]
});
if ( !this.appConfig.isEditDiagram && !this.appConfig.isEditMailMerge )
toolbar.lockToolbar(type, type != seltype, {
array: [
toolbar.btnClearStyle.menu.items[1],
toolbar.btnClearStyle.menu.items[2],
toolbar.btnClearStyle.menu.items[3],
toolbar.btnClearStyle.menu.items[4],
toolbar.mnuitemSortAZ,
toolbar.mnuitemSortZA,
toolbar.mnuitemAutoFilter,
toolbar.mnuitemClearFilter
],
merge: true,
clear: [_set.selImage, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.coAuth]
});
toolbar.lockToolbar(SSE.enumLock.coAuthText, is_objLocked);
toolbar.lockToolbar(SSE.enumLock.coAuthText, is_objLocked && (seltype==Asc.c_oAscSelectionType.RangeChart || seltype==Asc.c_oAscSelectionType.RangeChartText), { array: [toolbar.btnInsertChart] } );
}
@ -2543,9 +2538,12 @@ define([
this._state.controlsdisabled.filters = is_image || is_mode_2 || coauth_disable;
if (is_image || is_mode_2 || coauth_disable) {
toolbar.listStyles.suspendEvents();
toolbar.listStyles.menuPicker.selectRecord(null);
toolbar.listStyles.resumeEvents();
if ( toolbar.listStyles ) {
toolbar.listStyles.suspendEvents();
toolbar.listStyles.menuPicker.selectRecord(null);
toolbar.listStyles.resumeEvents();
}
this._state.prstyle = undefined;
}
@ -2712,6 +2710,72 @@ define([
}
},
onAppShowed: function (config) {
var me = this;
me.appConfig = config;
var compactview = !config.isEdit;
if ( config.isEdit ) {
if ( Common.localStorage.itemExists("sse-compact-toolbar") ) {
compactview = Common.localStorage.getBool("sse-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.toolbar.applyLayout(config);
me.toolbar.render(_.extend({isCompactView: compactview}, config));
Common.Utils.asyncCall(function () {
me.toolbar.setMode(config);
if ( config.isEdit )
me.toolbar.setApi(me.api);
});
},
onAppReady: function (config) {
var me = this;
if ( config.canComments ) {
var _btnsComment = [];
var slots = me.toolbar.$el.find('.slot-comment');
slots.each(function(index, el) {
var _cls = 'btn-toolbar';
/x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
var button = new Common.UI.Button({
cls: _cls,
iconCls: 'svgicon svg-btn-comments',
caption: 'Comment'
}).render( slots.eq(index) );
_btnsComment.push(button);
});
if ( _btnsComment.length ) {
var _comments = SSE.getController('Common.Controllers.Comments').getView();
Array.prototype.push.apply(me.toolbar.lockControls, _btnsComment);
_btnsComment.forEach(function (btn) {
btn.updateHint( _comments.textAddComment );
btn.on('click', function (btn, e) {
Common.NotificationCenter.trigger('app:comment:add', 'toolbar');
});
}, this);
}
}
Common.Utils.asyncCall(function () {
if ( config.isEdit ) {
me.toolbar.onAppReady(config);
}
});
},
onFileMenu: function (opts) {
this.toolbar.setTab( opts == 'show' ? 'file' : undefined );
},
textEmptyImgUrl : 'You need to specify image URL.',
warnMergeLostData : 'Operation can destroy data in the selected cells.<br>Continue?',
textWarning : 'Warning',

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

@ -63,26 +63,53 @@ define([
// When controller is created let's setup view event listeners
initialize: function() {
var me = this;
// This most important part when we will tell our controller what events should be handled
this.addListeners({
// Events generated by main view
'Viewport': {
'Toolbar': {
'render:before' : function (toolbar) {
toolbar.setExtra('right', me.header.getPanel('right'));
toolbar.setExtra('left', me.header.getPanel('left'));
},
'view:compact' : function (toolbar, state) {
me.viewport.vlayout.panels[0].height = state ? 40 : 40+67;
}
},
'Common.Views.Header': {
'go:back': function (opts) {
Common.NotificationCenter.trigger('goback', /new/.test(opts));
// Common.component.Analytics.trackEvent('Back to Folder');
}
}
});
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
},
setApi: function(api) {
this.api = api;
},
onAppShowed: function (config) {
var me = this;
if ( !config.isEdit ||
( !Common.localStorage.itemExists("sse-compact-toolbar") &&
config.customization && config.customization.compactToolbar ))
{
me.viewport.vlayout.panels[0].height = 40;
}
},
// When our application is ready, lets get started
onLaunch: function() {
// Create and render main view
this.viewport = this.createView('Viewport').render();
this.header = this.createView('Common.Views.Header', {
headerCaption: 'Spreadsheet Editor'
}).render();
headerCaption: 'Spreadsheet Editor',
storeUsers: SSE.getCollection('Common.Collections.Users')
});
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
$(window).on('resize', _.bind(this.onWindowResize, this));

458
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -1,298 +1,166 @@
<div class="toolbar" style="<%= (isCompactView || isEditDiagram || isEditMailMerge) ? 'height: 41px;' : 'height: 67px;' %>">
<!----------------------->
<!-- Edit diagram mode -->
<!----------------------->
<div id="id-toolbar-diagramm" style="<%= isEditDiagram ? 'display: table;' : 'display: none;' %> width: 100%;" >
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-copy"></span>
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-paste"></span>
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-undo"></span>
<span class="btn-placeholder" id="id-toolbar-diagram-placeholder-btn-redo"></span>
</div>
<section class="toolbar">
<section class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a href="#" class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
<% for(var i in tabs) { %>
<li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
<a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
<div class="marker"></div>
</ul>
<a href="#" class="scroll right">
<i class="icon">&gt;</i>
</a>
</section>
<div class="extra right">
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-formula"></span>
</section>
<section class="box-controls">
<section class="panel static">
<div class="group no-mask">
<div class="elset">
<span class="btn-slot" id="slot-btn-print"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-save"></span>
</div>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-digit-dec"></span>
<span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-digit-inc"></span>
<span class="btn-placeholder" id="id-toolbar-diagram-placeholder-btn-format" style="width: 84px; margin-left: 10px; vertical-align: middle;"></span>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-slot" id="slot-btn-paste"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span>
</div>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder border" id="id-toolbar-diagram-placeholder-btn-chart" style="width: auto;"></span>
</div>
</div>
<div class="toolbar-group" style="width: 100%;"></div>
</div>
<!----------------------->
<!-- Edit mail merge mode -->
<!----------------------->
<div id="id-toolbar-merge" style="<%= isEditMailMerge ? 'display: table;' : 'display: none;' %> width: 100%;" >
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-merge-placeholder-btn-copy"></span>
<span class="btn-placeholder split" id="id-toolbar-merge-placeholder-btn-paste"></span>
<span class="btn-placeholder split" id="id-toolbar-merge-placeholder-btn-undo"></span>
<span class="btn-placeholder" id="id-toolbar-merge-placeholder-btn-redo"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-merge-placeholder-btn-sortdesc"></span>
<span class="btn-placeholder" id="id-toolbar-merge-placeholder-btn-sortasc"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-merge-placeholder-btn-setfilter"></span>
<span class="btn-placeholder" id="id-toolbar-merge-placeholder-btn-clear-filter"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-merge-placeholder-btn-search"></span>
</div>
</div>
<div class="toolbar-group" style="width: 100%;"></div>
</div>
<!------------------------>
<!-- Short view toolbar -->
<!------------------------>
<div id="id-toolbar-short" style="<%= (!isCompactView || isEditDiagram || isEditMailMerge) ? 'display: none;' : 'display: table;' %> width: 100%;" >
<div class="toolbar-group no-mask">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-print"></span>
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-save"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-undo"></span>
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-redo"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row" style="width: 140px; margin-top: -1px;">
<span class="btn-placeholder" style="float: left; width: 90px;" id="id-toolbar-short-placeholder-field-fontname"></span>
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-short-placeholder-field-fontsize"></span>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-bold"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-italic"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-underline"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-fontcolor"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-fillparag"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-borders"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-halign"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-valign"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-merge"></span>
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-wrap"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertimage"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-inserthyperlink"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertchart"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertshape"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-formula"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-filter"></span>
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-format" style="width: 84px; margin-left: 7px; vertical-align: middle;"></span>
</div>
</div>
<div class="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-copystyle"></span>
</div>
</div>
<!--<div class="separator short"></div>-->
<!--<div class="toolbar-group">-->
<!--<div class="toolbar-row">-->
<!--<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-cell-ins"></span>-->
<!--<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-cell-del"></span>-->
<!--</div>-->
<!--</div>-->
<div class="toolbar-group" style="width: 100%;"></div>
<div class="toolbar-group no-mask" style="padding-left:0;">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-hidebars"></span>
</div>
</div>
</div>
<!------------------------>
<!-- Fully view toolbar -->
<!------------------------>
<div id="id-toolbar-full" style="<%= (isCompactView || isEditDiagram || isEditMailMerge)? 'display: none;' : 'display: table;' %> width: 100%;" >
<div class="toolbar-group toolbar-group-native">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-newdocument"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-opendocument"></span>
</div>
</div>
<div class="toolbar-group no-mask">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-print"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-save"></span>
</div>
</div>
<div class="separator long" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-copy"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-paste"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-undo"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-redo"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" style="float: left; width: 90px;" id="id-toolbar-full-placeholder-field-fontname"></span>
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-full-placeholder-field-fontsize"></span>
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-incfont" style="margin-left: 2px;"></span>
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-decfont" style="margin-left: 2px;"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-bold"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-italic"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-underline"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-fontcolor"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-fillparag"></span>
<div class="separator short" style="margin: 0 6px;"></div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-borders"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-top"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-middle"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-bottom"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-wrap"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-text-orient"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-left"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-center"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-right"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-just"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-merge"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertimage"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertchart"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-text"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserthyperlink"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertshape"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-insertequation"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-formula"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-named-range"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-sortdesc"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-sortasc"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-setfilter"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clear-filter"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-format" style="width: 100%"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-percents"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-currency"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-digit-dec"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-digit-inc"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-cell-ins"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-cell-del"></span>
</div>
</div>
<div class="separator long"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clear"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-copystyle"></span>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-colorschemas"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-table-tpl"></span>
</div>
</div>
<div class="toolbar-group" id="id-toolbar-full-placeholder-field-styles" style="width: 100%; min-width: 160px;">
</div>
<div class="toolbar-group no-mask">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-hidebars"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-settings"></span>
</div>
</div>
</div>
</div>
<div class="separator long"></div>
</section>
<section class="box-panels">
<section class="panel" data-tab="home">
<div class="group">
<div class="elset">
<span class="btn-slot" style="float: left; width: 90px;" id="slot-field-fontname"></span>
<span class="btn-slot" style="float: left; width: 45px; margin-left: 2px;" id="slot-field-fontsize"></span>
<span class="btn-slot border" id="slot-btn-incfont" style="margin-left: 2px;"></span>
<span class="btn-slot border" id="slot-btn-decfont" style="margin-left: 2px;"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-bold"></span>
<span class="btn-slot split" id="slot-btn-italic"></span>
<span class="btn-slot split" id="slot-btn-underline"></span>
<span class="btn-slot split" id="slot-btn-fontcolor"></span>
<span class="btn-slot split" id="slot-btn-fillparag"></span>
<div class="separator short" style="margin: 0 6px;"></div>
<span class="btn-slot split" id="slot-btn-borders"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-top"></span>
<span class="btn-slot split" id="slot-btn-middle"></span>
<span class="btn-slot split" id="slot-btn-bottom"></span>
<span class="btn-slot split" id="slot-btn-wrap"></span>
<span class="btn-slot" id="slot-btn-text-orient"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-align-left"></span>
<span class="btn-slot split" id="slot-btn-align-center"></span>
<span class="btn-slot split" id="slot-btn-align-right"></span>
<span class="btn-slot split" id="slot-btn-align-just"></span>
<span class="btn-slot" id="slot-btn-merge"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-formula"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-named-range"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-sortdesc"></span>
<span class="btn-slot" id="slot-btn-sortasc"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-setfilter"></span>
<span class="btn-slot" id="slot-btn-clear-filter"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-format" style="width: 100%"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-percents"></span>
<span class="btn-slot split" id="slot-btn-currency"></span>
<span class="btn-slot split" id="slot-btn-digit-dec"></span>
<span class="btn-slot" id="slot-btn-digit-inc"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-cell-ins"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-cell-del"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-clear"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-copystyle"></span>
</div>
</div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-colorschemas"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-table-tpl"></span>
</div>
</div>
<div class="group" id="slot-field-styles" style="width: 100%; min-width: 160px;">
</div>
<div class="group no-mask">
<div class="elset">
<span class="btn-slot split" id="slot-btn-hidebars"></span>
</div>
<div class="elset">
<span class="btn-slot" id="slot-btn-settings"></span>
</div>
</div>
</section>
<section class="panel" data-tab="ins">
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-insimage"></span>
<span class="btn-slot text x-huge" id="slot-btn-insshape"></span>
<span class="btn-slot text x-huge" id="slot-btn-instext"></span>
<span class="btn-slot text x-huge" id="slot-btn-inschart"></span>
<div class="separator long"></div>
<span class="btn-slot text x-huge slot-comment"></span>
<span class="btn-slot text x-huge" id="slot-btn-inshyperlink"></span>
<div class="separator long"></div>
<span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
</div>
</section>
</section>
</section>
</section>

73
apps/spreadsheeteditor/main/app/template/ToolbarAnother.template Normal file
View file

@ -0,0 +1,73 @@
<div class="toolbar" style="<%= (isEditDiagram || isEditMailMerge) ? 'height: 41px;' : 'height: 67px;' %>">
<% if ( isEditDiagram ) { %>
<!----------------------->
<!-- Edit diagram mode -->
<!----------------------->
<section class="simple-bar">
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-slot split" id="slot-btn-paste"></span>
<span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span>
</div>
</div>
<div class="separator short"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-formula"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-digit-dec"></span>
<span class="btn-slot split" id="slot-btn-digit-inc"></span>
<span class="btn-slot" id="slot-btn-format" style="width: 84px; margin-left: 10px; vertical-align: middle;"></span>
</div>
</div>
<div class="separator short"></div>
<div class="group">
<div class="elset">
<span class="btn-slot border" id="slot-btn-chart" style="width: auto;"></span>
</div>
</div>
<div class="group" style="width: 100%;"></div>
</section>
<% } else if ( isEditMailMerge ) { %>
<!----------------------->
<!-- Edit mail merge mode -->
<!----------------------->
<section class="simple-bar">
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-slot split" id="slot-btn-paste"></span>
<span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span>
</div>
</div>
<div class="separator short"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-sortdesc"></span>
<span class="btn-slot" id="slot-btn-sortasc"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-setfilter"></span>
<span class="btn-slot" id="slot-btn-clear-filter"></span>
</div>
</div>
<div class="separator short"></div>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-search"></span>
</div>
</div>
<div class="group" style="width: 100%;"></div>
</section>
<% } %>
</div>

5
apps/spreadsheeteditor/main/app/view/FileMenu.js
View file

@ -183,14 +183,15 @@ define([
panel = this.active || ((this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info');
this.$el.show();
this.selectMenu(panel);
if (this.mode.isEdit) SSE.getController('Toolbar').DisableToolbar(true);
this.api.asc_enableKeyEvents(false);
this.fireEvent('menu:show', [this]);
},
hide: function() {
this.$el.hide();
if (this.mode.isEdit) SSE.getController('Toolbar').DisableToolbar(false);
this.api.asc_enableKeyEvents(true);
this.fireEvent('menu:hide', [this]);
},
applyMode: function() {

2467
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

File diff suppressed because it is too large Load diff

18
apps/spreadsheeteditor/main/app/view/Viewport.js
View file

@ -85,20 +85,18 @@ define([
var items = $container.find(' > .layout-item');
this.vlayout = new Common.UI.VBoxLayout({
box: $container,
items: [{
items: [
{
// el: items[0], // decorative element for view mode for desktop
// height: 5
// }, {
el: items[0],
rely: true
height: Common.localStorage.getBool('sse-compact-toolbar') ? 40 : 40+67
}, {
el: items[1],
height: 5
}, {
el: items[2],
rely: true
}, {
el: items[3],
stretch: true
}, {
el: items[4],
el: items[2],
height: 25
}]
});
@ -147,10 +145,8 @@ define([
applyEditorMode: function() {
var me = this,
toolbarView = SSE.getController('Toolbar').getView('Toolbar'),
rightMenuView = SSE.getController('RightMenu').getView('RightMenu');
me._toolbar = toolbarView.render(this.mode);
me._rightMenu = rightMenuView.render();
},

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

@ -260,10 +260,24 @@
<div id="viewport"></div>
<svg style="display: none;">
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
<rect x="6" y="7" width="8" height="1"/>
<rect x="6" y="9" width="8" height="1"/>
<rect x="6" y="11" width="8" height="1"/>
</symbol>
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
</symbol>
</svg>
<script type="text/javascript">
window.g_debug_mode = true;
</script>
<!-- debug begin -->
<script type="text/javascript">var less=less||{};less.env='development';</script>
<script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>

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

@ -75,6 +75,9 @@
"Common.Views.Header.openNewTabText": "Open in New Tab",
"Common.Views.Header.textBack": "Go to Documents",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.tipAccessRights": "Manage document access rights",
"Common.Views.Header.labelCoUsersDescr": "Document is currently being edited by several users.",
"Common.Views.ImageFromUrlDialog.cancelButtonText": "Cancel",
"Common.Views.ImageFromUrlDialog.okButtonText": "OK",
"Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:",
@ -1721,6 +1724,13 @@
"SSE.Views.Toolbar.txtTime": "Time",
"SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells",
"SSE.Views.Toolbar.txtYen": "¥ Yen",
"SSE.Views.Toolbar.capInsertText": "Text Box",
"SSE.Views.Toolbar.capInsertImage": "Picture",
"SSE.Views.Toolbar.capInsertShape": "Shape",
"SSE.Views.Toolbar.capInsertTable": "Table",
"SSE.Views.Toolbar.capInsertChart": "Chart",
"SSE.Views.Toolbar.capInsertHyperlink": "Hyperlink",
"SSE.Views.Toolbar.capInsertEquation": "Equation",
"SSE.Views.Top10FilterDialog.cancelButtonText": "Cancel",
"SSE.Views.Top10FilterDialog.okButtonText": "OK",
"SSE.Views.Top10FilterDialog.textType": "Show",

1
apps/spreadsheeteditor/main/resources/less/app.less
View file

@ -112,6 +112,7 @@
@import "../../../../common/main/resources/less/common.less";
@import "../../../../common/main/resources/less/opendialog.less";
@import "../../../../common/main/resources/less/plugins.less";
@import "../../../../common/main/resources/less/toolbar.less";
// App
// --------------------------------------------------

65
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -1,61 +1,5 @@
.toolbar {
padding: 10px 0;
background-color: @gray-light;
.box-inner-shadow(0 -1px 0 @gray-dark);
.toolbar-group {
display: table-cell;
vertical-align: top;
white-space: nowrap;
padding-left: 12px;
&:last-child {
padding-right: 12px;
}
}
.toolbar-row {
height: 20px;
font-size: 0;
&:not(:first-child) {
margin-top: 6px;
}
}
.separator {
margin-left: 12px;
&.long {
height: 46px;
}
&.short {
height: 20px;
}
}
.btn-placeholder {
// background-color: red;
display: inline-block;
width: 20px;
height: 20px;
&:not(:first-child) {
margin-left: 1px;
}
&.split {
width: 28px;
}
&.border {
border: 1px solid @gray;
.border-radius(1px);
width: 22px;
height: 22px;
}
}
z-index: 102;
&.masked {
button.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-showmode) {
@ -65,6 +9,11 @@
opacity: 0.4;
}
}
.simple-bar {
display: table;
width: 100%;
}
}
.toolbar-mask {
@ -265,4 +214,4 @@
z-index: @zindex-dropdown - 20;
background-color: @gray-light;
border: 1px solid @gray;
}
}