From 35cdf3a6cb419c66e5ea8cf76c461d040a9dd48f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 2 Sep 2020 13:46:04 -0400
Subject: [PATCH] Rearrange field-select

---
 .../components/v-list/v-list-item-icon.vue    | 10 ++++-
 .../fields/components/field-select.vue        | 42 ++++++++++++-------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list/v-list-item-icon.vue
index e226e37971..60baa227e1 100644
--- a/app/src/components/v-list/v-list-item-icon.vue
+++ b/app/src/components/v-list/v-list-item-icon.vue
@@ -17,6 +17,12 @@ export default defineComponent({
 });
 </script>
 
+<style>
+body {
+	--v-list-item-icon-color: var(--foreground-subdued);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-list-item-icon {
 	$this: &;
@@ -62,8 +68,8 @@ export default defineComponent({
 				}
 			}
 
-			&.dense:not(.nav) #{$this} {
-				color: var(--foreground-subdued);
+			&.dense:not(.nav) #{$this} .v-icon {
+				--v-icon-color: var(--v-list-item-icon-color);
 			}
 		}
 	}
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 000e43d1a5..eeb49464d7 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -34,20 +34,7 @@
 					</v-list-item-icon>
 					<v-list-item-content>{{ $t('duplicate_field') }}</v-list-item-content>
 				</v-list-item>
-				<v-divider />
-				<v-list-item @click="setWidth('half')" :disabled="hidden || field.meta.width === 'half'">
-					<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
-					<v-list-item-content>{{ $t('half_width') }}</v-list-item-content>
-				</v-list-item>
-				<v-list-item @click="setWidth('full')" :disabled="hidden || field.meta.width === 'full'">
-					<v-list-item-icon><v-icon name="border_right" /></v-list-item-icon>
-					<v-list-item-content>{{ $t('full_width') }}</v-list-item-content>
-				</v-list-item>
-				<v-list-item @click="setWidth('fill')" :disabled="hidden || field.meta.width === 'fill'">
-					<v-list-item-icon><v-icon name="aspect_ratio" /></v-list-item-icon>
-					<v-list-item-content>{{ $t('fill_width') }}</v-list-item-content>
-				</v-list-item>
-				<v-divider />
+
 				<v-list-item @click="toggleVisibility">
 					<template v-if="hidden === false">
 						<v-list-item-icon><v-icon name="visibility_off" /></v-list-item-icon>
@@ -59,7 +46,26 @@
 					</template>
 				</v-list-item>
 
-				<v-list-item @click="deleteActive = true">
+				<v-divider />
+
+				<v-list-item @click="setWidth('half')" :disabled="hidden || field.meta.width === 'half'">
+					<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
+					<v-list-item-content>{{ $t('half_width') }}</v-list-item-content>
+				</v-list-item>
+
+				<v-list-item @click="setWidth('full')" :disabled="hidden || field.meta.width === 'full'">
+					<v-list-item-icon><v-icon name="border_right" /></v-list-item-icon>
+					<v-list-item-content>{{ $t('full_width') }}</v-list-item-content>
+				</v-list-item>
+
+				<v-list-item @click="setWidth('fill')" :disabled="hidden || field.meta.width === 'fill'">
+					<v-list-item-icon><v-icon name="aspect_ratio" /></v-list-item-icon>
+					<v-list-item-content>{{ $t('fill_width') }}</v-list-item-content>
+				</v-list-item>
+
+				<v-divider />
+
+				<v-list-item @click="deleteActive = true" class="danger">
 					<v-list-item-icon><v-icon name="delete" outline /></v-list-item-icon>
 					<v-list-item-content>
 						{{ $t('delete_field') }}
@@ -296,4 +302,10 @@ export default defineComponent({
 		}
 	}
 }
+
+.v-list-item.danger {
+	--v-list-item-color: var(--danger);
+	--v-list-item-color-hover: var(--danger);
+	--v-list-item-icon-color: var(--danger);
+}
 </style>