From d85091c0af82b1d16e5ecaeab049d9c47808cd07 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 10:21:16 +0200
Subject: [PATCH 1/5] change color-dot to color and add show-as-dot option to
 labels

---
 .../color-dot.vue => color/color.vue}         | 30 +++----------
 app/src/displays/color/index.ts               | 24 ++++++++++
 app/src/displays/labels/index.ts              | 14 +++++-
 app/src/displays/labels/labels.vue            | 45 ++++++++++++-------
 app/src/lang/en-US/displays.json              |  6 +++
 5 files changed, 78 insertions(+), 41 deletions(-)
 rename app/src/displays/{color-dot/color-dot.vue => color/color.vue} (55%)
 create mode 100644 app/src/displays/color/index.ts

diff --git a/app/src/displays/color-dot/color-dot.vue b/app/src/displays/color/color.vue
similarity index 55%
rename from app/src/displays/color-dot/color-dot.vue
rename to app/src/displays/color/color.vue
index 68b7b82b62..f3ce80403c 100644
--- a/app/src/displays/color-dot/color-dot.vue
+++ b/app/src/displays/color/color.vue
@@ -1,20 +1,14 @@
 <template>
 	<div class="color-dot">
 		<value-null v-if="value === null" />
-		<div class="dot" :style="styles" v-tooltip="displayValue"></div>
+		<div class="dot" :style="{'background-color':styles}"></div>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from '@vue/composition-api';
 import formatTitle from '@directus/format-title';
-import { isHex } from '@/utils/color';
-
-type Choice = {
-	value: string;
-	text: string;
-	color: string | null;
-};
+import { isHex } from '@/utils/color'
 
 export default defineComponent({
 	props: {
@@ -22,34 +16,20 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		choices: {
-			type: Array as PropType<Choice[]>,
-			default: () => [],
-		},
 		defaultColor: {
 			type: String,
 			default: '#B0BEC5',
 		},
 	},
 	setup(props) {
-		const currentChoice = computed(() => {
-			return props.choices.find((choice) => {
-				return choice.value === props.value;
-			});
-		});
 
 		const displayValue = computed(() => {
-			return formatTitle(props.value);
+			return props.value;
 		});
 
 		const styles = computed(() => {
-			if (isHex(props.value)) {
-				return { backgroundColor: props.value || props.defaultColor };
-			}
-
-			return {
-				backgroundColor: currentChoice.value?.color || props.defaultColor,
-			};
+			if(isHex(props.value)) return props.value
+			else return props.defaultColor
 		});
 
 		return { displayValue, styles, isHex };
diff --git a/app/src/displays/color/index.ts b/app/src/displays/color/index.ts
new file mode 100644
index 0000000000..b2621f53ac
--- /dev/null
+++ b/app/src/displays/color/index.ts
@@ -0,0 +1,24 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayColor from './color.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'color',
+	name: i18n.t('color'),
+	types: ['string'],
+	icon: 'flag',
+	handler: DisplayColor,
+	options: [
+		{
+			field: 'defaultColor',
+			name: i18n.t('default_color'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+			schema: {
+				default_value: '#B0BEC5',
+			},
+		}
+	],
+}));
diff --git a/app/src/displays/labels/index.ts b/app/src/displays/labels/index.ts
index e163b71443..5952d9f0c9 100644
--- a/app/src/displays/labels/index.ts
+++ b/app/src/displays/labels/index.ts
@@ -38,7 +38,7 @@ export default defineDisplay(({ i18n }) => ({
 			name: i18n.t('format_text'),
 			type: 'boolean',
 			meta: {
-				width: 'half-left',
+				width: 'half',
 				interface: 'toggle',
 				options: {
 					label: i18n.t('displays.labels.format_label'),
@@ -48,6 +48,18 @@ export default defineDisplay(({ i18n }) => ({
 				default_value: true,
 			},
 		},
+		{
+			field: 'showAsDot',
+			name: i18n.t('displays.labels.show_as_dot'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
 		{
 			field: 'choices',
 			name: i18n.t('choices'),
diff --git a/app/src/displays/labels/labels.vue b/app/src/displays/labels/labels.vue
index fb73b79b1e..a455859ac4 100644
--- a/app/src/displays/labels/labels.vue
+++ b/app/src/displays/labels/labels.vue
@@ -1,18 +1,29 @@
 <template>
 	<div class="display-tags">
-		<v-chip
-			v-for="item in items"
-			:key="item.value"
-			:style="{
-				'--v-chip-color': item.foreground,
-				'--v-chip-background-color': item.background,
-			}"
-			small
-			disabled
-			label
-		>
-			{{ item.text }}
-		</v-chip>
+		<template v-if="!showAsDot">
+			<v-chip
+				v-for="item in items"
+				:key="item.value"
+				:style="{
+					'--v-chip-color': item.foreground,
+					'--v-chip-background-color': item.background,
+				}"
+				small
+				disabled
+				label
+			>
+				{{ item.text }}
+			</v-chip>
+		</template>
+		<template v-else>
+			<display-color
+				v-for="item in items"
+				:key="item.value"
+				:value="item.background"
+				:default-color="defaultBackground"
+				v-tooltip="item.text"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -37,6 +48,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		showAsDot: {
+			type: Boolean,
+			default: false
+		},
 		choices: {
 			type: Array as PropType<Choice[]>,
 			default: () => [],
@@ -51,7 +66,7 @@ export default defineComponent({
 		},
 		type: {
 			type: String,
-			validator: (val: string) => ['json', 'string'].includes(val),
+			validator: (val: string) => ['text', 'string'].includes(val),
 		},
 	},
 	setup(props) {
@@ -90,7 +105,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .display-tags {
-	display: inline-block;
+	display: flex;
 }
 
 .v-chip + .v-chip {
diff --git a/app/src/lang/en-US/displays.json b/app/src/lang/en-US/displays.json
index 69f97cab77..042154275e 100644
--- a/app/src/lang/en-US/displays.json
+++ b/app/src/lang/en-US/displays.json
@@ -79,6 +79,7 @@
 		"raw": {
 			"raw": "Raw Value"
 		},
+<<<<<<< HEAD
 		"related-values": {
 			"related-values": "Related Values",
 			"description": "Display relative values"
@@ -90,6 +91,11 @@
 			"name": "Name",
 			"both": "Both",
 			"circle_label": "Show user in a circle"
+=======
+		"labels": {
+			"labels": "Labels",
+			"show_as_dot": "Show as dot"
+>>>>>>> change color-dot to color and add show-as-dot option to labels
 		}
 	}
 }

From 6fedc3abda8a23cd09540e826c319d66c7f6c7ff Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 10:26:17 +0200
Subject: [PATCH 2/5] validate default color

---
 app/src/displays/color/color.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/displays/color/color.vue b/app/src/displays/color/color.vue
index f3ce80403c..2842d7a5b5 100644
--- a/app/src/displays/color/color.vue
+++ b/app/src/displays/color/color.vue
@@ -19,6 +19,7 @@ export default defineComponent({
 		defaultColor: {
 			type: String,
 			default: '#B0BEC5',
+			validator: (value: string) => isHex(value),
 		},
 	},
 	setup(props) {

From b86baa78334bc5c932a00301d12f01270578f318 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 19:15:30 +0200
Subject: [PATCH 3/5] add border on low contrast

---
 app/package-lock.json            | 31 +++++++++++++++++++++++--------
 app/package.json                 |  4 ++++
 app/src/displays/color/color.vue | 27 ++++++++++++++++++++-------
 app/src/displays/color/index.ts  |  7 ++++---
 app/src/styles/themes/_dark.scss |  2 +-
 5 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 4e6f7c75b1..524127050b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -3042,11 +3042,32 @@
         "@types/tern": "*"
       }
     },
+    "@types/color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.1.tgz",
+      "integrity": "sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==",
+      "requires": {
+        "@types/color-convert": "*"
+      }
+    },
+    "@types/color-convert": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-1.9.0.tgz",
+      "integrity": "sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==",
+      "requires": {
+        "@types/color-name": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
+    "@types/color-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/color-string/-/color-string-1.5.0.tgz",
+      "integrity": "sha512-17/8LWbkfvoKgfnnBvKbUnPTzPtzBlSELf5FPvVt9dRTQW88igOYZZ78us9dmbY1301VtTBEnuPTKspvmtGDxA=="
+    },
     "@types/connect": {
       "version": "3.4.33",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -8533,7 +8554,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
       "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.1",
         "color-string": "^1.5.2"
@@ -8543,7 +8563,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -8551,8 +8570,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         }
       }
     },
@@ -8573,7 +8591,6 @@
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
       "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
-      "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -23099,7 +23116,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -23107,8 +23123,7 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         }
       }
     },
diff --git a/app/package.json b/app/package.json
index 62b394e7a7..2883ad695b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -35,6 +35,8 @@
     "@sindresorhus/slugify": "^1.0.0",
     "@tinymce/tinymce-vue": "^3.2.2",
     "@types/codemirror": "^0.0.97",
+    "@types/color": "^3.0.1",
+    "@types/color-string": "^1.5.0",
     "@types/debug": "^4.1.5",
     "@types/htmlhint": "^0.9.1",
     "@types/js-yaml": "^3.12.5",
@@ -45,6 +47,8 @@
     "base-64": "^0.1.0",
     "bytes": "^3.1.0",
     "codemirror": "^5.56.0",
+    "color": "^3.1.2",
+    "color-string": "^1.5.3",
     "cropperjs": "^1.5.7",
     "csslint": "^1.0.5",
     "date-fns": "^2.14.0",
diff --git a/app/src/displays/color/color.vue b/app/src/displays/color/color.vue
index 2842d7a5b5..0bf2065430 100644
--- a/app/src/displays/color/color.vue
+++ b/app/src/displays/color/color.vue
@@ -1,14 +1,15 @@
 <template>
 	<div class="color-dot">
 		<value-null v-if="value === null" />
-		<div class="dot" :style="{'background-color':styles}"></div>
+		<div class="dot" :style="styles"></div>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from '@vue/composition-api';
 import formatTitle from '@directus/format-title';
-import { isHex } from '@/utils/color'
+import Color from 'color';
+import colorString from 'color-string';
 
 export default defineComponent({
 	props: {
@@ -19,21 +20,33 @@ export default defineComponent({
 		defaultColor: {
 			type: String,
 			default: '#B0BEC5',
-			validator: (value: string) => isHex(value),
+			validator: (value: string) => colorString.get.rgb(value) !== null,
 		},
 	},
 	setup(props) {
-
 		const displayValue = computed(() => {
 			return props.value;
 		});
 
 		const styles = computed(() => {
-			if(isHex(props.value)) return props.value
-			else return props.defaultColor
+			const style: Record<string, any> = { 'background-color': props.defaultColor };
+
+			if (Color(props.value) !== undefined) style['background-color'] = props.value;
+
+			const pageColorString = getComputedStyle(document.body).getPropertyValue('--background-page');
+
+			const pageColorRGB = colorString.get.rgb(pageColorString) || colorString.get.rgb('#FFF');
+			const colorRGB = colorString.get.rgb(props.value) || colorString.get.rgb(props.defaultColor);
+
+			if (pageColorRGB == null || colorRGB == null) return {};
+
+			if (Color.rgb(...colorRGB.slice(0.3)).contrast(Color.rgb(...pageColorRGB.slice(0, 3))) < 3)
+				style['border'] = '1px solid var(--background-inverted)';
+
+			return style;
 		});
 
-		return { displayValue, styles, isHex };
+		return { displayValue, styles };
 	},
 });
 </script>
diff --git a/app/src/displays/color/index.ts b/app/src/displays/color/index.ts
index b2621f53ac..80ea87ae1b 100644
--- a/app/src/displays/color/index.ts
+++ b/app/src/displays/color/index.ts
@@ -3,14 +3,15 @@ import DisplayColor from './color.vue';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'color',
-	name: i18n.t('color'),
+	name: i18n.t('displays.color.color'),
+	description: i18n.t('displays.color.description'),
 	types: ['string'],
 	icon: 'flag',
 	handler: DisplayColor,
 	options: [
 		{
 			field: 'defaultColor',
-			name: i18n.t('default_color'),
+			name: i18n.t('displays.color.default_color'),
 			type: 'string',
 			meta: {
 				interface: 'color',
@@ -19,6 +20,6 @@ export default defineDisplay(({ i18n }) => ({
 			schema: {
 				default_value: '#B0BEC5',
 			},
-		}
+		},
 	],
 }));
diff --git a/app/src/styles/themes/_dark.scss b/app/src/styles/themes/_dark.scss
index 6f2651dc3d..fd56daac51 100644
--- a/app/src/styles/themes/_dark.scss
+++ b/app/src/styles/themes/_dark.scss
@@ -16,7 +16,7 @@
 	--background-highlight: #F9FAFB; // ADJUST
 	--background-page: #263238;
 	--background-page-rgb: 38, 50, 56;
-	--background-inverted: #fff;
+	--background-inverted: #FFF;
 
 	--overlay-color: rgba(19, 24, 26, 0.9);
 

From adaebdcbdb889f340259617b8dd8db1d68f93387 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 10 Sep 2020 19:23:56 +0200
Subject: [PATCH 4/5] change to a light border

---
 app/src/displays/color/color.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/displays/color/color.vue b/app/src/displays/color/color.vue
index 0bf2065430..93c56a5940 100644
--- a/app/src/displays/color/color.vue
+++ b/app/src/displays/color/color.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 			if (pageColorRGB == null || colorRGB == null) return {};
 
 			if (Color.rgb(...colorRGB.slice(0.3)).contrast(Color.rgb(...pageColorRGB.slice(0, 3))) < 3)
-				style['border'] = '1px solid var(--background-inverted)';
+				style['border'] = '1px solid var(--border-normal-alt)';
 
 			return style;
 		});

From 267e337d417454abc119c0b237179b9c2271572b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 17 Sep 2020 14:07:00 -0400
Subject: [PATCH 5/5] Fix rebasing issue

---
 app/src/displays/color-dot/index.ts | 60 -----------------------------
 app/src/lang/en-US/displays.json    |  4 +-
 2 files changed, 1 insertion(+), 63 deletions(-)
 delete mode 100644 app/src/displays/color-dot/index.ts

diff --git a/app/src/displays/color-dot/index.ts b/app/src/displays/color-dot/index.ts
deleted file mode 100644
index c02663b3b4..0000000000
--- a/app/src/displays/color-dot/index.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { defineDisplay } from '@/displays/define';
-import DisplayColorDot from './color-dot.vue';
-
-export default defineDisplay(({ i18n }) => ({
-	id: 'color-dot',
-	name: i18n.t('displays.color-dot.color-dot'),
-	description: i18n.t('displays.color-dot.description'),
-	types: ['string'],
-	icon: 'flag',
-	handler: DisplayColorDot,
-	options: [
-		{
-			field: 'defaultColor',
-			name: i18n.t('displays.color-dot.default_color'),
-			type: 'string',
-			meta: {
-				interface: 'color',
-				width: 'half',
-			},
-			schema: {
-				default_value: '#B0BEC5',
-			},
-		},
-		{
-			field: 'choices',
-			name: i18n.t('choices'),
-			type: 'json',
-			meta: {
-				note: i18n.t('displays.color-dot.choices_note'),
-				interface: 'repeater',
-				options: {
-					template: '{{text}}',
-					fields: [
-						{
-							field: 'value',
-							name: i18n.t('value'),
-							type: 'string',
-							meta: {
-								interface: 'text-input',
-								options: {
-									font: 'monospace',
-								},
-								width: 'half',
-							},
-						},
-						{
-							field: 'color',
-							name: i18n.t('color'),
-							type: 'string',
-							meta: {
-								interface: 'color',
-								width: 'half',
-							},
-						},
-					],
-				},
-			},
-		},
-	],
-}));
diff --git a/app/src/lang/en-US/displays.json b/app/src/lang/en-US/displays.json
index 042154275e..d6d6f0c27b 100644
--- a/app/src/lang/en-US/displays.json
+++ b/app/src/lang/en-US/displays.json
@@ -79,7 +79,6 @@
 		"raw": {
 			"raw": "Raw Value"
 		},
-<<<<<<< HEAD
 		"related-values": {
 			"related-values": "Related Values",
 			"description": "Display relative values"
@@ -91,11 +90,10 @@
 			"name": "Name",
 			"both": "Both",
 			"circle_label": "Show user in a circle"
-=======
+		},
 		"labels": {
 			"labels": "Labels",
 			"show_as_dot": "Show as dot"
->>>>>>> change color-dot to color and add show-as-dot option to labels
 		}
 	}
 }