Support custom aspect ratios in image editor (#14786)

* Support custom aspect ratios in image editor

* Add custom aspect ratios in file items as well

* Revert file item custom-aspect-ratio changes

* Use globally configured custom aspect ratios

* Remove previos custom-aspect-ratio logic

* code style tweak

* use migration instead of seed

* rename field to custom_aspect_ratios

* keep defaults + change icon

Co-authored-by: qborisb <boris@qdentity.nl>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

api/src/database/migrations/20220802A-add-custom-aspect-ratios.ts

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

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

@@ -392,3 +392,36 @@ fields:
   - field: translation_strings
     special: cast-json
     hidden: true
+
+  - field: image_editor
+    interface: presentation-divider
+    options:
+      icon: image
+      title: $t:fields.directus_settings.image_editor
+    special:
+      - alias
+      - no-data
+    width: full
+
+  - field: custom_aspect_ratios
+    interface: list
+    special: cast-json
+    options:
+      template: '{{text}}'
+      fields:
+        - field: text
+          name: $t:text
+          type: string
+          meta:
+            interface: text-input
+            width: half
+            options:
+              placeholder: $t:text
+        - field: value
+          name: $t:value
+          type: float
+          meta:
+            interface: input
+            width: half
+            options:
+              placeholder: $t:value