[se mobile] added color schemes

apps/spreadsheeteditor/mobile/app/controller/Settings.js

@@ -52,7 +52,8 @@ define([
             inProgress,
             infoObj,
             modalView,
-            _licInfo;
+            _licInfo,
+            templateInsert;
 
         return {
             models: [],
@@ -78,6 +79,7 @@ define([
             setApi: function (api) {
                 var me = this;
                 me.api = api;
+                me.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(me.onSendThemeColorSchemes, me));
             },
 
             onLaunch: function () {
@@ -160,6 +162,33 @@ define([
                     me.setLicInfo(_licInfo);
                 } else if ('#settings-application-view' == pageId) {
                     me.initPageApplicationSettings();
+                } else if ('#color-schemes-view' == pageId) {
+                    me.initPageColorSchemes();
+                }
+            },
+
+            initPageColorSchemes: function() {
+                $('#color-schemes-content').html(templateInsert);
+                $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));
+            },
+
+            onSendThemeColorSchemes: function (schemas) {
+                templateInsert = "";
+                _.each(schemas, function (schema, index) {
+                    var colors = schema.get_colors();//schema.colors;
+                    templateInsert = templateInsert + "<a class='color-schemes-menu item-link no-indicator'><input type='hidden' value='" + index + "'><div class='item-content'><div class='item-inner'><span class='color-schema-block'>";
+                    for (var j = 2; j < 7; j++) {
+                        var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
+                        templateInsert =  templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
+                    }
+                    templateInsert =  templateInsert + "</span><span class='text'>" + schema.get_name() + "</span></div></div></a>";
+                }, this);
+            },
+
+            onColorSchemaClick: function(event) {
+                if (this.api) {
+                    var ind = $(event.currentTarget).children('input').val();
+                    this.api.asc_ChangeColorScheme(ind);
                 }
             },
 

apps/spreadsheeteditor/mobile/app/template/Settings.template

@@ -49,6 +49,18 @@
                                 </div>
                             </a>
                         </li>
+                        <li>
+                            <a id="settings-spreadsheet" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-print"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title"><%= scope.textSpreadsheetSettings %></div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
                         <li>
                             <a id="settings-application" class="item-link">
                                 <div class="item-content">
@@ -394,4 +406,52 @@
             </div>
         </div>
     </div>
+</div>
+
+<div id="settings-spreadsheet-view">
+    <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"><%= scope.textSpreadsheetSettings %></div>
+        </div>
+    </div>
+    <div class="page" id="page-settings-spreadsheet-view" data-page="settings-spreadsheet-view">
+        <div class="page-content">
+
+            <div class="list-block media-list">
+                <ul>
+                    <li>
+                        <a id="color-schemes" class="item-link item-content">
+                            <div class="item-inner">
+                                <div class="item-title-row">
+                                    <div class="item-title"><%= scope.textColorSchemes %></div>
+                                 </div>
+                             </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Color schemes view -->
+<div id="color-schemes-view">
+    <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"><%= scope.textColorSchemes %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="color-schemes-view">
+            <div class="page-content">
+                <div id="color-schemes-content" class="list-block">
+
+                </div>
+
+            </div>
+        </div>
+    </div>
 </div>

apps/spreadsheeteditor/mobile/app/view/Settings.js

@@ -80,6 +80,7 @@ define([
                 $('#settings-help').single('click',             _.bind(me.showHelp, me));
                 $('#settings-about').single('click',            _.bind(me.showAbout, me));
                 $('#settings-application').single('click', _.bind(me.showSetApp, me));
+                $('#settings-spreadsheet').single('click', _.bind(me.showSetSpreadsheet, me));
 
                 Common.Utils.addScrollIfNeed('.view[data-page=settings-root-view] .pages', '.view[data-page=settings-root-view] .page');
                 me.initControls();
@@ -167,6 +168,15 @@ define([
                 this.showPage('#settings-application-view');
             },
 
+            showColorSchemes: function () {
+                this.showPage('#color-schemes-view');
+            },
+
+            showSetSpreadsheet: function () {
+                this.showPage('#settings-spreadsheet-view');
+                $('#color-schemes').single('click', _.bind(this.showColorSchemes, this));
+            },
+
             showDocumentInfo: function() {
                 this.showPage('#settings-info-view');
 
@@ -235,7 +245,9 @@ define([
             textUnitOfMeasurement: 'Unit of Measurement',
             textCentimeter: 'Centimeter',
             textPoint: 'Point',
-            textInch: 'Inch'
+            textInch: 'Inch',
+            textSpreadsheetSettings: 'Spreadsheet Settings',
+            textColorSchemes: 'Color Schemes'
     }
     })(), SSE.Views.Settings || {}))
 });

apps/spreadsheeteditor/mobile/locale/en.json

@@ -512,11 +512,13 @@
   "SSE.Views.Settings.textSettings": "Settings",
   "SSE.Views.Settings.textTel": "tel",
   "SSE.Views.Settings.textVersion": "Version",
-  "DE.Views.Settings.textApplicationSettings": "Application Settings",
+  "SSE.Views.Settings.textApplicationSettings": "Application Settings",
-  "DE.Views.Settings.textUnitOfMeasurement": "Unit of Measurement",
+  "SSE.Views.Settings.textUnitOfMeasurement": "Unit of Measurement",
-  "DE.Views.Settings.textCentimeter": "Centimeter",
+  "SSE.Views.Settings.textCentimeter": "Centimeter",
-  "DE.Views.Settings.textPoint": "Point",
+  "SSE.Views.Settings.textPoint": "Point",
-  "DE.Views.Settings.textInch": "Inch",
+  "SSE.Views.Settings.textInch": "Inch",
+  "SSE.Views.Settings.textColorSchemes": "Color Schemes",
+  "SSE.Views.Settings.textSpreadsheetSettings": "Spreadsheet Settings",
   "SSE.Views.Settings.unknownText": "Unknown",
   "SSE.Views.Toolbar.textBack": "Back"
 }

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

@@ -6239,6 +6239,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
   margin-top: 20px;
 }
+.color-schemes-menu {
+  cursor: pointer;
+  display: block;
+  background-color: #fff;
+}
+.color-schemes-menu .item-content {
+  padding-left: 0;
+}
+.color-schemes-menu .item-inner {
+  justify-content: flex-start;
+  padding-left: 16px;
+}
+.color-schemes-menu .color-schema-block {
+  display: flex;
+}
+.color-schemes-menu .color {
+  min-width: 26px;
+  min-height: 26px;
+  margin: 0 2px 0 0;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+}
+.color-schemes-menu .text {
+  margin-left: 20px;
+  color: #212121;
+}
 i.icon.icon-search {
   width: 24px;
   height: 24px;

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

@@ -5848,6 +5848,31 @@ html.phone .document-menu .list-block .item-link {
 .about .logo {
   background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
 }
+.color-schemes-menu {
+  cursor: pointer;
+  display: block;
+  background-color: #fff;
+}
+.color-schemes-menu .item-content {
+  padding-left: 0;
+}
+.color-schemes-menu .item-inner {
+  justify-content: flex-start;
+  padding-left: 16px;
+}
+.color-schemes-menu .color-schema-block {
+  display: flex;
+}
+.color-schemes-menu .color {
+  min-width: 26px;
+  min-height: 26px;
+  margin: 0 2px 0 0;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+}
+.color-schemes-menu .text {
+  margin-left: 20px;
+  color: #212121;
+}
 .tablet .searchbar.document.replace .center > .replace {
   display: flex;
 }

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

@@ -73,6 +73,8 @@ input, textarea {
 @import url('../../../../common/mobile/resources/less/ios/_contextmenu.less');
 @import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/ios/_about.less');
+@import url('../../../../common/mobile/resources/less/ios/_color-schema.less');
+
 
 @import url('ios/_icons.less');
 @import url('app-common');

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

@@ -66,6 +66,7 @@ input, textarea {
 @import url('../../../../common/mobile/resources/less/material/_contextmenu.less');
 @import url('../../../../common/mobile/resources/less/material/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/material/_about.less');
+@import url('../../../../common/mobile/resources/less/material/_color-schema.less');
 
 @import url('material/_search.less');
 @import url('material/_icons.less');