[DE mobile] Fixed display chart styles.

apps/documenteditor/mobile/app/controller/edit/EditChart.js

@@ -42,8 +42,11 @@
 
 define([
     'core',
-    'documenteditor/mobile/app/view/edit/EditChart'
+    'documenteditor/mobile/app/view/edit/EditChart',
-], function (core) {
+    'jquery',
+    'underscore',
+    'backbone'
+], function (core, view, $, _, Backbone) {
     'use strict';
 
     DE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
@@ -564,7 +567,7 @@ define([
                 Common.SharedSettings.set('chartstyles', styles);
                 Common.NotificationCenter.trigger('chartstyles:load', styles);
 
-                $('#tab-chart-style .dataview .row div').single('click',    _.bind(this.onStyle, this));
+                $('#tab-chart-style li').single('click',    _.bind(this.onStyle, this));
             },
 
             _uiTransformByWrap: function(type) {

apps/documenteditor/mobile/app/template/EditChart.template

@@ -317,16 +317,8 @@
                     </ul>
                     <% }); %>
                 </div>
-                <div id="tab-chart-style" class="page-content tab">
+                <div id="tab-chart-style" class="page-content tab dataview chart-styles">
-                    <div class="list-block">
+                    <!--Styles-->
-                        <ul>
-                            <li id="edit-chart-styles">
-                                <div class="item-content">
-                                    <div class="item-inner"></div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
                 </div>
                 <div id="tab-chart-fill" class="page-content tab">
                     <!--Fill colors-->

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

@@ -178,10 +178,10 @@ define([
             },
 
             renderStyles: function() {
-                var $styleContainer = $('#edit-chart-styles .item-inner');
+                var $styleContainer = $('#tab-chart-style');
 
                 if ($styleContainer.length > 0) {
-                    var columns = parseInt($styleContainer.width() / 60), // magic
+                    var columns = parseInt($styleContainer.width() / 70), // magic
                         row = -1,
                         styles = [];
 
@@ -194,17 +194,15 @@ define([
                     });
 
                     var template = _.template([
-                        '<div class="dataview chart-styles" style="width: 100%;">',
+                        '<% _.each(styles, function(row) { %>',
-                            '<% _.each(styles, function(row) { %>',
+                        '<ul class="row">',
-                            '<div class="row">',
+                            '<% _.each(row, function(style) { %>',
-                                '<% _.each(row, function(style) { %>',
+                            '<li data-type="<%= style.asc_getStyle() %>">',
-                                '<div data-type="<%= style.asc_getStyle() %>">',
+                                '<img src="<%= style.asc_getImageUrl() %>" width="50px" height="50px">',
-                                    '<img src="<%= style.asc_getImageUrl() %>" width="50px" height="50px">',
+                            '</li>',
-                                '</div>',
-                                '<% }); %>',
-                            '</div>',
                             '<% }); %>',
-                        '</div>'
+                        '</ul>',
+                        '<% }); %>'
                     ].join(''), {
                         styles: styles
                     });

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -6619,6 +6619,15 @@ i.icon.icon-wrap-behind {
   width: 70px;
   height: 50px;
 }
+.chart-styles .row,
+.chart-styles .row li {
+  margin-bottom: 12px;
+}
+.chart-styles li,
+.chart-styles .row div {
+  margin: 0;
+  padding: 1px;
+}
 .shapes li {
   width: 70px;
   height: 70px;

apps/documenteditor/mobile/resources/css/app-material.css

@@ -6182,6 +6182,15 @@ textarea {
   width: 70px;
   height: 50px;
 }
+.chart-styles .row,
+.chart-styles .row li {
+  margin-bottom: 12px;
+}
+.chart-styles li,
+.chart-styles .row div {
+  margin: 0;
+  padding: 1px;
+}
 .shapes li {
   width: 70px;
   height: 70px;

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

@@ -117,6 +117,22 @@ input, textarea {
   }
 }
 
+// Chart styles
+
+.chart-styles {
+  .row {
+    &, li {
+      margin-bottom: 12px;
+    }
+  }
+
+  li,
+  .row div {
+    margin: 0;
+    padding: 1px;
+  }
+}
+
 // Shapes
 
 .shapes {

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

@@ -110,6 +110,22 @@ input, textarea {
   }
 }
 
+// Chart styles
+
+.chart-styles {
+  .row {
+    &, li {
+      margin-bottom: 12px;
+    }
+  }
+
+  li,
+  .row div {
+    margin: 0;
+    padding: 1px;
+  }
+}
+
 // Shapes
 
 .shapes {