fix: Fix styling of navigation input fields

Signed-off-by: Julius Härtl <jus@bitgrid.net>

cypress/e2e/boardFeatures.js

@@ -35,7 +35,7 @@ describe('Board', function() {
 			.type(board, { force: true })
 
 		// Submit
-		cy.get('.board-create form input[type=submit]')
+		cy.get('.board-create form button[type=submit]')
 			.first().click({ force: true })
 
 		cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)

src/components/navigation/AppNavigationAddBoard.vue

@@ -8,19 +8,41 @@
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
-			<input :placeholder="t('deck', 'Board name')" type="text" required>
+			<NcTextField ref="inputField"
-			<input type="submit" value="" class="icon-confirm">
+				:disable="loading"
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+				:value.sync="value"
+				:placeholder="t('deck', 'Board name')"
+				type="text"
+				required />
+			<NcButton type="tertiary"
+				:disabled="loading"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
+import { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 /**
  *
@@ -35,30 +57,33 @@ function randomColor() {
 
 export default {
 	name: 'AppNavigationAddBoard',
-	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
+	components: { NcButton, NcColorPicker, NcAppNavigationItem, NcLoadingIcon, NcTextField, CheckIcon, CloseIcon },
 	directives: {},
 	props: {},
 	data() {
 		return {
+			value: '',
 			classes: [],
 			editing: false,
 			loading: false,
 			color: randomColor(),
 		}
 	},
-	computed: {},
+	mounted() {
-	watch: {},
+		this.$refs.inputField.focus()
-	mounted() {},
+	},
 	methods: {
 		startCreateBoard(e) {
 			this.editing = true
 		},
 		async createBoard(e) {
-			const title = e.currentTarget.childNodes[0].value
+			this.loading = true
+			const title = this.value.trim()
 			await this.$store.dispatch('createBoard', {
 				title,
 				color: this.color.substring(1),
 			})
+			this.loading = false
 			this.editing = false
 			this.color = randomColor()
 		},
@@ -89,10 +114,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
+			width: 24px !important;
-			margin: 5px;
+			margin: var(--default-grid-baseline);
-			margin-left: 7px;
+			height: 24px;
-			height: 30px;
 			border-radius: 50%;
 			background-size: 14px;
 		}

src/components/navigation/AppNavigationBoard.vue

@@ -114,23 +114,43 @@
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
-			<input v-model="editTitle"
+			<NcTextField ref="inputField"
-				v-focus
+				:disable="loading"
-				dir="auto"
+				:value.sync="editTitle"
+				:placeholder="t('deck', 'Board name')"
 				type="text"
-				required>
+				required />
-			<input type="submit" value="" class="icon-confirm">
+			<NcButton type="tertiary"
-			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
+				:disabled="loading"
+				native-type="submit"
+				:title="t('deck', 'Cancel edit')"
+				@click.stop.prevent="cancelEdit">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton type="tertiary"
+				native-type="submit"
+				:disabled="loading"
+				:title="t('deck', 'Save board')">
+				<template #icon>
+					<CheckIcon v-if="!loading" :size="20" />
+					<NcLoadingIcon v-else :size="20" />
+				</template>
+			</NcButton>
 		</form>
 	</div>
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
 import AccountIcon from 'vue-material-design-icons/Account.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+
 import { loadState } from '@nextcloud/initial-state'
 
 const canCreateState = loadState('deck', 'canCreate')
@@ -141,11 +161,14 @@ export default {
 		NcAppNavigationIconBullet,
 		NcAppNavigationItem,
 		NcColorPicker,
-		NcActions,
+		NcButton,
+		NcTextField,
 		NcActionButton,
 		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
+		CloseIcon,
+		CheckIcon,
 	},
 	directives: {
 		ClickOutside,
@@ -319,7 +342,7 @@ export default {
 
 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: var(--default-clickable-area);
+		margin-left: calc(var(--default-clickable-area) / 2);
 		order: 1;
 		display: flex;
 		height: var(--default-clickable-area);
@@ -338,10 +361,9 @@ export default {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		.color0 {
-			width: 30px !important;
+			width: 24px !important;
-			margin: 5px;
+			margin: var(--default-grid-baseline);
-			margin-left: 7px;
+			height: 24px;
-			height: 30px;
 			border-radius: 50%;
 			background-size: 14px;
 		}