From bf9e024087671758b4e26336fefa0daacedbd83c Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Tue, 13 Dec 2016 18:13:49 +0300
Subject: [PATCH] [SE mobile] Chart settings, layout.

---
 .../mobile/app/controller/edit/EditChart.js   |  31 +++-
 .../mobile/app/template/EditChart.template    | 149 +++++++++++++++++-
 2 files changed, 178 insertions(+), 2 deletions(-)

diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
index 3e54b0f45..a38767580 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
@@ -138,6 +138,8 @@ define([
                     me.initStylePage();
                 } else if ('#edit-chart-border-color-view' == pageId) {
                     me.initBorderColorPage();
+                } else if ('#edit-chart-layout' == pageId) {
+                    me.initLayoutPage();
                 } else if ('#edit-chart-reorder' == pageId) {
                     me.initReorderPage();
                 } else {
@@ -208,7 +210,34 @@ define([
                     _borderInfo.color = me._sdkToThemeColor(stroke.get_color());
                 }
 
-                $('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == _borderInfo.color) ? _borderInfo.color : ('#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color)))
+                $('#edit-chart-bordercolor .color-preview').css('background-color',
+                    ('transparent' == _borderInfo.color)
+                        ? _borderInfo.color
+                        : ('#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color))
+                )
+            },
+
+            initLayoutPage: function () {
+                var me = this,
+                    chartProperties = _chartObject.get_ChartProperties(),
+                    $layoutPage = $('.page[data-page=edit-chart-layout]');
+
+                var setValue = function (id, value) {
+                    var textValue = $layoutPage.find('select[name=' + id + ']')
+                        .val(value)
+                        .find('option[value='+ value +']')
+                        .text();
+                    $layoutPage.find('#' + id + ' .item-after').text(textValue);
+                };
+
+                setValue('chart-layout-title', chartProperties.getTitle());
+                setValue('chart-layout-legend', chartProperties.getLegendPos());
+                setValue('chart-layout-axis-title-horizontal', chartProperties.getHorAxisLabel());
+                setValue('chart-layout-axis-title-vertical', chartProperties.getVertAxisLabel());
+                setValue('chart-layout-gridlines-horizontal', chartProperties.getHorGridLines());
+                setValue('chart-layout-gridlines-vertical', chartProperties.getDataLabelsPos());
+
+                // TODO: Modify Data Labels position by chart type
             },
 
             initReorderPage: function () {
diff --git a/apps/spreadsheeteditor/mobile/app/template/EditChart.template b/apps/spreadsheeteditor/mobile/app/template/EditChart.template
index 302f4b225..edb88e67a 100644
--- a/apps/spreadsheeteditor/mobile/app/template/EditChart.template
+++ b/apps/spreadsheeteditor/mobile/app/template/EditChart.template
@@ -12,7 +12,7 @@
                 </a>
             </li>
             <li>
-                <a id="chart-layout" class="item-link">
+                <a id="chart-layout" class="item-link" data-page="#edit-chart-layout">
                     <div class="item-content">
                         <div class="item-inner">
                             <div class="item-title">Layout</div>
@@ -220,4 +220,151 @@
             <!--Color palette-->
         </div>
     </div>
+</div>
+
+<!-- Layout view -->
+<div id="edit-chart-layout">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding">Layout</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="edit-chart-layout">
+            <div class="page-content">
+                <div class="list-block">
+                    <ul>
+                        <li>
+                            <a id="chart-layout-title" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-title">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">Overlay</option>
+                                    <option value="2">No Overlay</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Chart Title</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="chart-layout-legend" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-legend">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">Left</option>
+                                    <option value="2">Top</option>
+                                    <option value="3">Right</option>
+                                    <option value="4">Bottom</option>
+                                    <option value="5">Left Overlay</option>
+                                    <option value="6">Right Overlay</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Legend</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Axis Title</div>
+                <div class="list-block">
+                    <ul>
+                        <li>
+                            <a id="chart-layout-axis-title-horizontal" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-axis-title-horizontal">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">No Overlay</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Horizontal</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="chart-layout-axis-title-vertical" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-axis-title-vertical">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">Rotated</option>
+                                    <option value="3">Horizontal</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Vertical</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Gridlines</div>
+                <div class="list-block">
+                    <ul>
+                        <li>
+                            <a id="chart-layout-gridlines-horizontal" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-gridlines-horizontal">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">Major</option>
+                                    <option value="2">Minor</option>
+                                    <option value="3">Major and Minor</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Horizontal</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="chart-layout-gridlines-vertical" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-gridlines-vertical">
+                                    <option value="0" selected>None</option>
+                                    <option value="1">Major</option>
+                                    <option value="2">Minor</option>
+                                    <option value="3">Major and Minor</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Vertical</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="list-block">
+                    <ul>
+                        <li>
+                            <a id="chart-layout-data-labels" class="item-link smart-select" data-back-on-select="true">
+                                <select name="chart-layout-data-labels">
+                                    <option value="0" selected>None</option>
+                                    <option value="3">Center</option>
+                                    <option value="4">Inner Bottom</option>
+                                    <option value="5">Inner Top</option>
+                                    <option value="7">Outer Top</option>
+                                </select>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-title">Data Labels</div>
+                                        <div class="item-after">None</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file