Merge pull request #4059 from nextcloud/style/improve-contact-details

Contact details: make more compact and implement Nextcloud Vue components

5 files changed, 43 insertions, 32 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 1c5a477c..d4ce7950 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -339,6 +339,7 @@
 			</div>
 			<!-- new property select -->
 			<AddNewProp v-if="!isReadOnly"
+				class="last-edit"
 				:bus="bus"
 				:contact="contact" />
 
@@ -1043,7 +1044,7 @@ export default {
 .contact-details-wrapper {
 	display: inline;
 	align-items: flex-start;
-	padding: 20px 0 20px;
+	padding-bottom: 20px;
 	gap: 15px;
 	float: left;
 }
@@ -1073,9 +1074,16 @@ section.contact-details {
 :deep(.v-select.select) {
 	min-width: 0;
 	flex: 1 auto;
-	.vs__actions {
-		display: none;
-	}
+}
+
+:deep(.v-select.select .vs__selected-options), :deep(.vs__search) {
+	min-height: unset;
+	margin: 0 !important;
+}
+
+:deep(.vs__selected) {
+	height: calc(var(--default-clickable-area) - var(--default-grid-baseline)) !important;
+	margin: calc(var(--default-grid-baseline) / 2);
 }
 
 #pick-addressbook-modal {
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 3bbc526d..9dc9db52 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -82,10 +82,12 @@
 						<span>{{ propModel.readableValues[index] }}</span>
 					</div>
 					<div class="property__value">
-						<input v-model.trim="localValue[index]"
+						<NcTextField :value.sync="localValue[index]"
 							:readonly="isReadOnly"
 							type="text"
-							@input="updateValue">
+							:label-outside="true"
+							:label="propModel.readableValues[index]"
+							@update:value="updateValue" />
 					</div>
 					<div class="property__actions" />
 				</template>
@@ -100,10 +102,12 @@
 				<template v-if="(isReadOnly && filteredValue[index]) || !isReadOnly">
 					<div class="property__label" />
 					<div class="property__value">
-						<input v-model.trim="filteredValue[index]"
+						<NcTextField :value.sync="filteredValue[index]"
 							:readonly="isReadOnly"
+							:label-outside="true"
+							:label="propModel.readableValues[index]"
 							type="text"
-							@input="updateValue">
+							@update:value="updateValue" />
 					</div>
 					<div class="property__actions" />
 				</template>
@@ -113,7 +117,7 @@
 </template>
 
 <script>
-import { NcSelect } from '@nextcloud/vue'
+import { NcSelect, NcTextField } from '@nextcloud/vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
 import PropertyActions from './PropertyActions.vue'
@@ -123,6 +127,7 @@ export default {
 
 	components: {
 		NcSelect,
+		NcTextField,
 		PropertyTitle,
 		PropertyActions,
 	},
@@ -165,17 +170,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss" scoped>
-.property {
-	&__label {
-		&--read-only {
-			// Prevent jumping of the label when changing edit/view mode
-			// FIXME: drop forced height if NcMultiselect is migrated to NcSelect and can be
-			//        properly styled as read-only
-			height: 42px;
-			line-height: 42px;
-		}
-	}
-}
-</style>
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 4f9a18fd..aad78dcb 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -47,25 +47,25 @@
 
 			<!-- textarea for note -->
 			<div class="property__value">
-				<textarea v-if="propName === 'note'"
+				<NcTextArea v-if="propName === 'note'"
 					id="textarea"
 					ref="textarea"
-					v-model.trim="localValue"
+					:value.sync="localValue"
 					:inputmode="inputmode"
 					:readonly="isReadOnly"
-					@input="updateValueNoDebounce"
+					@update:value="updateValueNoDebounce"
 					@mousemove="resizeHeight"
 					@keypress="resizeHeight" />
 
 				<!-- OR default to input -->
-				<input v-else
-					v-model.trim="localValue"
+				<NcTextField v-else
+					:value.sync="localValue"
 					:inputmode="inputmode"
 					:readonly="isReadOnly"
 					:class="{'property__value--with-ext': haveExtHandler}"
 					type="text"
 					:placeholder="placeholder"
-					@input="updateValue">
+					@update:value="updateValue" />
 
 				<!-- external link -->
 				<a v-if="haveExtHandler && isReadOnly"
@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { NcSelect } from '@nextcloud/vue'
+import { NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import debounce from 'debounce'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
@@ -100,6 +100,8 @@ export default {
 
 	components: {
 		NcSelect,
+		NcTextArea,
+		NcTextField,
 		PropertyTitle,
 		PropertyActions,
 		OpenInNewIcon,
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index df41ff06..519e58e1 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -85,7 +85,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+h3 {
+	font-size: 22px;
+	margin: 0;
+}
+
 .property {
+	margin-top: 12px;
+	margin-bottom: 6px;
+	display: flex;
+	align-items: center;
+
 	// Left align icon and title on mobile
 	@media (max-width: 1024px) {
 		&__label {
diff --git a/src/css/Properties/Properties.scss b/src/css/Properties/Properties.scss
index 6973d427..4cb8268d 100644
--- a/src/css/Properties/Properties.scss
+++ b/src/css/Properties/Properties.scss
@@ -23,6 +23,7 @@ $property-row-gap: $contact-details-row-gap;
 
 	// property row
 	&__row {
+		margin-top: var(--default-grid-baseline);
 		display: flex;
 		align-items: center;
 		gap: $property-row-gap;
@@ -43,7 +44,6 @@ $property-row-gap: $contact-details-row-gap;
 		min-width: 0; // Has to be zero unless we implement wrapping
 		@media screen and (max-width: 1024px) {
 			width: fit-content;
-			
 		}
 		// Text label styling
 		> :not(.multiselect):not(.material-design-icon) {
@@ -131,4 +131,4 @@ $property-row-gap: $contact-details-row-gap;
 		z-index: 10;
 		width: 44px;
 	}
-}
\ No newline at end of file
+}