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 **/

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

@ -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();
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);
}

194
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,6 +182,24 @@ define([
/**
* UI Events
*/
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));
@ -211,7 +237,6 @@ define([
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));
@ -224,7 +249,6 @@ define([
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));
@ -267,18 +291,23 @@ define([
$('#id-toolbar-menu-new-bordercolor').on('click', _.bind(this.onNewBorderColor, this));
this.onSetupCopyStyleButton();
}
},
setApi: function(api) {
this.api = api;
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;
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.localStorage.setBool('sse-compact-toolbar', compact);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
Common.NotificationCenter.trigger('edit:complete', this.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,17 +1725,21 @@ define([
val, need_disable = false;
/* read font name */
if ( toolbar.cmbFontName ) {
var fontparam = fontobj.asc_getName();
if (fontparam != toolbar.cmbFontName.getValue()) {
Common.NotificationCenter.trigger('fonts:change', fontobj);
}
}
/* read font size */
if ( toolbar.cmbFontSize ) {
var str_size = fontobj.asc_getSize();
if (this._state.fontsize !== str_size) {
toolbar.cmbFontSize.setValue((str_size!==undefined) ? 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,6 +2513,7 @@ define([
case Asc.c_oAscSelectionType.RangeChartText: type = _set.selChartText; break;
}
if ( !this.appConfig.isEditDiagram && !this.appConfig.isEditMailMerge )
toolbar.lockToolbar(type, type != seltype, {
array: [
toolbar.btnClearStyle.menu.items[1],
@ -2534,6 +2528,7 @@ define([
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) {
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));

394
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>
<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>
</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="separator short"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-diagram-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-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>
</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 class="elset">
<span class="btn-slot" id="slot-btn-save"></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 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="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="elset">
<span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span>
</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-placeholder split" id="id-toolbar-full-placeholder-btn-borders"></span>
<span class="btn-slot split" id="slot-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 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="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 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="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 class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-formula"></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 class="elset">
<span class="btn-slot" id="slot-btn-named-range"></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 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="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-named-range"></span>
<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="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 class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-format" style="width: 100%"></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 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="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-format" style="width: 100%"></span>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-cell-ins"></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 class="elset">
<span class="btn-slot" id="slot-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-cell-ins"></span>
<div class="group">
<div class="elset">
<span class="btn-slot" id="slot-btn-clear"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-cell-del"></span>
<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>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clear"></span>
<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>
<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>
</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() {

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

@ -39,10 +39,9 @@
*/
define([
'jquery',
'underscore',
'backbone',
'text!spreadsheeteditor/main/app/template/Toolbar.template',
'text!spreadsheeteditor/main/app/template/ToolbarAnother.template',
'common/main/lib/collection/Fonts',
'common/main/lib/component/Button',
'common/main/lib/component/ComboBox',
@ -54,10 +53,9 @@ define([
'common/main/lib/component/Window',
'common/main/lib/component/ComboBoxFonts',
'common/main/lib/component/ComboDataView'
/** coauthoring begin **/
,'common/main/lib/component/SynchronizeTip'
/** coauthoring end **/
], function ($, _, Backbone, toolbarTemplate) { 'use strict';
,'common/main/lib/component/Mixtbar'
], function (Backbone, template, simple) { 'use strict';
SSE.enumLock = {
editCell: 'cell-editing',
@ -81,11 +79,11 @@ define([
cantHyperlink: 'cant-hyperlink'
};
SSE.Views.Toolbar = Backbone.View.extend(_.extend({
SSE.Views.Toolbar = Common.UI.Mixtbar.extend(_.extend({
el: '#toolbar',
// Compile our stats template
template: _.template(toolbarTemplate),
template: _.template(template),
// Delegated events for creating new items, and clearing completed ones.
events: {
@ -137,75 +135,7 @@ define([
{ value: Asc.c_oAscNumFormatType.Text, format: this.ascFormatOptions.Text, displayValue: this.txtText, exampleval: '100' }
];
function dummyCmp() {
return {
isDummy : true,
on : function() {}
}
}
var _set = SSE.enumLock;
me.cmbFontSize = new Common.UI.ComboBox({
cls : 'input-group-nr',
menuStyle : 'min-width: 55px;',
hint : me.tipFontSize,
lock : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
data : [
{ value: 8, displayValue: "8" },
{ value: 9, displayValue: "9" },
{ value: 10, displayValue: "10" },
{ value: 11, displayValue: "11" },
{ value: 12, displayValue: "12" },
{ value: 14, displayValue: "14" },
{ value: 16, displayValue: "16" },
{ value: 18, displayValue: "18" },
{ value: 20, displayValue: "20" },
{ value: 22, displayValue: "22" },
{ value: 24, displayValue: "24" },
{ value: 26, displayValue: "26" },
{ value: 28, displayValue: "28" },
{ value: 36, displayValue: "36" },
{ value: 48, displayValue: "48" },
{ value: 72, displayValue: "72" }
]
});
me.btnNewDocument = new Common.UI.Button({
id : 'id-toolbar-btn-newdocument',
cls : 'btn-toolbar',
iconCls : 'btn-newdocument',
lock : [_set.lostConnect]
});
me.btnOpenDocument = new Common.UI.Button({
id : 'id-toolbar-btn-opendocument',
cls : 'btn-toolbar',
iconCls : 'btn-opendocument',
lock : [_set.lostConnect]
});
me.cmbFontName = new Common.UI.ComboBoxFonts({
cls : 'input-group-nr',
menuCls : 'scrollable-menu',
menuStyle : 'min-width: 325px;',
hint : me.tipFontName,
lock : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
store : new Common.Collections.Fonts()
});
me.btnPrint = new Common.UI.Button({
id : 'id-toolbar-btn-print',
cls : 'btn-toolbar',
iconCls : 'btn-print',
lock : [_set.editCell, _set.cantPrint]
});
me.btnSave = new Common.UI.Button({
id : 'id-toolbar-btn-save',
cls : 'btn-toolbar',
iconCls : me.btnSaveCls
});
me.btnCopy = new Common.UI.Button({
id : 'id-toolbar-btn-copy',
cls : 'btn-toolbar',
@ -235,6 +165,214 @@ define([
lock : [_set.lostConnect]
});
return this;
},
lockToolbar: function(causes, lock, opts) {
!opts && (opts = {});
var controls = opts.array || this.lockControls;
opts.merge && (controls = _.union(this.lockControls,controls));
function doLock(cmp, cause) {
if ( cmp && _.contains(cmp.options.lock, cause) ) {
var index = cmp.keepState.indexOf(cause);
if (lock) {
if (index < 0) {
cmp.keepState.push(cause);
}
} else {
if (!(index < 0)) {
cmp.keepState.splice(index, 1);
}
}
}
}
_.each(controls, function(item) {
if (item && _.isFunction(item.setDisabled)) {
!item.keepState && (item.keepState = []);
if (opts.clear && opts.clear.length > 0 && item.keepState.length > 0) {
item.keepState = _.difference(item.keepState, opts.clear);
}
_.isArray(causes) ? _.each(causes, function(c) {doLock(item, c)}) : doLock(item, causes);
if (!(item.keepState.length > 0)) {
item.isDisabled() && item.setDisabled(false);
} else {
!item.isDisabled() && item.setDisabled(true);
}
}
});
},
applyLayout: function (config) {
var me = this;
function dummyCmp() {
return {
isDummy : true,
on : function() {}
}
}
var _set = SSE.enumLock;
if ( config.isEditDiagram ) {
me.$layout = $(_.template(simple)(config));
me.btnInsertFormula = new Common.UI.Button({
id : 'id-toolbar-btn-insertformula',
cls : 'btn-toolbar',
iconCls : 'btn-formula',
split : true,
lock : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({
style : 'min-width: 110px',
items : [
{caption: 'SUM', value: 'SUM'},
{caption: 'MIN', value: 'MIN'},
{caption: 'MAX', value: 'MAX'},
{caption: 'COUNT', value: 'COUNT'},
{caption: '--'},
{
caption: me.txtAdditional,
value: 'more'
}
]
})
});
me.btnDecDecimal = new Common.UI.Button({
id : 'id-toolbar-btn-decdecimal',
cls : 'btn-toolbar',
iconCls : 'btn-decdecimal',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
});
me.btnIncDecimal = new Common.UI.Button({
id : 'id-toolbar-btn-incdecimal',
cls : 'btn-toolbar',
iconCls : 'btn-incdecimal',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
});
me.cmbNumberFormat = new Common.UI.ComboBox({
cls : 'input-group-nr',
menuStyle : 'min-width: 180px;',
hint : me.tipNumFormat,
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth],
itemsTemplate: formatTemplate,
editable : false,
data : me.numFormatData
});
me.btnEditChart = new Common.UI.Button({
id : 'id-toolbar-rtn-edit-chart',
cls : 'btn-toolbar btn-text-value',
caption : me.tipEditChart,
lock : [_set.lostConnect],
style : 'width: 120px;'
});
} else
if ( config.isEditMailMerge ) {
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(simple),
tabs: undefined
});
me.btnSearch = new Common.UI.Button({
id : 'id-toolbar-btn-search',
cls : 'btn-toolbar',
iconCls : 'btn-search',
lock : [_set.lostConnect]
});
me.btnSortDown = new Common.UI.Button({
id : 'id-toolbar-btn-sort-down',
cls : 'btn-toolbar',
iconCls : 'btn-sort-down',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter]
});
me.btnSortUp = new Common.UI.Button({
id : 'id-toolbar-btn-sort-up',
cls : 'btn-toolbar',
iconCls : 'btn-sort-up',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter]
});
me.btnSetAutofilter = new Common.UI.Button({
id : 'id-toolbar-btn-setautofilter',
cls : 'btn-toolbar',
iconCls : 'btn-autofilter',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter],
enableToggle: true
});
me.btnClearAutofilter = new Common.UI.Button({
id : 'id-toolbar-btn-clearfilter',
cls : 'btn-toolbar',
iconCls : 'btn-clear-filter',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleDelFilter]
});
} else {
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template),
tabs: [
{ caption: 'File'/*me.textTabFile*/, action: 'file'},
{ caption: 'Home'/*me.textTabHome*/, action: 'home', extcls: 'canedit'},
{ caption: 'Insert'/*me.textTabInsert*/, action: 'ins', extcls: 'canedit'}
]}
);
me.cmbFontSize = new Common.UI.ComboBox({
cls : 'input-group-nr',
menuStyle : 'min-width: 55px;',
hint : me.tipFontSize,
lock : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
data : [
{ value: 8, displayValue: "8" },
{ value: 9, displayValue: "9" },
{ value: 10, displayValue: "10" },
{ value: 11, displayValue: "11" },
{ value: 12, displayValue: "12" },
{ value: 14, displayValue: "14" },
{ value: 16, displayValue: "16" },
{ value: 18, displayValue: "18" },
{ value: 20, displayValue: "20" },
{ value: 22, displayValue: "22" },
{ value: 24, displayValue: "24" },
{ value: 26, displayValue: "26" },
{ value: 28, displayValue: "28" },
{ value: 36, displayValue: "36" },
{ value: 48, displayValue: "48" },
{ value: 72, displayValue: "72" }
]
});
me.cmbFontName = new Common.UI.ComboBoxFonts({
cls : 'input-group-nr',
menuCls : 'scrollable-menu',
menuStyle : 'min-width: 325px;',
hint : me.tipFontName,
lock : [_set.selImage, _set.editFormula, _set.selRange, _set.coAuth, _set.coAuthText, _set.lostConnect],
store : new Common.Collections.Fonts()
});
me.btnPrint = new Common.UI.Button({
id : 'id-toolbar-btn-print',
cls : 'btn-toolbar',
iconCls : 'btn-print',
lock : [_set.editCell, _set.cantPrint]
});
me.btnSave = new Common.UI.Button({
id : 'id-toolbar-btn-save',
cls : 'btn-toolbar',
iconCls : me.btnSaveCls
});
me.btnIncFontSize = new Common.UI.Button({
id : 'id-toolbar-btn-incfont',
cls : 'btn-toolbar',
@ -482,8 +620,9 @@ define([
me.btnInsertImage = new Common.UI.Button({
id : 'id-toolbar-btn-insertimage',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertimage',
caption : me.capInsertImage,
lock : [_set.editCell, _set.selChartText, _set.selImage, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({
items: [
@ -495,16 +634,18 @@ define([
me.btnInsertHyperlink = new Common.UI.Button({
id : 'id-toolbar-btn-inserthyperlink',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-inserthyperlink',
caption : me.capInsertHyperlink,
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selImage, _set.selShape, _set.cantHyperlink, _set.multiselect, _set.lostConnect, _set.coAuth]
});
me.btnInsertChart = new Common.UI.Button({
id : 'id-toolbar-btn-insertchart',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertchart',
lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.coAuthText],
caption : me.capInsertChart,
menu : new Common.UI.Menu({
style: 'width: 435px;',
items: [
@ -513,27 +654,21 @@ define([
})
});
me.btnEditChart = new Common.UI.Button({
id : 'id-toolbar-rtn-edit-chart',
cls : 'btn-toolbar btn-text-value',
caption : me.tipEditChart,
lock : [_set.lostConnect],
style : 'width: 120px;'
});
me.btnInsertShape = new Common.UI.Button({
id : 'id-toolbar-btn-insertshape',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertshape',
enableToggle: true,
caption : me.capInsertShape,
lock : [_set.editCell, _set.selChartText, _set.selImage, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({cls: 'menu-shapes'})
});
me.btnInsertText = new Common.UI.Button({
id : 'id-toolbar-btn-inserttext',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-text',
caption : me.capInsertText,
lock : [_set.editCell, _set.selChartText, _set.selImage, _set.lostConnect, _set.coAuth],
enableToggle: true,
split : true,
@ -555,10 +690,11 @@ define([
})
});
this.btnInsertEquation = new Common.UI.Button({
me.btnInsertEquation = new Common.UI.Button({
id : 'id-toolbar-btn-insertequation',
cls : 'btn-toolbar',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertequation',
caption : me.capInsertEquation,
split : true,
lock : [_set.editCell, _set.selChartText, _set.selImage, _set.lostConnect, _set.coAuth],
menu : new Common.UI.Menu({cls: 'menu-shapes'})
@ -593,13 +729,6 @@ define([
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleDelFilter]
});
me.btnSearch = new Common.UI.Button({
id : 'id-toolbar-btn-search',
cls : 'btn-toolbar',
iconCls : 'btn-search',
lock : [_set.lostConnect]
});
me.btnTableTemplate = new Common.UI.Button({
id : 'id-toolbar-btn-ttempl',
cls : 'btn-toolbar',
@ -1098,11 +1227,9 @@ define([
/*me.btnSave, */me.btnClearStyle, me.btnCopyStyle
];
/** coauthoring begin **/
var hidetip = Common.localStorage.getItem("sse-hide-synch");
me.showSynchTip = !(hidetip && parseInt(hidetip) == 1);
me.needShowSynchTip = false;
/** coauthoring end **/
var _temp_array = [me.cmbFontName, me.cmbFontSize, me.btnAlignLeft,me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust,me.btnAlignTop,
me.btnAlignMiddle, me.btnAlignBottom, me.btnHorizontalAlign, me.btnVerticalAlign,
@ -1119,228 +1246,211 @@ define([
if (cmp && _.isFunction(cmp.setDisabled))
cmp.setDisabled(true);
});
return this;
},
lockToolbar: function(causes, lock, opts) {
!opts && (opts = {});
var controls = opts.array || this.lockControls;
opts.merge && (controls = _.union(this.lockControls,controls));
function doLock(cmp, cause) {
if ( _.contains(cmp.options.lock, cause) ) {
var index = cmp.keepState.indexOf(cause);
if (lock) {
if (index < 0) {
cmp.keepState.push(cause);
}
} else {
if (!(index < 0)) {
cmp.keepState.splice(index, 1);
}
}
}
}
_.each(controls, function(item) {
if (_.isFunction(item.setDisabled)) {
!item.keepState && (item.keepState = []);
if (opts.clear && opts.clear.length > 0 && item.keepState.length > 0) {
item.keepState = _.difference(item.keepState, opts.clear);
}
_.isArray(causes) ? _.each(causes, function(c) {doLock(item, c)}) : doLock(item, causes);
if (!(item.keepState.length > 0)) {
item.isDisabled() && item.setDisabled(false);
} else {
!item.isDisabled() && item.setDisabled(true);
}
}
});
},
render: function (mode) {
var me = this,
el = $(this.el);
var me = this;
/**
* Render UI layout
*/
var isCompactView = JSON.parse(Common.localStorage.getItem('sse-toolbar-compact'));
isCompactView = !!(isCompactView!==null && parseInt(isCompactView) == 1 || isCompactView === null && mode.customization && mode.customization.compactToolbar);
me.isCompactView = mode.isCompactView;
this.trigger('render:before', this);
this.fireEvent('render:before', [this]);
el.html(this.template({
isEditDiagram: mode.isEditDiagram,
isEditMailMerge: mode.isEditMailMerge,
isCompactView: isCompactView
}));
// el.html(this.template({
// isEditDiagram: mode.isEditDiagram,
// isEditMailMerge: mode.isEditMailMerge,
// isCompactView: isCompactView
// }));
// me.rendererComponents(mode.isEditDiagram ? 'diagram' : (mode.isEditMailMerge ? 'merge' : isCompactView ? 'short' : 'full'));
me.rendererComponents(mode.isEditDiagram ? 'diagram' : (mode.isEditMailMerge ? 'merge' : isCompactView ? 'short' : 'full'));
if ( mode.isEdit ) {
me.$el.html(me.rendererComponents(me.$layout));
} else {
me.$layout.find('.canedit').hide();
me.$layout.addClass('folded');
this.trigger('render:after', this);
me.$el.html(me.$layout);
}
this.fireEvent('render:after', [this]);
Common.UI.Mixtbar.prototype.afterRender.call(this);
me.$tabs.parent().on('click', '.ribtab', function (e) {
var tab = $(e.target).data('tab');
if (tab == 'file') {
me.fireEvent('file:open');
} else
if ( me.isTabActive('file') )
me.fireEvent('file:close');
me.setTab(tab);
});
Common.NotificationCenter.on({
'window:resize': function() {
Common.UI.Mixtbar.prototype.onResize.apply(me, arguments);
}
});
if ( me.isCompactView )
me.setFolded(true); else
me.setTab('home');
return this;
},
rendererComponents: function(mode) {
var replacePlacholder = function(id, cmp) {
var placeholderEl = $(id),
placeholderDom = placeholderEl.get(0);
if (placeholderDom) {
if (cmp.rendered) {
cmp.el = document.getElementById(cmp.id);
if (cmp.el) placeholderDom.appendChild(document.getElementById(cmp.id));
} else {
cmp.render(placeholderEl);
rendererComponents: function(html) {
var $host = $(html);
var _injectComponent = function (id, cmp) {
if ( cmp ) {
var $slot = $host.find(id);
if ( $slot.length ) {
cmp.rendered ?
$slot.append(cmp.$el) : cmp.render($slot);
}
}
};
replacePlacholder('#id-toolbar-' + mode + '-placeholder-field-fontname', this.cmbFontName);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-field-fontsize', this.cmbFontSize);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-newdocument', this.btnNewDocument);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-opendocument', this.btnOpenDocument);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-print', this.btnPrint);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-save', this.btnSave);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-undo', this.btnUndo);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-redo', this.btnRedo);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-copy', this.btnCopy);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-paste', this.btnPaste);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-incfont', this.btnIncFontSize);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-decfont', this.btnDecFontSize);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-bold', this.btnBold);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-italic', this.btnItalic);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-underline', this.btnUnderline);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-fontcolor', this.btnTextColor);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-fillparag', this.btnBackColor);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-borders', this.btnBorders);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-align-left', this.btnAlignLeft);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-align-center', this.btnAlignCenter);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-align-right', this.btnAlignRight);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-align-just', this.btnAlignJust);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-merge', this.btnMerge);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-top', this.btnAlignTop);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-middle', this.btnAlignMiddle);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-bottom', this.btnAlignBottom);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-wrap', this.btnWrap);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-text-orient', this.btnTextOrient);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-insertimage', this.btnInsertImage);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-insertshape', this.btnInsertShape);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-text', this.btnInsertText);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-insertequation', this.btnInsertEquation);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-sortdesc', this.btnSortDown);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-sortasc', this.btnSortUp);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-setfilter', this.btnSetAutofilter);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-clear-filter', this.btnClearAutofilter);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-table-tpl', this.btnTableTemplate);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-format', this.cmbNumberFormat);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-percents', this.btnPercentStyle);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-currency', this.btnCurrencyStyle);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-digit-dec', this.btnDecDecimal);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-digit-inc', this.btnIncDecimal);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-formula', this.btnInsertFormula);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-named-range', this.btnNamedRange);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-clear', this.btnClearStyle);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-copystyle', this.btnCopyStyle);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-cell-ins', this.btnAddCell);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-cell-del', this.btnDeleteCell);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-colorschemas', this.btnColorSchemas);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-hidebars', this.btnShowMode);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-settings', this.btnSettings);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-search', this.btnSearch);
replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-insertchart', this.btnInsertChart);
replacePlacholder('#id-toolbar-diagram-placeholder-btn-chart', this.btnEditChart);
replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign);
replacePlacholder('#id-toolbar-short-placeholder-btn-valign', this.btnVerticalAlign);
replacePlacholder('#id-toolbar-short-placeholder-btn-filter', this.btnAutofilter);
replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listStyles);
_injectComponent('#slot-field-fontname', this.cmbFontName);
_injectComponent('#slot-field-fontsize', this.cmbFontSize);
_injectComponent('#slot-btn-print', this.btnPrint);
_injectComponent('#slot-btn-save', this.btnSave);
_injectComponent('#slot-btn-undo', this.btnUndo);
_injectComponent('#slot-btn-redo', this.btnRedo);
_injectComponent('#slot-btn-copy', this.btnCopy);
_injectComponent('#slot-btn-paste', this.btnPaste);
_injectComponent('#slot-btn-incfont', this.btnIncFontSize);
_injectComponent('#slot-btn-decfont', this.btnDecFontSize);
_injectComponent('#slot-btn-bold', this.btnBold);
_injectComponent('#slot-btn-italic', this.btnItalic);
_injectComponent('#slot-btn-underline', this.btnUnderline);
_injectComponent('#slot-btn-fontcolor', this.btnTextColor);
_injectComponent('#slot-btn-fillparag', this.btnBackColor);
_injectComponent('#slot-btn-borders', this.btnBorders);
_injectComponent('#slot-btn-align-left', this.btnAlignLeft);
_injectComponent('#slot-btn-align-center', this.btnAlignCenter);
_injectComponent('#slot-btn-align-right', this.btnAlignRight);
_injectComponent('#slot-btn-align-just', this.btnAlignJust);
_injectComponent('#slot-btn-merge', this.btnMerge);
_injectComponent('#slot-btn-top', this.btnAlignTop);
_injectComponent('#slot-btn-middle', this.btnAlignMiddle);
_injectComponent('#slot-btn-bottom', this.btnAlignBottom);
_injectComponent('#slot-btn-wrap', this.btnWrap);
_injectComponent('#slot-btn-text-orient', this.btnTextOrient);
_injectComponent('#slot-btn-insimage', this.btnInsertImage);
_injectComponent('#slot-btn-inshyperlink', this.btnInsertHyperlink);
_injectComponent('#slot-btn-insshape', this.btnInsertShape);
_injectComponent('#slot-btn-instext', this.btnInsertText);
_injectComponent('#slot-btn-insequation', this.btnInsertEquation);
_injectComponent('#slot-btn-sortdesc', this.btnSortDown);
_injectComponent('#slot-btn-sortasc', this.btnSortUp);
_injectComponent('#slot-btn-setfilter', this.btnSetAutofilter);
_injectComponent('#slot-btn-clear-filter', this.btnClearAutofilter);
_injectComponent('#slot-btn-table-tpl', this.btnTableTemplate);
_injectComponent('#slot-btn-format', this.cmbNumberFormat);
_injectComponent('#slot-btn-percents', this.btnPercentStyle);
_injectComponent('#slot-btn-currency', this.btnCurrencyStyle);
_injectComponent('#slot-btn-digit-dec', this.btnDecDecimal);
_injectComponent('#slot-btn-digit-inc', this.btnIncDecimal);
_injectComponent('#slot-btn-formula', this.btnInsertFormula);
_injectComponent('#slot-btn-named-range', this.btnNamedRange);
_injectComponent('#slot-btn-clear', this.btnClearStyle);
_injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
_injectComponent('#slot-btn-cell-ins', this.btnAddCell);
_injectComponent('#slot-btn-cell-del', this.btnDeleteCell);
_injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
_injectComponent('#slot-btn-hidebars', this.btnShowMode);
_injectComponent('#slot-btn-settings', this.btnSettings);
_injectComponent('#slot-btn-search', this.btnSearch);
_injectComponent('#slot-btn-inschart', this.btnInsertChart);
_injectComponent('#slot-field-styles', this.listStyles);
_injectComponent('#slot-btn-chart', this.btnEditChart);
// replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign);
// replacePlacholder('#id-toolbar-short-placeholder-btn-valign', this.btnVerticalAlign);
// replacePlacholder('#id-toolbar-short-placeholder-btn-filter', this.btnAutofilter);
return $host;
},
createDelayedElements: function() {
var me = this;
function _updateHint(cmp, hint) {
cmp && cmp.updateHint(hint);
}
// set hints
this.btnNewDocument.updateHint(this.tipNewDocument);
this.btnOpenDocument.updateHint(this.tipOpenDocument);
this.btnPrint.updateHint(this.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
this.btnSave.updateHint(this.btnSaveTip);
this.btnCopy.updateHint(this.tipCopy + Common.Utils.String.platformKey('Ctrl+C'));
this.btnPaste.updateHint(this.tipPaste + Common.Utils.String.platformKey('Ctrl+V'));
this.btnUndo.updateHint(this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
this.btnRedo.updateHint(this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
this.btnIncFontSize.updateHint(this.tipIncFont + Common.Utils.String.platformKey('Ctrl+]'));
this.btnDecFontSize.updateHint(this.tipDecFont + Common.Utils.String.platformKey('Ctrl+['));
this.btnBold.updateHint(this.textBold + Common.Utils.String.platformKey('Ctrl+B'));
this.btnItalic.updateHint(this.textItalic + Common.Utils.String.platformKey('Ctrl+I'));
this.btnUnderline.updateHint(this.textUnderline + Common.Utils.String.platformKey('Ctrl+U'));
this.btnTextColor.updateHint(this.tipFontColor);
this.btnBackColor.updateHint(this.tipPrColor);
this.btnBorders.updateHint(this.tipBorders);
this.btnAlignLeft.updateHint(this.tipAlignLeft);
this.btnAlignCenter.updateHint(this.tipAlignCenter);
this.btnAlignRight.updateHint(this.tipAlignRight);
this.btnAlignJust.updateHint(this.tipAlignJust);
this.btnMerge.updateHint(this.tipMerge);
this.btnAlignTop.updateHint(this.tipAlignTop);
this.btnAlignMiddle.updateHint(this.tipAlignMiddle);
this.btnAlignBottom.updateHint(this.tipAlignBottom);
this.btnWrap.updateHint(this.tipWrap);
this.btnTextOrient.updateHint(this.tipTextOrientation);
this.btnInsertImage.updateHint(this.tipInsertImage);
this.btnInsertChart.updateHint(this.tipInsertChartSpark);
this.btnInsertText.updateHint(this.tipInsertText);
this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
this.btnInsertShape.updateHint(this.tipInsertShape);
this.btnInsertEquation.updateHint(this.tipInsertEquation);
this.btnSortDown.updateHint(this.txtSortAZ);
this.btnSortUp.updateHint(this.txtSortZA);
this.btnSetAutofilter.updateHint(this.txtFilter + ' (Ctrl+Shift+L)');
this.btnClearAutofilter.updateHint(this.txtClearFilter);
this.btnSearch.updateHint(this.txtSearch);
this.btnTableTemplate.updateHint(this.txtTableTemplate);
this.btnPercentStyle.updateHint(this.tipDigStylePercent);
this.btnCurrencyStyle.updateHint(this.tipDigStyleAccounting);
this.btnDecDecimal.updateHint(this.tipDecDecimal);
this.btnIncDecimal.updateHint(this.tipIncDecimal);
this.btnInsertFormula.updateHint(this.txtFormula);
this.btnNamedRange.updateHint(this.txtNamedRange);
this.btnClearStyle.updateHint(this.tipClearStyle);
this.btnCopyStyle.updateHint(this.tipCopyStyle);
this.btnAddCell.updateHint(this.tipInsertOpt);
this.btnDeleteCell.updateHint(this.tipDeleteOpt);
this.btnColorSchemas.updateHint(this.tipColorSchemas);
this.btnShowMode.updateHint(this.tipViewSettings);
this.btnSettings.updateHint(this.tipAdvSettings);
this.btnHorizontalAlign.updateHint(this.tipHAligh);
this.btnVerticalAlign.updateHint(this.tipVAligh);
this.btnAutofilter.updateHint(this.tipAutofilter);
_updateHint(this.btnPrint, this.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
_updateHint(this.btnSave, this.btnSaveTip);
_updateHint(this.btnCopy, this.tipCopy + Common.Utils.String.platformKey('Ctrl+C'));
_updateHint(this.btnPaste, this.tipPaste + Common.Utils.String.platformKey('Ctrl+V'));
_updateHint(this.btnUndo, this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
_updateHint(this.btnRedo, this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
_updateHint(this.btnIncFontSize, this.tipIncFont + Common.Utils.String.platformKey('Ctrl+]'));
_updateHint(this.btnDecFontSize, this.tipDecFont + Common.Utils.String.platformKey('Ctrl+['));
_updateHint(this.btnBold, this.textBold + Common.Utils.String.platformKey('Ctrl+B'));
_updateHint(this.btnItalic, this.textItalic + Common.Utils.String.platformKey('Ctrl+I'));
_updateHint(this.btnUnderline, this.textUnderline + Common.Utils.String.platformKey('Ctrl+U'));
_updateHint(this.btnTextColor, this.tipFontColor);
_updateHint(this.btnBackColor, this.tipPrColor);
_updateHint(this.btnBorders, this.tipBorders);
_updateHint(this.btnAlignLeft, this.tipAlignLeft);
_updateHint(this.btnAlignCenter, this.tipAlignCenter);
_updateHint(this.btnAlignRight, this.tipAlignRight);
_updateHint(this.btnAlignJust, this.tipAlignJust);
_updateHint(this.btnMerge, this.tipMerge);
_updateHint(this.btnAlignTop, this.tipAlignTop);
_updateHint(this.btnAlignMiddle, this.tipAlignMiddle);
_updateHint(this.btnAlignBottom, this.tipAlignBottom);
_updateHint(this.btnWrap, this.tipWrap);
_updateHint(this.btnTextOrient, this.tipTextOrientation);
_updateHint(this.btnInsertImage, this.tipInsertImage);
_updateHint(this.btnInsertChart, this.tipInsertChartSpark);
_updateHint(this.btnInsertText, this.tipInsertText);
_updateHint(this.btnInsertHyperlink, this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
_updateHint(this.btnInsertShape, this.tipInsertShape);
_updateHint(this.btnInsertEquation, this.tipInsertEquation);
_updateHint(this.btnSortDown, this.txtSortAZ);
_updateHint(this.btnSortUp, this.txtSortZA);
_updateHint(this.btnSetAutofilter, this.txtFilter + ' (Ctrl+Shift+L)');
_updateHint(this.btnClearAutofilter, this.txtClearFilter);
_updateHint(this.btnSearch, this.txtSearch);
_updateHint(this.btnTableTemplate, this.txtTableTemplate);
_updateHint(this.btnPercentStyle, this.tipDigStylePercent);
_updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting);
_updateHint(this.btnDecDecimal, this.tipDecDecimal);
_updateHint(this.btnIncDecimal, this.tipIncDecimal);
_updateHint(this.btnInsertFormula, this.txtFormula);
_updateHint(this.btnNamedRange, this.txtNamedRange);
_updateHint(this.btnClearStyle, this.tipClearStyle);
_updateHint(this.btnCopyStyle, this.tipCopyStyle);
_updateHint(this.btnAddCell, this.tipInsertOpt);
_updateHint(this.btnDeleteCell, this.tipDeleteOpt);
_updateHint(this.btnColorSchemas, this.tipColorSchemas);
_updateHint(this.btnShowMode, this.tipViewSettings);
_updateHint(this.btnSettings, this.tipAdvSettings);
_updateHint(this.btnHorizontalAlign, this.tipHAligh);
_updateHint(this.btnVerticalAlign, this.tipVAligh);
_updateHint(this.btnAutofilter, this.tipAutofilter);
// set menus
if (this.btnShowMode.rendered) {
if ( this.btnShowMode && this.btnShowMode.rendered ) {
this.btnShowMode.setMenu(new Common.UI.Menu({
items: [
this.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption : this.textCompactToolbar,
checkable : true,
checked : this.isCompactView,
value : 'compact'
}),
this.mnuitemHideTitleBar = new Common.UI.MenuItem({
caption : this.textHideTBar,
checkable : true,
value : 'title'
}),
this.mnuitemHideFormulaBar = new Common.UI.MenuItem({
caption : this.textHideFBar,
checkable : true,
checked : Common.localStorage.getBool('sse-hidden-formula'),
value : 'formula'
}),
{caption: '--'},
@ -1390,24 +1500,9 @@ define([
el : $('#id-menu-zoom-in'),
cls : 'btn-toolbar'
});
var options = {};
JSON.parse(Common.localStorage.getItem('sse-hidden-title')) && (options.title = true);
JSON.parse(Common.localStorage.getItem('sse-hidden-formula')) && (options.formula = true);
// JSON.parse(Common.localStorage.getItem('sse-hidden-headings')) && (options.headings = true);
var isCompactView = JSON.parse(Common.localStorage.getItem('sse-toolbar-compact'));
isCompactView = !!(isCompactView!==null && parseInt(isCompactView) == 1 || isCompactView === null && this.mode.customization && this.mode.customization.compactToolbar);
this.mnuitemCompactToolbar.setChecked(isCompactView);
this.mnuitemHideTitleBar.setChecked(!!options.title);
this.mnuitemHideFormulaBar.setChecked(!!options.formula);
this.mnuitemHideHeadings.setChecked(!!options.headings);
if (this.mode.isDesktopApp || this.mode.canBrandingExt && this.mode.customization && this.mode.customization.header===false)
this.mnuitemHideTitleBar.hide();
}
if (this.btnBorders.rendered) {
if (this.btnBorders && this.btnBorders.rendered) {
this.btnBorders.setMenu( new Common.UI.Menu({
items: [
{
@ -1539,6 +1634,7 @@ define([
});
}
if ( this.btnInsertChart ) {
this.mnuInsertChartPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-insertchart'),
parentMenu: this.btnInsertChart.menu,
@ -1588,6 +1684,7 @@ define([
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
});
}
},
setApi: function(api) {
@ -1607,24 +1704,14 @@ define([
if (mode.isDisconnected) {
this.lockToolbar( SSE.enumLock.lostConnect, true );
this.lockToolbar( SSE.enumLock.lostConnect, true,
{array:[this.btnEditChart,this.btnUndo,this.btnRedo,this.btnOpenDocument,this.btnNewDocument,this.btnSave]} );
{array:[this.btnEditChart,this.btnUndo,this.btnRedo,this.btnSave]} );
this.lockToolbar(SSE.enumLock.cantPrint, !mode.canPrint || mode.disableDownload, {array: [this.btnPrint]});
} else {
this.mode = mode;
if (!mode.nativeApp) {
var nativeBtnGroup = $('.toolbar-group-native');
if (nativeBtnGroup) {
nativeBtnGroup.hide();
}
}
if (mode.isDesktopApp)
$('.toolbar-group-native').hide();
this.lockToolbar(SSE.enumLock.cantPrint, !mode.canPrint, {array: [this.btnPrint]});
}
return this;
},
onApiSendThemeColorSchemes: function(schemas) {
@ -1767,6 +1854,10 @@ define([
}
},
onAppReady: function (config) {
},
textBold: 'Bold',
textItalic: 'Italic',
textUnderline: 'Underline',
@ -1880,8 +1971,6 @@ define([
textPrint: 'Print',
textPrintOptions: 'Print Options',
tipColorSchemas: 'Change Color Scheme',
tipNewDocument: 'New Document',
tipOpenDocument: 'Open Document',
txtSortAZ: 'Sort A to Z',
txtSortZA: 'Sort Z to A',
txtFilter: 'Filter',
@ -1949,6 +2038,12 @@ define([
textCharts: 'Charts',
textSparks: 'Sparklines',
tipInsertChartSpark: 'Insert Chart or Sparkline',
textMoreFormats: 'More formats'
textMoreFormats: 'More formats',
capInsertText: 'Text Box',
capInsertImage: 'Picture',
capInsertShape: 'Shape',
capInsertChart: 'Chart',
capInsertHyperlink: 'Hyperlink',
capInsertEquation: 'Equation'
}, SSE.Views.Toolbar || {}));
});

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();
},

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

@ -260,6 +260,20 @@
<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>

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
// --------------------------------------------------

63
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 {