From 1be733c0e2d790ee9e763fd5fc6632571b80449a Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Sat, 12 Sep 2020 08:38:03 -0400
Subject: [PATCH] additional relationship setup styling

---
 app/src/components/v-input/v-input.vue          |  7 ++++---
 .../components/relationship-m2m.vue             |  4 ++++
 .../components/relationship-m2o.vue             | 16 ++++++++++------
 .../components/relationship-o2m.vue             | 17 +++++++++++------
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 4c9ee4a898..5d95aae096 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -245,6 +245,7 @@ body {
 .v-input {
 	--arrow-color: var(--border-normal);
 	--v-icon-color: var(--foreground-subdued);
+	--v-input-color: var(--foreground-normal);
 	--v-input-border-color-focus: var(--primary);
 
 	display: flex;
@@ -262,7 +263,7 @@ body {
 		align-items: center;
 		height: 100%;
 		padding: var(--input-padding);
-		color: var(--foreground-normal);
+		color: var(--v-input-color);
 		font-family: var(--v-input-font-family);
 		background-color: var(--background-page);
 		border: var(--border-width) solid var(--border-normal);
@@ -305,7 +306,7 @@ body {
 		&:hover {
 			--arrow-color: var(--border-normal-alt);
 
-			color: var(--foreground-normal);
+			color: var(--v-input-color);
 			background-color: var(--background-page);
 			border-color: var(--border-normal-alt);
 		}
@@ -314,7 +315,7 @@ body {
 		&.active {
 			--arrow-color: var(--border-normal-alt);
 
-			color: var(--foreground-normal);
+			color: var(--v-input-color);
 			background-color: var(--background-page);
 			border-color: var(--v-input-border-color-focus);
 		}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index ffbd3b49dc..31d7270729 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -204,6 +204,10 @@ export default defineComponent({
 	gap: 12px 28px;
 	margin-top: 48px;
 
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+
 	.v-icon.arrow {
 		--v-icon-color: var(--primary);
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index b4ca1aaad5..e27daa21fa 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -8,11 +8,11 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('related_collection') }}</div>
-				<v-input db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection')">
+				<v-input :class="{ matches: isNewCollection === false }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -32,7 +32,7 @@
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].many_field" />
-			<v-input db-safe :disabled="isNewCollection === false" v-model="relations[0].one_primary" :placeholder="$t('primary_key')" />
+			<v-input db-safe :disabled="isNewCollection === false" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
 			<v-icon class="arrow" name="arrow_back" />
 		</div>
 
@@ -45,7 +45,7 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('corresponding_field_name') }}</div>
-				<v-input :disabled="hasCorresponding === false" v-model="correspondingField" db-safe />
+				<v-input :disabled="hasCorresponding === false" v-model="correspondingField" :placeholder="$t('field_name') + '...'" db-safe />
 			</div>
 			<v-icon name="arrow_forward" class="arrow" />
 		</div>
@@ -186,11 +186,15 @@ export default defineComponent({
 	position: relative;
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 20px 32px;
+	gap: 12px 32px;
 	margin-top: 48px;
 
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+
 	.arrow {
-		--v-icon-color: var(--foreground-subdued);
+		--v-icon-color: var(--primary);
 
 		position: absolute;
 		bottom: 14px;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 9c3ad50f6b..f3784b8034 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -10,14 +10,15 @@
 				<div class="type-label">{{ $t('related_collection') }}</div>
 				<v-input
 					db-safe
-					:placeholder="$t('collection')"
+					:placeholder="$t('collection') + '...'"
 					v-model="relations[0].many_collection"
 					:disabled="isExisting"
+					:class="{ matches: isExisting }"
 				>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -41,12 +42,12 @@
 				db-safe
 				v-model="relations[0].many_field"
 				:disabled="isExisting"
-				:placeholder="$t('foreign_key')"
+				:placeholder="$t('foreign_key') + '...'"
 			>
 				<template #append v-if="fields && fields.length > 0">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
-							<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
+							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
 						</template>
 
 						<v-list dense class="monospace">
@@ -167,11 +168,15 @@ export default defineComponent({
 	position: relative;
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 20px 32px;
+	gap: 12px 32px;
 	margin-top: 48px;
 
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+
 	.v-icon.arrow {
-		--v-icon-color: var(--foreground-subdued);
+		--v-icon-color: var(--primary);
 
 		position: absolute;
 		bottom: 14px;