From 1ae45b6f2a8e14aa2c92f40f37fdf99c1d0a70b7 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 15 Apr 2019 17:42:17 +0300 Subject: [PATCH] [de mobile] added color schemes --- .../resources/less/ios/_color-schema.less | 27 +++++++++++++++ .../less/material/_color-schema.less | 27 +++++++++++++++ .../mobile/app/controller/Settings.js | 34 +++++++++++++++++-- .../mobile/app/template/Settings.template | 32 +++++++++++++++++ .../mobile/app/view/Settings.js | 4 ++- .../mobile/resources/css/app-ios.css | 28 +++++++++++++++ .../mobile/resources/css/app-material.css | 29 +++++++++++++++- .../mobile/resources/less/app-ios.less | 1 + .../mobile/resources/less/app-material.less | 1 + 9 files changed, 179 insertions(+), 4 deletions(-) create mode 100644 apps/common/mobile/resources/less/ios/_color-schema.less create mode 100644 apps/common/mobile/resources/less/material/_color-schema.less diff --git a/apps/common/mobile/resources/less/ios/_color-schema.less b/apps/common/mobile/resources/less/ios/_color-schema.less new file mode 100644 index 000000000..0e5581f32 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_color-schema.less @@ -0,0 +1,27 @@ +.color-schemes-menu { + cursor: pointer; + display: block; + background-color: #fff; + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: flex-start; + padding-left: 16px; + } + .color-schema-block { + min-width: 150px; + display: flex; + } + .color { + min-width: 26px; + min-height: 26px; + flex-grow: 1; + margin: 0 1px 0 0; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; + } + .text { + margin-left: 20px; + color: #212121; + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_color-schema.less b/apps/common/mobile/resources/less/material/_color-schema.less new file mode 100644 index 000000000..0e5581f32 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_color-schema.less @@ -0,0 +1,27 @@ +.color-schemes-menu { + cursor: pointer; + display: block; + background-color: #fff; + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: flex-start; + padding-left: 16px; + } + .color-schema-block { + min-width: 150px; + display: flex; + } + .color { + min-width: 26px; + min-height: 26px; + flex-grow: 1; + margin: 0 1px 0 0; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; + } + .text { + margin-left: 20px; + color: #212121; + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/app/controller/Settings.js b/apps/documenteditor/mobile/app/controller/Settings.js index 62fcfbe32..29f878b17 100644 --- a/apps/documenteditor/mobile/app/controller/Settings.js +++ b/apps/documenteditor/mobile/app/controller/Settings.js @@ -82,7 +82,8 @@ define([ _licInfo, _canReview = false, _isReviewOnly = false, - _fileKey; + _fileKey, + templateInsert; var mm2Cm = function(mm) { return parseFloat((mm/10.).toFixed(2)); @@ -130,6 +131,7 @@ define([ me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onApiDocumentName, me)); me.api.asc_registerCallback('asc_onDocSize', _.bind(me.onApiPageSize, me)); me.api.asc_registerCallback('asc_onPageOrient', _.bind(me.onApiPageOrient, me)); + me.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(me.onSendThemeColorSchemes, me)); }, onLaunch: function () { @@ -224,6 +226,9 @@ define([ } else if ('#settings-advanced-view' == pageId) { me.initPageAdvancedSettings(); Common.Utils.addScrollIfNeed('.page[data-page=settings-advanced-view]', '.page[data-page=settings-advanced-view] .page-content'); + } else if ('#color-schemes-view' == pageId) { + me.initPageColorSchemes(); + Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content'); } else { $('#settings-readermode input:checkbox').attr('checked', Common.SharedSettings.get('readerMode')); $('#settings-spellcheck input:checkbox').attr('checked', Common.localStorage.getBool("de-mobile-spellcheck", false)); @@ -239,7 +244,32 @@ define([ } }, - initPageAdvancedSettings: function () { + 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 + "
"; + 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 + "" + } + templateInsert = templateInsert + "" + schema.get_name() + "
"; + }, this); + }, + + onColorSchemaClick: function(event) { + if (this.api) { + var ind = $(event.currentTarget).children('input').val(); + this.api.ChangeColorScheme(ind); + } + }, + + initPageAdvancedSettings: function() { var me = this, $unitMeasurement = $('.page[data-page=settings-advanced-view] input:radio[name=unit-of-measurement]'); $unitMeasurement.single('change', _.bind(me.unitMeasurementChange, me)); diff --git a/apps/documenteditor/mobile/app/template/Settings.template b/apps/documenteditor/mobile/app/template/Settings.template index b0f75d806..b29f3b986 100644 --- a/apps/documenteditor/mobile/app/template/Settings.template +++ b/apps/documenteditor/mobile/app/template/Settings.template @@ -111,6 +111,18 @@ +
  • + +
    +
    + +
    +
    +
    <%= scope.textColorSchemes %>
    +
    +
    +     +
  • @@ -658,6 +670,26 @@
    + + + + + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textColorSchemes %>
    +
    +
    +
    +
    +
    +
    + +
    +
    diff --git a/apps/documenteditor/mobile/app/view/Settings.js b/apps/documenteditor/mobile/app/view/Settings.js index e0c329237..8adba6250 100644 --- a/apps/documenteditor/mobile/app/view/Settings.js +++ b/apps/documenteditor/mobile/app/view/Settings.js @@ -125,6 +125,7 @@ define([ } else { $layour.find('#settings-document').hide(); $layour.find('#settings-advanced').hide(); + $layour.find('#color-schemes').hide(); $layour.find('#settings-spellcheck').hide(); $layour.find('#settings-orthography').hide(); } @@ -283,7 +284,8 @@ define([ textUnitOfMeasurement: 'Unit of Measurement', textCentimeter: 'Centimeter', textPoint: 'Point', - textInch: 'Inch' + textInch: 'Inch', + textColorSchemes: 'Color Schemes' } })(), DE.Views.Settings || {})) diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index e4e902ab9..af9f6c188 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6830,3 +6830,31 @@ html.pixel-ratio-3 .numbers li { max-height: 100%; overflow: auto; } + +.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 { + min-width: 150px; + display: flex; +} +.color-schemes-menu .color { + min-width: 26px; + min-height: 26px; + flex-grow: 1; + margin: 0 1px 0 0; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; +} +.color-schemes-menu .text { + margin-left: 20px; + color: #212121; +} diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index 7d3b21c84..50fc7fe4b 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5836,7 +5836,34 @@ html.phone .document-menu .list-block .item-link { margin-right: 5px; } .about .logo { - background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center; + background: url('../../../../common/mobile/resources/img/about/onlyoffice.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 { + min-width: 150px; + display: flex; +} +.color-schemes-menu .color { + min-width: 26px; + min-height: 26px; + flex-grow: 1; + margin: 0 1px 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; diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less index 2c7ace91f..26ec02ce6 100644 --- a/apps/documenteditor/mobile/resources/less/app-ios.less +++ b/apps/documenteditor/mobile/resources/less/app-ios.less @@ -40,6 +40,7 @@ @import url('../../../../../vendor/framework7/src/less/ios/notifications.less'); //@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less'); @import url('../../../../../vendor/framework7/src/less/ios/disabled.less'); +@import url('../../../../common/mobile/resources/less/material/_color-schema.less'); // Disable text select * { diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index 6b3372451..87cbc32a5 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -53,6 +53,7 @@ @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');