From da7c87ee2d0fc02c26c3ec6bd1e60465deafc3c0 Mon Sep 17 00:00:00 2001 From: nfebe Date: Mon, 17 Nov 2025 18:57:52 +0100 Subject: [PATCH] refactor(settings): reorganize settings dialog with new form components Use NcFormBox, NcFormBoxSwitch, and related components to modernize the settings dialog layout following the new design patterns. - Replace CheckboxRadioSwitch with NcFormBoxSwitch for social sync - Wrap sort select in NcFormBox for consistent styling - Convert new address book to button with expandable form - Update address book list styling with borders and proper spacing - Add success/error toast notifications for setting changes - Bump @nextcloud/vue to ^9.2.0 for NcFormBox components Signed-off-by: nfebe [skip ci] --- package-lock.json | 24 +++--- .../AppNavigation/ContactsSettings.vue | 60 +++++++-------- .../Settings/SettingsAddressbook.vue | 20 +++++ .../Settings/SettingsNewAddressbook.vue | 74 ++++++++++++++++++- .../Settings/SettingsSortContacts.vue | 7 +- 5 files changed, 140 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a711abab2..1c42945463 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4552,7 +4552,7 @@ "@nextcloud/capabilities": "^1.2.0", "@nextcloud/event-bus": "^3.3.2", "@nextcloud/initial-state": "^3.0.0", - "@nextcloud/l10n": "^3.4.0", + "@nextcloud/l10n": "^3.4.1", "@nextcloud/logger": "^3.0.2", "@nextcloud/router": "^3.0.1", "@nextcloud/sharing": "^0.2.5", @@ -4567,7 +4567,7 @@ "emoji-mart-vue-fast": "^15.0.4", "escape-html": "^1.0.3", "floating-vue": "^5.2.2", - "focus-trap": "^7.6.5", + "focus-trap": "^7.6.6", "linkifyjs": "^4.3.2", "p-queue": "^8.1.0", "rehype-external-links": "^3.0.0", @@ -10570,12 +10570,12 @@ "peer": true }, "node_modules/focus-trap": { - "version": "7.6.5", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz", - "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==", + "version": "7.6.6", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz", + "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==", "license": "MIT", "dependencies": { - "tabbable": "^6.2.0" + "tabbable": "^6.3.0" } }, "node_modules/follow-redirects": { @@ -23270,7 +23270,7 @@ "@nextcloud/capabilities": "^1.2.0", "@nextcloud/event-bus": "^3.3.2", "@nextcloud/initial-state": "^3.0.0", - "@nextcloud/l10n": "^3.4.0", + "@nextcloud/l10n": "^3.4.1", "@nextcloud/logger": "^3.0.2", "@nextcloud/router": "^3.0.1", "@nextcloud/sharing": "^0.2.5", @@ -23285,7 +23285,7 @@ "emoji-mart-vue-fast": "^15.0.4", "escape-html": "^1.0.3", "floating-vue": "^5.2.2", - "focus-trap": "^7.6.5", + "focus-trap": "^7.6.6", "linkifyjs": "^4.3.2", "p-queue": "^8.1.0", "rehype-external-links": "^3.0.0", @@ -27682,11 +27682,11 @@ "peer": true }, "focus-trap": { - "version": "7.6.5", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz", - "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==", + "version": "7.6.6", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz", + "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==", "requires": { - "tabbable": "^6.2.0" + "tabbable": "^6.3.0" } }, "follow-redirects": { diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue index 4055b9478a..5d26cc395e 100644 --- a/src/components/AppNavigation/ContactsSettings.vue +++ b/src/components/AppNavigation/ContactsSettings.vue @@ -23,6 +23,7 @@ +
@@ -57,11 +58,12 @@ export default { components: { AppSettingsDialog, AppSettingsSection, + NcFormBox, + NcFormBoxSwitch, SettingsAddressbook, SettingsNewAddressbook, SettingsImportContacts, SettingsSortContacts, - CheckboxRadioSwitch, }, props: { open: { @@ -71,7 +73,6 @@ export default { }, data() { return { - CONTACTS_SETTINGS, allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no', enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no', enableSocialSyncLoading: false, @@ -111,6 +112,10 @@ export default { await axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), { allow: setting, }) + showSuccess(t('contacts', 'Setting saved')) + } catch { + showError(t('contacts', 'Failed to save setting')) + this.enableSocialSync = !value } finally { this.enableSocialSyncLoading = false } @@ -125,36 +130,33 @@ export default { } - diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue index 415fa4891c..bfe0a80376 100644 --- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue +++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue @@ -412,6 +412,26 @@ export default { .settings-addressbook-list { display: flex; width: 100%; + align-items: center; + gap: calc(var(--default-grid-baseline) * 2); + padding: calc(var(--default-grid-baseline) * 2) 0; + border-bottom: 1px solid var(--color-border); + + &:last-child { + border-bottom: none; + } + + .settings-line__icon { + flex-shrink: 0; + width: 44px; + height: 44px; + } + + .addressbook { + flex: 1; + padding: 0; + } + .material-design-icon { justify-content: flex-start; } diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue index 1bc2cdf13a..e7ac0d2ee8 100644 --- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue +++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue @@ -21,7 +21,32 @@ - + {{ t('contacts', 'New address book') }} + + + + +
+ + +
+ + {{ t('contacts', 'Cancel') }} + + + {{ t('contacts', 'Add') }} + +
+
+
@@ -37,11 +62,14 @@ export default { NcInputField, IconAdd, IconLoading, + NcButton, + NcModal, }, data() { return { loading: false, displayName: '', + modalOpen: false, } }, computed: { @@ -55,6 +83,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 */ @@ -78,3 +121,32 @@ export default { }, } + + diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue index ff21cd2b7b..e5aaf35bfe 100644 --- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue +++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue @@ -20,18 +20,17 @@