From 2352646ec765d92160b203d916bec1c9a4771a97 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 29 Mar 2017 19:24:20 +0300 Subject: [PATCH] [DE] added buttons on toolbar --- apps/common/main/lib/view/ReviewChanges.js | 13 ++-- .../main/app/controller/Toolbar.js | 31 +++++++++ .../main/app/template/Toolbar.template | 34 +++++++++- apps/documenteditor/main/app/view/Toolbar.js | 67 +++++++++++++++---- apps/documenteditor/main/locale/en.json | 5 ++ .../main/resources/less/toolbar.less | 4 ++ 6 files changed, 133 insertions(+), 21 deletions(-) diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js index d359a5a23..c2ae3fe1d 100644 --- a/apps/common/main/lib/view/ReviewChanges.js +++ b/apps/common/main/lib/view/ReviewChanges.js @@ -413,17 +413,20 @@ define([ var template = '
' + '
' + - '' + + '' + + '' + '
' + '
' + '
' + - '' + - '' + + '' + '
' + '
' + '
' + - '' + - '' + + '' + + '' + + '' + + '' + + '' + '
' + '
'; diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index df216750a..b0461d6cb 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -185,6 +185,37 @@ define([ var $panel = DE.getController('Common.Controllers.ReviewChanges').createToolbarPanel(); if ( $panel ) { + var button = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-ic-docspell', + caption: 'Spell checking', + enableToggle: true + }).render($panel.find('#slot-btn-spelling')); + button.on('click', function (e) { + console.log('spell checking button'); + }); + + button = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-ic-doclang', + caption: 'Language', + menu: new Common.UI.Menu({ + items: [ + { + caption: 'Content\'s language', + value: 'current' + }, { + caption: 'Document\'s language', + value: 'all' + } + ] + }) + + }).render($panel.find('#slot-set-lang')); + button.on('click', function (e) { + console.log('lang button'); + }); + me.toolbar.addTab(tab, $panel, 3); } } diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 473da2112..aaa6dfb96 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -127,7 +127,6 @@ -
@@ -152,7 +151,6 @@
-
@@ -166,6 +164,7 @@
+
@@ -186,6 +185,37 @@ +
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 1fb02a85f..19b855850 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1100,6 +1100,40 @@ define([ }); this.toolbarControls.push(this.btnAdvSettings); + me.btnImgAlign = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-hidenchars', + caption: me.capImgAlign, + menu: true + }); + + me.btnImgGroup = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-hidenchars', + caption: me.capImgGroup, + menu: true + }); + me.btnImgForward = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-hidenchars', + caption: me.capImgForward, + menu: true + }); + me.btnImgBackward = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-hidenchars', + caption: me.capImgBackward, + menu: true + }); + me.btnImgWrapping = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'btn-hidenchars', + caption: me.capImgWrapping, + menu: true + }); + me.toolbarControls.push( me.btnImgAlign, + me.btnImgGroup, me.btnImgForward, me.btnImgBackward, me.btnImgWrapping); + // // Menus // @@ -1433,6 +1467,12 @@ define([ _injectComponent('#slot-btn-halign', this.btnHorizontalAlign); _injectComponent('#slot-btn-mailrecepients', this.btnMailRecepients); _injectComponent('#slot-btn-notes', this.btnNotes); + _injectComponent('#slot-img-align', this.btnImgAlign); + _injectComponent('#slot-img-group', this.btnImgGroup); + _injectComponent('#slot-img-movefrwd', this.btnImgForward); + _injectComponent('#slot-img-movebkwd', this.btnImgBackward); + _injectComponent('#slot-img-wrapping', this.btnImgWrapping); + return $host; }, @@ -2370,24 +2410,23 @@ define([ config.tabs[after + 1] = tab; var _after_action = _get_tab_action( after ); - if ( $tabs ) { - // $tabs.find('a[data-tab=' + after + ']').parent() - // .after( _.template(_tpl, tab) ); - } else { - var $toolbar = config.$dom; + var _elements = $tabs || config.$dom.find('.tabs'); + var $target = _elements.find('a[data-tab=' + _after_action + ']'); + if ( $target.length ) { + $target.parent().after( _.template(_tplTab, tab) ); - var $el = $toolbar.find('.tabs a[data-tab=' + _after_action + ']'); - if ( $el.length ) { - $el.parent().after( _.template(_tplTab, tab)); + if ( panel ) { + _elements = $panels || config.$dom.find('.box-panels > .panel'); + $target = _elements.filter('[data-tab=' + _after_action + ']'); - if ( panel ) { - $el = $toolbar.find('.box-panels > .panel[data-tab=' + _after_action + ']'); - - if ( $el.length ) { - $el.after(panel); - } + if ( $target.length ) { + $target.after(panel); } } + + // synchronize matched elements + $tabs && ($tabs = $boxTabs.find('> li')); + $panels && ($panels = this.$el.find('.box-panels > .panel')); } }, diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index e333d82b4..63197cca0 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1602,6 +1602,11 @@ "DE.Views.Toolbar.capBtnPageOrient": "Orientation", "DE.Views.Toolbar.capBtnMargins": "Margins", "DE.Views.Toolbar.capBtnPageSize": "Size", + "DE.Views.Toolbar.capImgAlign": "Align", + "DE.Views.Toolbar.capImgGroup": "Group", + "DE.Views.Toolbar.capImgForward": "Move forward", + "DE.Views.Toolbar.capImgBackward": "Move backward", + "DE.Views.Toolbar.capImgWrapping": "Wrapping", "DE.Views.Toolbar.txtScheme1": "Office", "DE.Views.Toolbar.txtScheme10": "Median", "DE.Views.Toolbar.txtScheme11": "Metro", diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 3c5e967c7..de48870b6 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -203,6 +203,10 @@ width: 22px; height: 22px; } + + &.x-huge { + height: 45px; + } } &.masked {