From be2f488375207ae9bbce1feaa8a7e0ee789fbc34 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Mon, 4 Jul 2022 18:16:32 +0200
Subject: Fix styling regression on contacts

Signed-off-by: greta <gretadoci@gmail.com>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/ContactDetails.vue                  | 22 +++++++++++
 .../ContactDetails/ContactDetailsAddNewProp.vue    | 13 +++++++
 src/components/Properties/PropertyGroups.vue       | 25 ++++++++++++
 src/components/Properties/PropertyMultipleText.vue | 45 +++++++++++++++++++++-
 src/components/Properties/PropertySelect.vue       | 26 +++++++++++++
 src/components/Properties/PropertyText.vue         | 25 ++++++++++++
 src/components/Properties/PropertyTitle.vue        | 10 ++++-
 7 files changed, 164 insertions(+), 2 deletions(-)

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index d53a7cfb..0464927f 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -790,6 +790,7 @@ section.contact-details {
 
 	::v-deep .property-masonry {
 		width: 350px;
+		padding: 5px;
 	}
 
 	.property--rev {
@@ -839,4 +840,25 @@ section.contact-details {
 	max-width: 414px;
 	justify-self: center;
 }
+section.contact-details .property-masonry {
+	width: 350px;
+}
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__label, .property__label.multiselect {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	height: 34px;
+	margin: 3px 5px 3px 0 !important;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+	line-height: 35px;
+}
 </style>
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index aafdfd7c..da9ca186 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -129,3 +129,16 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+</style>
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 67e889b1..cbf6576f 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -188,3 +188,28 @@ export default {
 }
 
 </script>
+<style lang="scss" scoped>
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+.property__label, .property__label.multiselect {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	height: 34px;
+	margin: 3px 5px 3px 0 !important;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+	line-height: 35px;
+}
+</style>
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 3b4be4c1..b5b73310 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -25,7 +25,8 @@
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
 			:icon="propModel.icon"
-			:readable-name="propModel.readableName" />
+			:readable-name="propModel.readableName"
+			:has-actions="!isReadOnly" />
 
 		<div class="property__row">
 			<!-- type selector -->
@@ -132,3 +133,45 @@ export default {
 }
 
 </script>
+<style lang="scss" scoped>
+.property__label {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	height: 34px;
+	margin: 3px 5px 3px 0 !important;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+	line-height: 35px;
+}
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+input:not([type='range']) {
+	margin: 3px 3px 3px 0;
+	padding: 7px 6px;
+	font-size: 13px;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	outline: none;
+	border-radius: var(--border-radius);
+	cursor: text;
+}
+.property__value {
+	flex: 1 1;
+}
+::v-deep.property__label.multiselect .multiselect__tags {
+	border: none !important;
+}
+
+</style>
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 8e4ef727..cbfe392d 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -125,3 +125,29 @@ export default {
 }
 
 </script>
+<style lang="scss" scoped>
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+.property__label, .property__label.multiselect {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	height: 34px;
+	margin: 3px 5px 3px 0 !important;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+	line-height: 35px;
+}
+
+</style>
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index a7eceb51..7ffd456a 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -204,3 +204,28 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+.property__label, .property__label.multiselect {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	height: 34px;
+	margin: 3px 5px 3px 0 !important;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+	line-height: 35px;
+}
+</style>
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index c92a5414..d66df242 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -21,7 +21,8 @@
   -->
 
 <template>
-	<h3 class="property__title property__row">
+	<h3 class="property__title property__row"
+		:class="{'align-to-actions': hasActions}">
 		<PropertyTitleIcon :icon="icon" />
 		<div class="property__value property__title--right">
 			{{ readableName }}
@@ -47,6 +48,10 @@ export default {
 			default: '',
 			required: true,
 		},
+		hasActions: {
+			type: Boolean,
+			default: false,
+		}
 	},
 }
 </script>
@@ -62,4 +67,7 @@ export default {
 	display: flex;
 	justify-content: space-between;
 }
+.align-to-actions {
+	padding-bottom: 10px;
+}
 </style>
-- 
cgit v1.2.3