Migrate settings menu of contacts

Signed-off-by: greta <gretadoci@gmail.com>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

css/SettingsSection.scss

@@ -64,16 +64,6 @@
 	height: 44px;
 }
 
-.social-sync__list-entry {
-	label::before {
-		margin-left: 14px !important;
-		margin-right: 14px !important;
-	}
-	em {
-		margin-left: 44px !important;
-	}
-}
-
 // Sort Contacts
 .sort-contacts {
 	display: flex;

src/components/AppNavigation/Settings/SettingsAddressbook.vue

@@ -22,7 +22,7 @@
   -->
 <template>
 	<div class="settings-addressbook-list">
-		<div class="icon-group settings-line__icon" />
+		<IconContact class="settings-line__icon" />
 		<li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook">
 			<!-- addressbook name -->
 			<span class="addressbook__name" :title="addressbook.displayName">
@@ -50,16 +50,20 @@
 
 				<!-- download addressbook -->
 				<ActionLink
-					:href="addressbook.url + '?export'"
-					icon="icon-download">
+					:href="addressbook.url + '?export'">
+					<template #icon>
+						<IconDownload :size="20" />
+					</template>
 					{{ t('contacts', 'Download') }}
 				</ActionLink>
 
 				<template v-if="!addressbook.readOnly">
 					<!-- rename addressbook -->
 					<ActionButton v-if="!editingName"
-						icon="icon-rename"
 						@click.stop.prevent="renameAddressbook">
+						<template #icon>
+							<IconRename :size="20" />
+						</template>
 						{{ t('contacts', 'Rename') }}
 					</ActionButton>
 					<ActionInput v-else
@@ -101,6 +105,9 @@ import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import IconDownload from 'vue-material-design-icons/Download'
+import IconRename from 'vue-material-design-icons/Pencil'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
 import ShareAddressBook from './SettingsAddressbookShare'
 import { showError } from '@nextcloud/dialogs'
 
@@ -115,6 +122,9 @@ export default {
 		ActionInput,
 		ActionLink,
 		Actions,
+		IconDownload,
+		IconRename,
+		IconContact,
 		ShareAddressBook,
 	},
 
@@ -311,4 +321,11 @@ export default {
 		opacity: .5;
 	}
 }
+.settings-addressbook-list {
+	display: flex;
+	gap: 4px;
+	li {
+		width: calc(100% - 44px);
+	}
+}
 </style>

src/components/AppNavigation/Settings/SettingsNewAddressbook.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div class="new-addressbook-entry">
-		<div class="icon-add settings-line__icon" />
+		<IconAdd class="settings-line__icon" />
 		<form id="new-addressbook-form"
 			:disabled="loading"
 			:class="{'icon-loading-small': loading}"
@@ -49,10 +49,13 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import IconAdd from 'vue-material-design-icons/Plus'
 
 export default {
 	name: 'SettingsNewAddressbook',
-
+	components: {
+		IconAdd,
+	},
 	data() {
 		return {
 			loading: false,
@@ -82,3 +85,13 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+#new-addressbook-form {
+	display: flex;
+	width: calc(100% - 44px);
+}
+.new-addressbook-entry {
+	display: flex;
+	align-items: center;
+}
+</style>

src/components/AppNavigation/Settings/SettingsSortContacts.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div class="sort-contacts">
-		<div class="icon-category-organization settings-line__icon" />
+		<IconList class="settings-line__icon" />
 		<Multiselect
 			id="sort-by"
 			:value="orderKeyOption"
@@ -38,12 +38,14 @@
 
 <script>
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import IconList from 'vue-material-design-icons/FormatListBulletedSquare'
 
 export default {
 	name: 'SettingsSortContacts',
 
 	components: {
 		Multiselect,
+		IconList,
 	},
 
 	computed: {
@@ -97,3 +99,8 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.sort-contacts {
+	display: flex;
+}
+</style>

src/components/AppNavigation/SettingsSection.vue

@@ -24,16 +24,18 @@
 <template>
 	<div>
 		<SettingsSortContacts class="settings-section" />
-		<div v-if="allowSocialSync" class="social-sync__list-entry">
-			<input
-				id="socialSyncToggle"
-				class="checkbox"
-				:checked="enableSocialSync"
-				type="checkbox"
-				@change="toggleSocialSync">
-			<label for="socialSyncToggle">{{ t('contacts', 'Update avatars from social media') }}</label>
-			<em for="socialSyncToggle">{{ t('contacts', '(refreshed once per week)') }}</em>
-		</div>
+		<CheckboxRadioSwitch :checked="enableSocialSync"
+			:loading="enableSocialSyncLoading"
+			:disabled="enableSocialSyncLoading"
+			class="social-sync__checkbox"
+			@update:checked="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>
 		<div class="settings-addressbook-list__header">
 			<span>{{ t('contacts', 'Address books') }}</span>
 		</div>
@@ -56,6 +58,7 @@ import SettingsAddressbook from './Settings/SettingsAddressbook'
 import SettingsNewAddressbook from './Settings/SettingsNewAddressbook'
 import SettingsImportContacts from './Settings/SettingsImportContacts'
 import SettingsSortContacts from './Settings/SettingsSortContacts'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 
 export default {
 	name: 'SettingsSection',
@@ -64,11 +67,13 @@ export default {
 		SettingsNewAddressbook,
 		SettingsImportContacts,
 		SettingsSortContacts,
+		CheckboxRadioSwitch,
 	},
 	data() {
 		return {
 			allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no',
 			enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no',
+			enableSocialSyncLoading: false,
 		}
 	},
 	computed: {
@@ -81,15 +86,20 @@ export default {
 		onClickImport(event) {
 			this.$emit('clicked', event)
 		},
-		toggleSocialSync() {
+		async toggleSocialSync() {
 			this.enableSocialSync = !this.enableSocialSync
+			this.enableSocialSyncLoading = true
 
 			// store value
 			let setting = 'yes'
 			this.enableSocialSync ? setting = 'yes' : setting = 'no'
-			axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), {
-				allow: setting,
-			})
+			try {
+				await axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), {
+					allow: setting,
+				})
+			} finally {
+				this.enableSocialSyncLoading = false
+			}
 		},
 		onLoad(event) {
 			this.$emit('file-loaded', false)
@@ -97,3 +107,19 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.social-sync__checkbox {
+	margin-top: 5px;
+
+	::v-deep .checkbox-radio-switch__label {
+		height: unset !important;
+	}
+
+	::v-deep .checkbox-radio-switch__icon {
+		width: 44px;
+		flex-shrink: 0;
+		flex-grow: 0;
+	}
+}
+</style>

src/components/CircleDetails/CirclePasswordSettings.vue

@@ -52,7 +52,7 @@
 							:disabled="loading.length > 0"
 							:placeholder="t('contacts', 'Unique password …')"
 							type="text"
-							@keyup.enter="saveUniquePassword" />
+							@keyup.enter="saveUniquePassword">
 						<Button
 							type="tertiary-no-background"
 							:disabled="loading.length > 0 || uniquePassword.length === 0"