Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enh: Add a full labelled color palette to be used as the default for the color picker #4902

Merged
merged 1 commit into from
Dec 8, 2023
Merged

enh: Add a full labelled color palette to be used as the default for the color picker #4902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 36 additions & 0 deletions l10n/messages.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ msgstr ""
msgid "a few seconds ago"
msgstr ""

#. TRANSLATORS: A color name for RGB(110, 166, 143)
msgid "Acapulco"
msgstr ""

msgid "Actions"
msgstr ""

Expand Down Expand Up @@ -47,6 +51,14 @@ msgstr ""
msgid "Back to provider selection"
msgstr ""

#. TRANSLATORS: A color name for RGB(91, 100, 179)
msgid "Blue Violet"
msgstr ""

#. TRANSLATORS: A color name for RGB(55, 148, 172)
msgid "Boston Blue"
msgstr ""

msgid "Cancel changes"
msgstr ""

Expand Down Expand Up @@ -86,6 +98,10 @@ msgstr ""
msgid "Custom"
msgstr ""

#. TRANSLATORS: A color name for RGB(136, 85, 168)
msgid "Deluge"
msgstr ""

msgid "Deselect {option}"
msgstr ""

Expand All @@ -107,6 +123,10 @@ msgstr ""
msgid "Favorite"
msgstr ""

#. TRANSLATORS: A color name for RGB(201, 136, 121)
msgid "Feldspar"
msgstr ""

msgid "Flags"
msgstr ""

Expand All @@ -131,6 +151,10 @@ msgstr ""
msgid "Load more \"{options}\""
msgstr ""

#. TRANSLATORS: A color name for RGB(45, 115, 190)
msgid "Mariner"
msgstr ""

msgid "Message limit of {count} characters reached"
msgstr ""

Expand Down Expand Up @@ -161,6 +185,10 @@ msgstr ""
msgid "offline"
msgstr ""

#. TRANSLATORS: A color name for RGB(165, 184, 114)
msgid "Olivine"
msgstr ""

msgid "online"
msgstr ""

Expand Down Expand Up @@ -227,6 +255,10 @@ msgstr ""
msgid "Related resources"
msgstr ""

#. TRANSLATORS: A color name for RGB(191, 103, 139)
msgid "Rosy brown"
msgstr ""

msgid "Save changes"
msgstr ""

Expand Down Expand Up @@ -304,5 +336,9 @@ msgstr ""
msgid "User status: {status}"
msgstr ""

#. TRANSLATORS: A color name for RGB(211, 169, 103)
msgid "Whiskey"
msgstr ""

msgid "Write a message …"
msgstr ""
5 changes: 3 additions & 2 deletions src/components/NcColorPicker/NcColorPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,8 @@ export default {
import NcButton from '../NcButton/index.js'
import NcPopover from '../NcPopover/index.js'
import { t } from '../../l10n.js'
import GenColors from '../../utils/GenColors.js'
import { defaultPalette } from '../../utils/GenColors.js'

import GenRandomId from '../../utils/GenRandomId.js'

import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
Expand Down Expand Up @@ -284,7 +285,7 @@ export default {
*/
palette: {
type: Array,
default: () => GenColors(4).map(item => ({ color: rgbToHex(item), name: item.name })),
default: () => defaultPalette.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)),
Expand Down
2 changes: 1 addition & 1 deletion src/functions/usernameToColor/usernameToColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import GenColors from '../../utils/GenColors.js'
import { GenColors } from '../../utils/GenColors.js'

import md5 from 'md5'

Expand Down
63 changes: 56 additions & 7 deletions src/utils/GenColors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@
*
*/

/**
* Originally taken from https://github.com/nextcloud/server/blob/master/core/js/placeholder.js
*/

import { t } from '../l10n.js'

class Color {
Expand Down Expand Up @@ -82,6 +78,57 @@ function mixPalette(steps, color1, color2) {
return palette
}

/**
* Like GenColor(4) but with labels
*/
export const defaultPalette = [
new Color(182, 70, 157, t('Purple')),
new Color(
191, 103, 139,
t('Rosy brown'), // TRANSLATORS: A color name for RGB(191, 103, 139)
),
new Color(
201, 136, 121,
t('Feldspar'), // TRANSLATORS: A color name for RGB(201, 136, 121)
),
new Color(
211, 169, 103,
t('Whiskey'), // TRANSLATORS: A color name for RGB(211, 169, 103)
),
new Color(
221, 203, 85,
t('Gold'),
),
new Color(
165, 184, 114,
t('Olivine'), // TRANSLATORS: A color name for RGB(165, 184, 114)
),
new Color(
110, 166, 143,
t('Acapulco'), // TRANSLATORS: A color name for RGB(110, 166, 143)
),
new Color(
55, 148, 172,
t('Boston Blue'), // TRANSLATORS: A color name for RGB(55, 148, 172)
),
new Color(
0, 130, 201,
t('Nextcloud blue'),
),
new Color(
45, 115, 190,
t('Mariner'), // TRANSLATORS: A color name for RGB(45, 115, 190)
),
new Color(
91, 100, 179,
t('Blue Violet'), // TRANSLATORS: A color name for RGB(91, 100, 179)
),
new Color(
136, 85, 168,
t('Deluge'), // TRANSLATORS: A color name for RGB(136, 85, 168)
),
]

/**
* Generate colors from the official nextcloud color
* You can provide how many colors you want (multiplied by 3)
Expand All @@ -91,11 +138,15 @@ function mixPalette(steps, color1, color2) {
* @param {number} [steps] Number of steps to go from a color to another
* @return {object[]}
*/
function GenColors(steps) {
export function GenColors(steps) {
if (!steps) {
steps = 6
}

if (steps === 4) {
return defaultPalette
}

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'))
Expand All @@ -106,5 +157,3 @@ function GenColors(steps) {

return palette1.concat(palette2).concat(palette3)
}

export default GenColors