Merge pull request #4902 from nextcloud-libraries/enh/full-labelled-c…

…olors enh: Add a full labelled color palette to be used as the default for the color picker
nextcloud-libraries · Dec 8, 2023 · 7e67d12 · 7e67d12
2 parents ca4664d + 8d1b3ff
commit 7e67d12
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 10 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -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 ""
 
@@ -48,6 +52,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 ""
 
@@ -87,6 +99,10 @@ msgstr ""
 msgid "Custom"
 msgstr ""
 
+#. TRANSLATORS: A color name for RGB(136, 85, 168)
+msgid "Deluge"
+msgstr ""
+
 msgid "Deselect {option}"
 msgstr ""
 
@@ -108,6 +124,10 @@ msgstr ""
 msgid "Favorite"
 msgstr ""
 
+#. TRANSLATORS: A color name for RGB(201, 136, 121)
+msgid "Feldspar"
+msgstr ""
+
 msgid "Flags"
 msgstr ""
 
@@ -135,6 +155,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 ""
 
@@ -165,6 +189,10 @@ msgstr ""
 msgid "offline"
 msgstr ""
 
+#. TRANSLATORS: A color name for RGB(165, 184, 114)
+msgid "Olivine"
+msgstr ""
+
 msgid "online"
 msgstr ""
 
@@ -228,6 +256,10 @@ msgstr ""
 msgid "Related resources"
 msgstr ""
 
+#. TRANSLATORS: A color name for RGB(191, 103, 139)
+msgid "Rosy brown"
+msgstr ""
+
 msgid "Save changes"
 msgstr ""
 
@@ -305,5 +337,9 @@ msgstr ""
 msgid "User status: {status}"
 msgstr ""
 
+#. TRANSLATORS: A color name for RGB(211, 169, 103)
+msgid "Whiskey"
+msgstr ""
+
 msgid "Write a message …"
 msgstr ""
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
@@ -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'
@@ -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)),

diff --git a/src/functions/usernameToColor/usernameToColor.js b/src/functions/usernameToColor/usernameToColor.js
@@ -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'
 

diff --git a/src/utils/GenColors.js b/src/utils/GenColors.js
@@ -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 {
@@ -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)
@@ -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'))
@@ -106,5 +157,3 @@ function GenColors(steps) {
 
 	return palette1.concat(palette2).concat(palette3)
 }
-
-export default GenColors