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

[PE] toolbar's new view

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-20 16:34:39 +03:00
parent c618f0978f
commit a578e3c31e
16 changed files with 2301 additions and 2186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -61,7 +61,7 @@ define([
'Common.Views.Chat': { 'Common.Views.Chat': {
'hide': _.bind(this.onHideChat, this) 'hide': _.bind(this.onHideChat, this)
}, },
'Statusbar': { 'Common.Views.Header': {
'click:users': _.bind(this.clickStatusbarUsers, this) 'click:users': _.bind(this.clickStatusbarUsers, this)
}, },
'LeftMenu': { 'LeftMenu': {
@ -83,7 +83,9 @@ define([
'recent:open': _.bind(this.onOpenRecent, this) 'recent:open': _.bind(this.onOpenRecent, this)
}, },
'Toolbar': { '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': { 'SearchDialog': {
'hide': _.bind(this.onSearchDlgHide, this), 'hide': _.bind(this.onSearchDlgHide, this),
@ -216,16 +218,12 @@ define([
if (close_menu) { if (close_menu) {
menu.hide(); menu.hide();
this.leftMenu.btnFile.toggle(false, true);
this.menuExpand(this.leftMenu.btnFile, 'files', false);
} }
}, },
clickSaveAsFormat: function(menu, format) { clickSaveAsFormat: function(menu, format) {
this.api.asc_DownloadAs(format); this.api.asc_DownloadAs(format);
menu.hide(); menu.hide();
this.leftMenu.btnFile.toggle(false, true);
this.menuExpand(this.leftMenu.btnFile, 'files', false);
}, },
applySettings: function(menu) { applySettings: function(menu) {
@ -242,12 +240,9 @@ define([
value = Common.localStorage.getItem("pe-settings-autosave"); value = Common.localStorage.getItem("pe-settings-autosave");
this.api.asc_setAutoSaveGap(parseInt(value)); this.api.asc_setAutoSaveGap(parseInt(value));
value = Common.localStorage.getItem("pe-settings-showsnaplines"); this.api.put_ShowSnapLines( Common.localStorage.getBool("pe-settings-showsnaplines") );
this.api.put_ShowSnapLines(value===null || parseInt(value) == 1);
menu.hide(); menu.hide();
this.leftMenu.btnFile.toggle(false, true);
this.menuExpand(this.leftMenu.btnFile, 'files', false);
}, },
onCreateNew: function(menu, type) { onCreateNew: function(menu, type) {
@ -260,16 +255,12 @@ define([
if (menu) { if (menu) {
menu.hide(); menu.hide();
this.leftMenu.btnFile.toggle(false, true);
this.menuExpand(this.leftMenu.btnFile, 'files', false);
} }
}, },
onOpenRecent: function(menu, url) { onOpenRecent: function(menu, url) {
if (menu) { if (menu) {
menu.hide(); menu.hide();
this.leftMenu.btnFile.toggle(false, true);
this.menuExpand(this.leftMenu.btnFile, 'files', false);
} }
var recentDocPage = window.open(url); var recentDocPage = window.open(url);
@ -280,15 +271,18 @@ define([
}, },
clickToolbarSettings: function(obj) { clickToolbarSettings: function(obj) {
if (this.leftMenu.btnFile.pressed && this.leftMenu.btnFile.panel.active == 'opts')
this.leftMenu.close();
else
this.leftMenu.showMenu('file:opts'); this.leftMenu.showMenu('file:opts');
}, },
clickToolbarTab: function (tab, e) {
if (tab == 'file')
this.leftMenu.menuFile.show(); else
this.leftMenu.menuFile.hide();
},
/** coauthoring begin **/ /** coauthoring begin **/
clickStatusbarUsers: function() { clickStatusbarUsers: function() {
this.leftMenu.btnFile.panel.panels['rights'].changeAccessRights(); this.leftMenu.menuFile.panels['rights'].changeAccessRights();
}, },
onHideChat: function() { onHideChat: function() {
@ -384,7 +378,7 @@ define([
}, },
menuFilesHide: function(obj) { menuFilesHide: function(obj) {
$(this.leftMenu.btnFile.el).blur(); // $(this.leftMenu.btnFile.el).blur();
}, },
/** coauthoring begin **/ /** coauthoring begin **/
@ -431,12 +425,11 @@ define([
case 'search': case 'search':
if ((!previewPanel || !previewPanel.isVisible()) && !this._state.no_slides) { if ((!previewPanel || !previewPanel.isVisible()) && !this._state.no_slides) {
Common.UI.Menu.Manager.hideAll(); Common.UI.Menu.Manager.hideAll();
var full_menu_pressed = (this.leftMenu.btnFile.pressed || this.leftMenu.btnAbout.pressed); var full_menu_pressed = this.leftMenu.btnAbout.pressed;
this.showSearchDlg(true); this.showSearchDlg(true);
this.leftMenu.btnSearch.toggle(true,true); this.leftMenu.btnSearch.toggle(true,true);
this.leftMenu.btnFile.toggle(false);
this.leftMenu.btnAbout.toggle(false); this.leftMenu.btnAbout.toggle(false);
full_menu_pressed && this.menuExpand(this.leftMenu.btnFile, 'files', false); full_menu_pressed && this.menuExpand(this.leftMenu.btnAbout, 'files', false);
} }
return false; return false;
case 'save': case 'save':
@ -463,6 +456,12 @@ define([
return false; return false;
case 'escape': case 'escape':
// if (!this.leftMenu.isOpened()) return true; // if (!this.leftMenu.isOpened()) return true;
// TODO:
if ( this.leftMenu.menuFile.isVisible() ) {
this.leftMenu.menuFile.hide();
return false;
}
var statusbar = PE.getController('Statusbar'); var statusbar = PE.getController('Statusbar');
var menu_opened = statusbar.statusbar.$el.find('.open > [data-toggle="dropdown"]'); var menu_opened = statusbar.statusbar.$el.find('.open > [data-toggle="dropdown"]');
if (menu_opened.length) { if (menu_opened.length) {
@ -476,7 +475,8 @@ define([
return false; return false;
} }
} }
if (this.leftMenu.btnFile.pressed || this.leftMenu.btnAbout.pressed || this.leftMenu.btnPlugins.pressed ||
if ( this.leftMenu.btnAbout.pressed || this.leftMenu.btnPlugins.pressed ||
$(e.target).parents('#left-menu').length ) { $(e.target).parents('#left-menu').length ) {
this.leftMenu.close(); this.leftMenu.close();
Common.NotificationCenter.trigger('layout:changed', 'leftmenu'); Common.NotificationCenter.trigger('layout:changed', 'leftmenu');

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

@ -427,8 +427,8 @@ define([
case Asc.c_oAscAsyncAction['ForceSaveButton']: case Asc.c_oAscAsyncAction['ForceSaveButton']:
clearTimeout(this._state.timerSave); clearTimeout(this._state.timerSave);
force = true; force = true;
title = this.saveTitleText; // title = this.saveTitleText;
text = this.saveTextText; // text = this.saveTextText;
break; break;
case Asc.c_oAscAsyncAction['ForceSaveTimeout']: case Asc.c_oAscAsyncAction['ForceSaveTimeout']:
@ -503,8 +503,10 @@ define([
if (!this.isShowOpenDialog) if (!this.isShowOpenDialog)
this.loadMask.show(); this.loadMask.show();
} } else
else { if ( action.id == Asc.c_oAscAsyncAction.Save ) {
appHeader.setSaveStatus('begin');
} else {
this.getApplication().getController('Statusbar').setStatusCaption(text, force); this.getApplication().getController('Statusbar').setStatusCaption(text, force);
} }
}, },
@ -529,6 +531,8 @@ define([
me._isDocReady = true; me._isDocReady = true;
Common.NotificationCenter.trigger('app:ready', me.appOptions);
me.api.SetDrawingFreeze(false); me.api.SetDrawingFreeze(false);
me.hidePreloader(); me.hidePreloader();
me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
@ -577,6 +581,7 @@ define([
Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0); Common.localStorage.setItem("pe-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0);
var application = me.getApplication();
var toolbarController = application.getController('Toolbar'), var toolbarController = application.getController('Toolbar'),
statusbarController = application.getController('Statusbar'), statusbarController = application.getController('Statusbar'),
documentHolderController = application.getController('DocumentHolder'), documentHolderController = application.getController('DocumentHolder'),
@ -753,16 +758,18 @@ define([
this.updatePlugins(this.plugins, true); this.updatePlugins(this.plugins, true);
this.applyModeCommonElements(); this.applyModeCommonElements();
if ( this.appOptions.isEdit ) {
this.applyModeEditorElements(); this.applyModeEditorElements();
} else {
Common.NotificationCenter.trigger('app:face', this.appOptions);
this.api.asc_setViewMode(!this.appOptions.isEdit);
this.api.asc_LoadDocument();
if (!this.appOptions.isEdit) {
this.hidePreloader(); this.hidePreloader();
this.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); this.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
} }
this.api.asc_setViewMode(!this.appOptions.isEdit);
this.api.asc_LoadDocument();
}, },
applyModeCommonElements: function() { applyModeCommonElements: function() {
@ -868,6 +875,8 @@ define([
if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) { if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights); me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
} else if (!this._isDocReady) { } else if (!this._isDocReady) {
Common.NotificationCenter.trigger('app:face', me.appOptions);
me.hidePreloader(); me.hidePreloader();
me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
} }
@ -1128,6 +1137,8 @@ define([
this.updateWindowTitle(); this.updateWindowTitle();
this.api.isDocumentModified() && appHeader.setSaveStatus('changed');
var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar'); var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar');
if (toolbarView) { if (toolbarView) {
var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'), var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'),
@ -1358,12 +1369,8 @@ define([
return; return;
var me = this, var me = this,
shapegrouparray = [], shapegrouparray = [];
shapeStore = this.getCollection('ShapeGroups');
shapeStore.reset();
var groupscount = groupNames.length;
_.each(groupNames, function(groupName, index){ _.each(groupNames, function(groupName, index){
var store = new Backbone.Collection([], { var store = new Backbone.Collection([], {
model: PE.Models.ShapeModel model: PE.Models.ShapeModel
@ -1391,11 +1398,7 @@ define([
}); });
}); });
shapeStore.add(shapegrouparray); this.getCollection('ShapeGroups').reset(shapegrouparray);
setTimeout(function(){
me.getApplication().getController('Toolbar').fillAutoShapes();
}, 50);
}, },
fillLayoutsStore: function(layouts){ fillLayoutsStore: function(layouts){
@ -1440,10 +1443,6 @@ define([
}); });
artStore.reset(arr); artStore.reset(arr);
setTimeout(function(){
me.getApplication().getController('Toolbar').fillTextArt();
}, 50);
setTimeout(function(){ setTimeout(function(){
me.getApplication().getController('RightMenu').fillTextArt(); me.getApplication().getController('RightMenu').fillTextArt();
}, 50); }, 50);
@ -1503,11 +1502,11 @@ define([
}, },
onMeta: function(meta) { onMeta: function(meta) {
var app = this.getApplication(),
filemenu = app.getController('LeftMenu').getView('LeftMenu').getMenu('file');
appHeader.setDocumentCaption(meta.title); appHeader.setDocumentCaption(meta.title);
this.updateWindowTitle(true); this.updateWindowTitle(true);
this.document.title = meta.title; this.document.title = meta.title;
var filemenu = this.getApplication().getController('LeftMenu').getView('LeftMenu').getMenu('file');
filemenu.loadDocument({doc:this.document}); filemenu.loadDocument({doc:this.document});
filemenu.panels['info'].updateInfo(this.document); filemenu.panels['info'].updateInfo(this.document);
Common.Gateway.metaChange(meta); Common.Gateway.metaChange(meta);
@ -1760,8 +1759,6 @@ define([
criticalErrorExtText: 'Press "Ok" to to back to document list.', criticalErrorExtText: 'Press "Ok" to to back to document list.',
openTitleText: 'Opening Document', openTitleText: 'Opening Document',
openTextText: 'Opening document...', openTextText: 'Opening document...',
saveTitleText: 'Saving Document',
saveTextText: 'Saving document...',
loadFontsTitleText: 'Loading Data', loadFontsTitleText: 'Loading Data',
loadFontsTextText: 'Loading data...', loadFontsTextText: 'Loading data...',
loadImagesTitleText: 'Loading Images', loadImagesTitleText: 'Loading Images',
@ -1888,7 +1885,6 @@ define([
errorAccessDeny: 'You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.', errorAccessDeny: 'You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.',
titleServerVersion: 'Editor updated', titleServerVersion: 'Editor updated',
errorServerVersion: 'The editor version has been updated. The page will be reloaded to apply the changes.', errorServerVersion: 'The editor version has been updated. The page will be reloaded to apply the changes.',
textChangesSaved: 'All changes saved',
errorBadImageUrl: 'Image url is incorrect' errorBadImageUrl: 'Image url is incorrect'
} }
})(), PE.Controllers.Main || {})) })(), PE.Controllers.Main || {}))

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

@ -72,9 +72,7 @@ define([
}, },
onLaunch: function() { onLaunch: function() {
this.statusbar = this.createView('Statusbar', { this.statusbar = this.createView('Statusbar', {}).render();
storeUsers: this.getApplication().getCollection('Common.Collections.Users')
}).render();
this.statusbar.$el.css('z-index', 1); this.statusbar.$el.css('z-index', 1);
this.bindViewEvents(this.statusbar, this.events); this.bindViewEvents(this.statusbar, this.events);

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

@ -114,7 +114,16 @@ define([
this.addListeners({ this.addListeners({
'Toolbar': { 'Toolbar': {
'changecompact' : this.onChangeCompactView 'view:compact' : this.onChangeCompactView,
'insert:image' : this.onInsertImageClick.bind(this),
'insert:text' : this.onInsertText.bind(this),
'insert:textart' : this.onInsertTextart.bind(this),
'insert:shape' : this.onInsertShape.bind(this)
},
'FileMenu': {
'filemenu:hide': function () {
this.toolbar.setTab('');
}.bind(this)
} }
}); });
@ -128,15 +137,17 @@ define([
btn_id = cmp.closest('.btn-group').attr('id'); btn_id = cmp.closest('.btn-group').attr('id');
if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) { if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) {
if ( me.toolbar.btnInsertText.pressed && btn_id != me.toolbar.btnInsertText.id || if ( me.toolbar.btnsInsertText.pressed && !me.toolbar.btnsInsertText.contains(btn_id) ||
me.toolbar.btnInsertShape.pressed && btn_id != me.toolbar.btnInsertShape.id ) { me.toolbar.btnsInsertShape.pressed && !me.toolbar.btnsInsertShape.contains(btn_id) )
{
me._isAddingShape = false; me._isAddingShape = false;
me._addAutoshape(false); me._addAutoshape(false);
me.toolbar.btnInsertShape.toggle(false, true); me.toolbar.btnsInsertShape.toggle(false, true);
me.toolbar.btnInsertText.toggle(false, true); me.toolbar.btnsInsertText.toggle(false, true);
Common.NotificationCenter.trigger('edit:complete', me.toolbar); Common.NotificationCenter.trigger('edit:complete', me.toolbar);
} else if ( me.toolbar.btnInsertShape.pressed && btn_id == me.toolbar.btnInsertShape.id) { } else
if ( me.toolbar.btnsInsertShape.pressed && me.toolbar.btnsInsertShape.contains(btn_id) ) {
_.defer(function(){ _.defer(function(){
me.api.StartAddShape('', false); me.api.StartAddShape('', false);
Common.NotificationCenter.trigger('edit:complete', me.toolbar); Common.NotificationCenter.trigger('edit:complete', me.toolbar);
@ -148,11 +159,11 @@ define([
this.onApiEndAddShape = function() { this.onApiEndAddShape = function() {
this.toolbar.fireEvent('insertshape', this.toolbar); this.toolbar.fireEvent('insertshape', this.toolbar);
if (this.toolbar.btnInsertShape.pressed) if ( this.toolbar.btnsInsertShape.pressed )
this.toolbar.btnInsertShape.toggle(false, true); this.toolbar.btnsInsertShape.toggle(false, true);
if (this.toolbar.btnInsertText.pressed) if ( this.toolbar.btnsInsertText.pressed )
this.toolbar.btnInsertText.toggle(false, true); this.toolbar.btnsInsertText.toggle(false, true);
$(document.body).off('mouseup', checkInsertAutoshape); $(document.body).off('mouseup', checkInsertAutoshape);
}; };
@ -175,6 +186,18 @@ define([
this.toolbar = this.createView('Toolbar'); this.toolbar = this.createView('Toolbar');
// this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this)); // this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
var me = this;
Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
Common.NotificationCenter.on('app:face', me.onAppShowed.bind(me));
PE.getCollection('Common.Collections.TextArt').bind({
reset: me.onResetTextArt.bind(this)
});
PE.getCollection('ShapeGroups').bind({
reset: me.onResetAutoshapes.bind(this)
});
}, },
onToolbarAfterRender: function(toolbar) { onToolbarAfterRender: function(toolbar) {
@ -182,8 +205,6 @@ define([
* UI Events * UI Events
*/ */
toolbar.btnNewDocument.on('click', _.bind(this.onNewDocument, this));
toolbar.btnOpenDocument.on('click', _.bind(this.onOpenDocument, this));
toolbar.btnAddSlide.on('click', _.bind(this.onBtnAddSlide, this)); toolbar.btnAddSlide.on('click', _.bind(this.onBtnAddSlide, this));
toolbar.mnuAddSlidePicker.on('item:click', _.bind(this.onAddSlide, this)); toolbar.mnuAddSlidePicker.on('item:click', _.bind(this.onAddSlide, this));
if (toolbar.mnuChangeSlidePicker) if (toolbar.mnuChangeSlidePicker)
@ -231,10 +252,6 @@ define([
toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlinkClick, this)); toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlinkClick, this));
toolbar.mnuTablePicker.on('select', _.bind(this.onTablePickerSelect, this)); toolbar.mnuTablePicker.on('select', _.bind(this.onTablePickerSelect, this));
toolbar.btnInsertTable.menu.on('item:click', _.bind(this.onInsertTableClick, this)); toolbar.btnInsertTable.menu.on('item:click', _.bind(this.onInsertTableClick, this));
toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageClick, 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.btnClearStyle.on('click', _.bind(this.onClearStyleClick, this)); toolbar.btnClearStyle.on('click', _.bind(this.onClearStyleClick, this));
toolbar.btnCopyStyle.on('toggle', _.bind(this.onCopyStyleToggle, this)); toolbar.btnCopyStyle.on('toggle', _.bind(this.onCopyStyleToggle, this));
toolbar.btnAdvSettings.on('click', _.bind(this.onAdvSettingsClick, this)); toolbar.btnAdvSettings.on('click', _.bind(this.onAdvSettingsClick, this));
@ -299,13 +316,9 @@ define([
}, },
onChangeCompactView: function(view, compact) { onChangeCompactView: function(view, compact) {
Common.localStorage.setItem('pe-compact-toolbar', compact ? 1 : 0); this.toolbar.setFolded(compact);
if (!compact && !this._state.changeslide_inited) {
this.toolbar.mnuChangeSlidePicker.on('item:click', _.bind(this.onChangeSlide, this));
}
this._state.changeslide_inited = true;
Common.localStorage.setBool('pe-compact-toolbar', compact);
Common.NotificationCenter.trigger('layout:changed', 'toolbar'); Common.NotificationCenter.trigger('layout:changed', 'toolbar');
Common.NotificationCenter.trigger('edit:complete', this.toolbar); Common.NotificationCenter.trigger('edit:complete', this.toolbar);
}, },
@ -552,10 +565,12 @@ define([
this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, {array: this.toolbar.paragraphControls}); this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, {array: this.toolbar.paragraphControls});
this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, {array: [ this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, {array: [
this.toolbar.btnChangeSlide, this.toolbar.btnPreview, this.toolbar.btnCopy, this.toolbar.btnPaste, this.toolbar.btnChangeSlide, this.toolbar.btnPreview, this.toolbar.btnCopy, this.toolbar.btnPaste,
this.toolbar.btnCopyStyle, this.toolbar.btnInsertTable, this.toolbar.btnInsertImage, this.toolbar.btnInsertChart, this.toolbar.btnCopyStyle, this.toolbar.btnInsertTable, this.toolbar.btnInsertChart,
this.toolbar.btnInsertText, this.toolbar.btnInsertShape, this.toolbar.btnColorSchemas, this.toolbar.btnShapeAlign, this.toolbar.btnColorSchemas, this.toolbar.btnShapeAlign,
this.toolbar.btnShapeArrange, this.toolbar.btnSlideSize, this.toolbar.listTheme this.toolbar.btnShapeArrange, this.toolbar.btnSlideSize, this.toolbar.listTheme
]}); ]});
this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides,
{ array: this.toolbar.btnsInsertImage.concat(this.toolbar.btnsInsertText, this.toolbar.btnsInsertShape) });
} }
}, },
@ -1312,19 +1327,16 @@ define([
} }
}, },
onInsertImageClick: function(menu, item, e) { onInsertImageClick: function(opts, e) {
if (item.value === 'file') { var me = this;
this.toolbar.fireEvent('insertimage', this.toolbar); if (opts === 'file') {
me.toolbar.fireEvent('insertimage', this.toolbar);
if (this.api) me.api.asc_addImage();
this.api.asc_addImage();
Common.NotificationCenter.trigger('edit:complete', this.toolbar); Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Image'); Common.component.Analytics.trackEvent('ToolBar', 'Image');
} else { } else {
var me = this;
(new Common.Views.ImageFromUrlDialog({ (new Common.Views.ImageFromUrlDialog({
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
@ -1349,38 +1361,54 @@ define([
} }
}, },
onBtnInsertTextClick: function(btn, e) { onInsertText: function(status) {
if (this.api) if ( status == 'begin' ) {
this._addAutoshape(btn.pressed, 'textRect');
if (this.toolbar.btnInsertShape.pressed)
this.toolbar.btnInsertShape.toggle(false, true);
Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertShape);
Common.component.Analytics.trackEvent('ToolBar', 'Add Text');
},
onInsertTextClick: function(menu, item, e) {
if (item.value === 'text') {
if (this.api)
this._addAutoshape(true, 'textRect'); this._addAutoshape(true, 'textRect');
this.toolbar.btnInsertText.toggle(true, true);
if (this.toolbar.btnInsertShape.pressed) if ( !this.toolbar.btnsInsertText.pressed )
this.toolbar.btnInsertShape.toggle(false, true); this.toolbar.btnsInsertText.toggle(true, true);
} else
this._addAutoshape(false, 'textRect');
Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertShape); if ( this.toolbar.btnsInsertShape.pressed )
this.toolbar.btnsInsertShape.toggle(false, true);
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Add Text'); Common.component.Analytics.trackEvent('ToolBar', 'Add Text');
},
onInsertShape: function (type) {
var me = this;
if ( type == 'menu:hide' ) {
if ( me.toolbar.btnsInsertShape.pressed && !me._isAddingShape ) {
me.toolbar.btnsInsertShape.toggle(false, true);
}
me._isAddingShape = false;
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
} else {
me._addAutoshape(true, type);
me._isAddingShape = true;
if ( me.toolbar.btnsInsertText.pressed )
me.toolbar.btnsInsertText.toggle(false, true);
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
} }
}, },
onInsertShapeHide: function(btn, e) { onInsertTextart: function (data) {
if (this.toolbar.btnInsertShape.pressed && !this._isAddingShape) { var me = this;
this.toolbar.btnInsertShape.toggle(false, true);
}
this._isAddingShape = false;
Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertShape); me.toolbar.fireEvent('inserttextart', me.toolbar);
me.api.AddTextArt(data);
if ( me.toolbar.btnsInsertShape.pressed )
me.toolbar.btnsInsertShape.toggle(false, true);
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
}, },
onClearStyleClick: function(btn, e) { onClearStyleClick: function(btn, e) {
@ -1654,88 +1682,18 @@ define([
this._state.clrtext_asccolor = color; this._state.clrtext_asccolor = color;
}, },
fillAutoShapes: function() { onResetAutoshapes: function () {
var me = this, setTimeout(function () {
shapesStore = this.getApplication().getCollection('ShapeGroups'); this.toolbar.updateAutoshapeMenu(PE.getCollection('ShapeGroups'));
}.bind(this), 0);
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
var menuItem = new Common.UI.MenuItem({
caption: shapeGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
]
})
});
me.toolbar.btnInsertShape.menu.addItem(menuItem);
var shapePicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-shapegroup' + i),
store: shapeGroup.get('groupStore'),
parentMenu: menuItem.menu,
showLast: false,
itemTemplate: _.template('<div class="item-shape"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
});
shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
me._addAutoshape(true, record.get('data').shapeType);
me._isAddingShape = true;
if (me.toolbar.btnInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true);
}
if (e.type !== 'click')
me.toolbar.btnInsertShape.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
}
});
}
}, },
fillTextArt: function() { onResetTextArt: function (collection, opts) {
var me = this; (new Promise(function (resolve, reject) {
resolve();
if (this.toolbar.mnuTextArtPicker) { })).then(function () {
var models = this.getApplication().getCollection('Common.Collections.TextArt').models, this.toolbar.updateTextartMenu(collection);
count = this.toolbar.mnuTextArtPicker.store.length; }.bind(this));
if (count>0 && count==models.length) {
var data = this.toolbar.mnuTextArtPicker.store.models;
_.each(models, function(template, index){
data[index].set('imageUrl', template.get('imageUrl'));
});
} else {
this.toolbar.mnuTextArtPicker.store.reset(models);
}
} else {
this.toolbar.mnuTextArtPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-insart'),
store: this.getApplication().getCollection('Common.Collections.TextArt'),
parentMenu: this.toolbar.mnuInsertTextArt.menu,
showLast: false,
itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
});
this.toolbar.mnuTextArtPicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
me.toolbar.fireEvent('inserttextart', me.toolbar);
me.api.AddTextArt(record.get('data'));
if (me.toolbar.btnInsertShape.pressed)
me.toolbar.btnInsertShape.toggle(false, true);
if (e.type !== 'click')
me.toolbar.btnInsertText.menu.hide();
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertText);
Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
}
});
}
}, },
fillEquations: function() { fillEquations: function() {
@ -1796,11 +1754,11 @@ define([
if (me.api) { if (me.api) {
me.api.asc_AddMath(record.get('data').equationType); me.api.asc_AddMath(record.get('data').equationType);
if (me.toolbar.btnInsertText.pressed) { if (me.toolbar.btnsInsertText.pressed) {
me.toolbar.btnInsertText.toggle(false, true); me.toolbar.btnsInsertText.toggle(false, true);
} }
if (me.toolbar.btnInsertShape.pressed) { if (me.toolbar.btnsInsertShape.pressed) {
me.toolbar.btnInsertShape.toggle(false, true); me.toolbar.btnsInsertShape.toggle(false, true);
} }
if (e.type !== 'click') if (e.type !== 'click')
@ -2074,6 +2032,61 @@ define([
this.onToolbarAfterRender(this.toolbar); this.onToolbarAfterRender(this.toolbar);
}, },
onAppShowed: function (config) {
var me = this;
var compactview = !config.isEdit;
if ( config.isEdit ) {
if ( Common.localStorage.itemExists("pe-compact-toolbar") ) {
compactview = Common.localStorage.getBool("pe-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.toolbar.render(_.extend({compactview: compactview}, config));
},
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: 'btn-menu-comments',
caption: 'Comment'
}).render( slots.eq(index) );
_btnsComment.push(button);
});
if ( _btnsComment.length ) {
var _comments = PE.getController('Common.Controllers.Comments').getView();
// Array.prototype.push.apply(me.toolbar.toolbarControls, _btnsComment);
_btnsComment.forEach(function (btn) {
btn.updateHint( _comments.textAddComment );
btn.on('click', function (btn, e) {
Common.NotificationCenter.trigger('app:comment:add', 'toolbar');
});
}, this);
}
}
(new Promise(function(accept) {
accept();
})).then(function () {
if ( config.isEdit ) {
me.toolbar.onAppReady(config);
}
});
},
textEmptyImgUrl : 'You need to specify image URL.', textEmptyImgUrl : 'You need to specify image URL.',
textWarning : 'Warning', textWarning : 'Warning',
textFontSizeErr : 'The entered value must be more than 0', textFontSizeErr : 'The entered value must be more than 0',

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

@ -65,8 +65,25 @@ define([
// When controller is created let's setup view event listeners // When controller is created let's setup view event listeners
initialize: function() { initialize: function() {
var me = this;
// This most important part when we will tell our controller what events should be handled // This most important part when we will tell our controller what events should be handled
this.addListeners({ this.addListeners({
'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');
}
},
// Events generated by main view // Events generated by main view
'Viewport': { 'Viewport': {
@ -84,8 +101,9 @@ define([
// Create and render main view // Create and render main view
this.viewport = this.createView('Viewport').render(); this.viewport = this.createView('Viewport').render();
this.header = this.createView('Common.Views.Header', { this.header = this.createView('Common.Views.Header', {
headerCaption: 'Presentation Editor' headerCaption: 'Presentation Editor',
}).render(); storeUsers: PE.getCollection('Common.Collections.Users')
});
this.docPreview = this.createView('DocumentPreview', {}).render(); this.docPreview = this.createView('DocumentPreview', {}).render();
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this)); Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
@ -96,8 +114,22 @@ define([
this.api.Resize(); this.api.Resize();
Common.localStorage.setItem('pe-mainmenu-width',leftPanel.width()); Common.localStorage.setItem('pe-mainmenu-width',leftPanel.width());
}, this); }, this);
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
}, },
onAppShowed: function (config) {
var me = this;
if ( !config.isEdit ||
( !Common.localStorage.itemExists("pe-compact-toolbar") &&
config.customization && config.customization.compactToolbar ))
{
me.viewport.vlayout.panels[0].height = 40;
}
},
onLayoutChanged: function(area) { onLayoutChanged: function(area) {
switch (area) { switch (area) {
default: default:

1
apps/presentationeditor/main/app/template/LeftMenu.template
View file

@ -1,6 +1,5 @@
<div id="view-left-menu" class="tool-menu left"> <div id="view-left-menu" class="tool-menu left">
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<button id="left-btn-file" class="btn btn-category" content-target="left-panel-file"><span class="btn-icon img-toolbarmenu btn-menu-file">&nbsp;</span></button>
<button id="left-btn-search" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-search">&nbsp;</i></button> <button id="left-btn-search" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-search">&nbsp;</i></button>
<button id="left-btn-thumbs" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-thumbs">&nbsp;</i></button> <button id="left-btn-thumbs" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-thumbs">&nbsp;</i></button>
<!-- /** coauthoring begin **/ --> <!-- /** coauthoring begin **/ -->

302
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -1,211 +1,155 @@
<div class="toolbar" style="<%= isCompactView ? 'height: 41px;' : 'height: 67px;' %>"> <div class="toolbar">
<!----------------------> <section class="box-tabs">
<!--Short view toolbar--> <div class="extra left"></div>
<!----------------------> <section class="tabs">
<div id="id-toolbar-short" style="<%= isCompactView ? 'display: table;' : 'display: none;' %> width: 100%;" > <a href="#" class="scroll left">
<div class="toolbar-group"> <i class="icon">&lt;</i>
<div class="toolbar-row"> </a>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-addslide"></span> <ul>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-preview"></span> <% 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>
</div> <div class="elset">
<div class="separator short"></div> <span class="btn-slot" id="slot-btn-save"></span>
<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>
</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-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-markers"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-numbering"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-linespace"></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-arrange-shape"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-align-shape"></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-insertimage"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-inserttable"></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-inserthyperlink"></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-inserttext"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></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="toolbar-group" style="width: 100%;"></div>
<div class="toolbar-group no-mask" style="padding-left:0;">
<div class="toolbar-row">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-hidebars"></span>
</div>
</div>
</div>
</div>
<!---------------------->
<!--Fully view toolbar-->
<!---------------------->
<div id="id-toolbar-full" style="<%= isCompactView ? '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="separator long toolbar-group-native"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder large split" id="id-toolbar-full-placeholder-btn-addslide"></span>
</div>
</div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-changeslide"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-preview"></span>
</div>
</div>
<div class="separator long" style="margin-left: 5px;"></div>
<div class="toolbar-group no-mask">
<div class="toolbar-row">
<span class="btn-placeholder" 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> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-copy"></span> <span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-paste"></span> <span class="btn-slot" id="slot-btn-paste"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-undo"></span> <span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-redo"></span> <span class="btn-slot" id="slot-btn-redo"></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row" style="width:202px;"> <span class="btn-slot text x-huge" id="slot-btn-addslide"></span>
<span class="btn-placeholder" style="float: left; width: 148px;" 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>
</div> </div>
<div class="toolbar-row"> <div class="group" style="display:none;"></div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-bold"></span> </section>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-italic"></span> <section class="box-panels">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-underline"></span> <section class="panel" data-tab="home">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-strikeout"></span> <div class="group">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-fontcolor"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-superscript"></span> <span class="btn-slot split" id="slot-btn-changeslide"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-subscript"></span> </div>
<div class="elset">
<span class="btn-slot" id="slot-btn-preview"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <span class="btn-slot text x-huge slot-inserttext"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-markers"></span> <span class="btn-slot text x-huge slot-insertimg"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-numbering"></span> <span class="btn-slot text x-huge slot-insertshape"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-decoffset"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-incoffset"></span>
</div> </div>
<div class="toolbar-row"> <div class="group">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-halign"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-valign"></span> <span class="btn-slot split" id="slot-btn-arrange-shape"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-linespace"></span> </div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-align-shape"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <div class="elset" style="width:202px;">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertimage"></span> <span class="btn-slot" style="float: left; width: 148px;" id="slot-field-fontname"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertchart"></span> <span class="btn-slot" style="float: left; width: 45px; margin-left: 2px;" id="slot-field-fontsize"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttext"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertequation"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttable"></span> <span class="btn-slot split" id="slot-btn-bold"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserthyperlink"></span> <span class="btn-slot split" id="slot-btn-italic"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertshape"></span> <span class="btn-slot split" id="slot-btn-underline"></span>
<span class="btn-slot split" id="slot-btn-strikeout"></span>
<span class="btn-slot split" id="slot-btn-fontcolor"></span>
<span class="btn-slot split" id="slot-btn-superscript"></span>
<span class="btn-slot" id="slot-btn-subscript"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-arrange-shape"></span> <span class="btn-slot split" id="slot-btn-markers"></span>
<span class="btn-slot split" id="slot-btn-numbering"></span>
<span class="btn-slot split" id="slot-btn-decoffset"></span>
<span class="btn-slot split" id="slot-btn-incoffset"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-shape"></span> <span class="btn-slot split" id="slot-btn-halign"></span>
<span class="btn-slot split" id="slot-btn-valign"></span>
<span class="btn-slot split" id="slot-btn-linespace"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> <div class="separator long"></div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clearstyle"></span> <span class="btn-slot" id="slot-btn-clearstyle"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-copystyle"></span> <span class="btn-slot" id="slot-btn-copystyle"></span>
</div> </div>
</div> </div>
<div class="toolbar-group"> <div class="group">
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-colorschemas"></span> <span class="btn-slot split" id="slot-btn-colorschemas"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-slidesize"></span> <span class="btn-slot split" id="slot-btn-slidesize"></span>
</div> </div>
</div> </div>
<div class="toolbar-group" id="id-toolbar-full-placeholder-field-styles" style="width: 100%; min-width: 140px;"> <div class="group" id="slot-field-styles" style="width: 100%; min-width: 140px;">
</div> </div>
<div class="toolbar-group no-mask"> <div class="group no-mask">
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-hidebars"></span> <span class="btn-slot split" id="slot-btn-hidebars"></span>
</div> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-settings"></span> <span class="btn-slot" id="slot-btn-settings"></span>
</div> </div>
</div> </div>
</section>
<section class="panel" data-tab="ins">
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-inserttable"></span>
</div> </div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge slot-inserttext"></span>
<span class="btn-slot text x-huge slot-insertimg"></span>
<span class="btn-slot text x-huge slot-insertshape"></span>
<span class="btn-slot text x-huge" id="slot-btn-insertchart"></span>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge slot-comment"></span>
<span class="btn-slot text x-huge" id="slot-btn-insertlink"></span>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-insertequation"></span>
</div>
</section>
</section>
</section>
</div> </div>

7
apps/presentationeditor/main/app/template/Viewport.template
View file

@ -1,12 +1,13 @@
<div class="layout-region"> <div class="layout-region">
<div id="pe-preview" style="position:absolute; left: 0; top: 0; display:none; width:100%; height:100%; z-index: 1;"></div> <div id="pe-preview" style="position:absolute; left: 0; top: 0; display:none; width:100%; height:100%; z-index: 1;"></div>
<section class="layout-ct">
<div id="file-menu-panel" class="toolbar-fullview-panel" style="display:none;"></div>
</section>
<div id="viewport-vbox-layout" class="layout-ct vbox"> <div id="viewport-vbox-layout" class="layout-ct vbox">
<div id="header" class="layout-item"></div>
<div id="toolbar" class="layout-item"></div> <div id="toolbar" class="layout-item"></div>
<div class="layout-item"> <div class="layout-item middle">
<div id="viewport-hbox-layout" class="layout-ct hbox"> <div id="viewport-hbox-layout" class="layout-ct hbox">
<div id="left-menu" class="layout-item" style="width: 40px;"></div> <div id="left-menu" class="layout-item" style="width: 40px;"></div>
<div id="file-menu-panel" class="left-menu-full-ct" style="display:none;"></div>
<div id="about-menu-panel" class="left-menu-full-ct" style="display:none;"></div> <div id="about-menu-panel" class="left-menu-full-ct" style="display:none;"></div>
<div id="editor_sdk" class="layout-item"></div> <div id="editor_sdk" class="layout-item"></div>
<div id="right-menu" class="layout-item"></div> <div id="right-menu" class="layout-item"></div>

7
apps/presentationeditor/main/app/view/FileMenu.js
View file

@ -49,6 +49,7 @@ define([
PE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({ PE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({
el: '#file-menu-panel', el: '#file-menu-panel',
options: {alias:'FileMenu'},
template: _.template(tpl), template: _.template(tpl),
@ -195,13 +196,11 @@ define([
panel = this.active || ((this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info'); panel = this.active || ((this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info');
this.$el.show(); this.$el.show();
this.selectMenu(panel); this.selectMenu(panel);
if (this.mode.isEdit) PE.getController('Toolbar').DisableToolbar(true);
this.api.asc_enableKeyEvents(false); this.api.asc_enableKeyEvents(false);
}, },
hide: function() { hide: function() {
this.$el.hide(); this.$el.hide();
if (this.mode.isEdit) PE.getController('Toolbar').DisableToolbar(false);
this.fireEvent('filemenu:hide', [this]); this.fireEvent('filemenu:hide', [this]);
this.api.asc_enableKeyEvents(true); this.api.asc_enableKeyEvents(true);
}, },
@ -312,6 +311,10 @@ define([
this.panels['info'].updateInfo(this.document); this.panels['info'].updateInfo(this.document);
}, },
isVisible: function () {
return !this.$el.is(':hidden');
},
btnSaveCaption : 'Save', btnSaveCaption : 'Save',
btnDownloadCaption : 'Download as...', btnDownloadCaption : 'Download as...',
btnInfoCaption : 'Document Info...', btnInfoCaption : 'Document Info...',

36
apps/presentationeditor/main/app/view/LeftMenu.js
View file

@ -90,15 +90,6 @@ define([
el.html(this.template({ el.html(this.template({
})); }));
this.btnFile = new Common.UI.Button({
action: 'file',
el: $('#left-btn-file'),
hint: this.tipFile + Common.Utils.String.platformKey('Alt+F'),
enableToggle: true,
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnSearch = new Common.UI.Button({ this.btnSearch = new Common.UI.Button({
action: 'search', action: 'search',
el: $('#left-btn-search'), el: $('#left-btn-search'),
@ -169,13 +160,10 @@ define([
this.btnSearch.on('click', _.bind(this.onBtnMenuClick, this)); this.btnSearch.on('click', _.bind(this.onBtnMenuClick, this));
this.btnThumbs.on('click', _.bind(this.onBtnMenuClick, this)); this.btnThumbs.on('click', _.bind(this.onBtnMenuClick, this));
this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this)); this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.btnFile.on('toggle', _.bind(this.onBtnMenuToggle, this));
this.btnAbout.on('click', _.bind(this.onFullMenuClick, this)); this.btnAbout.on('click', _.bind(this.onFullMenuClick, this));
this.btnFile.on('click', _.bind(this.onFullMenuClick, this));
var menuFile = new PE.Views.FileMenu({}); this.menuFile = new PE.Views.FileMenu({});
menuFile.options = {alias:'FileMenu'}; this.menuFile.render();
this.btnFile.panel = menuFile.render();
this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Presentation Editor'})).render(); this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Presentation Editor'})).render();
return this; return this;
@ -196,12 +184,11 @@ define([
}, },
onBtnMenuClick: function(btn, e) { onBtnMenuClick: function(btn, e) {
var full_menu_pressed = (this.btnFile.pressed || this.btnAbout.pressed); var full_menu_pressed = this.btnAbout.pressed;
if (this.btnFile.pressed) this.btnFile.toggle(false);
if (this.btnAbout.pressed) this.btnAbout.toggle(false); if (this.btnAbout.pressed) this.btnAbout.toggle(false);
if (btn.options.action == 'search') { if (btn.options.action == 'search') {
full_menu_pressed && this.fireEvent('panel:show', [this.btnFile, 'files', false]); full_menu_pressed && this.fireEvent('panel:show', [this.btnAbout, 'files', false]);
return; return;
} else } else
if (btn.options.action == 'thumbs') { if (btn.options.action == 'thumbs') {
@ -282,7 +269,6 @@ define([
/** coauthoring end **/ /** coauthoring end **/
close: function(menu) { close: function(menu) {
this.btnFile.toggle(false);
this.btnAbout.toggle(false); this.btnAbout.toggle(false);
this.btnThumbs.toggle(false); this.btnThumbs.toggle(false);
this.$el.width(SCALE_MIN); this.$el.width(SCALE_MIN);
@ -308,7 +294,7 @@ define([
}, },
isOpened: function() { isOpened: function() {
var isopened = this.btnFile.pressed || this.btnSearch.pressed; var isopened = this.btnSearch.pressed;
/** coauthoring begin **/ /** coauthoring begin **/
!isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed); !isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed);
/** coauthoring end **/ /** coauthoring end **/
@ -316,7 +302,6 @@ define([
}, },
disableMenu: function(menu, disable) { disableMenu: function(menu, disable) {
this.btnFile.setDisabled(disable);
this.btnSearch.setDisabled(disable); this.btnSearch.setDisabled(disable);
this.btnThumbs.setDisabled(disable); this.btnThumbs.setDisabled(disable);
this.btnAbout.setDisabled(disable); this.btnAbout.setDisabled(disable);
@ -330,12 +315,8 @@ define([
showMenu: function(menu) { showMenu: function(menu) {
var re = /^(\w+):?(\w*)$/.exec(menu); var re = /^(\w+):?(\w*)$/.exec(menu);
if (re[1] == 'file' && this.btnFile.isVisible()) { if ( re[1] == 'file' ) {
if (!this.btnFile.pressed) { this.menuFile.show(re[2].length ? re[2] : undefined);
this.btnFile.toggle(true);
// this.onBtnMenuClick(this.btnFile);
}
this.btnFile.panel.show(re[2].length ? re[2] : undefined);
} else { } else {
/** coauthoring begin **/ /** coauthoring begin **/
if (menu == 'chat') { if (menu == 'chat') {
@ -362,7 +343,7 @@ define([
getMenu: function(type) { getMenu: function(type) {
switch (type) { switch (type) {
default: return null; default: return null;
case 'file': return this.btnFile.panel; case 'file': return this.menuFile;
case 'about': return this.btnAbout.panel; case 'about': return this.btnAbout.panel;
} }
}, },
@ -398,7 +379,6 @@ define([
/** coauthoring end **/ /** coauthoring end **/
tipAbout : 'About', tipAbout : 'About',
tipSupport : 'Feedback & Support', tipSupport : 'Feedback & Support',
tipFile : 'File',
tipSearch : 'Search', tipSearch : 'Search',
tipSlides: 'Slides', tipSlides: 'Slides',
tipPlugins : 'Plugins', tipPlugins : 'Plugins',

127
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -70,22 +70,7 @@ define([
el: '#statusbar', el: '#statusbar',
template: _.template(template), template: _.template(template),
storeUsers: undefined, events: {},
tplUser: ['<li id="status-chat-user-<%= user.get("id") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">',
'<div class="color" style="background-color: <%= user.get("color") %>;" >',
'<label class="name"><%= scope.getUserName(user.get("username")) %></label>',
'</div>',
'</li>'].join(''),
templateUserList: _.template('<ul>' +
'<% _.each(users, function(item) { %>' +
'<%= _.template(usertpl, {user: item, scope: scope}) %>' +
'<% }); %>' +
'</ul>'),
events: {
},
api: undefined, api: undefined,
pages: undefined, pages: undefined,
@ -164,39 +149,6 @@ define([
this.zoomMenu.render($('.cnt-zoom',this.el)); this.zoomMenu.render($('.cnt-zoom',this.el));
this.zoomMenu.cmpEl.attr({tabindex: -1}); this.zoomMenu.cmpEl.attr({tabindex: -1});
/** coauthoring begin **/
this.panelUsersList = $('#status-users-list', this.el);
this.storeUsers.bind({
add : _.bind(this._onAddUser, this),
change : _.bind(this._onUsersChanged, this),
reset : _.bind(this._onResetUsers, this)
});
this.panelUsers = $('#status-users-ct', this.el);
this.panelUsers.on('shown.bs.dropdown', function () {
me.panelUsersList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true});
var tip = me.panelUsersBlock.data('bs.tooltip');
if (tip) tip.hide();
});
this.panelUsersBlock = this.panelUsers.find('#status-users-block');
this.panelUsersBlock.tooltip({
title: this.tipAccessRights,
html: true,
placement: 'top'
});
this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
this.lblUserCount = this.panelUsers.find('#status-users-count');
this.lblChangeRights = this.panelUsers.find('#status-change-rights');
this.lblChangeRights.on('click', _.bind(this.onUsersClick, this));
this.$el.find('#status-users-menu').on('click', function() {
return false;
});
/** coauthoring end **/
this.txtGoToPage = new Common.UI.InputField({ this.txtGoToPage = new Common.UI.InputField({
el : $('#status-goto-page'), el : $('#status-goto-page'),
allowBlank : true, allowBlank : true,
@ -280,11 +232,6 @@ define([
if (this.api) { if (this.api) {
this.api.asc_registerCallback('asc_onCountPages', _.bind(_onCountPages, this)); this.api.asc_registerCallback('asc_onCountPages', _.bind(_onCountPages, this));
this.api.asc_registerCallback('asc_onCurrentPage', _.bind(_onCurrentPage, this)); this.api.asc_registerCallback('asc_onCurrentPage', _.bind(_onCurrentPage, this));
/** coauthoring begin **/
this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onApiUsersChanged, this));
this.api.asc_registerCallback('asc_onParticipantsChanged', _.bind(this.onApiUsersChanged, this));
/** coauthoring end **/
} }
return this; return this;
@ -294,8 +241,6 @@ define([
setMode: function(mode) { setMode: function(mode) {
this.mode = mode; this.mode = mode;
this.$el.find('.el-edit')[this.mode.isEdit?'show':'hide'](); this.$el.find('.el-edit')[this.mode.isEdit?'show':'hide']();
this.lblChangeRights[(!this.mode.isOffline && this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
this.panelUsers[(!this.mode.isOffline && this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
}, },
setVisible: function(visible) { setVisible: function(visible) {
@ -304,69 +249,6 @@ define([
: this.hide(); : this.hide();
}, },
/** coauthoring begin **/
onUsersClick: function() {
this.panelUsers.removeClass('open');
this.fireEvent('click:users', this);
},
onApiUsersChanged: function(users) {
var length = 0;
_.each(users, function(item){
if (!item.asc_getView())
length++;
});
this.panelUsers[(length>1 || this.mode.sharingSettingsUrl&&this.mode.sharingSettingsUrl.length)?'show':'hide']();
this.lblUserCount.css({
'font-size': (length > 1 ? '11px' : '14px'),
'font-weight': (length > 1 ? 'bold' : 'normal'),
'margin-top': (length > 1 ? '0' : '-1px')
});
this.lblUserCount.text(length > 1 ? length : '+');
$('#status-users-icon').css('margin-bottom', length > 1 ? '0' : '2px');
var usertip = this.panelUsersBlock.data('bs.tooltip');
if (usertip) {
usertip.options.title = (length > 1) ? this.tipViewUsers : this.tipAccessRights;
usertip.setContent();
}
(length > 1) ? this.panelUsersBlock.attr('data-toggle', 'dropdown') : this.panelUsersBlock.removeAttr('data-toggle');
this.panelUsersBlock.toggleClass('dropdown-toggle', length > 1);
(length > 1) ? this.panelUsersBlock.off('click') : this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this));
},
_onAddUser: function(m, c, opts) {
if (this.panelUsersList) {
this.panelUsersList.find('ul').append(_.template(this.tplUser, {user: m, scope: this}));
this.panelUsersList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true});
}
},
_onUsersChanged: function(m) {
if (m.changed.online != undefined && this.panelUsersList) {
this.panelUsersList.find('#status-chat-user-'+ m.get('id'))[m.changed.online?'removeClass':'addClass']('offline');
this.panelUsersList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true});
}
},
_onResetUsers: function(c, opts) {
if (this.panelUsersList) {
this.panelUsersList.html(this.templateUserList({users: c.models, usertpl: this.tplUser, scope: this}));
this.panelUsersList.scroller = new Common.UI.Scroller({
el : $('#status-users-list ul'),
useKeyboard : true,
minScrollbarLength : 40,
alwaysVisibleY: true
});
}
},
getUserName: function (username) {
return Common.Utils.String.htmlEncode(username);
},
/** coauthoring end **/
showStatusMessage: function(message) { showStatusMessage: function(message) {
$('#status-label-action').text(message); $('#status-label-action').text(message);
}, },
@ -377,9 +259,6 @@ define([
pageIndexText : 'Slide {0} of {1}', pageIndexText : 'Slide {0} of {1}',
goToPageText : 'Go to Slide', goToPageText : 'Go to Slide',
tipUsers : 'Document is currently being edited by several users.',
tipMoreUsers : 'and %1 users.',
tipShowUsers : 'To see all users click the icon below.',
tipFitPage : 'Fit to Slide', tipFitPage : 'Fit to Slide',
tipFitWidth : 'Fit to Width', tipFitWidth : 'Fit to Width',
tipZoomIn : 'Zoom In', tipZoomIn : 'Zoom In',
@ -387,9 +266,7 @@ define([
tipZoomFactor : 'Magnification', tipZoomFactor : 'Magnification',
txtPageNumInvalid: 'Slide number invalid', txtPageNumInvalid: 'Slide number invalid',
tipPreview : 'Start Slideshow', tipPreview : 'Start Slideshow',
tipAccessRights : 'Manage document access rights', tipAccessRights : 'Manage document access rights'
tipViewUsers : 'View users and manage document access rights',
txAccessRights : 'Change access rights'
}, PE.Views.Statusbar || {})); }, PE.Views.Statusbar || {}));
} }
); );

789
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -58,7 +58,7 @@ define([
,'common/main/lib/component/SynchronizeTip' ,'common/main/lib/component/SynchronizeTip'
/** coauthoring end **/ /** coauthoring end **/
], function (Backbone, toolbarTemplate) { ], function (Backbone, template) {
'use strict'; 'use strict';
PE.enumLock = { PE.enumLock = {
@ -84,11 +84,159 @@ define([
inEquation: 'in-equation' inEquation: 'in-equation'
}; };
PE.Views.Toolbar = Backbone.View.extend(_.extend({ var buttonsArray = function (opts) {
el: '#toolbar', };
// Compile our stats template buttonsArray.prototype = new Array;
template: _.template(toolbarTemplate),
buttonsArray.prototype.disable = function (state) {
this.forEach(function(btn) {
btn.setDisabled(state);
});
};
buttonsArray.prototype.toggle = function (state, suppress) {
this.forEach(function(btn) {
btn.toggle(state, suppress);
});
};
buttonsArray.prototype.pressed = function () {
return this.some(function(btn) {
return btn.pressed;
});
};
buttonsArray.prototype.on = function (event, func) {
this.forEach(function(btn) {
btn.on.apply(btn, arguments);
});
};
buttonsArray.prototype.contains = function (id) {
return this.some(function(btn) {
return btn.id == id;
});
};
PE.Views.Toolbar = Backbone.View.extend(_.extend((function(){
var $tabs, $boxTabs;
var $panels, $marker, $scrollL;
var lastPanel;
var isFolded = false;
var optsFold = {timeout: 2000};
var config = {};
function hasTabInvisible() {
var _left_bound_ = $boxTabs.offset().left,
_right_bound_ = _left_bound_ + $boxTabs.width();
var tab = $tabs.first().get(0);
var rect = tab.getBoundingClientRect();
if (!(rect.left < _left_bound_)) {
tab = $tabs.last().get(0);
rect = tab.getBoundingClientRect();
if (!(rect.right > _right_bound_))
return false;
}
return true;
}
function isTabActive(tab) {
var t = $tabs.filter('.active').find('> a');
return t.length && t.data('tab') == tab;
}
function onResize(e) {
if ( hasTabInvisible() ){
if ( !$boxTabs.parent().hasClass('short') )
$boxTabs.parent().addClass('short');
} else
if ( $boxTabs.parent().hasClass('short') ) {
$boxTabs.parent().removeClass('short');
}
}
function onScrollTabs(opts, e) {
var sv = $boxTabs.scrollLeft();
if ( sv || opts == 'right') {
$boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
}
}
function collapseToolbar() {
optsFold.$bar.removeClass('expanded');
}
function expandToolbar() {
clearTimeout(optsFold.timer);
optsFold.$bar.addClass('expanded');
optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
}
function onShowCoveredPanel(state) {
collapseToolbar();
if ( state )
optsFold.$bar.addClass('cover'); else
optsFold.$bar.removeClass('cover');
}
function setFolded(value) {
isFolded = value;
if ( isFolded ) {
if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
if ( !optsFold.$box ) optsFold.$box = this.$el.find('.box-controls');
optsFold.$bar.addClass('folded');
optsFold.$box.on({
mouseleave: function (e) {
optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
},
mouseenter: function (e) {
clearTimeout(optsFold.timer);
}
});
// $(document.body).on('focus', 'input, textarea', function(e) {
// });
//
// $(document.body).on('blur', 'input, textarea', function(e) {
// });
//
// Common.NotificationCenter.on({
// 'modal:show': function(){
// },
// 'modal:close': function(dlg) {
// },
// 'modal:hide': function(dlg) {
// },
// 'dataview:focus': function(e){
// },
// 'dataview:blur': function(e){
// },
// 'menu:show': function(e){
// },
// 'menu:hide': function(e){
// },
// 'edit:complete': _.bind(me.onEditComplete, me)
// });
} else {
clearTimeout(optsFold.timer);
optsFold.$bar.removeClass('folded');
optsFold.$box.off();
}
}
return {
el: '#toolbar',
// Delegated events for creating new items, and clearing completed ones. // Delegated events for creating new items, and clearing completed ones.
events: { events: {
@ -98,6 +246,13 @@ define([
initialize: function () { initialize: function () {
var me = this; var me = this;
config.tabs = [
{ caption: 'File', action: 'file'},
{ caption: 'Home', action: 'home', extcls: 'canedit'},
{ caption: 'Insert', action: 'ins', extcls: 'canedit'} ];
config.$layout = $(_.template(template, config));
me.paragraphControls = []; me.paragraphControls = [];
me.shapeControls = []; me.shapeControls = [];
me.slideOnlyControls = []; me.slideOnlyControls = [];
@ -119,27 +274,13 @@ define([
* UI Components * UI Components
*/ */
var _set = PE.enumLock; var _set = PE.enumLock;
me.btnNewDocument = new Common.UI.Button({
id : 'id-toolbar-btn-newdocument',
cls : 'btn-toolbar',
iconCls : 'btn-newdocument',
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides]
});
me.paragraphControls.push(me.btnNewDocument);
me.btnOpenDocument = new Common.UI.Button({
id : 'id-toolbar-btn-opendocument',
cls : 'btn-toolbar',
iconCls : 'btn-opendocument',
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides]
});
me.paragraphControls.push(me.btnOpenDocument);
me.btnAddSlide = new Common.UI.Button({ me.btnAddSlide = new Common.UI.Button({
id : 'id-toolbar-button-add-slide', id : 'id-toolbar-button-add-slide',
cls : 'btn-toolbar', cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-addslide', iconCls : 'btn-addslide',
split : true, split : true,
caption : me.capAddSlide,
lock : [_set.menuFileOpen, _set.slideDeleted, _set.lostConnect, _set.disableOnStart], lock : [_set.menuFileOpen, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
menu : true menu : true
}); });
@ -514,8 +655,9 @@ define([
me.btnInsertTable = new Common.UI.Button({ me.btnInsertTable = new Common.UI.Button({
id : 'id-toolbar-btn-inserttable', id : 'id-toolbar-btn-inserttable',
cls : 'btn-toolbar', cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-inserttable', iconCls : 'btn-inserttable',
caption : me.capInsertTable,
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
items: [ items: [
@ -534,24 +676,11 @@ define([
}); });
me.slideOnlyControls.push(me.btnInsertTable); me.slideOnlyControls.push(me.btnInsertTable);
me.btnInsertImage = new Common.UI.Button({
id : 'id-toolbar-btn-insertimage',
cls : 'btn-toolbar',
iconCls : 'btn-insertimage',
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
menu : new Common.UI.Menu({
items: [
{ caption: me.mniImageFromFile, value: 'file' },
{ caption: me.mniImageFromUrl, value: 'url' }
]
})
});
me.slideOnlyControls.push(me.btnInsertImage);
me.btnInsertChart = new Common.UI.Button({ me.btnInsertChart = new Common.UI.Button({
id : 'id-toolbar-btn-insertchart', id : 'id-toolbar-btn-insertchart',
cls : 'btn-toolbar', cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertchart', iconCls : 'btn-insertchart',
caption : me.capInsertChart,
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
menu : new Common.UI.Menu({ menu : new Common.UI.Menu({
style: 'width: 435px;', style: 'width: 435px;',
@ -607,60 +736,26 @@ define([
me.slideOnlyControls.push(me.btnInsertChart); me.slideOnlyControls.push(me.btnInsertChart);
me.btnInsertText = new Common.UI.Button({ me.btnInsertEquation = new Common.UI.Button({
id : 'id-toolbar-btn-inserttext',
cls : 'btn-toolbar',
iconCls : 'btn-inserttext',
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
enableToggle: true,
split : true,
menu : new Common.UI.Menu({
items : [
{caption: this.textInsText, value: 'text'},
this.mnuInsertTextArt = new Common.UI.MenuItem({
caption: this.textInsTextArt,
value: 'art',
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
cls: 'menu-shapes',
items: [
{ template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>') }
]
})
})
]
})
});
me.slideOnlyControls.push(me.btnInsertText);
this.btnInsertEquation = new Common.UI.Button({
id : 'id-toolbar-btn-insertequation', id : 'id-toolbar-btn-insertequation',
cls : 'btn-toolbar', cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertequation', iconCls : 'btn-insertequation',
caption : me.capInsertEquation,
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
split : true, split : true,
menu : new Common.UI.Menu({cls: 'menu-shapes'}) menu : new Common.UI.Menu({cls: 'menu-shapes'})
}); });
this.slideOnlyControls.push(this.btnInsertEquation); me.slideOnlyControls.push(this.btnInsertEquation);
me.btnInsertHyperlink = new Common.UI.Button({ me.btnInsertHyperlink = new Common.UI.Button({
id : 'id-toolbar-btn-inserthyperlink', id : 'id-toolbar-btn-inserthyperlink',
cls : 'btn-toolbar', cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-inserthyperlink', iconCls : 'btn-inserthyperlink',
caption : me.capInsertHyperlink,
lock : [_set.hyperlinkLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected] lock : [_set.hyperlinkLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected]
}); });
me.paragraphControls.push(me.btnInsertHyperlink); me.paragraphControls.push(me.btnInsertHyperlink);
me.btnInsertShape = new Common.UI.Button({
id : 'id-toolbar-btn-insertshape',
cls : 'btn-toolbar',
iconCls : 'btn-insertshape',
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
enableToggle: true,
menu : new Common.UI.Menu({cls: 'menu-shapes'})
});
me.slideOnlyControls.push(me.btnInsertShape);
me.btnColorSchemas = new Common.UI.Button({ me.btnColorSchemas = new Common.UI.Button({
id : 'id-toolbar-btn-colorschemas', id : 'id-toolbar-btn-colorschemas',
cls : 'btn-toolbar', cls : 'btn-toolbar',
@ -855,7 +950,7 @@ define([
enableKeyEvents: true, enableKeyEvents: true,
itemHeight : 38, itemHeight : 38,
hint: this.tipSlideTheme, hint: this.tipSlideTheme,
lock: [_set.themeLock, _set.lostConnect, _set.noSlides], lock: [_set.lostConnect, _set.noSlides],
beforeOpenHandler: function(e) { beforeOpenHandler: function(e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu,
@ -904,14 +999,13 @@ define([
'</div>' '</div>'
].join('')); ].join(''));
this.lockControls = [ this.btnNewDocument, this.btnOpenDocument, this.btnAddSlide, this.btnChangeSlide, this.btnSave, this.lockControls = [ this.btnAddSlide, this.btnChangeSlide, this.btnSave,
this.btnCopy, this.btnPaste, this.btnUndo, this.btnRedo, this.cmbFontName, this.cmbFontSize, this.btnCopy, this.btnPaste, this.btnUndo, this.btnRedo, this.cmbFontName, this.cmbFontSize,
this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript,
this.btnSubscript, this.btnFontColor, this.btnClearStyle, this.btnCopyStyle, this.btnMarkers, this.btnSubscript, this.btnFontColor, this.btnClearStyle, this.btnCopyStyle, this.btnMarkers,
this.btnNumbers, this.btnDecLeftOffset, this.btnIncLeftOffset, this.btnLineSpace, this.btnHorizontalAlign, this.btnNumbers, this.btnDecLeftOffset, this.btnIncLeftOffset, this.btnLineSpace, this.btnHorizontalAlign,
this.btnVerticalAlign, this.btnShapeArrange, this.btnShapeAlign, this.btnInsertTable, this.btnInsertImage, this.btnVerticalAlign, this.btnShapeArrange, this.btnShapeAlign, this.btnInsertTable, this.btnInsertChart,
this.btnInsertChart, this.btnInsertText, this.btnInsertEquation, this.btnInsertEquation, this.btnInsertHyperlink, this.btnColorSchemas, this.btnSlideSize, this.listTheme, this.mnuShowSettings
this.btnInsertHyperlink, this.btnInsertShape, this.btnColorSchemas, this.btnSlideSize, this.listTheme, this.mnuShowSettings
]; ];
// Disable all components before load document // Disable all components before load document
@ -954,7 +1048,9 @@ define([
item.keepState = _.difference(item.keepState, opts.clear); item.keepState = _.difference(item.keepState, opts.clear);
} }
_.isArray(causes) ? _.each(causes, function(c) {doLock(item, c)}) : doLock(item, causes); _.isArray(causes) ? _.each(causes, function (c) {
doLock(item, c)
}) : doLock(item, causes);
if (!(item.keepState.length > 0)) { if (!(item.keepState.length > 0)) {
item.isDisabled() && item.setDisabled(false); item.isDisabled() && item.setDisabled(false);
@ -966,103 +1062,225 @@ define([
}, },
render: function (mode) { render: function (mode) {
var me = this, var me = this;
el = $(this.el);
/** /**
* Render UI layout * Render UI layout
*/ */
this.trigger('render:before', this); this.fireEvent('render:before', [this]);
var value = Common.localStorage.getItem('pe-compact-toolbar'); me.isCompactView = mode.compactview;
var valueCompact = !!(value!==null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar); if ( mode.isEdit ) {
me.$el.html(me.rendererComponents(config.$layout));
} else {
config.$layout.find('.canedit').hide();
config.$layout.addClass('folded');
el.html(this.template({ me.$el.html(config.$layout);
isCompactView: valueCompact }
}));
me.rendererComponents(valueCompact ? 'short' : 'full'); this.fireEvent('render:after', [this]);
me.isCompactView = valueCompact;
this.trigger('render:after', this); $boxTabs = me.$el.find('.tabs > ul');
$tabs = $boxTabs.find('> li');
$panels = me.$el.find('.box-panels > .panel');
$tabs.parent().on('click', '.ribtab', function (e) {
var tab = $(e.target).data('tab');
if (tab == 'file') {
me.fireEvent('file:open');
} else
if ( isTabActive('file') )
me.fireEvent('file:close');
me.setTab(tab);
});
$marker = me.$el.find('.tabs .marker');
var $scrollR = me.$el.find('.tabs .scroll.right');
$scrollL = me.$el.find('.tabs .scroll.left');
$scrollL.on('click', onScrollTabs.bind(this, 'left'));
$scrollR.on('click', onScrollTabs.bind(this, 'right'));
Common.NotificationCenter.on({
'window:resize': onResize
});
if ( me.isCompactView )
me.setFolded(true); else
me.setTab('home');
return this; return this;
}, },
rendererComponents: function(mode) { rendererComponents: function (html) {
var prefix = (mode === 'short') ? 'short' : 'full'; var $host = $(html);
var _injectComponent = function (id, cmp) {
var replacePlacholder = function(id, cmp) { var $slot = $host.find(id);
var placeholderEl = $(id), if ($slot.length) {
placeholderDom = placeholderEl.get(0); cmp.rendered ?
$slot.append(cmp.$el) : cmp.render($slot);
if (placeholderDom && cmp) {
if (cmp.rendered) {
cmp.el = document.getElementById(cmp.id);
placeholderDom.appendChild(document.getElementById(cmp.id));
} else {
cmp.render(placeholderEl);
}
} }
}; };
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontname', this.cmbFontName); _injectComponent('#slot-field-fontname', this.cmbFontName);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontsize', this.cmbFontSize); _injectComponent('#slot-field-fontsize', this.cmbFontSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-newdocument', this.btnNewDocument); _injectComponent('#slot-btn-addslide', this.btnAddSlide);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-opendocument', this.btnOpenDocument); _injectComponent('#slot-btn-changeslide', this.btnChangeSlide);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-addslide', this.btnAddSlide); _injectComponent('#slot-btn-preview', this.btnPreview);
if (mode === 'short') { _injectComponent('#slot-btn-print', this.btnPrint);
$('button', this.btnAddSlide.cmpEl).removeClass('large'); _injectComponent('#slot-btn-save', this.btnSave);
} else { _injectComponent('#slot-btn-undo', this.btnUndo);
$('button', this.btnAddSlide.cmpEl).addClass('large'); _injectComponent('#slot-btn-redo', this.btnRedo);
} _injectComponent('#slot-btn-copy', this.btnCopy);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-changeslide', this.btnChangeSlide); _injectComponent('#slot-btn-paste', this.btnPaste);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-preview', this.btnPreview); _injectComponent('#slot-btn-bold', this.btnBold);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-print', this.btnPrint); _injectComponent('#slot-btn-italic', this.btnItalic);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-save', this.btnSave); _injectComponent('#slot-btn-underline', this.btnUnderline);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-undo', this.btnUndo); _injectComponent('#slot-btn-strikeout', this.btnStrikeout);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-redo', this.btnRedo); _injectComponent('#slot-btn-superscript', this.btnSuperscript);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copy', this.btnCopy); _injectComponent('#slot-btn-subscript', this.btnSubscript);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-paste', this.btnPaste); _injectComponent('#slot-btn-fontcolor', this.btnFontColor);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-bold', this.btnBold); _injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-italic', this.btnItalic); _injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-underline', this.btnUnderline); _injectComponent('#slot-btn-markers', this.btnMarkers);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-strikeout', this.btnStrikeout); _injectComponent('#slot-btn-numbering', this.btnNumbers);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-superscript', this.btnSuperscript); _injectComponent('#slot-btn-incoffset', this.btnIncLeftOffset);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-subscript', this.btnSubscript); _injectComponent('#slot-btn-decoffset', this.btnDecLeftOffset);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-fontcolor', this.btnFontColor); _injectComponent('#slot-btn-halign', this.btnHorizontalAlign);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-clearstyle', this.btnClearStyle); _injectComponent('#slot-btn-valign', this.btnVerticalAlign);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copystyle', this.btnCopyStyle); _injectComponent('#slot-btn-linespace', this.btnLineSpace);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-markers', this.btnMarkers); _injectComponent('#slot-btn-arrange-shape', this.btnShapeArrange);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-numbering', this.btnNumbers); _injectComponent('#slot-btn-align-shape', this.btnShapeAlign);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incoffset', this.btnIncLeftOffset); _injectComponent('#slot-btn-insertequation', this.btnInsertEquation);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decoffset', this.btnDecLeftOffset); _injectComponent('#slot-btn-insertlink', this.btnInsertHyperlink);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-halign', this.btnHorizontalAlign); _injectComponent('#slot-btn-inserttable', this.btnInsertTable);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-valign', this.btnVerticalAlign); _injectComponent('#slot-btn-insertchart', this.btnInsertChart);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-linespace', this.btnLineSpace); _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-arrange-shape', this.btnShapeArrange); _injectComponent('#slot-btn-slidesize', this.btnSlideSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-shape', this.btnShapeAlign); _injectComponent('#slot-field-styles', this.listTheme);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertshape', this.btnInsertShape); _injectComponent('#slot-btn-hidebars', this.btnHide);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttext', this.btnInsertText); _injectComponent('#slot-btn-settings', this.btnAdvSettings);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertequation', this.btnInsertEquation);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttable', this.btnInsertTable);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertimage', this.btnInsertImage);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertchart', this.btnInsertChart);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-colorschemas', this.btnColorSchemas);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-slidesize', this.btnSlideSize);
replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listTheme);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidebars', this.btnHide);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-settings', this.btnAdvSettings);
replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listTheme);
function _injectBtns(opts) {
var array = new buttonsArray;
var $slots = $host.find(opts.slot);
$slots.each(function(index, el) {
var button = new Common.UI.Button(opts.btnconfig);
button.render( $slots.eq(index) );
array.push(button);
});
return array;
}
var me = this;
me.btnsInsertImage = _injectBtns({
slot: '.slot-insertimg',
btnconfig: {
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertimage',
caption : me.capInsertImage,
lock : [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
menu : true
}
});
me.btnsInsertText = _injectBtns({
slot: '.slot-inserttext',
btnconfig: {
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-inserttext',
caption : me.capInsertText,
lock : [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
enableToggle: true,
split : true,
menu : true
}
});
me.btnsInsertShape = _injectBtns({
slot: '.slot-insertshape',
btnconfig: {
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'btn-insertshape',
caption : me.capInsertShape,
lock : [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
enableToggle: true,
menu : true
}
});
Array.prototype.push.apply(me.slideOnlyControls, me.btnsInsertImage, me.btnsInsertText, me.btnsInsertShape);
Array.prototype.push.apply(me.lockControls, me.btnsInsertImage, me.btnsInsertText, me.btnsInsertShape);
return $host;
},
onAppReady: function (config) {
var me = this;
(new Promise( function(resolve, reject) {
resolve();
})).then(function () {
if ( !config.isEdit ) return;
me.btnsInsertImage.forEach(function (btn) {
btn.updateHint(me.tipInsertImage);
btn.setMenu(
new Common.UI.Menu({
items: [
{ caption: me.mniImageFromFile, value: 'file' },
{ caption: me.mniImageFromUrl, value: 'url' }
]
}).on('item:click', function (menu, item, e) {
me.fireEvent('insert:image', [item.value]);
})
);
});
me.btnsInsertText.forEach(function (btn) {
btn.updateHint(me.tipInsertText);
btn.setMenu(
new Common.UI.Menu({
items : [
{caption: me.textInsText, value: 'text'},
{caption: me.textInsTextArt, value: 'art',
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
cls: 'menu-shapes',
items: [
{ template: _.template('<div class="view-insert-art" style="width: 239px; margin-left: 5px;"></div>') }
]
})
}
]
}).on('item:click', function (menu, item, e) {
if ( item.value == 'text' )
me.fireEvent('insert:text', ['begin']);
})
);
btn.on('click', function (btn, e) {
me.fireEvent('insert:text', [btn.pressed?'begin':'end']);
});
});
me.btnsInsertShape.forEach(function (btn) {
btn.updateHint(me.tipInsertShape);
btn.setMenu(
new Common.UI.Menu({
cls: 'menu-shapes'
}).on('hide:after', function (e) {
me.fireEvent('insert:shape', ['menu:hide']);
})
);
});
});
}, },
createDelayedElements: function () { createDelayedElements: function () {
// set hints // set hints
this.btnNewDocument.updateHint(this.tipNewDocument);
this.btnOpenDocument.updateHint(this.tipOpenDocument);
this.btnAddSlide.updateHint(this.tipAddSlide + Common.Utils.String.platformKey('Ctrl+M')); this.btnAddSlide.updateHint(this.tipAddSlide + Common.Utils.String.platformKey('Ctrl+M'));
this.btnChangeSlide.updateHint(this.tipChangeSlide); this.btnChangeSlide.updateHint(this.tipChangeSlide);
this.btnPreview.updateHint(this.tipPreview); this.btnPreview.updateHint(this.tipPreview);
@ -1089,12 +1307,9 @@ define([
this.btnIncLeftOffset.updateHint(this.tipIncPrLeft); this.btnIncLeftOffset.updateHint(this.tipIncPrLeft);
this.btnLineSpace.updateHint(this.tipLineSpace); this.btnLineSpace.updateHint(this.tipLineSpace);
this.btnInsertTable.updateHint(this.tipInsertTable); this.btnInsertTable.updateHint(this.tipInsertTable);
this.btnInsertImage.updateHint(this.tipInsertImage);
this.btnInsertChart.updateHint(this.tipInsertChart); this.btnInsertChart.updateHint(this.tipInsertChart);
this.btnInsertText.updateHint(this.tipInsertText);
this.btnInsertEquation.updateHint(this.tipInsertEquation); this.btnInsertEquation.updateHint(this.tipInsertEquation);
this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K')); this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
this.btnInsertShape.updateHint(this.tipInsertShape);
this.btnColorSchemas.updateHint(this.tipColorSchemas); this.btnColorSchemas.updateHint(this.tipColorSchemas);
this.btnHide.updateHint(this.tipViewSettings); this.btnHide.updateHint(this.tipViewSettings);
this.btnAdvSettings.updateHint(this.tipAdvSettings); this.btnAdvSettings.updateHint(this.tipAdvSettings);
@ -1113,7 +1328,8 @@ define([
items: [ items: [
this.mnuitemCompactToolbar = new Common.UI.MenuItem({ this.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption: this.textCompactView, caption: this.textCompactView,
checkable : true checkable: true,
checked: me.isCompactView
}), }),
this.mnuitemHideTitleBar = new Common.UI.MenuItem({ this.mnuitemHideTitleBar = new Common.UI.MenuItem({
caption: this.textHideTitleBar, caption: this.textHideTitleBar,
@ -1146,9 +1362,9 @@ define([
'<% } %>', '<% } %>',
'>', '>',
'<label class="title">' + this.textZoom + '</label>', '<label class="title">' + this.textZoom + '</label>',
'<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomin">&nbsp;</span></button>', '<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon btn-zoomin"></i></button>',
'<label class="zoom"><%= options.value %>%</label>', '<label class="zoom"><%= options.value %>%</label>',
'<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomout">&nbsp;</span></button>', '<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon btn-zoomout"></i></button>',
'</div>' '</div>'
].join('')), ].join('')),
stopPropagation: true, stopPropagation: true,
@ -1304,32 +1520,17 @@ define([
me.mnuChangeSlidePicker._needRecalcSlideLayout = true; me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
}); });
var mode = this.mode;
var value = Common.localStorage.getItem('pe-compact-toolbar');
var valueCompact = !!(value!==null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
value = Common.localStorage.getItem('pe-hidden-title');
var valueTitle = (value!==null && parseInt(value) == 1);
value = Common.localStorage.getItem('pe-hidden-status');
var valueStatus = (value!==null && parseInt(value) == 1);
value = Common.localStorage.getItem("pe-hidden-rulers");
var valueRulers = (value !== null && parseInt(value) == 1);
this.mnuitemCompactToolbar.setChecked(valueCompact, true);
this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this)); this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this));
this.mnuitemHideTitleBar.setChecked(valueTitle, true); this.mnuitemHideTitleBar.setChecked(Common.localStorage.getBool('pe-hidden-title'), true);
this.mnuitemHideStatusBar.setChecked(valueStatus, true); this.mnuitemHideStatusBar.setChecked(Common.localStorage.getBool('pe-hidden-status'), true);
this.mnuitemHideRulers.setChecked(valueRulers, true); this.mnuitemHideRulers.setChecked(Common.localStorage.getItem("pe-hidden-rulers"), true);
// // Enable none paragraph components // // Enable none paragraph components
this.lockToolbar(PE.enumLock.disableOnStart, false, {array: this.slideOnlyControls.concat(this.shapeControls)}); this.lockToolbar(PE.enumLock.disableOnStart, false, {array: this.slideOnlyControls.concat(this.shapeControls)});
/** coauthoring begin **/ /** coauthoring begin **/
var hidetip = Common.localStorage.getItem('pe-hide-synch'); this.showSynchTip = !Common.localStorage.getBool('pe-hide-synch');
this.showSynchTip = !(hidetip && parseInt(hidetip) == 1);
this.needShowSynchTip = false; this.needShowSynchTip = false;
if (this.needShowSynchTip) { if (this.needShowSynchTip) {
@ -1375,52 +1576,7 @@ define([
}, },
changeViewMode: function (item, compact) { changeViewMode: function (item, compact) {
var me = this, this.fireEvent('view:compact', [this, compact]);
toolbarFull = $('#id-toolbar-full'),
toolbarShort = $('#id-toolbar-short');
me.isCompactView = compact;
if (toolbarFull && toolbarShort) {
if (compact) {
toolbarShort.css({
display: 'table'
});
toolbarFull.css({
display: 'none'
});
toolbarShort.parent().css({
height: '41px'
});
this.rendererComponents('short');
} else {
toolbarShort.css({
display: 'none'
});
toolbarFull.css({
display: 'table'
});
toolbarShort.parent().css({
height: '67px'
});
this.rendererComponents('full');
// layout styles
_.defer(function(){
var listStylesVisible = (me.listTheme.rendered);
if (me.listTheme.menuPicker.store.length > 0 && listStylesVisible){
me.listTheme.fillComboView(me.listTheme.menuPicker.getSelectedRec(), true);
}
if (me.btnInsertEquation.rendered)
PE.getController('Toolbar').fillEquations();
}, 100);
}
this.fireEvent('changecompact', [this, compact]);
}
}, },
onSendThemeColorSchemes: function (schemas) { onSendThemeColorSchemes: function (schemas) {
@ -1592,12 +1748,165 @@ define([
div.css({'height': maxHeight}); div.css({'height': maxHeight});
col++; col++;
if (col>columnCount-1) { col = 0; maxHeight = 0;} if (col > columnCount - 1) {
col = 0;
maxHeight = 0;
}
} }
picker._needRecalcSlideLayout = false; picker._needRecalcSlideLayout = false;
} }
}, },
setTab: function (tab) {
if ( !tab || !tab.length ) {
if ( isFolded ) onShowCoveredPanel(false);
else tab = lastPanel;
}
if ( tab ) {
$tabs.removeClass('active');
$panels.removeClass('active');
var panel = $panels.filter('[data-tab=' + tab + ']');
if (panel.length) {
lastPanel = tab;
panel.addClass('active');
}
var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
if ($tp.length) {
$tp.addClass('active');
$marker.width($tp.width());
if ($scrollL.is(':visible'))
$marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
else $marker.css({left: $tp.position().left});
}
if ( isFolded ) {
if ( panel.length )
expandToolbar(); else
onShowCoveredPanel(true);
}
}
},
addTab: function (tab, panel, after) {
function _get_tab_action(index) {
if ( !config.tabs[index] )
return _get_tab_action(--index);
return config.tabs[index].action;
}
var _tplTab = '<li class="ribtab"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>';
config.tabs[after + 1] = tab;
var _after_action = _get_tab_action( after );
var _elements = $tabs || config.$layout.find('.tabs');
var $target = _elements.find('a[data-tab=' + _after_action + ']');
if ( $target.length ) {
$target.parent().after( _.template(_tplTab, tab) );
if ( panel ) {
_elements = $panels || config.$layout.find('.box-panels > .panel');
$target = _elements.filter('[data-tab=' + _after_action + ']');
if ( $target.length ) {
$target.after(panel);
}
}
// synchronize matched elements
$tabs && ($tabs = $boxTabs.find('> li'));
$panels && ($panels = this.$el.find('.box-panels > .panel'));
}
},
setFolded: function (f) {
setFolded.call(this, f);
},
setExtra: function (place, el) {
if ( $tabs ) {
} else {
if ( place == 'right' ) {
config.$layout.find('.extra.right').html(el);
} else
if ( place == 'left' ) {
config.$layout.find('.extra.left').html(el);
}
}
},
isCompact: function () {
return isFolded;
},
updateTextartMenu: function (collection) {
var me = this;
me.btnsInsertText.forEach(function (btn) {
if ( btn.textartPicker ) {
if ( btn.textartPicker.store.size() == collection.size() ) {
btn.textartPicker.store.each(function (model, index) {
model.set('imageUrl', collection.at(index).get('imageUrl'));
});
} else {
btn.textartPicker.store.reset( collection.models );
}
} else {
btn.textartPicker = new Common.UI.DataView({
el: $('.view-insert-art', btn.menu.items[1].$el),
store: collection,
parentMenu: btn.menu.items[1],
showLast: false,
itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
});
btn.textartPicker.on('item:click', function(picker, item, record, e) {
me.fireEvent('insert:textart', [record.get('data')]);
if (e.type !== 'click') this.menu.hide();
});
}
});
},
updateAutoshapeMenu: function (collection) {
var me = this;
for (var i = 0; i < collection.size(); i++) {
var group = collection.at(i);
me.btnsInsertShape.forEach(function (btn, index) {
var menuitem = new Common.UI.MenuItem({
caption: group.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
]
})
});
btn.menu.addItem(menuitem);
(new Common.UI.DataView({
el: $('.shapegroup-' + i, menuitem.$el),
store: group.get('groupStore'),
parentMenu: menuitem.menu,
showLast: false,
itemTemplate: _.template('<div class="item-shape"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
})).on('item:click', function (picker, item, record, e) {
if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
me.fireEvent('insert:shape', [record.get('data').shapeType]);
});
});
}
},
textBold: 'Bold', textBold: 'Bold',
textItalic: 'Italic', textItalic: 'Italic',
textUnderline: 'Underline', textUnderline: 'Underline',
@ -1641,8 +1950,6 @@ define([
tipInsertShape: 'Insert Autoshape', tipInsertShape: 'Insert Autoshape',
tipPreview: 'Start Slideshow', tipPreview: 'Start Slideshow',
tipAddSlide: 'Add Slide', tipAddSlide: 'Add Slide',
tipNewDocument: 'New Document',
tipOpenDocument: 'Open Document',
tipShapeAlign: 'Align Shape', tipShapeAlign: 'Align Shape',
tipShapeArrange: 'Arrange Shape', tipShapeArrange: 'Arrange Shape',
textShapeAlignLeft: 'Align Left', textShapeAlignLeft: 'Align Left',
@ -1716,6 +2023,18 @@ define([
textShowSettings: 'Show Settings', textShowSettings: 'Show Settings',
tipInsertEquation: 'Insert Equation', tipInsertEquation: 'Insert Equation',
textCharts: 'Charts', textCharts: 'Charts',
tipChangeChart: 'Change Chart Type' tipChangeChart: 'Change Chart Type',
}, PE.Views.Toolbar || {})); capInsertText: 'Text Box',
capInsertImage: 'Picture',
capInsertShape: 'Shape',
capInsertTable: 'Table',
capInsertChart: 'Chart',
capInsertHyperlink: 'Hyperlink',
capInsertEquation: 'Equation',
capAddSlide: 'Add Slide',
capTabFile: 'File',
capTabHome: 'Home',
capTabInsert: 'Insert'
}
}()), PE.Views.Toolbar || {}));
}); });

20
apps/presentationeditor/main/app/view/Viewport.js
View file

@ -87,15 +87,12 @@ define([
box: $container, box: $container,
items: [{ items: [{
el: items[0], el: items[0],
rely: true height: Common.localStorage.getBool('pe-compact-toolbar') ? 40 : 40+67
}, { }, {
el: items[1], el: items[1],
rely: true
}, {
el: items[2],
stretch: true stretch: true
}, { }, {
el: items[3], el: items[2],
height: 25 height: 25
}] }]
}); });
@ -126,17 +123,10 @@ define([
}, },
applyEditorMode: function() { applyEditorMode: function() {
var me = this, PE.getController('RightMenu').getView('RightMenu').render();
toolbarView = PE.getController('Toolbar').getView('Toolbar'),
rightMenuView = PE.getController('RightMenu').getView('RightMenu'),
statusBarView = PE.getController('Statusbar').getView('Statusbar');
me._toolbar = toolbarView.render(this.mode); if ( Common.localStorage.getBool('pe-hidden-status') )
me._rightMenu = rightMenuView.render(); PE.getController('Statusbar').getView('Statusbar').setVisible(false);
var value = Common.localStorage.getItem('pe-hidden-status');
if (value !== null && parseInt(value) == 1)
statusBarView.setVisible(false);
}, },
setMode: function(mode, delay) { setMode: function(mode, delay) {

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

@ -78,10 +78,22 @@
"Common.Views.ExternalDiagramEditor.textClose": "Close", "Common.Views.ExternalDiagramEditor.textClose": "Close",
"Common.Views.ExternalDiagramEditor.textSave": "Save & Exit", "Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
"Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor", "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
"Common.Views.Header.openNewTabText": "Open in New Tab", "del_Common.Views.Header.openNewTabText": "Open in New Tab",
"Common.Views.Header.textBack": "Go to Documents", "del_Common.Views.Header.textBack": "Go to Documents",
"del_Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE", "del_Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
"del_Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.itemBackNewTab": "Open in New Tab",
"Common.Views.Header.itemBackCurrTab": "Open in Current Tab",
"Common.Views.Header.textSaveBegin": "Saving...",
"Common.Views.Header.textSaveEnd": "All changes saved",
"Common.Views.Header.textSaveChanged": "Modified",
"Common.Views.Header.textSaveExpander": "All changes saved",
"Common.Views.Header.textBack": "Go to Documents",
"Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
"Common.Views.Header.txtRename": "Rename", "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.cancelButtonText": "Cancel",
"Common.Views.ImageFromUrlDialog.okButtonText": "OK", "Common.Views.ImageFromUrlDialog.okButtonText": "OK",
"Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:", "Common.Views.ImageFromUrlDialog.textUrl": "Paste an image URL:",
@ -166,8 +178,8 @@
"PE.Controllers.Main.saveErrorText": "An error has occurred while saving the file", "PE.Controllers.Main.saveErrorText": "An error has occurred while saving the file",
"PE.Controllers.Main.savePreparingText": "Preparing to save", "PE.Controllers.Main.savePreparingText": "Preparing to save",
"PE.Controllers.Main.savePreparingTitle": "Preparing to save. Please wait...", "PE.Controllers.Main.savePreparingTitle": "Preparing to save. Please wait...",
"PE.Controllers.Main.saveTextText": "Saving presentation...", "del_PE.Controllers.Main.saveTextText": "Saving presentation...",
"PE.Controllers.Main.saveTitleText": "Saving Presentation", "del_PE.Controllers.Main.saveTitleText": "Saving Presentation",
"PE.Controllers.Main.splitDividerErrorText": "The number of rows must be a divisor of %1.", "PE.Controllers.Main.splitDividerErrorText": "The number of rows must be a divisor of %1.",
"PE.Controllers.Main.splitMaxColsErrorText": "The number of columns must be less than %1.", "PE.Controllers.Main.splitMaxColsErrorText": "The number of columns must be less than %1.",
"PE.Controllers.Main.splitMaxRowsErrorText": "The number of rows must be less than %1.", "PE.Controllers.Main.splitMaxRowsErrorText": "The number of rows must be less than %1.",
@ -247,7 +259,7 @@
"PE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.", "PE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.",
"PE.Controllers.Main.titleServerVersion": "Editor updated", "PE.Controllers.Main.titleServerVersion": "Editor updated",
"PE.Controllers.Main.errorServerVersion": "The editor version has been updated. The page will be reloaded to apply the changes.", "PE.Controllers.Main.errorServerVersion": "The editor version has been updated. The page will be reloaded to apply the changes.",
"PE.Controllers.Main.textChangesSaved": "All changes saved", "del_PE.Controllers.Main.textChangesSaved": "All changes saved",
"PE.Controllers.Main.errorBadImageUrl": "Image URL is incorrect", "PE.Controllers.Main.errorBadImageUrl": "Image URL is incorrect",
"PE.Controllers.Statusbar.zoomText": "Zoom {0}%", "PE.Controllers.Statusbar.zoomText": "Zoom {0}%",
"PE.Controllers.Toolbar.confirmAddFontName": "The font you are going to save is not available on the current device.<br>The text style will be displayed using one of the system fonts, the saved font will be used when it is available.<br>Do you want to continue?", "PE.Controllers.Toolbar.confirmAddFontName": "The font you are going to save is not available on the current device.<br>The text style will be displayed using one of the system fonts, the saved font will be used when it is available.<br>Do you want to continue?",
@ -870,7 +882,7 @@
"PE.Views.LeftMenu.tipAbout": "About", "PE.Views.LeftMenu.tipAbout": "About",
"PE.Views.LeftMenu.tipChat": "Chat", "PE.Views.LeftMenu.tipChat": "Chat",
"PE.Views.LeftMenu.tipComments": "Comments", "PE.Views.LeftMenu.tipComments": "Comments",
"PE.Views.LeftMenu.tipFile": "File", "del_PE.Views.LeftMenu.tipFile": "File",
"PE.Views.LeftMenu.tipPlugins": "Plugins", "PE.Views.LeftMenu.tipPlugins": "Plugins",
"PE.Views.LeftMenu.tipSearch": "Search", "PE.Views.LeftMenu.tipSearch": "Search",
"PE.Views.LeftMenu.tipSlides": "Slides", "PE.Views.LeftMenu.tipSlides": "Slides",
@ -1097,15 +1109,15 @@
"PE.Views.Statusbar.tipAccessRights": "Manage document access rights", "PE.Views.Statusbar.tipAccessRights": "Manage document access rights",
"PE.Views.Statusbar.tipFitPage": "Fit to Slide", "PE.Views.Statusbar.tipFitPage": "Fit to Slide",
"PE.Views.Statusbar.tipFitWidth": "Fit to Width", "PE.Views.Statusbar.tipFitWidth": "Fit to Width",
"PE.Views.Statusbar.tipMoreUsers": "and %1 users.", "del_PE.Views.Statusbar.tipMoreUsers": "and %1 users.",
"PE.Views.Statusbar.tipPreview": "Start Slideshow", "PE.Views.Statusbar.tipPreview": "Start Slideshow",
"PE.Views.Statusbar.tipShowUsers": "To see all users click the icon below.", "del_PE.Views.Statusbar.tipShowUsers": "To see all users click the icon below.",
"PE.Views.Statusbar.tipUsers": "Document is currently being edited by several users.", "del_PE.Views.Statusbar.tipUsers": "Document is currently being edited by several users.",
"PE.Views.Statusbar.tipViewUsers": "View users and manage document access rights", "del_PE.Views.Statusbar.tipViewUsers": "View users and manage document access rights",
"PE.Views.Statusbar.tipZoomFactor": "Magnification", "PE.Views.Statusbar.tipZoomFactor": "Magnification",
"PE.Views.Statusbar.tipZoomIn": "Zoom In", "PE.Views.Statusbar.tipZoomIn": "Zoom In",
"PE.Views.Statusbar.tipZoomOut": "Zoom Out", "PE.Views.Statusbar.tipZoomOut": "Zoom Out",
"PE.Views.Statusbar.txAccessRights": "Change access rights", "del_PE.Views.Statusbar.txAccessRights": "Change access rights",
"PE.Views.Statusbar.txtPageNumInvalid": "Invalid slide number", "PE.Views.Statusbar.txtPageNumInvalid": "Invalid slide number",
"PE.Views.TableSettings.deleteColumnText": "Delete Column", "PE.Views.TableSettings.deleteColumnText": "Delete Column",
"PE.Views.TableSettings.deleteRowText": "Delete Row", "PE.Views.TableSettings.deleteRowText": "Delete Row",
@ -1258,6 +1270,17 @@
"PE.Views.Toolbar.textTitleError": "Error", "PE.Views.Toolbar.textTitleError": "Error",
"PE.Views.Toolbar.textUnderline": "Underline", "PE.Views.Toolbar.textUnderline": "Underline",
"PE.Views.Toolbar.textZoom": "Zoom", "PE.Views.Toolbar.textZoom": "Zoom",
"PE.Views.Toolbar.capInsertText": "Text Box",
"PE.Views.Toolbar.capInsertImage": "Picture",
"PE.Views.Toolbar.capInsertShape": "Shape",
"PE.Views.Toolbar.capInsertTable": "Table",
"PE.Views.Toolbar.capInsertChart": "Chart",
"PE.Views.Toolbar.capInsertHyperlink": "Hyperlink",
"PE.Views.Toolbar.capInsertEquation": "Equation",
"PE.Views.Toolbar.capAddSlide": "Add Slide",
"PE.Views.Toolbar.capTabFile": "File",
"PE.Views.Toolbar.capTabHome": "Home",
"PE.Views.Toolbar.capTabInsert": "Insert",
"PE.Views.Toolbar.tipAddSlide": "Add Slide", "PE.Views.Toolbar.tipAddSlide": "Add Slide",
"PE.Views.Toolbar.tipAdvSettings": "Advanced Settings", "PE.Views.Toolbar.tipAdvSettings": "Advanced Settings",
"PE.Views.Toolbar.tipBack": "Back", "PE.Views.Toolbar.tipBack": "Back",
@ -1283,9 +1306,9 @@
"PE.Views.Toolbar.tipInsertText": "Insert Text", "PE.Views.Toolbar.tipInsertText": "Insert Text",
"PE.Views.Toolbar.tipLineSpace": "Line Spacing", "PE.Views.Toolbar.tipLineSpace": "Line Spacing",
"PE.Views.Toolbar.tipMarkers": "Bullets", "PE.Views.Toolbar.tipMarkers": "Bullets",
"PE.Views.Toolbar.tipNewDocument": "New Presentation", "del_PE.Views.Toolbar.tipNewDocument": "New Presentation",
"PE.Views.Toolbar.tipNumbers": "Numbering", "PE.Views.Toolbar.tipNumbers": "Numbering",
"PE.Views.Toolbar.tipOpenDocument": "Open Presentation", "del_PE.Views.Toolbar.tipOpenDocument": "Open Presentation",
"PE.Views.Toolbar.tipPaste": "Paste", "PE.Views.Toolbar.tipPaste": "Paste",
"PE.Views.Toolbar.tipPreview": "Start Slideshow", "PE.Views.Toolbar.tipPreview": "Start Slideshow",
"PE.Views.Toolbar.tipPrint": "Print", "PE.Views.Toolbar.tipPrint": "Print",

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

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

79
apps/presentationeditor/main/resources/less/toolbar.less
View file

@ -1,72 +1,6 @@
.toolbar { .toolbar {
padding: 10px 0; z-index: 101;
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;
}
&.large {
width: 31px;
height: 31px;
margin: 8px 0;
&.split {
width: 40px;
}
}
&.split {
width: 28px;
}
&.border {
border: 1px solid @gray;
.border-radius(1px);
width: 22px;
height: 22px;
}
}
&.masked { &.masked {
.btn-toolbar.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-hidebars) { .btn-toolbar.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-hidebars) {
@ -323,7 +257,10 @@
.toolbar-btn-icon(btn-linespace, 36, @toolbar-icon-size); .toolbar-btn-icon(btn-linespace, 36, @toolbar-icon-size);
.toolbar-btn-icon(btn-arrange-shape, 37, @toolbar-icon-size); .toolbar-btn-icon(btn-arrange-shape, 37, @toolbar-icon-size);
.toolbar-btn-icon(btn-align-shape, 38, @toolbar-icon-size); .toolbar-btn-icon(btn-align-shape, 38, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertshape, 39, @toolbar-icon-size);
//.toolbar-btn-icon(btn-insertshape, 39, @toolbar-icon-size);
.button-normal-icon(btn-insertshape, 39, @toolbar-icon-size);
.toolbar-btn-icon(btn-inserttext, 40, @toolbar-icon-size); .toolbar-btn-icon(btn-inserttext, 40, @toolbar-icon-size);
.toolbar-btn-icon(btn-inserthyperlink, 41, @toolbar-icon-size); .toolbar-btn-icon(btn-inserthyperlink, 41, @toolbar-icon-size);
.toolbar-btn-icon(btn-inserttable, 42, @toolbar-icon-size); .toolbar-btn-icon(btn-inserttable, 42, @toolbar-icon-size);
@ -338,6 +275,8 @@
.toolbar-btn-icon(btn-save-coauth, 69, @toolbar-icon-size); .toolbar-btn-icon(btn-save-coauth, 69, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertequation, 74, @toolbar-icon-size); .toolbar-btn-icon(btn-insertequation, 74, @toolbar-icon-size);
.button-otherstates-icon2(btn-toolbar, @toolbar-icon-size);
// add slide // add slide
.btn-toolbar .btn-addslide {background-position: 0 -120px;} .btn-toolbar .btn-addslide {background-position: 0 -120px;}
.btn-toolbar.active > .btn-addslide, .btn-toolbar.active > .btn-addslide,
@ -383,7 +322,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
padding: 3px 10px; padding: 3px 10px;
color: #ffffff; color: #fff;
font: 11px arial; font: 11px arial;
white-space: nowrap; white-space: nowrap;
letter-spacing: 1px; letter-spacing: 1px;