[DE] Change page orientation using pop-up menu.

apps/documenteditor/main/app/controller/Toolbar.js

@@ -240,7 +240,7 @@ define([
             toolbar.btnDropCap.menu.on('item:click',                    _.bind(this.onDropCapSelect, this));
             toolbar.mnuDropCapAdvanced.on('click',                      _.bind(this.onDropCapAdvancedClick, this));
             toolbar.btnColumns.menu.on('item:click',                    _.bind(this.onColumnsSelect, this));
-            toolbar.btnPageOrient.on('toggle',                          _.bind(this.onPageOrientToggle, this));
+            toolbar.btnPageOrient.menu.on('item:click',                 _.bind(this.onPageOrientSelect, this));
             toolbar.btnPageMargins.menu.on('item:click',                _.bind(this.onPageMarginsSelect, this));
             toolbar.btnClearStyle.on('click',                           _.bind(this.onClearStyleClick, this));
             toolbar.btnCopyStyle.on('toggle',                           _.bind(this.onCopyStyleToggle, this));
@@ -723,7 +723,7 @@ define([
 
         onApiPageOrient: function(isportrait) {
             if (this._state.pgorient !== isportrait) {
-                this.toolbar.btnPageOrient.toggle(!isportrait, true);
+                this.toolbar.btnPageOrient.menu.items[isportrait ? 0 : 1].setChecked(true);
                 this._state.pgorient = isportrait;
             }
         },
@@ -1387,10 +1387,11 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertShape);
         },
 
-        onPageOrientToggle: function(btn, state, e) {
+        onPageOrientSelect: function(menu, item) {
             this._state.pgorient = undefined;
-            if (this.api)
-                this.api.change_PageOrient(!state);
+            if (this.api && item.checked) {
+                this.api.change_PageOrient(item.value);
+            }
 
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             Common.component.Analytics.trackEvent('ToolBar', 'Page Orientation');

apps/documenteditor/main/app/view/Toolbar.js

@@ -679,7 +679,13 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'btn-pageorient',
                 hint        : this.tipPageOrient,
-                enableToggle: true
+                menu        : new Common.UI.Menu({
+                    cls: 'ppm-toolbar',
+                    items: [
+                        { caption: this.textPortrait,       iconCls: 'mnu-orient-portrait',   checkable: true, toggleGroup: 'menuOrient', value: true },
+                        { caption: this.textLandscape,     iconCls: 'mnu-orient-landscape',   checkable: true, toggleGroup: 'menuOrient', value: false }
+                    ]
+                })
             });
             this.toolbarControls.push(this.btnPageOrient);
 
@@ -1853,7 +1859,9 @@ define([
         textLeft: 'Left: ',
         textBottom: 'Bottom: ',
         textRight: 'Right: ',
-        textPageSizeCustom: 'Custom Page Size'
-
+        textPageSizeCustom: 'Custom Page Size',
+        textPortrait: 'Portrait',
+        textLandscape: 'Landscape'
+        
     }, DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1440,6 +1440,7 @@
   "DE.Views.Toolbar.textInsTextArt": "Insert Text Art",
   "DE.Views.Toolbar.textInText": "In Text",
   "DE.Views.Toolbar.textItalic": "Italic",
+  "DE.Views.Toolbar.textLandscape": "Landscape",
   "DE.Views.Toolbar.textLeft": "Left: ",
   "DE.Views.Toolbar.textLine": "Line Chart",
   "DE.Views.Toolbar.textMarginsLast": "Last Custom",
@@ -1456,6 +1457,7 @@
   "DE.Views.Toolbar.textPageSizeCustom": "Custom Page Size",
   "DE.Views.Toolbar.textPie": "Pie Chart",
   "DE.Views.Toolbar.textPoint": "Point Chart",
+  "DE.Views.Toolbar.textPortrait": "Portrait",
   "DE.Views.Toolbar.textRight": "Right: ",
   "DE.Views.Toolbar.textStandartColors": "Standard Colors",
   "DE.Views.Toolbar.textStock": "Stock Chart",

apps/documenteditor/main/resources/less/toolbar.less

@@ -387,6 +387,9 @@
 .menu-icon-normal(mnu-direct-horiz,        33, @menu-icon-size);
 .menu-icon-normal(mnu-direct-rup,          34, @menu-icon-size);
 .menu-icon-normal(mnu-direct-rdown,        35, @menu-icon-size);
+
+.menu-icon-normal(mnu-orient-portrait,     36, @menu-icon-size);
+.menu-icon-normal(mnu-orient-landscape,    37, @menu-icon-size);
 .menu-otherstates-icon(ppm-toolbar, @menu-icon-size);