Merge pull request #4039 from nextcloud/style/improve-address-book-ad…

…ding Address book settings: style changes and add NcTextField
nextcloud · Jul 23, 2024 · fbe36e1 · fbe36e1
2 parents 5161137 + 1f97e7d
commit fbe36e1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 38 deletions.
diff --git 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
@@ -5,39 +5,35 @@
 
 <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'
 
 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>