[PE] Add settings for numbered list

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

@@ -276,8 +276,9 @@ define([
             toolbar.btnDecLeftOffset.on('click',                        _.bind(this.onDecOffset, this));
             toolbar.btnIncLeftOffset.on('click',                        _.bind(this.onIncOffset, this));
             toolbar.btnMarkers.on('click',                              _.bind(this.onMarkers, this));
-            toolbar.mnuListSettings.on('click',                         _.bind(this.onMarkerSettingsClick, this));
             toolbar.btnNumbers.on('click',                              _.bind(this.onNumbers, this));
+            toolbar.mnuMarkerSettings.on('click',                         _.bind(this.onMarkerSettingsClick, this, 0));
+            toolbar.mnuNumberSettings.on('click',                         _.bind(this.onMarkerSettingsClick, this, 1));
             toolbar.cmbFontName.on('selected',                          _.bind(this.onFontNameSelect, this));
             toolbar.cmbFontName.on('show:after',                        _.bind(this.onComboOpen, this, true));
             toolbar.cmbFontName.on('hide:after',                        _.bind(this.onHideMenus, this));
@@ -472,7 +473,7 @@ define([
                     case 0:
                         this.toolbar.btnMarkers.toggle(true, true);
                         this.toolbar.mnuMarkersPicker.selectByIndex(this._state.bullets.subtype, true);
-                        this.toolbar.mnuListSettings.setDisabled(this._state.bullets.subtype<0);
+                        this.toolbar.mnuMarkerSettings.setDisabled(this._state.bullets.subtype<0);
                         break;
                     case 1:
                         var idx = 0;
@@ -501,6 +502,7 @@ define([
                         }
                         this.toolbar.btnNumbers.toggle(true, true);
                         this.toolbar.mnuNumbersPicker.selectByIndex(idx, true);
+                        this.toolbar.mnuNumberSettings.setDisabled(idx==0);
                         break;
                 }
             }
@@ -1095,7 +1097,7 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onMarkerSettingsClick: function() {
+        onMarkerSettingsClick: function(type) {
             var me      = this,
                 props;
 
@@ -1111,6 +1113,7 @@ define([
             if (props) {
                 (new PE.Views.ListSettingsDialog({
                     props: props,
+                    type: type,
                     handler: function(result, value) {
                         if (result == 'ok') {
                             if (me.api) {
@@ -1664,8 +1667,9 @@ define([
             this.toolbar.btnNumbers.toggle(false, true);
 
             this.toolbar.mnuMarkersPicker.selectByIndex(0, true);
-            this.toolbar.mnuListSettings.setDisabled(true);
             this.toolbar.mnuNumbersPicker.selectByIndex(0, true);
+            this.toolbar.mnuMarkerSettings.setDisabled(true);
+            this.toolbar.mnuNumberSettings.setDisabled(true);
         },
 
         _getApiTextSize: function () {

apps/presentationeditor/main/app/view/ListSettingsDialog.js

@@ -48,6 +48,7 @@ define([
 
     PE.Views.ListSettingsDialog = Common.UI.Window.extend(_.extend({
         options: {
+            type: 0, // 0 - markers, 1 - numbers
             width: 230,
             height: 156,
             style: 'min-width: 230px;',
@@ -57,18 +58,26 @@ define([
         },
 
         initialize : function(options) {
+            this.type = options.type || 0;
+
             _.extend(this.options, {
-                title: this.txtTitle
+                title: this.txtTitle,
+                height: this.type==1 ? 190 : 156
             }, options || {});
 
             this.template = [
                 '<div class="box">',
-                '<div class="input-row">',
+                    '<div class="input-row">',
-                '<label class="text" style="width: 70px;">' + this.txtSize + '</label><div id="id-dlg-list-size"></div><label class="text" style="margin-left: 10px;">' + this.txtOfText + '</label>',
+                    '<label class="text" style="width: 70px;">' + this.txtSize + '</label><div id="id-dlg-list-size"></div><label class="text" style="margin-left: 10px;">' + this.txtOfText + '</label>',
-                '</div>',
+                    '</div>',
-                '<div style="margin-top: 10px;">',
+                    '<div style="margin-top: 10px;">',
-                '<label class="text" style="width: 70px;">' + this.txtColor + '</label><div id="id-dlg-list-color" style="display: inline-block;"></div>',
+                    '<label class="text" style="width: 70px;">' + this.txtColor + '</label><div id="id-dlg-list-color" style="display: inline-block;"></div>',
-                '</div>',
+                    '</div>',
+                    '<% if (type == 1) { %>',
+                    '<div class="input-row" style="margin-top: 10px;">',
+                    '<label class="text" style="width: 70px;">' + this.txtStart + '</label><div id="id-dlg-list-start"></div>',
+                    '</div>',
+                    '<% } %>',
                 '</div>'
             ].join('');
 
@@ -136,6 +145,21 @@ define([
                 }
             };
 
+            this.spnStart = new Common.UI.MetricSpinner({
+                el          : $window.find('#id-dlg-list-start'),
+                step        : 1,
+                width       : 45,
+                value       : 1,
+                defaultUnit : '',
+                maxValue    : 32767,
+                minValue    : 1,
+                allowDecimal: false
+            }).on('change', function(field, newValue, oldValue, eOpts){
+                if (me._changedProps) {
+                    me._changedProps.put_NumStartAt(field.getNumberValue());
+                }
+            });
+
             this.afterRender();
         },
 
@@ -178,6 +202,7 @@ define([
         _setDefaults: function (props) {
             if (props) {
                 this.spnSize.setValue(props.asc_getBulletSize() || '', true);
+                this.spnStart.setValue(props.get_NumStartAt() || '', true);
                 var color = props.asc_getBulletColor();
                 if (color) {
                     if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
@@ -208,6 +233,7 @@ define([
         txtSize: 'Size',
         txtColor: 'Color',
         txtOfText: '% of text',
-        textNewColor: 'Add New Custom Color'
+        textNewColor: 'Add New Custom Color',
+        txtStart: 'Start at'
     }, PE.Views.ListSettingsDialog || {}))
 });

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

@@ -1063,7 +1063,7 @@ define([
                         style: 'min-width: 139px',
                         items: [
                             {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 16px;"></div>')},
-                            this.mnuListSettings = new Common.UI.MenuItem({
+                            this.mnuMarkerSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
                                 value: 'settings'
@@ -1075,7 +1075,12 @@ define([
                 this.btnNumbers.setMenu(
                     new Common.UI.Menu({
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 5px;"></div>')}
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 16px;"></div>')},
+                            this.mnuNumberSettings = new Common.UI.MenuItem({
+                                caption: this.textListSettings,
+                                disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
+                                value: 'settings'
+                            })
                         ]
                     })
                 );

apps/presentationeditor/main/locale/en.json

@@ -1290,6 +1290,7 @@
   "PE.Views.ListSettingsDialog.txtColor": "Color",
   "PE.Views.ListSettingsDialog.txtOfText": "% of text",
   "PE.Views.ListSettingsDialog.textNewColor": "Add New Custom Color",
+  "PE.Views.ListSettingsDialog.txtStart": "Start at",
   "PE.Views.ParagraphSettings.strLineHeight": "Line Spacing",
   "PE.Views.ParagraphSettings.strParagraphSpacing": "Paragraph Spacing",
   "PE.Views.ParagraphSettings.strSpacingAfter": "After",