fix(ContactsSettings): redo

Signed-off-by: Grigory Vodyanov <[email protected]>

Author: GVodyanov

src/components/AppNavigation/ContactsSettings.vue

@@ -9,21 +9,27 @@
 		v-model:open="showSettings"
 		:name="t('contacts', 'Contacts settings')"
 		:show-navigation="true">
-		<AppSettingsSection id="general-settings" :name="t('contacts', 'General settings')">
+		<AppSettingsSection id="general-settings" :name="t('contacts', 'General')">
+			<SettingsSortContacts class="contacts-settings-modal__form__row" />
 			<CheckboxRadioSwitch
 				:model-value="enableSocialSync"
 				:loading="enableSocialSyncLoading"
 				:disabled="enableSocialSyncLoading"
+				type="switch"
 				class="social-sync__checkbox contacts-settings-modal__form__row"
+				:description="t('contacts', 'Refreshed once per week')"
 				@update:model-value="toggleSocialSync">
 				<div class="social-sync__checkbox__label">
 					<span>
 						{{ t('contacts', 'Update avatars from social media') }}
-						<em>{{ t('contacts', '(refreshed once per week)') }}</em>
 					</span>
 				</div>
 			</CheckboxRadioSwitch>
-			<SettingsSortContacts class="contacts-settings-modal__form__row" />
+			<SettingsImportContacts
+				:addressbooks="addressbooks"
+				class="contacts-settings-modal__form__row"
+				@clicked="onClickImport"
+				@file-loaded="onLoad" />
 		</AppSettingsSection>
 		<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
 			<div class="contacts-settings-modal__form">
@@ -33,11 +39,6 @@
 					</ul>
 				</div>
 				<SettingsNewAddressbook class="contacts-settings-modal__form__row settings-new-addressbook" :addressbooks="addressbooks" />
-				<SettingsImportContacts
-					:addressbooks="addressbooks"
-					class="contacts-settings-modal__form__row"
-					@clicked="onClickImport"
-					@file-loaded="onLoad" />
 			</div>
 		</AppSettingsSection>
 	</AppSettingsDialog>

src/components/AppNavigation/Settings/SettingsAddressbook.vue

@@ -4,40 +4,38 @@
 -->
 <template>
 	<div class="settings-addressbook-list">
-		<IconContactPlus class="settings-line__icon" />
-		<li :class="{ 'addressbook--disabled': !addressbook.enabled }" class="addressbook">
-			<div class="addressbook__content">
-				<!-- addressbook name -->
-				<span class="addressbook__name" :title="addressbook.displayName">
-					{{ addressbook.enabled ? addressbook.displayName : t('contacts', '{addressbookname} (Hidden)', { addressbookname: addressbook.displayName }) }}
+		<NcListItem :class="{ 'addressbook--disabled': !addressbook.enabled }" :force-display-actions="true">
+			<template #icon>
+				<IconContactPlus class="settings-line__icon" />
+			</template>
+			<template #name :title="addressbook.displayName">
+				{{ addressbook.enabled ? addressbook.displayName : t('contacts', '{addressbookname} (Hidden)', { addressbookname: addressbook.displayName }) }}			</template>
+
+			<template #subname>
+				<span v-if="addressbook.dav.description">{{ addressbook.dav.description }}, </span>
+				<span v-if="addressbook.enabled" class="addressbook__count-wrapper">
+					<span class="addressbook__count">{{ n('contacts', '%n contact', '%n contacts', contactsCount) }}</span>
+					<span class="addressbook__count"> - {{ n('contacts', '%n group', '%n groups', groupsCount) }}</span>
 				</span>
+			</template>
 
-				<div v-if="addressbook.dav.description" class="addressbook__description">
-					{{ addressbook.dav.description }}
-				</div>
-				<!-- counters -->
-				<div v-if="addressbook.enabled" class="addressbook__count-wrapper">
-					<span class="addressbook__count">{{ n('contacts', '%n contact', '%n contacts', contactsCount) }}</span>
-					<span class="addressbook__count">- {{ n('contacts', '%n group', '%n groups', groupsCount) }}</span>
-				</div>
-			</div>
-
-			<!-- sharing Ncbutton -->
-			<NcButton
-				v-if="!addressbook.readOnly && !isSharedWithMe"
-				v-tooltip.top="sharedWithTooltip"
-				:class="{ 'addressbook__share--shared': hasShares }"
-				:name="sharedWithTooltip"
-				href="#"
-				class="addressbook__share"
-				@click="toggleShare">
-				<template #icon>
-					<IconShare :size="20" />
-				</template>
-			</NcButton>
+			<template #extra-actions>
+				<!-- sharing Ncbutton -->
+				<ActionButton
+					v-if="!addressbook.readOnly && !isSharedWithMe"
+					:title="sharedWithTooltip"
+					:class="{ 'addressbook__share--shared': hasShares }"
+					variant="tertiary"
+					href="#"
+					class="addressbook__share"
+					@click="toggleShare">
+					<template #icon>
+						<IconShare :size="20" />
+					</template>
+				</ActionButton>
+			</template>
 
-			<!-- popovermenu -->
-			<Actions class="addressbook__menu" menu-align="right">
+			<template #actions>
 				<!-- copy addressbook link -->
 				<ActionLink
 					:href="addressbook.url"
@@ -111,10 +109,9 @@
 					</template>
 					{{ t('contacts', 'Delete') }}
 				</ActionButton>
-			</Actions>
-			<!-- sharing input -->
-			<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
-		</li>
+			</template>
+		</NcListItem>
+		<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
 	</div>
 </template>
 
@@ -128,6 +125,7 @@ import {
 	NcActions as Actions,
 	NcLoadingIcon as IconLoading,
 	NcButton,
+	NcListItem,
 } from '@nextcloud/vue'
 import IconContactPlus from 'vue-material-design-icons/AccountMultiplePlusOutline.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
@@ -155,6 +153,7 @@ export default {
 		IconShare,
 		IconLoading,
 		ShareAddressBook,
+		NcListItem,
 	},
 
 	mixins: [CopyToClipboardMixin],
@@ -358,88 +357,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.addressbook {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	padding: var(--default-grid-baseline) 0;
-
-	> .addressbook__content {
-		+ a,
-		+ div {
-			// put actions at the end
-			margin-inline-start: auto;
-		}
-	}
-
-	&__name {
-		display: block;
-		flex: 0 1 auto;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__content {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
-		flex: 0 1 auto;
-		max-width: calc(100% - 2 * 44px);
-	}
-
-	&__description {
-		color: var(--color-text-lighter);
-	}
-
-	&__count-wrapper {
-		display: flex;
-	}
-
-	&__count {
-		margin-inline-start: calc(var(--default-grid-baseline) * 0.5);
-		font-size: smaller;
-		color: var(--color-text-lighter);
-	}
-
-	&__count:not(:last-child) {
-		margin-inline-end: var(--default-grid-baseline);
-	}
-
-	&__share,
-	&__menu .icon-more {
-		opacity: .5;
-		&:hover,
-		&:focus,
-		&:active {
-			opacity: .7;
-		}
-	}
-	&__share {
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-
-		&--shared {
-			opacity: .7;
-		}
-	}
-	&--disabled &__name {
-		opacity: .5;
-	}
-}
-
 .settings-addressbook-list {
 	display: flex;
-	width: 100%;
-	.material-design-icon {
-		justify-content: flex-start;
-	}
-}
-
-.addressbook-shares {
-	padding-top: calc(var(--default-grid-baseline) * 2);
+	flex-direction: column;
 }
 </style>

src/components/AppNavigation/Settings/SettingsNewAddressbook.vue

@@ -5,30 +5,42 @@
 
 <template>
 	<div class="new-addressbook-entry">
-		<IconLoading v-if="loading" :size="20" />
-		<NcInputField
-			v-model:model-value="displayName"
-			class="new-addressbook"
-			:disabled="loading"
-			:label="t('contacts', 'Add new address book')"
-			:show-trailing-button="true"
-			:trailing-button-label="t('contacts', 'Add')"
-			:error="inputErrorState"
-			type="text"
-			autocomplete="off"
-			autocorrect="off"
-			spellcheck="false"
-			@trailing-button-click="addAddressbook">
-			<template #trailing-button-icon>
+		<NcButton v-if="!modalOpen && !loading" @click="openModal">
+			<template #icon>
 				<IconAdd :size="20" />
 			</template>
-		</NcInputField>
+			{{ t('contacts', 'New address book') }}
+		</NcButton>
+		<IconLoading v-if="loading" :size="20" />
+
+		<NcModal v-if="modalOpen" @close="onModalCancel" size="small">
+			<div class="new-addressbook-modal">
+				<NcInputField
+					v-model:model-value="displayName"
+					class="new-addressbook"
+					:disabled="loading"
+					:label="t('contacts', 'Add new address book')"
+					type="text"
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="false" />
+
+				<div class="new-addressbook-modal__buttons">
+					<NcButton variant="tertiary" :disabled="loading" @click="onModalCancel">
+						{{ t('contacts', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" :disabled="loading || inputErrorState" @click="onModalSubmit">
+						{{ t('contacts', 'Add') }}
+					</NcButton>
+				</div>
+			</div>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcInputField } from '@nextcloud/vue'
+import { NcButton, NcInputField, NcModal } from '@nextcloud/vue'
 import IconLoading from 'vue-material-design-icons/Loading.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 
@@ -38,12 +50,15 @@ export default {
 		NcInputField,
 		IconAdd,
 		IconLoading,
+		NcButton,
+		NcModal,
 	},
 
 	data() {
 		return {
 			loading: false,
 			displayName: '',
+			modalOpen: false,
 		}
 	},
 
@@ -59,6 +74,21 @@ export default {
 	},
 
 	methods: {
+		openModal() {
+			this.modalOpen = true
+		},
+
+		onModalCancel() {
+			this.modalOpen = false
+			this.displayName = ''
+			this.loading = false
+		},
+
+		async onModalSubmit() {
+			await this.addAddressbook()
+			this.modalOpen = false
+		},
+
 		/**
 		 * Add a new address book
 		 */
@@ -82,3 +112,32 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+
+.new-addressbook-entry {
+	display: flex;
+	width: 100%;
+	justify-content: stretch;
+	margin-top: calc(var(--default-grid-baseline) * 2);
+
+	> * {
+		flex-grow: 1;
+	}
+}
+
+.new-addressbook-modal {
+	padding: calc(var(--default-grid-baseline) * 4);
+	padding-top: calc(var(--default-grid-baseline) * 8);
+	> * {
+		width: 100%;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: end;
+		gap: calc(var(--default-grid-baseline) * 2);
+		margin-top: calc(var(--default-grid-baseline) * 2);
+	}
+}
+</style>

src/components/AppNavigation/Settings/SettingsSortContacts.vue

@@ -5,7 +5,6 @@
 
 <template>
 	<div class="sort-contacts">
-		<IconList class="settings-line__icon" />
 		<NcSelect
 			id="sort-by"
 			:value="orderKeyOption"
@@ -14,6 +13,7 @@
 			:options="options"
 			:custom-label="formatSortByLabel"
 			:get-option-key="(option) => option.key"
+			:input-label="t('contacts', 'Sort by')"
 			label="label"
 			@input="sortContacts" />
 	</div>
@@ -89,6 +89,13 @@ export default {
 
 <style lang="scss" scoped>
 .sort-contacts {
+	width: 100%;
 	display: flex;
+	justify-content: stretch;
+	margin-bottom: calc(var(--default-grid-baseline) * 2);
+
+	#sort-by {
+		flex-grow: 1;
+	}
 }
 </style>