fix: Use NcSelect instead of NcMultiselect and use NcTextField instea…

…d of custom input This resolves some styling issues, like hovering the submit input does not set the border on the text input or mismatching borders. Moreover the `NcMultiselect` is deprecated and should be replaced with the `NcSelect`. Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
nextcloud · Feb 10, 2023 · 8f534e6 · 8f534e6
1 parent d66424f
commit 8f534e6
Showing 1 changed file with 58 additions and 45 deletions.
diff --git a/src/components/Nav/NewCollective.vue b/src/components/Nav/NewCollective.vue
@@ -33,51 +33,60 @@
 			</NcActionButton>
 		</template>
 	</NcAppNavigationItem>
-	<div v-else class="collective-create">
-		<form v-show="editing" @submit.prevent.stop="createCollective">
-			<NcEmojiPicker :show-preview="true" @select="addEmoji">
-				<NcButton type="tertiary"
-					:aria-label="t('collectives', 'Select emoji for collective')"
-					:title="t('collectives', 'Select emoji')"
-					class="button-emoji"
-					@click.prevent>
-					{{ emoji }}
-				</NcButton>
-			</NcEmojiPicker>
-
-			<input v-if="!pickCircle"
-				ref="nameField"
-				v-model="text"
-				:placeholder="t('collectives', 'New collective name')"
-				type="text"
-				required>
-			<NcMultiselect v-else
-				ref="circleSelector"
+	<div v-else v-show="editing" class="collective-create">
+		<NcEmojiPicker :show-preview="true" @select="addEmoji">
+			<NcButton type="tertiary"
+				:aria-label="t('collectives', 'Select emoji for collective')"
+				:title="t('collectives', 'Select emoji')"
+				class="button-emoji"
+				@click.prevent>
+				{{ emoji }}
+			</NcButton>
+		</NcEmojiPicker>
+
+		<NcTextField v-if="!pickCircle"
+			:value.sync="text"
+			:error="!text"
+			:label="t('collectives', 'New collective name')"
+			:show-trailing-button="!!text"
+			required
+			trailing-button-icon="arrowRight"
+			:trailing-button-label="t('collectives', 'Create new collective')"
+			@trailing-button-click="createCollective" />
+
+		<div v-else class="circle-selector--container">
+			<NcSelect ref="circleSelector"
 				v-model="circle"
+				:loading="loading"
 				:options="circles"
 				open-direction="below"
-				:placeholder="t('collectives', 'Select circle...')"
+				:placeholder="t('collectives', 'Select circle …')"
 				required />
-			<input type="submit"
-				value=""
+			<NcButton :disabled="loading || !circle"
 				:aria-label="t('collectives', 'Create a new collective')"
-				class="icon-confirm"
-				:class="{ 'icon-loading-small': loading }">
-			<NcActions>
-				<NcActionButton icon="icon-close"
-					:aria-label="t('collectives', 'Cancel creating a new collective')"
-					@click.stop.prevent="cancelEdit" />
-			</NcActions>
-		</form>
+				type="tertiary-no-background"
+				@click="createCollective">
+				<template #icon>
+					<ArrowRightIcon :size="20" />
+				</template>
+			</NcButton>
+		</div>
+
+		<NcActions>
+			<NcActionButton icon="icon-close"
+				:aria-label="t('collectives', 'Cancel creating a new collective')"
+				@click.stop.prevent="cancelEdit" />
+		</NcActions>
 	</div>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { NcActionButton, NcActions, NcAppNavigationItem, NcButton, NcMultiselect } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcAppNavigationItem, NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import { mapActions, mapGetters } from 'vuex'
 import CirclesIcon from '../Icon/CirclesIcon.vue'
+import ArrowRightIcon from 'vue-material-design-icons/ArrowRight.vue'
 import { GET_CIRCLES, NEW_COLLECTIVE } from '../../store/actions.js'
 import displayError from '../../util/displayError.js'
 
@@ -86,13 +95,15 @@ const randomColor = () => '#' + ((1 << 24) * Math.random() | 0).toString(16)
 export default {
 	name: 'NewCollective',
 	components: {
+		ArrowRightIcon,
+		CirclesIcon,
 		NcAppNavigationItem,
 		NcActionButton,
 		NcActions,
 		NcButton,
-		CirclesIcon,
 		NcEmojiPicker,
-		NcMultiselect,
+		NcSelect,
+		NcTextField,
 	},
 	directives: {},
 	data() {
@@ -207,22 +218,24 @@ export default {
 
 <style lang="scss" scoped>
 .collective-create {
-	form {
+	display: flex;
+	align-items: center;
+
+	.circle-selector--container {
 		display: flex;
+		align-items: center;
+		flex-grow: 1;
 
-		input[type='text'] {
+		.v-select.select {
+			min-width: 100%;
 			flex-grow: 1;
 		}
-
-		input[type='submit'] {
-			border-radius: var(--border-radius-large) !important;
-			border-width: 2px;
-			margin-right: 0;
+		:deep(.vs__actions) {
+			margin-right: 38px; // 44px button - 6px padding
 		}
-
-		.multiselect {
-			min-width: unset;
-			flex-grow: 1;
+		.button-vue {
+			position: relative;
+			left: -44px;
 		}
 	}
 }