diff options
author | Grigory V <scratchx@gmx.com> | 2024-07-18 12:12:24 +0200 |
---|---|---|
committer | Grigory V <scratchx@gmx.com> | 2024-07-18 12:41:02 +0200 |
commit | 1f97e7df08a5d0d96d98800bb2f4ddc6a9c2ff1b (patch) | |
tree | a8c9f4dc34efa240743813dfec56230fee6e2792 | |
parent | febfa204894e9b1714a8bdfa3c66154f067b2b2e (diff) |
style(Address book settings): style changes and add NcTextFieldstyle/improve-address-book-adding
Signed-off-by: Grigory V <scratchx@gmx.com>
-rw-r--r-- | src/components/AppNavigation/Settings/SettingsAddressbook.vue | 9 | ||||
-rw-r--r-- | src/components/AppNavigation/Settings/SettingsNewAddressbook.vue | 53 |
2 files changed, 24 insertions, 38 deletions
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue index 314660ff..bcbaf207 100644 --- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue +++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue @@ -4,7 +4,7 @@ --> <template> <div class="settings-addressbook-list"> - <IconContact class="settings-line__icon" /> + <IconContactPlus class="settings-line__icon" /> <li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook"> <div class="addressbook__content"> <!-- addressbook name --> @@ -124,7 +124,7 @@ import { import IconDownload from 'vue-material-design-icons/Download.vue' import IconRename from 'vue-material-design-icons/Pencil.vue' import IconDelete from 'vue-material-design-icons/Delete.vue' -import IconContact from 'vue-material-design-icons/AccountMultiple.vue' +import IconContactPlus from 'vue-material-design-icons/AccountMultiplePlus.vue' import IconShare from 'vue-material-design-icons/ShareVariant.vue' import ShareAddressBook from './SettingsAddressbookShare.vue' import { showError } from '@nextcloud/dialogs' @@ -146,7 +146,7 @@ export default { IconDelete, IconDownload, IconRename, - IconContact, + IconContactPlus, IconShare, IconLoading, ShareAddressBook, @@ -369,7 +369,6 @@ export default { &__count-wrapper { display: flex; - flex-direction: center; } &__count { @@ -384,8 +383,6 @@ export default { &__share, &__menu .icon-more { - width: 44px; - height: 44px; opacity: .5; &:hover, &:focus, diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue index 700f51c3..af4d1688 100644 --- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue +++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue @@ -5,32 +5,27 @@ <template> <div class="new-addressbook-entry"> - <IconAdd class="settings-line__icon" /> - <form id="new-addressbook-form" + <IconLoading v-if="loading" :size="20" /> + <NcTextField class="new-addressbook" + :value.sync="displayName" :disabled="loading" - name="new-addressbook-form" - class="new-addressbook" - @submit.prevent.stop="addAddressbook"> - <IconLoading v-if="loading" :size="20" /> - <input id="new-addressbook" - ref="addressbook" - v-model="displayName" - :disabled="loading" - :placeholder="t('contacts', 'Add new address book')" - :pattern="addressBookRegex" - class="new-addressbook-input" - type="text" - autocomplete="off" - autocorrect="off" - spellcheck="false" - minlength="1" - required> - <input class="icon-confirm" type="submit" value=""> - </form> + :label="t('contacts', 'Add new address book')" + :pattern="addressBookRegex" + :show-trailing-button="true" + :trailing-button-label="t('contacts', 'Add')" + trailing-button-icon="arrowRight" + type="text" + autocomplete="off" + autocorrect="off" + spellcheck="false" + @trailing-button-click="addAddressbook"> + <IconAdd :size="20" /> + </NcTextField> </div> </template> <script> +import { NcTextField } from '@nextcloud/vue' import { showError } from '@nextcloud/dialogs' import IconAdd from 'vue-material-design-icons/Plus.vue' import IconLoading from 'vue-material-design-icons/Loading.vue' @@ -38,6 +33,7 @@ import IconLoading from 'vue-material-design-icons/Loading.vue' export default { name: 'SettingsNewAddressbook', components: { + NcTextField, IconAdd, IconLoading, }, @@ -55,6 +51,10 @@ export default { * Add a new address book */ addAddressbook() { + if (this.displayName === '') { + return + } + this.loading = true this.$store.dispatch('appendAddressbook', { displayName: this.displayName }) .then(() => { @@ -70,14 +70,3 @@ 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> |