Add new cards to top or bottom

cypress/e2e/cardColor.js

@@ -46,7 +46,7 @@ describe('Card color', function () {
 
 		const newCardTitle = 'Card with color'
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 		cy.get('.stack__card-add form input#new-stack-input-main')
 			.type(newCardTitle)

cypress/e2e/cardFeatures.js

@@ -52,7 +52,7 @@ describe('Card', function () {
 		cy.get('.board .stack').eq(0).within(() => {
 			cy.get('.card:contains("Hello world")').should('be.visible')
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -69,7 +69,7 @@ describe('Card', function () {
 		cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('save')
 		cy.intercept({ method: 'GET', url: '**/apps/deck/boards/*' }).as('getBoard')
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 
 		// Somehow this avoids the electron crash
@@ -98,7 +98,7 @@ describe('Card', function () {
 		cy.visit(`/apps/deck/#/board/${boardId}`)
 		const absoluteUrl = `https://example.com`
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -120,7 +120,7 @@ describe('Card', function () {
 		const absoluteUrl = `https://example.com`
 		const plainTitle = 'New title'
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -260,7 +260,7 @@ describe('Card', function () {
 		it('Set a due date', function () {
 			const newCardTitle = 'Card with a due date'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
@@ -296,13 +296,20 @@ describe('Card', function () {
 		it('Add a label', function () {
 			const newCardTitle = 'Card with labels'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
 			cy.get('.stack__card-add form input[type=submit]')
 				.first().click()
 			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
+			cy.get('body').then(($body) => {
+				const addCardInput = $body.find('.stack__card-add form input#new-stack-input-main')
+				if (addCardInput.length) {
+					cy.wrap(addCardInput.first()).type('{esc}')
+				}
+			})
+			cy.get('.stack__card-add form').should('not.exist')
 
 			// Add delay to ensure the events are bound
 			cy.wait(1000)
@@ -316,8 +323,10 @@ describe('Card', function () {
 			cy.get('.vs__selected .tag:contains("Action needed")')
 				.parent().find('button').click()
 
-			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
-				.should('be.visible')
+			cy.get(`.card:contains("${newCardTitle}")`)
+				.scrollIntoView({ block: 'center' })
+				.find('.labels li:contains("Later")')
+				.should('exist')
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
 				.should('not.exist')
 		})

cypress/e2e/sharingFeatures.js

@@ -32,7 +32,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -50,7 +50,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -71,7 +71,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 		})
 	})

lib/Service/ConfigService.php

@@ -52,7 +52,8 @@ public function getAll(): array {
 		$data = [
 			'calendar' => $this->isCalendarEnabled(),
 			'cardDetailsInModal' => $this->isCardDetailsInModal(),
-			'cardIdBadge' => $this->isCardIdBadgeEnabled()
+			'cardIdBadge' => $this->isCardIdBadgeEnabled(),
+			'stackAddCardAtTop' => $this->isStackAddCardAtTopEnabled()
 		];
 		if ($this->groupManager->isAdmin($userId)) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -90,6 +91,8 @@ public function get(string $key) {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
+			case 'stackAddCardAtTop':
+				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
 	}
@@ -134,6 +137,15 @@ public function isCardIdBadgeEnabled(): bool {
 		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'cardIdBadge', $defaultState);
 	}
 
+	public function isStackAddCardAtTopEnabled(): bool {
+		$userId = $this->getUserId();
+		if ($userId === null) {
+			return false;
+		}
+
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', false);
+	}
+
 	public function ensureFederationEnabled() {
 		if (!$this->get('federationEnabled')) {
 			throw new FederationDisabledException();
@@ -181,6 +193,10 @@ public function set($key, $value) {
 				$this->config->setUserValue($userId, Application::APP_ID, 'cardIdBadge', (string)$value);
 				$result = $value;
 				break;
+			case 'stackAddCardAtTop':
+				$this->config->setUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				// extra check that user only send one of the allowed board settings and not something random
 				$parts = explode(':', $key, 3);

src/components/Controls.vue

@@ -14,7 +14,7 @@
 				{{ overviewName }}
 			</h2>
 			<NcActions>
-				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
+				<NcActionButton data-cy="action:add-card" icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>

src/components/DeckAppSettings.vue

@@ -12,6 +12,8 @@
 			<NcFormBox>
 				<NcFormBoxSwitch v-model="cardDetailsInModal"
 					:label="t('deck', 'Use bigger card view')" />
+				<NcFormBoxSwitch v-model="stackAddCardAtTop"
+					:label="t('deck', 'Add new cards at the top of a list')" />
 			</NcFormBox>
 		</NcAppSettingsSection>
 
@@ -119,6 +121,14 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop: {
+			get() {
+				return this.$store.getters.config('stackAddCardAtTop') === true
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
+			},
+		},
 		cardIdBadge: {
 			get() {
 				return this.$store.getters.config('cardIdBadge')

src/components/board/Board.vue

@@ -317,12 +317,11 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					$margin-x: calc($stack-gap * -1);
 					display: flex;
 					flex-direction: column;
 					gap: $stack-gap;
 					padding: $stack-gap;
-					margin: 0 $margin-x;
+					margin: 0 calc(#{$stack-gap} * -1);
 					overflow-y: auto;
 					scrollbar-gutter: stable;
 				}