[DE] Matrix Spacing (add layout)

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

@@ -44,7 +44,7 @@ define([
 
     DE.Views.MatrixSpacingDialog = Common.UI.Window.extend(_.extend({
         options: {
-            width: 214,
+            width: 240,
             header: true,
             style: 'min-width: 214px;',
             cls: 'modal-dlg'
@@ -57,9 +57,40 @@ define([
 
             this.template = [
                 '<div class="box">',
+                    '<div class="inner-content">',
+                        '<div style="padding-bottom: 16px;">',
+                            '<div style="display: inline-block;">',
+                                '<lable style="display: block; padding-bottom: 4px; font-weight: bold;">' + this.textRowSpacing + '</lable>',
+                                '<lable style="display: block; padding-bottom: 4px;">' + this.textMinimumDistanceBetweenBaselines + '</lable>',
+                                '<div>',
+                                    '<div style="display: inline-block; margin-right: 8px;" id="matrix-row-spacing-cmb"></div>',
+                                    '<div style="display: inline-block;" id="matrix-row-spacing-spn"></div>',
+                                '</div>',
+                            '</div>',
+                            /*'<div style="display: inline-block;"></div>',*/
+                        '</div>',
+                        '<div style="padding-bottom: 16px;">',
+                            '<div style="display: inline-block;">',
+                                '<lable style="display: block; padding-bottom: 4px; font-weight: bold;">' + this.textColumnSpacingEdges + '</lable>',
+                                '<lable style="display: block; padding-bottom: 4px;">' + this.textMinimumDistanceBetweenColumnEdges + '</lable>',
+                                '<div id="matrix-column-spacing-edges"></div>',
+                            '</div>',
+                            /*'<div style="display: inline-block;"></div>',*/
+                        '</div>',
+                        '<div>',
+                            '<div style="display: inline-block;">',
+                                '<lable style="display: block; padding-bottom: 4px; font-weight: bold;">' + this.textColumnSpacing + '</lable>',
+                                '<lable style="display: block; padding-bottom: 4px;">' + this.textMinimumDistanceBetweenColumns + '</lable>',
+                                '<div>',
+                                    '<div style="display: inline-block; margin-right: 8px;" id="matrix-column-spacing-cmb"></div>',
+                                    '<div style="display: inline-block;" id="matrix-column-spacing-spn"></div>',
+                                '</div>',
+                            /*'<div style="display: inline-block;"></div>',*/
+                        '</div>',
+                    '</div>',
                 '<div class="footer center">',
-                '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
+                    '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
-                '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
+                    '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
                 '</div>'
             ].join('');
 
@@ -71,6 +102,60 @@ define([
         render: function() {
             Common.UI.Window.prototype.render.call(this);
 
+            this.cmbRowSpacing = new Common.UI.ComboBox({
+                el: $('#matrix-row-spacing-cmb'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: [],
+                style: 'width: 130px;',
+                menuStyle   : 'min-width: 130px;'
+            });
+            this.cmbRowSpacing.setValue('');
+            this.cmbRowSpacing.on('selected', _.bind(this.onRowSpacingSelect, this));
+
+            this.numRowSpacing = new Common.UI.MetricSpinner({
+                el: $('#matrix-row-spacing-spn'),
+                step: .01,
+                width: 70,
+                value: '',
+                defaultUnit : "",
+                maxValue: 132,
+                minValue: 0.5
+            });
+            this.numRowSpacing.on('change', _.bind(this.onNumRowSpacingChange, this));
+
+            this.cmbColumnSpacing = new Common.UI.ComboBox({
+                el: $('#matrix-column-spacing-cmb'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: [],
+                style: 'width: 130px;',
+                menuStyle   : 'min-width: 130px;'
+            });
+            this.cmbColumnSpacing.setValue('');
+            this.cmbColumnSpacing.on('selected', _.bind(this.onColumnSpacingSelect, this));
+
+            this.numColumnSpacing = new Common.UI.MetricSpinner({
+                el: $('#matrix-column-spacing-spn'),
+                step: .01,
+                width: 70,
+                value: '',
+                defaultUnit : "",
+                maxValue: 132,
+                minValue: 0.5
+            });
+            this.numColumnSpacing.on('change', _.bind(this.onNumColumnSpacingChange, this));
+
+            this.numColumnSpacingEdges = new Common.UI.MetricSpinner({
+                el: $('#matrix-column-spacing-edges'),
+                step: .01,
+                width: 70,
+                value: '',
+                defaultUnit : "",
+                maxValue: 132,
+                minValue: 0.5
+            });
+            this.numColumnSpacingEdges.on('change', _.bind(this.onNumColumnSpacingEdgesChange, this));
 
             var $window = this.getChild();
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
@@ -96,9 +181,35 @@ define([
             return false;
         },
 
+        onRowSpacingSelect: function() {
+
+        },
+
+        onNumRowSpacingChange: function() {
+
+        },
+
+        onColumnSpacingSelect: function() {
+
+        },
+
+        onNumColumnSpacingChange: function() {
+
+        },
+
+        onNumColumnSpacingEdgesChange: function() {
+
+        },
+
         textTitle: 'Matrix Spacing',
         cancelButtonText: 'Cancel',
         okButtonText:   'Ok',
+        textRowSpacing: 'RowSpacing',
+        textMinimumDistanceBetweenBaselines: 'Minimum distance between baselines',
+        textColumnSpacingEdges: 'Column Spacing Edges',
+        textMinimumDistanceBetweenColumnEdges: 'Minimum distance between column edges',
+        textColumnSpacing: 'Column Spacing',
+        textMinimumDistanceBetweenColumns: 'Minimum distance between columns'
 
     }, DE.Views.MatrixSpacingDialog || {}))
 });