Add support for adding a collection accent color (#5818)

* Added icon_color to directus_collections
Added migrations
Added color property to select-icon
Fixed select-icon placeholder

* Use icon color in collection header bar.

* Set `collection` and `note` fields to hald witdh

* Rename icon_color->color

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

api/src/database/migrations/20210521A-add-collections-icon-color.ts

@@ -0,0 +1,13 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_collections', (table) => {
+		table.string('color').nullable();
+	});
+}
+
+export async function down(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_collections', (table) => {
+		table.dropColumn('color');
+	});
+}

api/src/database/system-data/fields/collections.yaml

@@ -18,16 +18,22 @@ fields:
     readonly: true
     width: half
 
+  - field: note
+    interface: input
+    options:
+      placeholder: A description of this collection...
+    width: half
+
   - field: icon
     interface: select-icon
     options:
     width: half
 
-  - field: note
-    interface: input
+  - field: color
+    interface: select-color
     options:
-      placeholder: A description of this collection...
-    width: full
+      placeholder: Choose a color...
+    width: half
 
   - field: display_template
     interface: system-display-template