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')">
 			<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/SettingsNewAddressbook.vue

@@ -5,8 +5,14 @@
 
 <template>
 	<div class="new-addressbook-entry">
+		<NcButton v-if="!enabled" @click="enabled = true">
+			<template #icon>
+				<IconAdd :size="20" />
+			</template>
+			{{ t('contacts', 'New address book') }}
+		</NcButton>
 		<IconLoading v-if="loading" :size="20" />
-		<NcInputField
+		<NcInputField v-if="enabled"
 			v-model:model-value="displayName"
 			class="new-addressbook"
 			:disabled="loading"
@@ -28,7 +34,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcInputField } from '@nextcloud/vue'
+import { NcInputField, NcButton } from '@nextcloud/vue'
 import IconLoading from 'vue-material-design-icons/Loading.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 
@@ -38,12 +44,14 @@ export default {
 		NcInputField,
 		IconAdd,
 		IconLoading,
+		NcButton,
 	},
 
 	data() {
 		return {
 			loading: false,
 			displayName: '',
+			enabled: false,
 		}
 	},
 
@@ -82,3 +90,17 @@ 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;
+	}
+}
+</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>