Design grid fixes, delete and flex

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

3 files changed, 35 insertions, 27 deletions

diff --git a/src/components/properties/PropertyDateTime.vue b/src/components/properties/PropertyDateTime.vue
index 84bf767d..210efa34 100644
--- a/src/components/properties/PropertyDateTime.vue
+++ b/src/components/properties/PropertyDateTime.vue
@@ -22,18 +22,20 @@
 
 <template>
 	<div v-if="propModel" class="contact-details-property grid-span-1">
-		<!-- type selector -->
-		<multiselect v-if="propModel.options" v-model="selectType"
-			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-			class="multiselect-vue contact-details-label" track-by="id" label="name" />
+		<div class="contact-details-property-row">
+			<!-- type selector -->
+			<multiselect v-if="propModel.options" v-model="selectType"
+				:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
+				class="multiselect-vue contact-details-label" track-by="id" label="name" />
 
-		<!-- if we do not support any type on our model but one is set anyway -->
-		<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
+			<!-- if we do not support any type on our model but one is set anyway -->
+			<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
 
-		<!-- delete the prop -->
-		<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
+			<!-- delete the prop -->
+			<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
 
-		<input v-model="value" type="text">
+			<input v-model="value" type="text">
+		</div>
 	</div>
 </template>
 
diff --git a/src/components/properties/PropertyMultipleText.vue b/src/components/properties/PropertyMultipleText.vue
index 5ed6f32e..b49ef61f 100644
--- a/src/components/properties/PropertyMultipleText.vue
+++ b/src/components/properties/PropertyMultipleText.vue
@@ -22,16 +22,18 @@
 
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="contact-details-property">
-		<!-- type selector -->
-		<multiselect v-if="propModel.options" v-model="selectType"
-			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-			class="multiselect-vue contact-details-label" track-by="id" label="name" />
+		<div class="contact-details-property-row">
+			<!-- type selector -->
+			<multiselect v-if="propModel.options" v-model="selectType"
+				:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
+				class="multiselect-vue contact-details-label" track-by="id" label="name" />
 
-		<!-- if we do not support any type on our model but one is set anyway -->
-		<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
+			<!-- if we do not support any type on our model but one is set anyway -->
+			<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
 
-		<!-- delete the prop -->
-		<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
+			<!-- delete the prop -->
+			<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
+		</div>
 
 		<div v-for="index in propModel.displayOrder" :key="index" class="contact-details-property-row">
 			<div class="contact-details-label">{{ propModel.readableValues[index] }}</div>
@@ -67,7 +69,9 @@ export default {
 
 	computed: {
 		gridLength() {
-			return this.propModel.displayOrder ? this.propModel.displayOrder.length : this.value.length
+			let hasType = this.propModel.options || this.selectType
+			let length = this.propModel.displayOrder ? this.propModel.displayOrder.length : this.value.length
+			return hasType ? length + 1 : length
 		}
 	},
 
diff --git a/src/components/properties/PropertyText.vue b/src/components/properties/PropertyText.vue
index 78baa7a8..df490c67 100644
--- a/src/components/properties/PropertyText.vue
+++ b/src/components/properties/PropertyText.vue
@@ -22,18 +22,20 @@
 
 <template>
 	<div v-if="propModel" class="contact-details-property grid-span-1">
-		<!-- type selector -->
-		<multiselect v-if="propModel.options" v-model="selectType"
-			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-			class="multiselect-vue contact-details-label" track-by="id" label="name" />
+		<div class="contact-details-property-row">
+			<!-- type selector -->
+			<multiselect v-if="propModel.options" v-model="selectType"
+				:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
+				class="multiselect-vue contact-details-label" track-by="id" label="name" />
 
-		<!-- if we do not support any type on our model but one is set anyway -->
-		<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
+			<!-- if we do not support any type on our model but one is set anyway -->
+			<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
 
-		<!-- delete the prop -->
-		<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
+			<!-- delete the prop -->
+			<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
 
-		<input v-model="value" type="text">
+			<input v-model="value" type="text">
+		</div>
 	</div>
 </template>