From 99affc5cfdf3a6905daa40f8fc72970c6aa1ba1e Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 9 Oct 2019 14:24:26 +0300 Subject: [PATCH] [SSE] Custom Color (Edit Cell) --- .../mobile/lib/component/HsbColorPicker.js | 3 + .../mobile/app/controller/edit/EditCell.js | 8 +- .../mobile/app/template/EditCell.template | 17 +++ .../mobile/app/view/edit/EditCell.js | 121 +++++++++++++++++- 4 files changed, 142 insertions(+), 7 deletions(-) diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js index 27327ec7f..1f201187a 100644 --- a/apps/common/mobile/lib/component/HsbColorPicker.js +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -84,6 +84,9 @@ define([ if (!me.currentColor) { me.currentColor = me.options.color; } + if (me.currentColor === 'transparent') { + me.currentColor = 'ffffff'; + } var colorRgb = me.colorHexToRgb(me.currentColor); me.currentHsl = me.colorRgbToHsl(colorRgb[0],colorRgb[1],colorRgb[2]); me.currentHsb = me.colorHslToHsb(me.currentHsl[0],me.currentHsl[1],me.currentHsl[2]); diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js index 204c4be27..b34602d99 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js @@ -215,11 +215,9 @@ define([ }, initBorderColorPage: function () { - var me = this, - palette = new Common.UI.ThemeColorPalette({ - el: $('.page[data-page=edit-border-color] .page-content') - }); - + var me = this; + me.getView('EditCell').showBorderColorPage(); + var palette = me.getView('EditCell').paletteBorderColor; if (palette) { palette.select(_borderInfo.color); palette.on('select', _.bind(function (palette, color) { diff --git a/apps/spreadsheeteditor/mobile/app/template/EditCell.template b/apps/spreadsheeteditor/mobile/app/template/EditCell.template index 93435f351..765b5be16 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditCell.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditCell.template @@ -845,4 +845,21 @@ + + + + +
+
+
+
<% if (!android) { %><%= scope.textBack %><% } %>
+
<%= scope.textCustomColor %>
+
<% if (phone) { %><% } %>
+
+
+
+
+ +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js index 9cd75d3a9..4d31ef663 100644 --- a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js +++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js @@ -45,7 +45,8 @@ define([ 'jquery', 'underscore', 'backbone', - 'common/mobile/lib/component/ThemeColorPalette' + 'common/mobile/lib/component/ThemeColorPalette', + 'common/mobile/lib/component/HsbColorPicker' ], function (editTemplate, $, _, Backbone) { 'use strict'; @@ -234,28 +235,142 @@ define([ }, showTextColor: function () { + var me = this; this.showPage('#edit-text-color', true); this.paletteTextColor = new Common.UI.ThemeColorPalette({ el: $('.page[data-page=edit-text-color] .page-content') }); + this.paletteTextColor.on('customcolor', function () { + me.showCustomTextColor(); + }); + var template = _.template(['
', + '', + '
'].join('')); + $('.page[data-page=edit-text-color] .page-content').append(template({scope: this})); + $('#edit-cell-add-custom-text-color').single('click', _.bind(this.showCustomTextColor, this)); Common.Utils.addScrollIfNeed('.page[data-page=edit-text-color]', '.page[data-page=edit-text-color] .page-content'); this.fireEvent('page:show', [this, '#edit-text-color']); }, + showCustomTextColor: function () { + var me = this, + selector = '#edit-cell-custom-color-view'; + me.showPage(selector, true); + + me.customTextColorPicker = new Common.UI.HsbColorPicker({ + el: $('.page[data-page=edit-cell-custom-color] .page-content'), + color: me.paletteTextColor.currentColor + }); + me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) { + me.paletteTextColor.addNewDynamicColor(colorPicker, color); + SSE.getController('EditContainer').rootView.router.back(); + }); + + me.fireEvent('page:show', [me, selector]); + }, + showFillColor: function () { + var me = this; this.showPage('#edit-fill-color', true); this.paletteFillColor = new Common.UI.ThemeColorPalette({ el: $('.page[data-page=edit-fill-color] .page-content'), transparent: true }); + this.paletteFillColor.on('customcolor', function () { + me.showCustomFillColor(); + }); + var template = _.template(['
', + '', + '
'].join('')); + $('.page[data-page=edit-fill-color] .page-content').append(template({scope: this})); + $('#edit-cell-add-custom-color').single('click', _.bind(this.showCustomFillColor, this)); Common.Utils.addScrollIfNeed('.page[data-page=edit-fill-color]', '.page[data-page=edit-fill-color] .page-content'); this.fireEvent('page:show', [this, '#edit-fill-color']); }, + showCustomFillColor: function () { + var me = this, + selector = '#edit-cell-custom-color-view'; + me.showPage(selector, true); + + me.customFillColorPicker = new Common.UI.HsbColorPicker({ + el: $('.page[data-page=edit-cell-custom-color] .page-content'), + color: me.paletteFillColor.currentColor + }); + me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) { + me.paletteFillColor.addNewDynamicColor(colorPicker, color); + SSE.getController('EditContainer').rootView.router.back(); + }); + + me.fireEvent('page:show', [me, selector]); + }, + + showBorderColorPage: function () { + var me = this; + this.paletteBorderColor = new Common.UI.ThemeColorPalette({ + el: $('.page[data-page=edit-border-color] .page-content') + }); + this.paletteBorderColor.on('customcolor', function () { + me.showCustomBorderColor(); + }); + var template = _.template(['
', + '', + '
'].join('')); + $('.page[data-page=edit-border-color] .page-content').append(template({scope: this})); + $('#edit-cell-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this)); + }, + + showCustomBorderColor: function () { + var me = this, + selector = '#edit-cell-custom-color-view'; + me.showPage(selector, true); + + me.customBorderColorPicker = new Common.UI.HsbColorPicker({ + el: $('.page[data-page=edit-cell-custom-color] .page-content'), + color: me.paletteBorderColor.currentColor + }); + me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) { + me.paletteBorderColor.addNewDynamicColor(colorPicker, color); + SSE.getController('EditContainer').rootView.router.back(); + }); + + me.fireEvent('page:show', [me, selector]); + }, + textBack: 'Back', textFonts: 'Fonts', textTextColor: 'Text Color', @@ -305,7 +420,9 @@ define([ textYen: 'Yen', textCharacterBold: 'B', textCharacterItalic: 'I', - textCharacterUnderline: 'U' + textCharacterUnderline: 'U', + textAddCustomColor: 'Add Custom Color', + textCustomColor: 'Custom Color' } })(), SSE.Views.EditCell || {})) });