Merge branch 'feature/list-levels' into develop

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

@@ -295,6 +295,12 @@ define([
             toolbar.mnuMarkerSettings.on('click',                       _.bind(this.onMarkerSettingsClick, this, 0));
             toolbar.mnuNumberSettings.on('click',                       _.bind(this.onMarkerSettingsClick, this, 1));
             toolbar.mnuMultilevelSettings.on('click',                   _.bind(this.onMarkerSettingsClick, this, 2));
+            toolbar.mnuMarkerChangeLevel && toolbar.mnuMarkerChangeLevel.menu &&
+            toolbar.mnuMarkerChangeLevel.menu.on('show:after',          _.bind(this.onChangeLevelShowAfter, this, 0));
+            toolbar.mnuMarkerChangeLevel.menu.on('item:click',          _.bind(this.onChangeLevelClick, this, 0));
+            toolbar.mnuNumberChangeLevel && toolbar.mnuNumberChangeLevel.menu &&
+            toolbar.mnuNumberChangeLevel.menu.on('show:after',          _.bind(this.onChangeLevelShowAfter, this, 1));
+            toolbar.mnuNumberChangeLevel.menu.on('item:click',          _.bind(this.onChangeLevelClick, this, 1));
             toolbar.btnHighlightColor.on('click',                       _.bind(this.onBtnHighlightColor, this));
             toolbar.btnFontColor.on('click',                            _.bind(this.onBtnFontColor, this));
             toolbar.btnParagraphColor.on('click',                       _.bind(this.onBtnParagraphColor, this));
@@ -518,6 +524,7 @@ define([
                             this.toolbar.mnuMarkersPicker.deselectAll(true);
                         this.toolbar.mnuMultilevelPicker.deselectAll(true);
                         this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(this._state.bullets.subtype<0);
+                        this.toolbar.mnuMarkerChangeLevel && this.toolbar.mnuMarkerChangeLevel.setDisabled(this._state.bullets.subtype<0);
                         this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(this._state.bullets.subtype<0);
                         break;
                     case 1:
@@ -552,6 +559,7 @@ define([
                             this.toolbar.mnuNumbersPicker.deselectAll(true);
                         this.toolbar.mnuMultilevelPicker.deselectAll(true);
                         this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(idx==0);
+                        this.toolbar.mnuNumberChangeLevel && this.toolbar.mnuNumberChangeLevel.setDisabled(idx==0);
                         this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(idx==0);
                         break;
                     case 2:
@@ -1398,6 +1406,24 @@ define([
             }
         },
 
+        onChangeLevelShowAfter: function(type, menu) {
+            var me      = this;
+            var listId = me.api.asc_GetCurrentNumberingId(),
+                level = me.api.asc_GetCurrentNumberingLvl(),
+                props = (listId !== null) ? me.api.asc_GetNumberingPr(listId) : null;
+            if (props) {
+                this.api.SetDrawImagePreviewBulletChangeListLevel(menu.options.previewIds, props);
+            }
+        },
+
+        onChangeLevelClick: function(type, menu, item) {
+            if (this.api) {
+                this.api.asc_SetNumberingLvl(item.options.level);
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         onLineSpaceToggle: function(menu, item, state, e) {
             if (!!state) {
                 this._state.linespace = undefined;
@@ -2359,6 +2385,8 @@ define([
             this.toolbar.mnuMarkerSettings && this.toolbar.mnuMarkerSettings.setDisabled(true);
             this.toolbar.mnuNumberSettings && this.toolbar.mnuNumberSettings.setDisabled(true);
             this.toolbar.mnuMultilevelSettings && this.toolbar.mnuMultilevelSettings.setDisabled(true);
+            this.toolbar.mnuMarkerChangeLevel && this.toolbar.mnuMarkerChangeLevel.setDisabled(true);
+            this.toolbar.mnuNumberChangeLevel && this.toolbar.mnuNumberChangeLevel.setDisabled(true);
         },
 
         _getApiTextSize: function () {

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

@@ -1694,13 +1694,28 @@ define([
                 // set menus
 
                 var me = this;
-
+                var levelTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div id="<%= options.previewId %>" class="menu-list-preview" style="width: 160px; height: 30px;"></div></a>');
+                var items = [], ids = [];
+                for (var i=0; i<9; i++) {
+                    ids.push('id-toolbar-menu-markers-level-' + i);
+                    items.push({template: levelTemplate, previewId: ids[i], level: i });
+                }
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
                         cls: 'shifted-left',
                         style: 'min-width: 139px',
                         items: [
                             {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>')},
+                            this.mnuMarkerChangeLevel = new Common.UI.MenuItem({
+                                caption: this.textChangeLevel,
+                                style: 'padding-right:20px;',
+                                menu: new Common.UI.Menu({
+                                    cls: 'list-settings-level',
+                                    menuAlign: 'tl-tr',
+                                    items: items,
+                                    previewIds: ids
+                                })
+                            }),
                             this.mnuMarkerSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@@ -1710,11 +1725,26 @@ define([
                     })
                 );
 
+                items = [], ids = [];
+                for (var i=0; i<9; i++) {
+                    ids.push('id-toolbar-menu-numbering-level-' + i);
+                    items.push({template: levelTemplate, previewId: ids[i], level: i });
+                }
                 this.btnNumbers.setMenu(
                     new Common.UI.Menu({
                         cls: 'shifted-left',
                         items: [
                             {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>')},
+                            this.mnuNumberChangeLevel = new Common.UI.MenuItem({
+                                caption: this.textChangeLevel,
+                                style: 'padding-right:20px;',
+                                menu: new Common.UI.Menu({
+                                    cls: 'list-settings-level',
+                                    menuAlign: 'tl-tr',
+                                    items: items,
+                                    previewIds: ids
+                                })
+                            }),
                             this.mnuNumberSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@@ -2417,7 +2447,8 @@ define([
             mniLowerCase: 'lowercase',
             mniUpperCase: 'UPPERCASE',
             mniCapitalizeWords: 'Capitalize Each Word',
-            mniToggleCase: 'tOGGLE cASE'
+            mniToggleCase: 'tOGGLE cASE',
+            textChangeLevel: 'Change List Level'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -2675,6 +2675,7 @@
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
   "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.textChangeLevel": "Change List Level",
   "DE.Views.WatermarkSettingsDialog.textAuto": "Auto",
   "DE.Views.WatermarkSettingsDialog.textBold": "Bold",
   "DE.Views.WatermarkSettingsDialog.textColor": "Text color",

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

@@ -213,8 +213,24 @@
 #special-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
+
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     border: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border: @scaled-one-px-value solid @border-regular-control;
 }
+
+.dropdown-menu.list-settings-level {
+    .menu-list-preview {
+        .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
+        .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+    }
+
+    a:hover {
+        background-color: transparent;
+        .menu-list-preview {
+            .box-shadow(0 0 0 2px @border-control-focus-ie);
+            .box-shadow(0 0 0 @scaled-two-px-value @border-control-focus);
+        }
+    }
+}