From cf1476848204b4aa4bf030e9e3fe9cf345eb8499 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 3 Oct 2019 13:40:56 +0300 Subject: [PATCH] [Common mobile] Custom Color --- .../mobile/lib/component/HsbColorPicker.js | 329 ++++++++++++++++++ .../mobile/lib/component/ThemeColorPalette.js | 302 ++++------------ .../resources/less/ios/_color-palette.less | 131 +++---- .../less/material/_color-palette.less | 130 ++++--- .../mobile/app/template/EditShape.template | 18 +- .../mobile/app/view/edit/EditShape.js | 42 ++- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- .../mobile/resources/css/app-ios.css | 26 +- .../mobile/resources/css/app-material.css | 26 +- 12 files changed, 695 insertions(+), 413 deletions(-) create mode 100644 apps/common/mobile/lib/component/HsbColorPicker.js diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js new file mode 100644 index 000000000..af2e85c13 --- /dev/null +++ b/apps/common/mobile/lib/component/HsbColorPicker.js @@ -0,0 +1,329 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * HsbColorPicker.js + * + * Created by Julia Svinareva on 02/10/19 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +if (Common === undefined) + var Common = {}; + +Common.UI = Common.UI || {}; + +define([ + 'jquery', + 'underscore', + 'backbone' +], function ($, _, Backbone) { + 'use strict'; + + Common.UI.HsbColorPicker = Backbone.View.extend(_.extend({ + options: { + color: '#000000' + }, + template: _.template([ + '
', + '
', + '
', + '
', + '<%=circlesColors%>', + '
', + '
', + '
', + '
', + '
' + ].join('')), + + initialize : function(options) { + var me = this, + el = $(me.el); + me.currentColor = options.color; + if(_.isObject(me.currentColor)) { + me.currentColor = me.currentColor.color; + } + if (!me.currentColor) { + me.currentColor = me.options.color; + } + 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]); + me.currentHue = []; + + me.options = _({}).extend(me.options, options); + me.render(); + }, + + render: function () { + var me = this; + + var total = 256, + circles = ''; + for (var i = total; i > 0; i -= 1) { + var angle = i * Math.PI / (total / 2); + var hue = 360 / total * i; + circles += ''; + } + + (me.$el || $(me.el)).html(me.template({ + circlesColors: circles, + scope: me, + phone: Common.SharedSettings.get('phone') + })); + + this.afterRender(); + + return me; + }, + + afterRender: function () { + this.$colorPicker = $('.color-picker-wheel'); + this.$colorPicker.on({ + 'touchstart': this.handleTouchStart.bind(this), + 'touchmove': this.handleTouchMove.bind(this), + 'touchend': this.handleTouchEnd.bind(this) + }); + $('#add-new-color').single('click', _.bind(this.onClickAddNewColor, this)); + this.updateCustomColor(); + }, + + colorHexToRgb: function(hex) { + var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) { return (r + r + g + g + b + b)}); + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); + return result + ? result.slice(1).map(function (n) { return parseInt(n, 16)}) + : null; + }, + + colorRgbToHsl: function(r, g, b) { + r /= 255; + g /= 255; + b /= 255; + var max = Math.max(r, g, b); + var min = Math.min(r, g, b); + var d = max - min; + var h; + if (d === 0) h = 0; + else if (max === r) h = ((g - b) / d) % 6; + else if (max === g) h = (b - r) / d + 2; + else if (max === b) h = (r - g) / d + 4; + var l = (min + max) / 2; + var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); + if (h < 0) h = 360 / 60 + h; + return [h * 60, s, l]; + }, + + colorHslToHsb: function(h, s, l) { + var HSB = {h: h, s: 0, b: 0}; + var HSL = {h: h, s: s, l: l}; + var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l); + HSB.b = HSL.l + t; + HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s; + return [HSB.h, HSB.s, HSB.b]; + }, + + colorHsbToHsl: function(h, s, b) { + var HSL = {h: h, s: 0, l: 0}; + var HSB = { h: h, s: s, b: b }; + HSL.l = (2 - HSB.s) * HSB.b / 2; + HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s; + return [HSL.h, HSL.s, HSL.l]; + }, + + colorHslToRgb: function(h, s, l) { + var c = (1 - Math.abs(2 * l - 1)) * s; + var hp = h / 60; + var x = c * (1 - Math.abs((hp % 2) - 1)); + var rgb1; + if (Number.isNaN(h) || typeof h === 'undefined') { + rgb1 = [0, 0, 0]; + } else if (hp <= 1) rgb1 = [c, x, 0]; + else if (hp <= 2) rgb1 = [x, c, 0]; + else if (hp <= 3) rgb1 = [0, c, x]; + else if (hp <= 4) rgb1 = [0, x, c]; + else if (hp <= 5) rgb1 = [x, 0, c]; + else if (hp <= 6) rgb1 = [c, 0, x]; + var m = l - (c / 2); + var result = rgb1.map(function (n) { + return Math.max(0, Math.min(255, Math.round(255 * (n + m)))); + }); + return result; + }, + + colorRgbToHex: function(r, g, b) { + var result = [r, g, b].map( function (n) { + var hex = n.toString(16); + return hex.length === 1 ? ('0' + hex) : hex; + }).join(''); + return ('#' + result); + }, + + setHueFromWheelCoords: function (x, y) { + var wheelCenterX = this.wheelRect.left + this.wheelRect.width / 2; + var wheelCenterY = this.wheelRect.top + this.wheelRect.height / 2; + var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX); + var angleDeg = angleRad * 180 / Math.PI + 90; + if (angleDeg < 0) angleDeg += 360; + angleDeg = 360 - angleDeg; + this.currentHsl[0] = angleDeg; + this.updateCustomColor(); + }, + + setSBFromSpecterCoords: function (x, y) { + var s = (x - this.specterRect.left) / this.specterRect.width; + var b = (y - this.specterRect.top) / this.specterRect.height; + s = Math.max(0, Math.min(1, s)); + b = 1 - Math.max(0, Math.min(1, b)); + + this.currentHsb = [this.currentHsl[0], s, b]; + this.currentHsl = this.colorHsbToHsl(this.currentHsl[0], s, b); + this.updateCustomColor(); + }, + + handleTouchStart: function (e) { + if (this.isMoved || this.isTouched) return; + this.touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; + this.touchCurrentX = this.touchStartX; + this.touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; + this.touchCurrentY = this.touchStartY; + var $targetEl = $(e.target); + this.wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0; + this.wheelIsTouched = $targetEl.closest('circle').length > 0; + this.specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0; + if (!this.specterHandleIsTouched) { + this.specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0; + } + if (this.wheelIsTouched) { + this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect(); + this.setHueFromWheelCoords(this.touchStartX, this.touchStartY); + } + if (this.specterIsTouched) { + this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); + this.setSBFromSpecterCoords(this.touchStartX, this.touchStartY); + } + if (this.specterHandleIsTouched || this.specterIsTouched) { + this.$el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed'); + } + }, + + handleTouchMove: function (e) { + if (!(this.wheelIsTouched || this.wheelHandleIsTouched) && !(this.specterIsTouched || this.specterHandleIsTouched)) return; + this.touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; + this.touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; + e.preventDefault(); + if (!this.isMoved) { + // First move + this.isMoved = true; + if (this.wheelHandleIsTouched) { + this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect(); + } + if (this.specterHandleIsTouched) { + this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); + } + } + if (this.wheelIsTouched || this.wheelHandleIsTouched) { + this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY); + } + if (this.specterIsTouched || this.specterHandleIsTouched) { + this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY); + } + }, + + handleTouchEnd: function () { + this.isMoved = false; + if (this.specterIsTouched || this.specterHandleIsTouched) { + this.$el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed'); + } + this.wheelIsTouched = false; + this.wheelHandleIsTouched = false; + this.specterIsTouched = false; + this.specterHandleIsTouched = false; + }, + + updateCustomColor: function (first) { + var specterWidth = this.$el.find('.color-picker-sb-spectrum')[0].offsetWidth, + specterHeight = this.$el.find('.color-picker-sb-spectrum')[0].offsetHeight, + wheelSize = this.$el.find('.color-picker-wheel')[0].offsetWidth, + wheelHalfSize = wheelSize / 2, + angleRad = this.currentHsl[0] * Math.PI / 180, + handleSize = wheelSize / 6, + handleHalfSize = handleSize / 2, + tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize, + tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize; + this.$el.find('.color-picker-wheel-handle') + .css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'}) + .css({transform: 'translate(' + tX + 'px,' + tY + 'px)'}); + + this.$el.find('.color-picker-sb-spectrum') + .css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'}); + + if (this.currentHsb && this.currentHsl) { + this.$el.find('.color-picker-sb-spectrum-handle') + .css({'background-color': 'hsl(' + this.currentHsl[0] + ', ' + (this.currentHsl[1] * 100) + '%,' + (this.currentHsl[2] * 100) + '%)'}) + .css({transform: 'translate(' + specterWidth * this.currentHsb[1] + 'px, ' + specterHeight * (1 - this.currentHsb[2]) + 'px)'}); + } + var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]); + this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]); + $('.color-preview').css({'background-color': this.currentColor}); + + }, + + onClickAddNewColor: function() { + var color = this.currentColor; + if (color) { + if (color.charAt(0) === '#') { + color = color.substr(1); + } + this.trigger('addcustomcolor', this, color); + } + }, + + textCustomColors: 'Custom Colors', + textAddNewColor: 'Add new color' + }, Common.UI.HsbColorPicker || {})); +}); \ No newline at end of file diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js index 70687ca51..374637ac0 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.js +++ b/apps/common/mobile/lib/component/ThemeColorPalette.js @@ -97,20 +97,23 @@ define([ '
', '', '', - '
  • ', + '<% if (dynamicColors.length > 0) {%>', + '
  • ', '
    <%= me.textCustomColors %>
    ', '
    ', - '
    ', - '
    ', - '<%=circlesColors%>', - '
    ', - '
    ', - '
    ', - '
    ', + '
    ', + '<% _.each(dynamicColors, function(color, index) { %>', + '', + '<% }); %>', + '<% if (dynamicColors.length < me.options.dynamiccolors) { %>', + '<% for(var i = dynamicColors.length; i < me.options.dynamiccolors; i++) { %>', + '', + '<% } %>', + '<% } %>', '
    ', '
    ', - '
    ', '
    • ', + '<% } %>', '', '' ].join('')), @@ -148,40 +151,19 @@ define([ }); // custom color - if (!this.currentHsl) - this.currentHsl = []; - if (!this.currentHsb) - this.currentHsb = []; - if (!this.currentHue) - this.currentHue = []; - var total = 256, - circles = ''; - for (var i = total; i > 0; i -= 1) { - var angle = i * Math.PI / (total / 2); - var hue = 360 / total * i; - circles += ''; - } + this.dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); + this.dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : []; + $(me.el).append(me.template({ themeColors: themeColors, standartColors: standartColors, - circlesColors: circles + dynamicColors: me.dynamicColors })); - this.afterRender(); - return me; }, - afterRender: function () { - this.$colorPicker = $('.color-picker-wheel'); - this.$colorPicker.on({ - 'touchstart': this.handleTouchStart.bind(this), - 'touchmove': this.handleTouchMove.bind(this), - 'touchend': this.handleTouchEnd.bind(this) - }); - }, - isColor: function(val) { return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val); }, @@ -198,19 +180,18 @@ define([ el = $(me.el), $target = $(e.currentTarget); - el.find('.color-palette a').removeClass('active'); - $target.addClass('active'); - var color = $target.data('color').toString(), effectId = $target.data('effectid'); - me.currentColor = color; - - if (effectId) { - me.currentColor = {color: color, effectId: effectId}; + if (color !== 'empty') { + el.find('.color-palette a').removeClass('active'); + $target.addClass('active'); + me.currentColor = color; + if (effectId) { + me.currentColor = {color: color, effectId: effectId}; + } + me.trigger('select', me, me.currentColor); } - - me.trigger('select', me, me.currentColor); }, select: function(color) { @@ -231,25 +212,15 @@ define([ } else if (! _.isUndefined(color.effectValue)) { el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active'); } - this.currentHsl = this.colorHexToRgb(color.color); } else { if (/#?[a-fA-F0-9]{6}/.test(color)) { color = /#?([a-fA-F0-9]{6})/.exec(color)[1]; } - if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1) { - el.find('.standart-colors a[data-color=' + color + ']').addClass('active'); - } else { - el.find('.custom-colors a[data-color=' + color + ']').addClass('active'); + if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1 || _.indexOf(this.dynamicColors, color) > -1) { + el.find('.color-palette a[data-color=' + color + ']').addClass('active'); } - this.currentHsl = this.colorHexToRgb(color); } - if (!this.currentHsl) { - this.currentHsl = this.colorHexToRgb('000000'); - } - this.currentHsl = this.colorRgbToHsl(...this.currentHsl); - this.currentHsb = this.colorHslToHsb(...this.currentHsl); - this.updateCustomColor(true); }, @@ -257,195 +228,52 @@ define([ $(this.el).find('.color-palette a').removeClass('active'); }, - colorHexToRgb(hex) { - var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) { return (r + r + g + g + b + b)}); - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); - return result - ? result.slice(1).map(function (n) { return parseInt(n, 16)}) - : null; + saveDynamicColor: function(color) { + this.isDynamicColors = false; + var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom'; + var colors = Common.localStorage.getItem(key_name); + colors = colors ? colors.split(',') : []; + if (colors.length > 0) { + this.isDynamicColors = true; + } + if (colors.push(color) > this.options.dynamiccolors) colors.shift(); + this.dynamicColors = colors; + Common.localStorage.setItem(key_name, colors.join().toUpperCase()); }, - colorRgbToHsl(r, g, b) { - r /= 255; // eslint-disable-line - g /= 255; // eslint-disable-line - b /= 255; // eslint-disable-line - var max = Math.max(r, g, b); - var min = Math.min(r, g, b); - var d = max - min; - var h; - if (d === 0) h = 0; - else if (max === r) h = ((g - b) / d) % 6; - else if (max === g) h = (b - r) / d + 2; - else if (max === b) h = (r - g) / d + 4; - var l = (min + max) / 2; - var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); - if (h < 0) h = 360 / 60 + h; - return [h * 60, s, l]; - }, - - colorHslToHsb(h, s, l) { - var HSB = { - h, - s: 0, - b: 0, - }; - var HSL = {h, s, l}; - var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l); - HSB.b = HSL.l + t; - HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s; - return [HSB.h, HSB.s, HSB.b]; - }, - - colorHsbToHsl(h, s, b) { - var HSL = { - h, - s: 0, - l: 0, - }; - var HSB = { h, s, b }; - HSL.l = (2 - HSB.s) * HSB.b / 2; - HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s; - return [HSL.h, HSL.s, HSL.l]; - }, - - colorHslToRgb(h, s, l) { - var c = (1 - Math.abs(2 * l - 1)) * s; - var hp = h / 60; - var x = c * (1 - Math.abs((hp % 2) - 1)); - var rgb1; - if (Number.isNaN(h) || typeof h === 'undefined') { - rgb1 = [0, 0, 0]; - } else if (hp <= 1) rgb1 = [c, x, 0]; - else if (hp <= 2) rgb1 = [x, c, 0]; - else if (hp <= 3) rgb1 = [0, c, x]; - else if (hp <= 4) rgb1 = [0, x, c]; - else if (hp <= 5) rgb1 = [x, 0, c]; - else if (hp <= 6) rgb1 = [c, 0, x]; - var m = l - (c / 2); - var result = rgb1.map(function (n) { - return Math.max(0, Math.min(255, Math.round(255 * (n + m)))); + updateDynamicColors: function() { + var me = this; + var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom'); + dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : []; + if (!this.isDynamicColors) { + var template = _.template(['
  • ', + '
    ' + me.textCustomColors + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '
    • '].join('')); + $(this.el).find('.color-palette ul').append(template); + } + var templateColors = ''; + _.each(dynamicColors, function(color) { + templateColors += ''; }); - return result; - }, - - colorRgbToHex(r, g, b) { - var result = [r, g, b].map( function (n) { - var hex = n.toString(16); - return hex.length === 1 ? ('0' + hex) : hex; - }).join(''); - return ('#' + result); - }, - - setHueFromWheelCoords: function (x, y) { - var wheelCenterX = this.wheelRect.left + this.wheelRect.width / 2; - var wheelCenterY = this.wheelRect.top + this.wheelRect.height / 2; - var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX); - var angleDeg = angleRad * 180 / Math.PI + 90; - if (angleDeg < 0) angleDeg += 360; - angleDeg = 360 - angleDeg; - this.currentHsl[0] = angleDeg; - this.updateCustomColor(); - }, - - setSBFromSpecterCoords: function (x, y) { - var s = (x - this.specterRect.left) / this.specterRect.width; - var b = (y - this.specterRect.top) / this.specterRect.height; - s = Math.max(0, Math.min(1, s)); - b = 1 - Math.max(0, Math.min(1, b)); - - this.currentHsb = [this.currentHsl[0], s, b]; - this.currentHsl = this.colorHsbToHsl(...this.currentHsb); - this.updateCustomColor(); - }, - - handleTouchStart: function (e) { - this.clearSelection(); - if (this.isMoved || this.isTouched) return; - this.touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; - this.touchCurrentX = this.touchStartX; - this.touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; - this.touchCurrentY = this.touchStartY; - var $targetEl = $(e.target); - this.wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0; - this.wheelIsTouched = $targetEl.closest('circle').length > 0; - this.specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0; - if (!this.specterHandleIsTouched) { - this.specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0; - } - if (this.wheelIsTouched) { - this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect(); - this.setHueFromWheelCoords(this.touchStartX, this.touchStartY); - } - if (this.specterIsTouched) { - this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); - this.setSBFromSpecterCoords(this.touchStartX, this.touchStartY); - } - if (this.specterHandleIsTouched || this.specterIsTouched) { - this.$el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed'); - } - }, - - handleTouchMove: function (e) { - if (!(this.wheelIsTouched || this.wheelHandleIsTouched) && !(this.specterIsTouched || this.specterHandleIsTouched)) return; - this.touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; - this.touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; - e.preventDefault(); - if (!this.isMoved) { - // First move - this.isMoved = true; - if (this.wheelHandleIsTouched) { - this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect(); - } - if (this.specterHandleIsTouched) { - this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); + if (dynamicColors.length < this.options.dynamiccolors) { + for (var i = dynamicColors.length; i < this.options.dynamiccolors; i++) { + templateColors += ''; } } - if (this.wheelIsTouched || this.wheelHandleIsTouched) { - this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY); - } - if (this.specterIsTouched || this.specterHandleIsTouched) { - this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY); - } + $('.dynamic-colors .item-inner').html(_.template(templateColors)); + $(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this)); }, - handleTouchEnd: function () { - this.isMoved = false; - if (this.specterIsTouched || this.specterHandleIsTouched) { - this.$el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed'); - } - this.wheelIsTouched = false; - this.wheelHandleIsTouched = false; - this.specterIsTouched = false; - this.specterHandleIsTouched = false; - }, - - updateCustomColor: function (firstSelect) { - var specterWidth = this.$el.find('.color-picker-sb-spectrum')[0].offsetWidth, - specterHeight = this.$el.find('.color-picker-sb-spectrum')[0].offsetHeight, - wheelSize = this.$el.find('.color-picker-wheel')[0].offsetWidth, - wheelHalfSize = wheelSize / 2, - angleRad = this.currentHsl[0] * Math.PI / 180, - handleSize = wheelSize / 6, - handleHalfSize = handleSize / 2, - tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize, - tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize; - this.$el.find('.color-picker-wheel-handle') - .css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'}) - .css({transform: 'translate(' + tX + 'px,' + tY + 'px)'}); - - this.$el.find('.color-picker-sb-spectrum') - .css({'background-color': 'hsl(' + this.currentHsl[0] + ', 100%, 50%)'}); - - if (this.currentHsb && this.currentHsl) { - this.$el.find('.color-picker-sb-spectrum-handle') - .css({'background-color': 'hsl(' + this.currentHsl[0] + ', ' + (this.currentHsl[1] * 100) + '%,' + (this.currentHsl[2] * 100) + '%)'}) - .css({transform: 'translate(' + specterWidth * this.currentHsb[1] + 'px, ' + specterHeight * (1 - this.currentHsb[2]) + 'px)'}); - } - - if (!firstSelect) { - var color = this.colorHslToRgb(...this.currentHsl); - this.currentColor = this.colorRgbToHex(...color); - this.trigger('select', this, this.currentColor); + addNewDynamicColor: function(colorPicker, color) { + if (color) { + this.saveDynamicColor(color); + this.updateDynamicColors(); + this.trigger('select', this, color); + this.select(color); } }, diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index c986a5bef..0a8e9997a 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -35,76 +35,89 @@ } } - .standart-colors { + .standart-colors, .dynamic-colors { .item-inner { overflow: visible; } } +} - .custom-colors { - .color-picker-wheel { - position: relative; - width: 330px; - max-width: 100%; +.custom-colors { + .item-link .item-inner { + background-image: none; + padding-right: 15px; + } + .color-picker-wheel { + position: relative; + width: 290px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + &.phone { + width: 210px; + } + + svg { + width: 100%; height: auto; - font-size: 0; - margin-left: auto; - margin-right: auto; - svg { - width: 100%; - height: auto; - } - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); + } + + .color-picker-wheel-handle { + width: calc(100% / 6); + height: calc(100% / 6); + position: absolute; + box-sizing: border-box; + border: 2px solid #fff; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); + background: red; + border-radius: 50%; + left: 0; + top: 0; + } + + .color-picker-sb-spectrum { + background-color: #000; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); + position: relative; + width: 45%; + height: 45%; + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + position: absolute; + } + + .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; + + &:after { + background-color: inherit; + content: ''; position: absolute; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0,0,0,0.5); - background: red; + width: 16px; + height: 16px; + border: 1px solid #fff; border-radius: 50%; - left: 0; - top: 0; - } - .color-picker-sb-spectrum { - background-color: #000; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); - position: relative; - width: 45%; - height: 45%; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); + box-sizing: border-box; left: 50%; top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; + transform: translate(-50%, -50%); + transition: 150ms; + transition-property: transform; + transform-origin: center; } - .color-picker-sb-spectrum-handle { - width: 4px; - height: 4px; - position: absolute; - left: -2px; - top: -2px; - z-index: 1; - &:after { - background-color: inherit; - content: ''; - position: absolute; - width: 16px; - height: 16px; - border: 1px solid #fff; - border-radius: 50%; - box-shadow: 0px 0px 2px rgba(0,0,0,0.5); - box-sizing: border-box; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - transition: 150ms; - transition-property: transform; - transform-origin: center; - } - &.color-picker-sb-spectrum-handle-pressed:after { - transform: scale(1.5) translate(-33.333%, -33.333%); - } + + &.color-picker-sb-spectrum-handle-pressed:after { + transform: scale(1.5) translate(-33.333%, -33.333%); } } } -} \ No newline at end of file +} diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index 14e5e00c3..3316cc0c9 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -35,7 +35,7 @@ } } - .standart-colors { + .standart-colors, .dynamic-colors { .item-inner { overflow: visible; } @@ -45,69 +45,83 @@ border-radius: 0; } - .custom-colors { - .color-picker-wheel { - position: relative; - width: 330px; - max-width: 100%; +} + +.custom-colors { + .item-link .item-inner { + background-image: none; + padding-right: 15px; + } + .color-picker-wheel { + position: relative; + width: 290px; + max-width: 100%; + height: auto; + font-size: 0; + margin-left: auto; + margin-right: auto; + &.phone { + width: 210px; + } + + svg { + width: 100%; height: auto; - font-size: 0; - margin-left: auto; - margin-right: auto; - svg { - width: 100%; - height: auto; - } - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); + } + + .color-picker-wheel-handle { + width: calc(100% / 6); + height: calc(100% / 6); + position: absolute; + box-sizing: border-box; + border: 2px solid #fff; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); + background: red; + border-radius: 50%; + left: 0; + top: 0; + } + + .color-picker-sb-spectrum { + background-color: #000; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); + position: relative; + width: 45%; + height: 45%; + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + position: absolute; + } + + .color-picker-sb-spectrum-handle { + width: 4px; + height: 4px; + position: absolute; + left: -2px; + top: -2px; + z-index: 1; + + &:after { + background-color: inherit; + content: ''; position: absolute; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0,0,0,0.5); - background: red; + width: 16px; + height: 16px; + border: 1px solid #fff; border-radius: 50%; - left: 0; - top: 0; - } - .color-picker-sb-spectrum { - background-color: #000; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); - position: relative; - width: 45%; - height: 45%; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); + box-sizing: border-box; left: 50%; top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; + transform: translate(-50%, -50%); + transition: 150ms; + transition-property: transform; + transform-origin: center; } - .color-picker-sb-spectrum-handle { - width: 4px; - height: 4px; - position: absolute; - left: -2px; - top: -2px; - z-index: 1; - &:after { - background-color: inherit; - content: ''; - position: absolute; - width: 16px; - height: 16px; - border: 1px solid #fff; - border-radius: 50%; - box-shadow: 0px 0px 2px rgba(0,0,0,0.5); - box-sizing: border-box; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - transition: 150ms; - transition-property: transform; - transform-origin: center; - } - &.color-picker-sb-spectrum-handle-pressed:after { - transform: scale(1.5) translate(-33.333%, -33.333%); - } + + &.color-picker-sb-spectrum-handle-pressed:after { + transform: scale(1.5) translate(-33.333%, -33.333%); } } } diff --git a/apps/documenteditor/mobile/app/template/EditShape.template b/apps/documenteditor/mobile/app/template/EditShape.template index f9bb94f59..27f48849b 100644 --- a/apps/documenteditor/mobile/app/template/EditShape.template +++ b/apps/documenteditor/mobile/app/template/EditShape.template @@ -448,4 +448,20 @@ - \ No newline at end of file + + + +
    +
    +
    +
    <% if (!android) { %><%= scope.textBack %><% } %>
    +
    <%= scope.textCustomColor %>
    +
    <% if (phone) { %><% } %>
    +
    +
    +
    +
    + +
    +
    +
    diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js index 85f601b0e..53a51b683 100644 --- a/apps/documenteditor/mobile/app/view/edit/EditShape.js +++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js @@ -44,7 +44,8 @@ define([ 'text!documenteditor/mobile/app/template/EditShape.template', 'jquery', 'underscore', - 'backbone' + 'backbone', + 'common/mobile/lib/component/HsbColorPicker' ], function (editTemplate, $, _, Backbone) { 'use strict'; @@ -144,6 +145,7 @@ define([ }, showStyle: function () { + var me = this; var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill'; this.showPage(selector, true); @@ -154,8 +156,22 @@ define([ el: $('#tab-shape-fill'), transparent: true }); - - // Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content'); + var template = _.template(['
    ', + '', + '
    '].join('')); + $('#tab-shape-fill').append(template({scope: this})); + $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomColor, this)); + Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content'); this.fireEvent('page:show', [this, selector]); }, @@ -185,6 +201,22 @@ define([ this.fireEvent('page:show', [this, selector]); }, + showCustomColor: function() { + var me = this, + selector = '#edit-shape-custom-color-view'; + me.showPage(selector, true); + + me.customColorPicker = new Common.UI.HsbColorPicker({ + el: $('.page[data-page=edit-shape-custom-color] .page-content'), + color: me.paletteFillColor.currentColor + }); + me.customColorPicker.on('addcustomcolor', function (colorPicker, color) { + me.paletteFillColor.addNewDynamicColor(colorPicker, color); + }); + + me.fireEvent('page:show', [me, selector]); + }, + textStyle: 'Style', textWrap: 'Wrap', textReplace: 'Replace', @@ -211,7 +243,9 @@ define([ textEffects: 'Effects', textSize: 'Size', textColor: 'Color', - textOpacity: 'Opacity' + textOpacity: 'Opacity', + textAddCustomColor: 'Add Custom Color', + textCustomColor: 'Custom Color' } })(), DE.Views.EditShape || {})) }); \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 9fe5f8d7a..9a6db93ee 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content { diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index ccec7b046..203aef742 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5809,26 +5809,34 @@ html.phone .document-menu .list-block .item-link { display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5840,7 +5848,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -5851,7 +5859,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5859,7 +5867,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5876,7 +5884,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content { diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 8af9052b4..0b9e4729f 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content { diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index a962db4d8..3a42eef46 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5809,26 +5809,34 @@ html.phone .document-menu .list-block .item-link { display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5840,7 +5848,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -5851,7 +5859,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5859,7 +5867,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5876,7 +5884,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content { diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 05de4bbc3..022df9ff5 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -6218,23 +6218,31 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -6246,7 +6254,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -6257,7 +6265,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -6265,7 +6273,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -6282,7 +6290,7 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content { diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index 27e044769..0ed5f42de 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -5819,26 +5819,34 @@ html.phone .document-menu .list-block .item-link { display: inline-block; overflow: visible; } -.color-palette .standart-colors .item-inner { +.color-palette .standart-colors .item-inner, +.color-palette .dynamic-colors .item-inner { overflow: visible; } .color-palette.list-block:last-child li:last-child a { border-radius: 0; } -.color-palette .custom-colors .color-picker-wheel { +.custom-colors .item-link .item-inner { + background-image: none; + padding-right: 15px; +} +.custom-colors .color-picker-wheel { position: relative; - width: 330px; + width: 290px; max-width: 100%; height: auto; font-size: 0; margin-left: auto; margin-right: auto; } -.color-palette .custom-colors .color-picker-wheel svg { +.custom-colors .color-picker-wheel.phone { + width: 210px; +} +.custom-colors .color-picker-wheel svg { width: 100%; height: auto; } -.color-palette .custom-colors .color-picker-wheel .color-picker-wheel-handle { +.custom-colors .color-picker-wheel .color-picker-wheel-handle { width: calc(16.66666667%); height: calc(16.66666667%); position: absolute; @@ -5850,7 +5858,7 @@ html.phone .document-menu .list-block .item-link { left: 0; top: 0; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum { background-color: #000; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); position: relative; @@ -5861,7 +5869,7 @@ html.phone .document-menu .list-block .item-link { transform: translate3d(-50%, -50%, 0); position: absolute; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle { width: 4px; height: 4px; position: absolute; @@ -5869,7 +5877,7 @@ html.phone .document-menu .list-block .item-link { top: -2px; z-index: 1; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after { background-color: inherit; content: ''; position: absolute; @@ -5886,7 +5894,7 @@ html.phone .document-menu .list-block .item-link { transition-property: transform; transform-origin: center; } -.color-palette .custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { +.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after { transform: scale(1.5) translate(-33.333%, -33.333%); } .about .page-content {