[SE mobile] Layout styles of Chart settings.

apps/spreadsheeteditor/mobile/app/template/EditChart.template

@@ -3,7 +3,7 @@
     <div class="list-block">
         <ul>
             <li>
-                <a id="chart-style" class="item-link">
+                <a id="chart-style" class="item-link" data-page="#edit-chart-style">
                     <div class="item-content">
                         <div class="item-inner">
                             <div class="item-title">Style</div>
@@ -119,4 +119,89 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Styles view -->
+<div id="edit-chart-style">
+    <div class="navbar">
+        <div class="navbar-inner edit-chart-style" data-page="edit-chart-style">
+            <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">Style</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+            <% if (!android) { %>
+            <div class="subnavbar categories">
+                <div class="buttons-row">
+                    <a href="#tab-chart-type" class="button tab-link active">Type</a>
+                    <a href="#tab-chart-style" class="button tab-link">Style</a>
+                    <a href="#tab-chart-fill" class="button tab-link">Fill</a>
+                    <a href="#tab-chart-border" class="button tab-link">Border</a>
+                </div>
+            </div>
+            <% } %>
+        </div>
+        <% if (android) { %>
+        <div class="subnavbar categories" style="padding: 0;">
+            <div class="toolbar tabbar" style="top: 0;">
+                <div data-page="index" class="toolbar-inner">
+                    <a href="#tab-chart-type" class="tab-link active">Type</a>
+                    <a href="#tab-chart-style" class="tab-link">Style</a>
+                    <a href="#tab-chart-fill" class="tab-link">Fill</a>
+                    <a href="#tab-chart-border" class="tab-link">Border</a>
+                </div>
+            </div>
+        </div>
+        <% } %>
+    </div>
+    <div class="page with-subnavbar" data-page="edit-chart-style">
+        <div class="tabs-animated-wrap">
+            <div class="tabs">
+                <div id="tab-chart-type" class="page-content tab dataview chart-types active">
+                    <% _.each(types, function(row) { %>
+                    <ul class="row">
+                        <% _.each(row, function(type) { %>
+                        <li data-type="<%= type.type %>">
+                            <div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
+                        </li>
+                        <% }); %>
+                    </ul>
+                    <% }); %>
+                </div>
+                <div id="tab-chart-style" class="page-content tab dataview chart-styles">
+                    <!--Style-->
+                </div>
+                <div id="tab-chart-fill" class="page-content tab">
+                    <!--Fill-->
+                </div>
+                <div id="tab-chart-border" class="page-content tab">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-chart-bordersize">
+                                <div style="padding: 15px 0 0 15px;">Size</div>
+                                <div class="item-content">
+                                    <div class="item-inner">
+                                        <div class="item-input">
+                                            <div class="range-slider">
+                                                <input type="range" min="0" max="7" value="0" step="1">
+                                            </div>
+                                        </div>
+                                        <div class="item-after value">0 pt</div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <a id="edit-chart-bordercolor" class="item-link">
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title">Color</div>
+                                            <div class="item-after"><div class="color-preview"></div></div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>

apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js

@@ -51,7 +51,36 @@ define([
 
     SSE.Views.EditChart = Backbone.View.extend(_.extend((function() {
         // private
-        var _editTextController;
+        var _editTextController,
+            _styles = [],
+            _types = [
+            { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'chart-03.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'chart-02.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer,           thumb: 'chart-01.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineNormal,              thumb: 'chart-06.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineStacked,             thumb: 'chart-05.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineStackedPer,          thumb: 'chart-04.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal,              thumb: 'chart-09.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked,             thumb: 'chart-08.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer,          thumb: 'chart-07.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaNormal,              thumb: 'chart-12.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaStacked,             thumb: 'chart-11.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaStackedPer,          thumb: 'chart-10.png'},
+            { type: Asc.c_oAscChartTypeSettings.pie,                     thumb: 'chart-13.png'},
+            { type: Asc.c_oAscChartTypeSettings.doughnut,                thumb: 'chart-14.png'},
+            { type: Asc.c_oAscChartTypeSettings.pie3d,                   thumb: 'chart-22.png'},
+            { type: Asc.c_oAscChartTypeSettings.scatter,                 thumb: 'chart-15.png'},
+            { type: Asc.c_oAscChartTypeSettings.stock,                   thumb: 'chart-16.png'},
+            { type: Asc.c_oAscChartTypeSettings.line3d,                  thumb: 'chart-21.png'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3d,             thumb: 'chart-17.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked3d,            thumb: 'chart-18.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer3d,         thumb: 'chart-19.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal3d,            thumb: 'chart-25.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked3d,           thumb: 'chart-24.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,        thumb: 'chart-23.png'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,  thumb: 'chart-20.png'}
+        ];
+
 
         return {
             // el: '.view-main',
@@ -77,9 +106,15 @@ define([
 
             // Render layout
             render: function () {
+                var elementsInRow = 3;
+                var groupsOfTypes = _.chain(_types).groupBy(function(element, index){
+                    return Math.floor(index/elementsInRow);
+                }).toArray().value();
+
                 this.layout = $('<div/>').append(this.template({
                     android : Common.SharedSettings.get('android'),
                     phone   : Common.SharedSettings.get('phone'),
+                    types   : groupsOfTypes,
                     scope   : this
                 }));
 
@@ -136,6 +171,9 @@ define([
 
             updateItemHandlers: function () {
                 $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
+                $('.subnavbar.categories a').single('click', function () {
+                    $('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
+                });
             },
 
             showPage: function (templateId, suspendEvent) {

apps/spreadsheeteditor/mobile/resources/less/app-ios.less

@@ -2,7 +2,7 @@
 @import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less');
 
 // Colors
-@themeColor: #8ca946; // (140,169,70)
+@themeColor: #4F9E4F; // (79,158,79)
 
 @appToolbarHeight: @toolbarSize;
 

apps/spreadsheeteditor/mobile/resources/less/app-material.less

@@ -2,7 +2,7 @@
 @import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less');
 
 // Colors
-@themeColor: #8ca946; // (140,169,70)
+@themeColor: #4F9E4F; // (79,158,79)
 @navBarIconColor: #fff;
 
 @appToolbarHeight: @navbarSize;