diff options
author | greta <gretadoci@gmail.com> | 2022-06-29 17:08:41 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2022-07-15 12:37:56 +0000 |
commit | 7310a2a7e9840480bf7f0a944d0f5d2310683e62 (patch) | |
tree | 268af26422d4ddf1e4cf4eacb01ff2c6144d5bd3 | |
parent | b9be1a4de4c9bae689c7b286deb02b7aea46436d (diff) |
Migrate settings menu of contacts
Signed-off-by: greta <gretadoci@gmail.com>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
6 files changed, 85 insertions, 32 deletions
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss index 39b673a7..0074aa01 100644 --- a/css/SettingsSection.scss +++ b/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; diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue index 0e41c4c0..1972f0b0 100644 --- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue +++ b/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> diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue index e6898392..d3a1fb22 100644 --- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue +++ b/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> diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue index 9607e029..f9087e01 100644 --- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue +++ b/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> diff --git a/src/components/AppNavigation/SettingsSection.vue b/src/components/AppNavigation/SettingsSection.vue index 3939c5d9..58f80ed4 100644 --- a/src/components/AppNavigation/SettingsSection.vue +++ b/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> diff --git a/src/components/CircleDetails/CirclePasswordSettings.vue b/src/components/CircleDetails/CirclePasswordSettings.vue index ce3e7bb3..8228b39a 100644 --- a/src/components/CircleDetails/CirclePasswordSettings.vue +++ b/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" |