From dfc97aef99baba7542e0d681354d82a4960af71d Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Fri, 17 Nov 2023 15:38:18 +0100 Subject: [PATCH 1/3] refactor(utils): fix types GenColors - Convert ES5 function constructor to ES2015 class - Fix JSDoc tyles - Use `Math.floor(number)` instead of `parseInt(string)` to convert float number to integer Signed-off-by: Grigorii K. Shartsev --- src/utils/GenColors.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/utils/GenColors.js b/src/utils/GenColors.js index 0dde6fda7c..cd17b47ca5 100644 --- a/src/utils/GenColors.js +++ b/src/utils/GenColors.js @@ -24,15 +24,19 @@ * Originally taken from https://github.com/nextcloud/server/blob/master/core/js/placeholder.js */ -/** - * @param {number} r The red value - * @param {number} g The green value - * @param {number} b The blue value - */ -function Color(r, g, b) { - this.r = r - this.g = g - this.b = b +class Color { + + /** + * @param {number} r The red value + * @param {number} g The green value + * @param {number} b The blue value + */ + constructor(r, g, b) { + this.r = r + this.g = g + this.b = b + } + } /** @@ -54,8 +58,8 @@ function stepCalc(steps, ends) { * Create a color palette from two colors * * @param {number} steps The number of steps the palette has - * @param {string} color1 The first color - * @param {string} color2 The second color + * @param {Color} color1 The first color + * @param {Color} color2 The second color * @return {Array} The created palette array */ function mixPalette(steps, color1, color2) { @@ -63,9 +67,9 @@ function mixPalette(steps, color1, color2) { palette.push(color1) const step = stepCalc(steps, [color1, color2]) for (let i = 1; i < steps; i++) { - const r = parseInt(color1.r + step[0] * i, 10) - const g = parseInt(color1.g + step[1] * i, 10) - const b = parseInt(color1.b + step[2] * i, 10) + const r = Math.floor(color1.r + step[0] * i) + const g = Math.floor(color1.g + step[1] * i) + const b = Math.floor(color1.b + step[2] * i) palette.push(new Color(r, g, b)) } return palette From d203fb1276de32e21e10221a8d7795d40a282f4f Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Fri, 17 Nov 2023 15:46:12 +0100 Subject: [PATCH 2/3] feat(NcColorPicker): palette now can have color names Signed-off-by: Grigorii K. Shartsev --- l10n/messages.pot | 12 ++++ .../NcColorPicker/NcColorPicker.vue | 59 ++++++++++++++----- src/utils/GenColors.js | 15 +++-- 3 files changed, 66 insertions(+), 20 deletions(-) diff --git a/l10n/messages.pot b/l10n/messages.pot index fc8fecbd4c..8333d6795d 100644 --- a/l10n/messages.pot +++ b/l10n/messages.pot @@ -8,6 +8,9 @@ msgstr "" msgid "{tag} (restricted)" msgstr "" +msgid "A color with a HEX value {hex}" +msgstr "" + msgid "a few seconds ago" msgstr "" @@ -119,6 +122,9 @@ msgstr "" msgid "Go back to the list" msgstr "" +msgid "Gold" +msgstr "" + msgid "Hide password" msgstr "" @@ -137,6 +143,9 @@ msgstr "" msgid "Next" msgstr "" +msgid "Nextcloud blue" +msgstr "" + msgid "No emoji found" msgstr "" @@ -209,6 +218,9 @@ msgstr "" msgid "Provider icon" msgstr "" +msgid "Purple" +msgstr "" + msgid "Raw link {options}" msgstr "" diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index 815c233bd7..64a0210c47 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/src/components/NcColorPicker/NcColorPicker.vue @@ -2,6 +2,7 @@ - @copyright Copyright (c) 2019 Marco Ambrosini - - @author Marco Ambrosini + - @author Grigorii K. Shartsev - - @license GNU AGPL version 3 or any later version - @@ -165,17 +166,17 @@ export default {
- +
-
- +
number.toString(16).padStart(2, '0') + return `#${toHex(r)}${toHex(g)}${toHex(b)}` } +const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i + export default { name: 'NcColorPicker', @@ -259,16 +271,20 @@ export default { }, /** - * Provide a custom array of hexadecimal colors to show + * Provide a custom array of colors to show. + * Can be either an array of string hexadecimal colors, + * or an array of object with a `color` property with hexadecimal color string, + * and a `name` property for accessibility. + * + * @type {string[] | {color: string, name: string}[]} */ palette: { type: Array, - default: () => GenColors(4).map(color => { - return '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b) - }), - validator(palette) { - return palette.every(color => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(color)) - }, + default: () => GenColors(4).map(item => ({ color: rgbToHex(item), name: item.name })), + validator: (palette) => palette.every(item => + (typeof item === 'string' && HEX_REGEX.test(item)) + || (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)), + ), }, }, @@ -289,6 +305,17 @@ export default { } }, + computed: { + normalizedPalette() { + return this.palette.map((item) => ({ + color: typeof item === 'object' ? item.color : item, + name: typeof item === 'object' && item.name + ? item.name + : t('A color with a HEX value {hex}', { hex: item.color }), + })) + }, + }, + watch: { value(color) { this.currentColor = color diff --git a/src/utils/GenColors.js b/src/utils/GenColors.js index cd17b47ca5..64644103e6 100644 --- a/src/utils/GenColors.js +++ b/src/utils/GenColors.js @@ -2,6 +2,7 @@ * @copyright Copyright (c) 2019 John Molakvoæ * * @author John Molakvoæ + * @author Grigorii K. Shartsev * * @license AGPL-3.0-or-later * @@ -24,17 +25,23 @@ * Originally taken from https://github.com/nextcloud/server/blob/master/core/js/placeholder.js */ +import { t } from '../l10n.js' + class Color { /** * @param {number} r The red value * @param {number} g The green value * @param {number} b The blue value + * @param {string} [name] The name of the color */ - constructor(r, g, b) { + constructor(r, g, b, name) { this.r = r this.g = g this.b = b + if (name) { + this.name = name + } } } @@ -89,9 +96,9 @@ function GenColors(steps) { steps = 6 } - const red = new Color(182, 70, 157) - const yellow = new Color(221, 203, 85) - const blue = new Color(0, 130, 201) // Nextcloud blue + const red = new Color(182, 70, 157, t('Purple')) + const yellow = new Color(221, 203, 85, t('Gold')) + const blue = new Color(0, 130, 201, t('Nextcloud blue')) const palette1 = mixPalette(steps, red, yellow) const palette2 = mixPalette(steps, yellow, blue) From c7c62e048edcc42eafdc4e750a4bd27e2ee2fcfe Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Fri, 17 Nov 2023 16:09:45 +0100 Subject: [PATCH 3/3] fix(NcColorPicker): make palette a radio buttons group Signed-off-by: Grigorii K. Shartsev --- .../NcColorPicker/NcColorPicker.vue | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index 64a0210c47..ff059dc255 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/src/components/NcColorPicker/NcColorPicker.vue @@ -168,16 +168,19 @@ export default { :class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
- + +