fix: Move card create input to the bottom

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

src/components/board/Stack.vue

@@ -88,15 +88,33 @@
 			</div>
 		</NcModal>
 
-		<transition name="slide-top" appear>
+		<Container :get-child-payload="payloadForCard(stack.id)"
-			<div v-if="showAddCard" class="stack__card-add">
+			group-name="stack"
+			data-click-closes-sidebar="true"
+			non-drag-area-selector=".dragDisabled"
+			:drag-handle-selector="dragHandleSelector"
+			data-dragscroll-enabled
+			@should-accept-drop="canEdit"
+			@drag-start="draggingCard = true"
+			@drag-end="draggingCard = false"
+			@drop="($event) => onDropCard(stack.id, $event)">
+			<Draggable v-for="card in cardsByStack" :key="card.id">
+				<transition :appear="animate && !card.animated && (card.animated=true)"
+					:appear-class="'zoom-appear-class'"
+					:appear-active-class="'zoom-appear-active-class'">
+					<CardItem :id="card.id" ref="card" :dragging="draggingCard" />
+				</transition>
+			</Draggable>
+		</Container>
+
+		<transition name="slide-bottom" appear>
+			<div v-show="showAddCard" class="stack__card-add">
 				<form :class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
 					<input id="new-stack-input-main"
 						ref="newCardInput"
 						v-model="newCardTitle"
-						v-focus
 						type="text"
 						class="no-close"
 						:disabled="stateCardCreating"
@@ -112,25 +130,6 @@
 				</form>
 			</div>
 		</transition>
-
-		<Container :get-child-payload="payloadForCard(stack.id)"
-			group-name="stack"
-			data-click-closes-sidebar="true"
-			non-drag-area-selector=".dragDisabled"
-			:drag-handle-selector="dragHandleSelector"
-			data-dragscroll-enabled
-			@should-accept-drop="canEdit"
-			@drag-start="draggingCard = true"
-			@drag-end="draggingCard = false"
-			@drop="($event) => onDropCard(stack.id, $event)">
-			<Draggable v-for="card in cardsByStack" :key="card.id">
-				<transition :appear="animate && !card.animated && (card.animated=true)"
-					:appear-class="'zoom-appear-class'"
-					:appear-active-class="'zoom-appear-active-class'">
-					<CardItem :id="card.id" :dragging="draggingCard" />
-				</transition>
-			</Draggable>
-		</Container>
 	</div>
 </template>
 
@@ -221,6 +220,10 @@ export default {
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
+			} else {
+				this.$nextTick(() => {
+					this.$refs.newCardInput.focus()
+				})
 			}
 		},
 	},
@@ -303,6 +306,7 @@ export default {
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
+					this.$refs.card[(this.$refs.card.length - 1)].scrollIntoView()
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
@@ -338,6 +342,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		margin: 6px;
+		margin-top: 0;
 		cursor: grab;
 		background-color: var(--color-main-background);
 
@@ -359,14 +364,6 @@ export default {
 			}
 		}
 
-		&--add:before {
-			height: 78px;
-			background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(255, 255, 255, 0) 100%);
-			body.theme--dark & {
-				background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(0, 0, 0, 0) 100%);
-			}
-		}
-
 		& > * {
 			position: relative;
 			z-index: 100;
@@ -422,13 +419,14 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		margin-top: 5px;
+		margin-bottom: 5px;
+		padding-top: var(--default-grid-baseline);
 		background-color: var(--color-main-background);
 
 		form {
 			display: flex;
 			margin-left: $stack-spacing;
-			margin-right: $card-spacing + $stack-spacing + 4px;
+			margin-right: $stack-spacing;
 			width: 100%;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
@@ -464,7 +462,16 @@ export default {
 	.slide-top-enter, .slide-top-leave-to {
 		transform: translateY(-10px);
 		opacity: 0;
-		height: 0px;
+	}
+
+	.slide-bottom-enter-active,
+	.slide-bottom-leave-active {
+		transition: all 100ms ease;
+	}
+
+	.slide-bottom-enter, .slide-bottom-leave-to {
+		transform: translateY(20px);
+		opacity: 0;
 	}
 
 	.modal__content {

src/components/cards/CardItem.vue

@@ -6,7 +6,7 @@
 <template>
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
-			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived }"
+			:class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -103,6 +103,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			highlight: false,
+		}
+	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -270,6 +275,14 @@ export default {
 				},
 			})
 		},
+		scrollIntoView() {
+			this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+			this.focus()
+			this.highlight = true
+			setTimeout(() => {
+				this.highlight = false
+			}, 2000)
+		},
 	},
 }
 </script>
@@ -359,6 +372,23 @@ export default {
 		&.card__archived {
 			background-color: var(--color-background-dark);
 		}
+		@keyframes highlight {
+			0% {
+				border-color: var(--color-border-dark);
+			}
+			20% {
+				border-color: var(--color-primary-element);
+			}
+			70% {
+				border-color: var(--color-primary-element);
+			}
+			100% {
+				border-color: var(--color-border-dark);
+			}
+		}
+		&.card__highlight {
+			animation: highlight 2s;
+		}
 		.card-labels {
 			display: flex;
 			align-items: end;