[PE] Change Paragraph - Advanced Settings

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

@@ -63,6 +63,19 @@ var c_tableBorder = {
     BORDER_OUTER_TABLE: 13 // table border and outer cell borders
 };
 
+var c_paragraphTextAlignment = {
+    RIGHT: 0,
+    LEFT: 1,
+    CENTERED: 2,
+    JUSTIFIED: 3
+};
+
+var c_paragraphSpecial = {
+    NONE_SPECIAL: 0,
+    FIRST_LINE: 1,
+    HANGING: 2
+};
+
 define([
     'core',
     'presentationeditor/main/app/view/DocumentHolder'

apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template

@@ -1,26 +1,57 @@
 <div id="id-adv-paragraph-indents" class="settings-panel active">
     <div class="inner-content">
-        <table cols="3" style="width: 100%;">
+        <div>
-            <tr>
+            <div class="padding-large" style="display: inline-block;">
-                <td class="padding-large">
+                <label class="input-label"><%= scope.strIndentsTextAlignment %></label>
-                    <label class="input-label"><%= scope.strIndentsFirstLine %></label>
+                <div id="paragraphadv-spin-text-alignment"></div>
-                    <div id="paragraphadv-spin-first-line" style="width: 85px;"></div>
+            </div>
-                </td>
+        </div>
-                <td class="padding-large">
+        <div>
-                    <label class="input-label"><%= scope.strIndentsLeftText %></label>
+            <div class="padding-large" style="display: inline-block;">
-                    <div id="paragraphadv-spin-indent-left"></div>
+                <label class="input-label"><%= scope.strIndentsLeftText %></label>
-                </td>
+                <div id="paragraphadv-spin-indent-left"></div>
-                <td class="padding-large">
+            </div>
-                    <label class="input-label"><%= scope.strIndentsRightText %></label>
+            <div class="padding-large" style="display: inline-block;">
-                    <div id="paragraphadv-spin-indent-right"></div>
+                <label class="input-label"><%= scope.strIndentsRightText %></label>
-                </td>
+                <div id="paragraphadv-spin-indent-right"></div>
-            </tr>
+            </div>
-        </table>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentsSpecial %></label>
+                <div id="paragraphadv-spin-special"></div>
+            </div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentsSpecialBy %></label>
+                <div id="paragraphadv-spin-special-by"></div>
+            </div>
+        </div>
+        <div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
+                <div id="paragraphadv-spin-spacing-before"></div>
+            </div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
+                <div id="paragraphadv-spin-spacing-after"></div>
+            </div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
+                <div id="paragraphadv-spin-line-rule"></div>
+            </div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strIndentLineSpacingAt %></label>
+                <div id="paragraphadv-spin-line-height"></div>
+            </div>
+        </div>
+        <div class="padding-large">
+            <div style="border: 1px solid #cbcbcb; width: 350px;">
+                <div id="paragraphadv-indent-preview" style="height: 94px; position: relative;"></div>
+            </div>
+        </div>
     </div>
 </div>
 <div id="id-adv-paragraph-font" class="settings-panel">
     <div class="inner-content">
-        <table cols="2" style="width: 100%;">
+        <table cols="2" style="width: 300px;">
             <tr>
                 <td colspan=2 class="padding-small">
                     <label class="header"><%= scope.textEffects %></label>
@@ -63,7 +94,7 @@
             <tr>
                 <td colspan=2>
                     <div style="border: 1px solid #cbcbcb;">
-                        <div id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative;"></div>
+                        <div id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative;margin: 0 auto;"></div>
                     </div>
                 </td>
             </tr>
@@ -71,28 +102,28 @@
     </div>
 </div>
 <div id="id-adv-paragraph-tabs" class="settings-panel">
-    <div class="inner-content">
+    <div class="inner-content" style="width: 290px;">
-        <div class="padding-small" style="display: inline-block;">
+        <div class="padding-large">
-            <label class="input-label"><%= scope.textTabPosition %></label>
-            <div id="paraadv-spin-tab"></div>
-        </div>
-        <div class="padding-small" style="display: inline-block; float: right;">
             <label class="input-label"><%= scope.textDefault %></label>
             <div id="paraadv-spin-default-tab"></div>
         </div>
-        <div class="padding-large">
+        <div>
-            <div id="paraadv-list-tabs" style="width:180px; height: 94px;"></div>
+            <div class="padding-small" style="display: inline-block; margin-right: 10px;">
+                <label class="input-label"><%= scope.textTabPosition %></label>
+                <div id="paraadv-spin-tab"></div>
+            </div>
+            <div class="padding-small" style="display: inline-block;">
+                <label class="input-label"><%= scope.textAlign %></label>
+                <div id="paraadv-cmb-align"></div>
+             </div>
         </div>
-        <div class="padding-large" >
+        <div class="padding-large">
-            <label class="input-label padding-small" style="display: block;"><%= scope.textAlign %></label>
+            <div id="paraadv-list-tabs" style="width:270px; height: 94px;"></div>
-            <div id="paragraphadv-radio-left" class="padding-small" style="display: block;"></div>
-            <div id="paragraphadv-radio-center" class="padding-small" style="display: block;"></div>
-            <div id="paragraphadv-radio-right" style="display: block;"></div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:90px;margin-right: 4px;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:85px;margin-right: 4px;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:90px;margin-right: 4px;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:85px;margin-right: 4px;"><%= scope.textRemove %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:90px;margin-right: 4px;"><%= scope.textRemoveAll %></button>
+            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:85px;"><%=  scope.textRemoveAll %></button>
         </div>
     </div>
 </div>

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

@@ -49,13 +49,14 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
 
     PE.Views.ParagraphSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 320,
+            contentWidth: 370,
             height: 394,
             toggleGroup: 'paragraph-adv-settings-group',
             storageName: 'pe-para-settings-adv-category'
         },
 
         initialize : function(options) {
+            var me = this;
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
@@ -74,9 +75,43 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             this._noApply = true;
             this._tabListChanged = false;
             this.spinners = [];
+            this.FirstLine = undefined;
+            this.Spacing = null;
 
             this.api = this.options.api;
             this._originalProps = new Asc.asc_CParagraphProperty(this.options.paragraphProps);
+
+            this._arrLineRule = [
+                {displayValue: this.textAuto,   defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5,    step: 0.01, defaultUnit: ''},
+                {displayValue: this.textExact,  defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03,   step: 0.01, defaultUnit: 'cm'}
+            ];
+
+            var curLineRule = this._originalProps.asc_getSpacing().get_LineRule(),
+                curItem = _.findWhere(this._arrLineRule, {value: curLineRule});
+            this.CurLineRuleIdx = this._arrLineRule.indexOf(curItem);
+
+            this._arrTextAlignment = [
+                {displayValue: this.textLeft, value: c_paragraphTextAlignment.LEFT},
+                {displayValue: this.textCentered, value: c_paragraphTextAlignment.CENTERED},
+                {displayValue: this.textRight, value: c_paragraphTextAlignment.RIGHT},
+                {displayValue: this.textJustified, value: c_paragraphTextAlignment.JUSTIFIED}
+            ];
+
+            this._arrSpecial = [
+                {displayValue: this.textNoneSpecial, value: c_paragraphSpecial.NONE_SPECIAL, defaultValue: 0},
+                {displayValue: this.textFirstLine, value: c_paragraphSpecial.FIRST_LINE, defaultValue: 12.7},
+                {displayValue: this.textHanging, value: c_paragraphSpecial.HANGING, defaultValue: 12.7}
+            ];
+
+            this._arrTabAlign = [
+                { value: 1, displayValue: this.textTabLeft },
+                { value: 3, displayValue: this.textTabCenter },
+                { value: 2, displayValue: this.textTabRight }
+            ];
+            this._arrKeyTabAlign = [];
+            this._arrTabAlign.forEach(function(item) {
+                me._arrKeyTabAlign[item.value] = item.displayValue;
+            });
         },
 
         render: function() {
@@ -86,24 +121,15 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
 
             // Indents & Placement
 
-            this.numFirstLine = new Common.UI.MetricSpinner({
+            this.cmbTextAlignment = new Common.UI.ComboBox({
-                el: $('#paragraphadv-spin-first-line'),
+                el: $('#paragraphadv-spin-text-alignment'),
-                step: .1,
+                cls: 'input-group-nr',
-                width: 85,
+                editable: false,
-                defaultUnit : "cm",
+                data: this._arrTextAlignment,
-                defaultValue : 0,
+                style: 'width: 173px;',
-                value: '0 cm',
+                menuStyle   : 'min-width: 173px;'
-                maxValue: 55.87,
-                minValue: -55.87
             });
-            this.numFirstLine.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+            this.cmbTextAlignment.setValue('');
-                if (this._changedProps) {
-                    if (this._changedProps.get_Ind()===null || this._changedProps.get_Ind()===undefined)
-                        this._changedProps.put_Ind(new Asc.asc_CParagraphInd());
-                    this._changedProps.get_Ind().put_FirstLine(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
-                }
-            }, this));
-            this.spinners.push(this.numFirstLine);
 
             this.numIndentsLeft = new Common.UI.MetricSpinner({
                 el: $('#paragraphadv-spin-indent-left'),
@@ -122,9 +148,6 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                         this._changedProps.put_Ind(new Asc.asc_CParagraphInd());
                     this._changedProps.get_Ind().put_Left(Common.Utils.Metric.fnRecalcToMM(numval));
                 }
-                this.numFirstLine.setMinValue(-numval);
-                if (this.numFirstLine.getNumberValue() < -numval)
-                    this.numFirstLine.setValue(-numval);
             }, this));
             this.spinners.push(this.numIndentsLeft);
 
@@ -147,6 +170,93 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             }, this));
             this.spinners.push(this.numIndentsRight);
 
+            this.cmbSpecial = new Common.UI.ComboBox({
+                el: $('#paragraphadv-spin-special'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: this._arrSpecial,
+                style: 'width: 85px;',
+                menuStyle   : 'min-width: 85px;'
+            });
+            this.cmbSpecial.setValue('');
+            this.cmbSpecial.on('selected', _.bind(this.onSpecialSelect, this));
+
+            this.numSpecialBy = new Common.UI.MetricSpinner({
+                el: $('#paragraphadv-spin-special-by'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: 0
+            });
+            this.spinners.push(this.numSpecialBy);
+            this.numSpecialBy.on('change', _.bind(this.onFirstLineChange, this));
+
+            this.numSpacingBefore = new Common.UI.MetricSpinner({
+                el: $('#paragraphadv-spin-spacing-before'),
+                step: .1,
+                width: 85,
+                value: '',
+                defaultUnit : "cm",
+                maxValue: 55.88,
+                minValue: 0,
+                allowAuto   : true,
+                autoText    : this.txtAutoText
+            });
+            this.numSpacingBefore.on('change', _.bind(function (field, newValue, oldValue, eOpts) {
+                if (this.Spacing === null) {
+                    var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                    this.Spacing = properties.asc_getSpacing();
+                }
+                this.Spacing.Before = Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());
+            }, this));
+            this.spinners.push(this.numSpacingBefore);
+
+            this.numSpacingAfter = new Common.UI.MetricSpinner({
+                el: $('#paragraphadv-spin-spacing-after'),
+                step: .1,
+                width: 85,
+                value: '',
+                defaultUnit : "cm",
+                maxValue: 55.88,
+                minValue: 0,
+                allowAuto   : true,
+                autoText    : this.txtAutoText
+            });
+            this.numSpacingAfter.on('change', _.bind(function (field, newValue, oldValue, eOpts) {
+                if (this.Spacing === null) {
+                    var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                    this.Spacing = properties.asc_getSpacing();
+                }
+                this.Spacing.After = Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());
+            }, this));
+            this.spinners.push(this.numSpacingAfter);
+
+            this.cmbLineRule = new Common.UI.ComboBox({
+                el: $('#paragraphadv-spin-line-rule'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: this._arrLineRule,
+                style: 'width: 85px;',
+                menuStyle   : 'min-width: 85px;'
+            });
+            this.cmbLineRule.setValue(this.CurLineRuleIdx);
+            this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
+
+            this.numLineHeight = new Common.UI.MetricSpinner({
+                el: $('#paragraphadv-spin-line-height'),
+                step: .01,
+                width: 85,
+                value: '',
+                defaultUnit : "",
+                maxValue: 132,
+                minValue: 0.5
+            });
+            this.spinners.push(this.numLineHeight);
+            this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
+
             // Font
 
             this.chStrike = new Common.UI.CheckBox({
@@ -211,7 +321,7 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             this.numTab = new Common.UI.MetricSpinner({
                 el: $('#paraadv-spin-tab'),
                 step: .1,
-                width: 180,
+                width: 128,
                 defaultUnit : "cm",
                 value: '1.25 cm',
                 maxValue: 55.87,
@@ -222,7 +332,7 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             this.numDefaultTab = new Common.UI.MetricSpinner({
                 el: $('#paraadv-spin-default-tab'),
                 step: .1,
-                width: 107,
+                width: 128,
                 defaultUnit : "cm",
                 value: '1.25 cm',
                 maxValue: 55.87,
@@ -238,7 +348,14 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             this.tabList = new Common.UI.ListView({
                 el: $('#paraadv-list-tabs'),
                 emptyText: this.noTabs,
-                store: new Common.UI.DataViewStore()
+                store: new Common.UI.DataViewStore(),
+                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
+                    '<div style="width: 138px;display: inline-block;"><%= value %></div>',
+                    '<div style="display: inline-block;"><%= displayTabAlign %></div>',
+                    '</div>'
+                ].join(''))
             });
             this.tabList.store.comparator = function(rec) {
                 return rec.get("tabPos");
@@ -253,24 +370,15 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             this.listenTo(this.tabList.store, 'remove', storechanged);
             this.listenTo(this.tabList.store, 'reset',  storechanged);
 
-            this.radioLeft = new Common.UI.RadioBox({
+            this.cmbAlign = new Common.UI.ComboBox({
-                el: $('#paragraphadv-radio-left'),
+                el          : $('#paraadv-cmb-align'),
-                labelText: this.textTabLeft,
+                style       : 'width: 128px;',
-                name: 'asc-radio-tab',
+                menuStyle   : 'min-width: 128px;',
-                checked: true
+                editable    : false,
-            });
+                cls         : 'input-group-nr',
-
+                data        : this._arrTabAlign
-            this.radioCenter = new Common.UI.RadioBox({
-                el: $('#paragraphadv-radio-center'),
-                labelText: this.textTabCenter,
-                name: 'asc-radio-tab'
-            });
-
-            this.radioRight = new Common.UI.RadioBox({
-                el: $('#paragraphadv-radio-right'),
-                labelText: this.textTabRight,
-                name: 'asc-radio-tab'
             });
+            this.cmbAlign.setValue(1);
 
             this.btnAddTab = new Common.UI.Button({
                 el: $('#paraadv-button-add-tab')
@@ -299,18 +407,45 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                     this._changedProps.get_Tabs().add_Tab(tab);
                 }, this);
             }
+
+            var horizontalAlign = this.cmbTextAlignment.getValue();
+            this._changedProps.asc_putJc((horizontalAlign !== undefined && horizontalAlign !== null) ? horizontalAlign : c_paragraphTextAlignment.LEFT);
+
+            if (this.Spacing !== null) {
+                this._changedProps.asc_putSpacing(this.Spacing);
+            }
+
             return { paragraphProps: this._changedProps };
         },
 
         _setDefaults: function(props) {
             if (props ){
                 this._originalProps = new Asc.asc_CParagraphProperty(props);
+                this.FirstLine = (props.get_Ind() !== null) ? props.get_Ind().get_FirstLine() : null;
 
                 this.numIndentsLeft.setValue((props.get_Ind() !== null && props.get_Ind().get_Left() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_Left()) : '', true);
-                this.numFirstLine.setMinValue(-this.numIndentsLeft.getNumberValue());
-                this.numFirstLine.setValue((props.get_Ind() !== null && props.get_Ind().get_FirstLine() !== null ) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_FirstLine()) : '', true);
                 this.numIndentsRight.setValue((props.get_Ind() !== null && props.get_Ind().get_Right() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.get_Ind().get_Right()) : '', true);
 
+                this.cmbTextAlignment.setValue((props.asc_getJc() !== undefined && props.asc_getJc() !== null) ? props.asc_getJc() : c_paragraphTextAlignment.CENTERED, true);
+
+                if(this.CurSpecial === undefined) {
+                    this.CurSpecial = (props.asc_getInd().get_FirstLine() === 0) ? c_paragraphSpecial.NONE_SPECIAL : ((props.asc_getInd().get_FirstLine() > 0) ? c_paragraphSpecial.FIRST_LINE : c_paragraphSpecial.HANGING);
+                }
+                this.cmbSpecial.setValue(this.CurSpecial);
+                this.numSpecialBy.setValue(this.FirstLine!== null ? Math.abs(Common.Utils.Metric.fnRecalcFromMM(this.FirstLine)) : '', true);
+
+                this.numSpacingBefore.setValue((props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getBefore() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getBefore()) : '', true);
+                this.numSpacingAfter.setValue((props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getAfter() !== null) ? Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getAfter()) : '', true);
+
+                var linerule = props.asc_getSpacing().asc_getLineRule();
+                this.cmbLineRule.setValue((linerule !== null) ? linerule : '', true);
+
+                if(props.asc_getSpacing() !== null && props.asc_getSpacing().asc_getLine() !== null) {
+                    this.numLineHeight.setValue((linerule==c_paragraphLinerule.LINERULE_AUTO) ? props.asc_getSpacing().asc_getLine() : Common.Utils.Metric.fnRecalcFromMM(props.asc_getSpacing().asc_getLine()), true);
+                } else {
+                    this.numLineHeight.setValue('', true);
+                }
+
                 // Font
                 this._noApply = true;
                 this.chStrike.setValue((props.get_Strikeout() !== null && props.get_Strikeout() !== undefined) ? props.get_Strikeout() : 'indeterminate', true);
@@ -339,7 +474,8 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                         rec.set({
                             tabPos: pos,
                             value: parseFloat(pos.toFixed(3)) + ' ' + Common.Utils.Metric.getCurrentMetricName(),
-                            tabAlign: tab.get_Value()
+                            tabAlign: tab.get_Value(),
+                            displayTabAlign: this._arrKeyTabAlign[tab.get_Value()]
                         });
                         arr.push(rec);
                     }
@@ -359,13 +495,19 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                 for (var i=0; i<this.spinners.length; i++) {
                     var spinner = this.spinners[i];
                     spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
-                    if (spinner.el.id == 'paragraphadv-spin-spacing')
+                    if (spinner.el.id == 'paragraphadv-spin-spacing' || spinner.el.id == 'paragraphadv-spin-spacing-before' || spinner.el.id == 'paragraphadv-spin-spacing-after')
                         spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
                     else
                         spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
                 }
             }
-
+            this._arrLineRule[1].defaultUnit  = Common.Utils.Metric.getCurrentMetricName();
+            this._arrLineRule[1].minValue = parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2));
+            this._arrLineRule[1].step = (Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt) ? 1 : 0.01;
+            if (this.CurLineRuleIdx !== null) {
+                this.numLineHeight.setDefaultUnit(this._arrLineRule[this.CurLineRuleIdx].defaultUnit);
+                this.numLineHeight.setStep(this._arrLineRule[this.CurLineRuleIdx].step);
+            }
         },
 
         afterRender: function() {
@@ -498,8 +640,9 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
         },
 
         addTab: function(btn, eOpts){
-            var val = this.numTab.getNumberValue();
+            var val = this.numTab.getNumberValue(),
-            var align = this.radioLeft.getValue() ? 1 : (this.radioCenter.getValue() ? 3 : 2);
+                align = this.cmbAlign.getValue(),
+                displayAlign = this._arrKeyTabAlign[align];
 
             var store = this.tabList.store;
             var rec = store.find(function(record){
@@ -507,13 +650,15 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
             });
             if (rec) {
                 rec.set('tabAlign', align);
+                rec.set('displayTabAlign', displayAlign);
                 this._tabListChanged = true;
             } else {
                 rec = new Common.UI.DataViewModel();
                 rec.set({
                     tabPos: val,
                     value: val + ' ' + Common.Utils.Metric.getCurrentMetricName(),
-                    tabAlign: align
+                    tabAlign: align,
+                    displayTabAlign: displayAlign
                 });
                 store.add(rec);
             }
@@ -554,15 +699,83 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
                 rawData = record;
             }
             this.numTab.setValue(rawData.tabPos);
-            (rawData.tabAlign==1) ? this.radioLeft.setValue(true) : ((rawData.tabAlign==3) ? this.radioCenter.setValue(true) : this.radioRight.setValue(true));
+            this.cmbAlign.setValue(rawData.tabAlign);
+        },
 
+        onSpecialSelect: function(combo, record) {
+            this.CurSpecial = record.value;
+            if (this.CurSpecial === c_paragraphSpecial.NONE_SPECIAL) {
+                this.numSpecialBy.setValue(0, true);
+            }
+            if (this._changedProps) {
+                if (this._changedProps.get_Ind()===null || this._changedProps.get_Ind()===undefined)
+                    this._changedProps.put_Ind(new Asc.asc_CParagraphInd());
+                var value = Common.Utils.Metric.fnRecalcToMM(this.numSpecialBy.getNumberValue());
+                if (value === 0) {
+                    this.numSpecialBy.setValue(Common.Utils.Metric.fnRecalcFromMM(this._arrSpecial[record.value].defaultValue), true);
+                    value = this._arrSpecial[record.value].defaultValue;
+                }
+                if (this.CurSpecial === c_paragraphSpecial.HANGING) {
+                    value = -value;
+                }
+                this._changedProps.get_Ind().put_FirstLine(value);
+            }
+        },
+
+        onFirstLineChange: function(field, newValue, oldValue, eOpts){
+            if (this._changedProps) {
+                if (this._changedProps.get_Ind()===null || this._changedProps.get_Ind()===undefined)
+                    this._changedProps.put_Ind(new Asc.asc_CParagraphInd());
+                var value = Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());
+                if (this.CurSpecial === c_paragraphSpecial.HANGING) {
+                    value = -value;
+                } else if (this.CurSpecial === c_paragraphSpecial.NONE_SPECIAL && value > 0 )  {
+                    this.CurSpecial = c_paragraphSpecial.FIRST_LINE;
+                    this.cmbSpecial.setValue(c_paragraphSpecial.FIRST_LINE);
+                } else if (value === 0) {
+                    this.CurSpecial = c_paragraphSpecial.NONE_SPECIAL;
+                    this.cmbSpecial.setValue(c_paragraphSpecial.NONE_SPECIAL);
+                }
+                this._changedProps.get_Ind().put_FirstLine(value);
+            }
+        },
+
+        onLineRuleSelect: function(combo, record) {
+            if (this.Spacing === null) {
+                var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                this.Spacing = properties.asc_getSpacing();
+            }
+            this.Spacing.LineRule = record.value;
+            var selectItem = _.findWhere(this._arrLineRule, {value: record.value}),
+                indexSelectItem = this._arrLineRule.indexOf(selectItem);
+            if ( this.CurLineRuleIdx !== indexSelectItem ) {
+                this.numLineHeight.setDefaultUnit(this._arrLineRule[indexSelectItem].defaultUnit);
+                this.numLineHeight.setMinValue(this._arrLineRule[indexSelectItem].minValue);
+                this.numLineHeight.setStep(this._arrLineRule[indexSelectItem].step);
+                if (this.Spacing.LineRule === c_paragraphLinerule.LINERULE_AUTO) {
+                    this.numLineHeight.setValue(this._arrLineRule[indexSelectItem].defaultValue);
+                } else {
+                    this.numLineHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(this._arrLineRule[indexSelectItem].defaultValue));
+                }
+                this.CurLineRuleIdx = indexSelectItem;
+            }
+        },
+
+        onNumLineHeightChange: function(field, newValue, oldValue, eOpts) {
+            if ( this.cmbLineRule.getRawValue() === '' )
+                return;
+            if (this.Spacing === null) {
+                var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                this.Spacing = properties.asc_getSpacing();
+            }
+            this.Spacing.Line = (this.cmbLineRule.getValue()==c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());
         },
 
         textTitle:      'Paragraph - Advanced Settings',
         strIndentsFirstLine:    'First line',
-        strIndentsLeftText:     'Left',
+        strIndentsLeftText:     'Indent Left',
-        strIndentsRightText:    'Right',
+        strIndentsRightText:    'Indent Right',
-        strParagraphIndents:    'Indents & Placement',
+        strParagraphIndents:    'Indents & Spacing',
         strParagraphFont:   'Font',
         cancelButtonText:       'Cancel',
         okButtonText:           'Ok',
@@ -584,6 +797,23 @@ define([    'text!presentationeditor/main/app/template/ParagraphSettingsAdvanced
         textAlign: 'Alignment',
         textTabPosition: 'Tab Position',
         textDefault: 'Default Tab',
-        noTabs: 'The specified tabs will appear in this field'
+        noTabs: 'The specified tabs will appear in this field',
+        strIndentsTextAlignment: 'Text Alignment',
+        textLeft: 'Left',
+        textCentered: 'Centered',
+        textJustified: 'Justified',
+        textRight: 'Right',
+        strIndentsSpecial: 'Special',
+        textNoneSpecial: '(none)',
+        textFirstLine: 'First line',
+        textHanging: 'Hanging',
+        strIndentsSpecialBy: 'By',
+        strIndentsSpacingBefore: 'Spacing Before',
+        strIndentsSpacingAfter: 'Spacing After',
+        strIndentLineSpacingAt: 'At',
+        strIndentsLineSpacing: 'Line Spacing',
+        txtAutoText: 'Auto',
+        textAuto: 'Multiple',
+        textExact: 'Exactly'
     }, PE.Views.ParagraphSettingsAdvanced || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1326,10 +1326,10 @@
   "PE.Views.ParagraphSettingsAdvanced.strAllCaps": "All caps",
   "PE.Views.ParagraphSettingsAdvanced.strDoubleStrike": "Double strikethrough",
   "PE.Views.ParagraphSettingsAdvanced.strIndentsFirstLine": "First Line",
-  "PE.Views.ParagraphSettingsAdvanced.strIndentsLeftText": "Left",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsLeftText": "Indent Left",
-  "PE.Views.ParagraphSettingsAdvanced.strIndentsRightText": "Right",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsRightText": "Indent Right",
   "PE.Views.ParagraphSettingsAdvanced.strParagraphFont": "Font",
-  "PE.Views.ParagraphSettingsAdvanced.strParagraphIndents": "Indents & Placement",
+  "PE.Views.ParagraphSettingsAdvanced.strParagraphIndents": "Indents & Spacing",
   "PE.Views.ParagraphSettingsAdvanced.strSmallCaps": "Small caps",
   "PE.Views.ParagraphSettingsAdvanced.strStrike": "Strikethrough",
   "PE.Views.ParagraphSettingsAdvanced.strSubscript": "Subscript",
@@ -1347,6 +1347,23 @@
   "PE.Views.ParagraphSettingsAdvanced.textTabPosition": "Tab Position",
   "PE.Views.ParagraphSettingsAdvanced.textTabRight": "Right",
   "PE.Views.ParagraphSettingsAdvanced.textTitle": "Paragraph - Advanced Settings",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsTextAlignment": "Text Alignment",
+  "PE.Views.ParagraphSettingsAdvanced.textLeft": "Left",
+  "PE.Views.ParagraphSettingsAdvanced.textCentered": "Centered",
+  "PE.Views.ParagraphSettingsAdvanced.textJustified": "Justified",
+  "PE.Views.ParagraphSettingsAdvanced.textRight": "Right",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsSpecial": "Special",
+  "PE.Views.ParagraphSettingsAdvanced.textNoneSpecial": "(none)",
+  "PE.Views.ParagraphSettingsAdvanced.textFirstLine": "First line",
+  "PE.Views.ParagraphSettingsAdvanced.textHanging": "Hanging",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsSpecialBy": "By",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsSpacingBefore": "Spacing Before",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsSpacingAfter": "Spacing After",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentLineSpacingAt": "At",
+  "PE.Views.ParagraphSettingsAdvanced.strIndentsLineSpacing": "Line Spacing",
+  "PE.Views.ParagraphSettingsAdvanced.txtAutoText": "Auto",
+  "PE.Views.ParagraphSettingsAdvanced.textAuto": "Multiple",
+  "PE.Views.ParagraphSettingsAdvanced.textExact": "Exactly",
   "PE.Views.RightMenu.txtChartSettings": "Chart settings",
   "PE.Views.RightMenu.txtImageSettings": "Image settings",
   "PE.Views.RightMenu.txtParagraphSettings": "Text settings",