feat(contacts): implement final design enhancements from mockups

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

4 files changed, 43 insertions, 9 deletions

diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index 9bd8e99a..687211fc 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -116,6 +116,14 @@ $property-row-gap: $contact-details-row-gap;
 		}
 	}
 
+	// Mobile tweaks
+	@media (max-width: 1024px) {
+		// Left align labels on mobile
+		&__label {
+			justify-content: flex-start;
+		}
+	}
+
 	// Show ext buttons on full row hover
 	&:hover {
 		.property__ext {
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index edd84c71..97a2fcec 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -121,7 +121,7 @@
 					<!-- edit and save buttons -->
 					<template v-if="!addressbookIsReadOnly">
 						<NcButton v-if="!editMode"
-							type="tertiary"
+							:type="isMobile ? 'secondary' : 'tertiary'"
 							@click="editMode = true">
 							<template #icon>
 								<PencilIcon :size="20" />
@@ -129,7 +129,7 @@
 							{{ t('contacts', 'Edit') }}
 						</NcButton>
 						<NcButton v-else
-							type="primary"
+							type="secondary"
 							:disabled="loadingUpdate"
 							@click="onSave">
 							<template #icon>
@@ -286,6 +286,7 @@ import {
 	NcMultiselect as Multiselect,
 	NcLoadingIcon as IconLoading,
 	NcButton,
+	isMobile,
 } from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
@@ -312,6 +313,8 @@ import PropertySelect from './Properties/PropertySelect.vue'
 export default {
 	name: 'ContactDetails',
 
+	mixins: [isMobile],
+
 	components: {
 		ActionButton,
 		ActionLink,
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index 6f0a705b..762372b9 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -89,23 +89,32 @@ $top-padding: 50px;
 // Header with avatar, name, position, actions...
 .contact-header {
 	display: flex;
-	flex-wrap: wrap;
 	align-items: center;
 	padding: $top-padding 0 20px;
 	gap: $contact-details-row-gap;
 
-	// Top padding of 44px is already included in AppContent by default on mobile
 	@media (max-width: 1024px) {
+		// Top padding of 44px is already included in AppContent by default on mobile
 		padding-top: calc($top-padding - 44px);
+
+		// Wrap actions on mobile
+		flex-wrap: wrap;
+		&__no-wrap {
+			width: 100%;
+		}
+		&__infos {
+			// Account for nonexistent actions menu
+			width: calc($contact-details-value-max-width + $contact-details-row-gap + 44px) !important;
+		}
+		&__actions {
+			justify-content: space-between;
+		}
 	}
 
 	&__no-wrap {
 		display: flex;
-		flex: 9999 1 auto;
 		gap: $contact-details-row-gap;
 		align-items: center;
-
-		// Wrap actions to next line before shrinking
 		min-width: 0;
 	}
 
@@ -126,7 +135,7 @@ $top-padding: 50px;
 		// Global single column layout
 		display: flex;
 		flex: 0 1 auto;
-		width: calc($contact-details-value-max-width + $contact-details-row-gap + 44px);
+		width: $contact-details-value-max-width;
 		min-width: 0; // Has to be zero unless we implement wrapping
 
 		&-title,
@@ -153,7 +162,6 @@ $top-padding: 50px;
 	&__actions {
 		display: flex;
 		flex: 1 0 auto;
-		justify-content: space-between;
 	}
 }
 </style>
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index ec17f730..b3e42b91 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -101,3 +101,18 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.property {
+	// Left align icon and title on mobile
+	@media (max-width: 1024px) {
+		&__label {
+			width: unset;
+		}
+	}
+
+	&__value {
+		font-weight: bold;
+	}
+}
+</style>