[SE mobile] Chart settings, layout

apps/common/mobile/resources/less/ios/_dataview.less

@@ -20,6 +20,7 @@
 
   .active {
     position: relative;
+    z-index: 1;
 
     &::after {
       content: '';

apps/common/mobile/resources/less/material/_dataview.less

@@ -17,6 +17,7 @@
 
   .active {
     position: relative;
+    z-index: 1;
 
     &::after {
       content: '';

apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js

@@ -57,6 +57,7 @@ define([
             _cellStyles = [],
             _fontInfo = {},
             _borderInfo = {color: '000000', width: 'medium'},
+            _styleSize = {width: 100, height: 50},
             _isEdit = false;
 
         function onApiLoadFonts(fonts, select) {
@@ -86,8 +87,9 @@ define([
 
                 this.addListeners({
                     'EditCell': {
-                        'page:show' : this.onPageShow,
+                        'page:show'     : this.onPageShow,
-                        'font:click': this.onFontClick
+                        'font:click'    : this.onFontClick,
+                        'style:click'   : this.onStyleClick
                     }
                 });
             },
@@ -96,6 +98,8 @@ define([
                 var me = this;
                 me.api = api;
 
+                me.api.asc_setThumbnailStylesSizes(_styleSize.width, _styleSize.height);
+
                 me.api.asc_registerCallback('asc_onInitEditorFonts',            _.bind(onApiLoadFonts, me));
                 me.api.asc_registerCallback('asc_onSelectionChanged',           _.bind(me.onApiSelectionChanged, me));
                 me.api.asc_registerCallback('asc_onEditorSelectionChanged',     _.bind(me.onApiEditorSelectionChanged, me));
@@ -122,6 +126,8 @@ define([
                 me.initSettings();
             },
 
+
+
             onPageShow: function (view, pageId) {
                 var me = this;
 
@@ -168,6 +174,10 @@ define([
                 return _cellInfo;
             },
 
+            getStyleSize: function () {
+                return _styleSize;
+            },
+
             initFontsPage: function () {
                 var me = this,
                     displaySize = _fontInfo.size;
@@ -321,6 +331,8 @@ define([
 
                 $('#fill-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
 
+                var styleName = cellInfo.asc_getStyleName();
+                $('#edit-cell .cell-styles li[data-type="' + styleName + '"]').addClass('active');
 
                 if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText) {
                     return;
@@ -365,6 +377,10 @@ define([
                 }
             },
 
+            onStyleClick: function (view, type) {
+                this.api.asc_setCellStyle(type);
+            },
+
             onBold: function (e) {
                 var pressed = this._toggleButton(e);
 

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

@@ -220,6 +220,7 @@ define([
             initLayoutPage: function () {
                 var me = this,
                     chartProperties = _chartObject.get_ChartProperties(),
+                    chartType = chartProperties.getType(),
                     $layoutPage = $('.page[data-page=edit-chart-layout]');
 
                 var setValue = function (id, value) {
@@ -230,14 +231,74 @@ define([
                     $layoutPage.find('#' + id + ' .item-after').text(textValue);
                 };
 
+                // Init legend position values
+
+                var dataLabelPos = [
+                    { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: me.textNone },
+                    { value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: me.textCenter }
+                ];
+
+                if (chartType == Asc.c_oAscChartTypeSettings.barNormal ||
+                    chartType == Asc.c_oAscChartTypeSettings.hBarNormal) {
+                    dataLabelPos.push(
+                        {value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: me.textInnerBottom},
+                        {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop},
+                        {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: me.textOuterTop}
+                    );
+                } else if ( chartType == Asc.c_oAscChartTypeSettings.barStacked ||
+                    chartType == Asc.c_oAscChartTypeSettings.barStackedPer ||
+                    chartType == Asc.c_oAscChartTypeSettings.hBarStacked ||
+                    chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ) {
+                    dataLabelPos.push(
+                        { value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: me.textInnerBottom },
+                        { value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop }
+                    );
+                } else if (chartType == Asc.c_oAscChartTypeSettings.lineNormal ||
+                    chartType == Asc.c_oAscChartTypeSettings.lineStacked ||
+                    chartType == Asc.c_oAscChartTypeSettings.lineStackedPer ||
+                    chartType == Asc.c_oAscChartTypeSettings.stock ||
+                    chartType == Asc.c_oAscChartTypeSettings.scatter) {
+                    dataLabelPos.push(
+                        { value: Asc.c_oAscChartDataLabelsPos.l, displayValue: me.textLeft },
+                        { value: Asc.c_oAscChartDataLabelsPos.r, displayValue: me.textRight },
+                        { value: Asc.c_oAscChartDataLabelsPos.t, displayValue: me.textTop },
+                        { value: Asc.c_oAscChartDataLabelsPos.b, displayValue: me.textBottom }
+                    );
+                } else if (chartType == Asc.c_oAscChartTypeSettings.pie ||
+                    chartType == Asc.c_oAscChartTypeSettings.pie3d) {
+                    dataLabelPos.push(
+                        {value: Asc.c_oAscChartDataLabelsPos.bestFit, displayValue: me.textFit},
+                        {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: me.textInnerTop},
+                        {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: me.textOuterTop}
+                    );
+                }
+
+                $layoutPage.find('select[name=chart-layout-data-labels]').html((function () {
+                    var options = [];
+                    _.each(dataLabelPos, function (position) {
+                        options.push(Common.Utils.String.format('<option value="{0}">{1}</option>', position.value, position.displayValue));
+                    });
+                    return options.join('');
+                })());
+
                 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());
+                setValue('chart-layout-gridlines-vertical', chartProperties.getVertGridLines());
+                setValue('chart-layout-data-labels', chartProperties.getDataLabelsPos() || Asc.c_oAscChartDataLabelsPos.none);
 
-                // TODO: Modify Data Labels position by chart type
+                var disableSetting = (
+                    chartType == Asc.c_oAscChartTypeSettings.pie ||
+                    chartType == Asc.c_oAscChartTypeSettings.doughnut ||
+                    chartType == Asc.c_oAscChartTypeSettings.pie3d
+                );
+
+                $('#chart-layout-axis-title-horizontal').toggleClass('disabled', disableSetting);
+                $('#chart-layout-axis-title-vertical').toggleClass('disabled', disableSetting);
+                $('#chart-layout-gridlines-horizontal').toggleClass('disabled', disableSetting);
+                $('#chart-layout-gridlines-vertical').toggleClass('disabled', disableSetting);
             },
 
             initReorderPage: function () {
@@ -492,7 +553,88 @@ define([
                 return clr;
             },
 
-            textChart: 'Chart'
+            textChart: 'Chart',
+            textLayout: 'Layout',
+            textLegendPos: 'Legend',
+            textHorTitle: 'Horizontal Axis Title',
+            textVertTitle: 'Vertical Axis Title',
+            textDataLabels: 'Data Labels',
+            textSeparator: 'Data Labels Separator',
+            textSeriesName: 'Series Name',
+            textCategoryName: 'Category Name',
+            textValue: 'Value',
+            textAxisOptions: 'Axis Options',
+            textMinValue: 'Minimum Value',
+            textMaxValue: 'Maximum Value',
+            textAxisCrosses: 'Axis Crosses',
+            textUnits: 'Display Units',
+            textTickOptions: 'Tick Options',
+            textMajorType: 'Major Type',
+            textMinorType: 'Minor Type',
+            textLabelOptions: 'Label Options',
+            textLabelPos: 'Label Position',
+            textReverse: 'Values in reverse order',
+            textVertAxis: 'Vertical Axis',
+            textHorAxis: 'Horizontal Axis',
+            textMarksInterval: 'Interval between Marks',
+            textLabelDist: 'Axis Label Distance',
+            textLabelInterval: 'Interval between Labels',
+            textAxisPos: 'Axis Position',
+            textLeftOverlay: 'Left Overlay',
+            textRightOverlay: 'Right Overlay',
+            textOverlay: 'Overlay',
+            textNoOverlay: 'No Overlay',
+            textRotated: 'Rotated',
+            textHorizontal: 'Horizontal',
+            textInnerBottom: 'Inner Bottom',
+            textInnerTop: 'Inner Top',
+            textOuterTop: 'Outer Top',
+            textNone: 'None',
+            textCenter: 'Center',
+            textFixed: 'Fixed',
+            textAuto: 'Auto',
+            textCross: 'Cross',
+            textIn: 'In',
+            textOut: 'Out',
+            textLow: 'Low',
+            textHigh: 'High',
+            textNextToAxis: 'Next to axis',
+            textHundreds: 'Hundreds',
+            textThousands: 'Thousands',
+            textTenThousands: '10 000',
+            textHundredThousands: '100 000',
+            textMillions: 'Millions',
+            textTenMillions: '10 000 000',
+            textHundredMil: '100 000 000',
+            textBillions: 'Billions',
+            textTrillions: 'Trillions',
+            textCustom: 'Custom',
+            textManual: 'Manual',
+            textBetweenTickMarks: 'Between Tick Marks',
+            textOnTickMarks: 'On Tick Marks',
+            textHorGrid: 'Horizontal Gridlines',
+            textVertGrid: 'Vertical Gridlines',
+            textLines: 'Lines',
+            textMarkers: 'Markers',
+            textMajor: 'Major',
+            textMinor: 'Minor',
+            textMajorMinor: 'Major and Minor',
+            textStraight: 'Straight',
+            textSmooth: 'Smooth',
+            textType: 'Type',
+            textTypeData: 'Type & Data',
+            textStyle: 'Style',
+            errorMaxRows: 'ERROR! The maximum number of data series per chart is 255.',
+            errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.',
+            textAxisSettings: 'Axis Settings',
+            textGridLines: 'Gridlines',
+            textShow: 'Show',
+            textHide: 'Hide',
+            textLeft: 'Left',
+            textRight: 'Right',
+            textTop: 'Top',
+            textBottom: 'Bottom',
+            textFit: 'Fit Width'
         }
     })(), SSE.Controllers.EditChart || {}))
 });

apps/spreadsheeteditor/mobile/app/template/EditCell.template

@@ -82,8 +82,7 @@
     <div class="content-block-title">Cell Styles</div>
     <div class="list-block">
         <ul>
-            <li class="cell-styles">
+            <li class="cell-styles dataview">
-                <div class="item-content"></div>
             </li>
         </ul>
     </div>

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

@@ -129,7 +129,7 @@
             <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="edit-chart-style 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>
@@ -140,7 +140,7 @@
             <% } %>
         </div>
         <% if (android) { %>
-        <div class="subnavbar categories" style="padding: 0;">
+        <div class="edit-chart-style 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>
@@ -349,10 +349,6 @@
                             <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">

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

@@ -53,7 +53,7 @@ define([
     SSE.Views.EditCell = Backbone.View.extend(_.extend((function() {
         // private
         var _fontsList,
-            _editTextController;
+            _editCellController;
 
         return {
             // el: '.view-main',
@@ -64,7 +64,7 @@ define([
             },
 
             initialize: function () {
-                _editTextController = SSE.getController('EditCell');
+                _editCellController = SSE.getController('EditCell');
 
                 Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
                 this.on('page:show', _.bind(this.updateItemHandlers, this));
@@ -108,10 +108,11 @@ define([
             },
 
             renderStyles: function (cellStyles) {
-                var $styleContainer = $('.cell-styles .item-content');
+                var $styleContainer = $('#edit-cell .cell-styles');
 
                 if ($styleContainer.length > 0) {
-                    var columns = parseInt($styleContainer.width() / 70), // magic
+                    var styleSize = _editCellController.getStyleSize(),
+                        columns = parseInt($styleContainer.width() / styleSize.width),
                         row = -1,
                         styles = [];
 
@@ -128,21 +129,42 @@ define([
                         '<ul class="row">',
                             '<% _.each(row, function(style) { %>',
                             '<li data-type="<%= style.asc_getName() %>">',
-                                '<img src="<%= style.asc_getImage() %>" width="50px" height="50px">',
+                                '<div class="thumb" style="background-image:url(<%= style.asc_getImage() %>); width: <%= styleSize.width %>px; height: <%= styleSize.height %>px;">',
                             '</li>',
                             '<% }); %>',
                         '</ul>',
                         '<% }); %>'
                     ].join(''), {
-                        styles: styles
+                        styles: styles,
+                        styleSize: styleSize
                     });
 
                     $styleContainer.html(template);
+
+                    $('#edit-cell .cell-styles li').single('click', _.buffered(function (e) {
+                        var $target = $(e.currentTarget),
+                            type = $target.data('type');
+
+                        $('#edit-cell .cell-styles li').removeClass('active');
+                        $target.addClass('active');
+
+                        this.fireEvent('style:click', [this, type]);
+                    }, 100, this));
                 }
             },
 
             updateItemHandlers: function () {
-                $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
+                var selectorsDynamicPage = [
+                    '#edit-cell',
+                    '.page[data-page=edit-border-style]',
+                    '.page[data-page=edit-cell-format]'
+                ].map(function (selector) {
+                    return selector + ' a.item-link[data-page]';
+                }).join(', ');
+
+                $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+
+                // $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
             },
 
             showPage: function (templateId, suspendEvent) {
@@ -197,7 +219,7 @@ define([
                     items: SSE.getController('EditCell').getFonts(),
                     template: $template.html(),
                     onItemsAfterInsert: function (list, fragment) {
-                        var fontInfo = _editTextController.getFontInfo();
+                        var fontInfo = _editCellController.getFontInfo();
                         $('#font-list input[name=font-name]').val([fontInfo.name]);
 
                         $('#font-list li').single('click', _.buffered(function (e) {

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

@@ -169,8 +169,16 @@ define([
             },
 
             updateItemHandlers: function () {
-                $('.container-edit a.item-link[data-page]').single('click', _.bind(this.onItemClick, this));
+                var selectorsDynamicPage = [
-                $('.subnavbar.categories a').single('click', function () {
+                    '#edit-chart',
+                    '.page[data-page=edit-chart-style]'
+                ].map(function (selector) {
+                    return selector + ' a.item-link[data-page]';
+                }).join(', ');
+                
+                $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+
+                $('.edit-chart-style.subnavbar.categories a').single('click', function () {
                     $('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
                 });
             },

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

@@ -141,41 +141,30 @@ input, textarea {
   }
 }
 
-// Bullets and numbers
+// Cell style
-
+.cell-styles.dataview {
-.bullets,
+  .active:after {
-.numbers {
+    right: 2px;
-  ul {
+    bottom: 2px;
-    margin-top: 10px;
   }
 
-  li {
+  .row {
-    width: 70px;
+    padding: 5px;
-    height: 70px;
-    margin-right: 1px;
-    border: 1px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
 
-    &.active {
+    li {
-      //
+      border: 1px solid @listBlockBorderColor;
-    }
+      html.pixel-ratio-2 & {
+        border: 0.5px solid @listBlockBorderColor;
+      }
+      html.pixel-ratio-3 & {
+        border: 0.33px solid @listBlockBorderColor;
+      }
+      padding: 2px;
 
-    .thumb {
+      .thumb {
-      width: 100%;
+        width: 112px;
-      height: 100%;
+        height: 38px;
-      background-color: @white;
+        background-size: contain;
-      background-size: cover;
-
-      label {
-        width: 100%;
-        text-align: center;
-        position: absolute;
-        top: 34%;
       }
     }
   }

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

@@ -134,51 +134,31 @@ input, textarea {
   }
 }
 
-// Bullets and numbers
+// Cell style
-
+.cell-styles.dataview {
-.bullets,
+  .active:after {
-.numbers {
+    right: 2px;
-  ul {
+    bottom: 2px;
-    margin-top: 10px;
   }
 
-  li {
+  .row {
-    width: 70px;
+    padding: 5px 0;
-    height: 70px;
-    margin-right: 1px;
-    border: 1px solid #c4c4c4;
-    html.pixel-ratio-2 & {
-      border: 0.5px solid #c4c4c4;
-    }
-    html.pixel-ratio-3 & {
-      border: 0.33px solid #c4c4c4;
-    }
 
-    &.active {
+    li {
-      //
+      border: 1px solid @listBlockBorderColor;
-    }
+      html.pixel-ratio-2 & {
+        border: 0.5px solid @listBlockBorderColor;
+      }
+      html.pixel-ratio-3 & {
+        border: 0.33px solid @listBlockBorderColor;
+      }
+      padding: 2px;
 
-    .thumb {
+      .thumb {
-      width: 100%;
+        width: 112px;
-      height: 100%;
+        height: 38px;
-      background-color: @white;
+        background-size: contain;
-      background-size: cover;
-
-      label {
-        width: 100%;
-        text-align: center;
-        position: absolute;
-        top: 34%;
       }
     }
   }
 }
-
-.phone {
-  .page.editor {
-    &.no-padding {
-      padding-top: 0;
-      transition: padding-top .2s ease-in;
-    }
-  }
-}