copy labels when moving cards between boards

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>

appinfo/info.xml

@@ -20,7 +20,7 @@
 - 🚀 Get your project organized
 
 </description>
-    <version>1.14.0-beta.1</version>
+    <version>1.14.0-beta.2</version>
     <licence>agpl</licence>
     <author>Julius Härtl</author>
     <documentation>

composer.lock

@@ -444,12 +444,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/nextcloud-deps/ocp.git",
-                "reference": "2a005250064759f206aa1b5a1ee000dcd808ef5b"
+                "reference": "65bc71ed71b10f60394e3a3165f27e78e6b087cb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nextcloud-deps/ocp/zipball/2a005250064759f206aa1b5a1ee000dcd808ef5b",
-                "reference": "2a005250064759f206aa1b5a1ee000dcd808ef5b",
+                "url": "https://api.github.com/repos/nextcloud-deps/ocp/zipball/65bc71ed71b10f60394e3a3165f27e78e6b087cb",
+                "reference": "65bc71ed71b10f60394e3a3165f27e78e6b087cb",
                 "shasum": ""
             },
             "require": {
@@ -480,7 +480,7 @@
                 "issues": "https://github.com/nextcloud-deps/ocp/issues",
                 "source": "https://github.com/nextcloud-deps/ocp/tree/stable30"
             },
-            "time": "2024-08-14T08:51:38+00:00"
+            "time": "2024-08-31T00:39:39+00:00"
         },
         {
             "name": "nikic/php-parser",

l10n/es_AR.js

@@ -34,9 +34,14 @@ OC.L10N.register(
     "Later" : "Después",
     "copy" : "copiar",
     "Done" : "Hecho",
+    "The file was uploaded" : "El archivo ha sido subido",
+    "The uploaded file exceeds the upload_max_filesize directive in php.ini" : "El archivo cargado excede el valor establecido en la directiva upload_max_filesize en el archivo php.ini",
     "The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form" : "El archivo subido sobrepasa el valor MAX_FILE_SIZE especificada en el formulario HTML",
+    "The file was only partially uploaded" : "El archivo sólo fue cargado parcialmente",
     "No file was uploaded" : "No se subió ningún archivo ",
     "Missing a temporary folder" : "Falta un directorio temporal",
+    "Could not write file to disk" : "No se pudo escribir el archivo en el disco",
+    "A PHP extension stopped the file upload" : "Una extensión de PHP detuvo la carga del archivo",
     "Card not found" : "Tarjeta no encontrada",
     "Invalid date, date format must be YYYY-MM-DD" : "La fecha es inválida, favor de seguir el formato AAAA-MM-DD",
     "Deck is a kanban style organization tool aimed at personal planning and project organization for teams integrated with Nextcloud.\n\n\n- 📥 Add your tasks to cards and put them in order\n- 📄 Write down additional notes in Markdown\n- 🔖 Assign labels for even better organization\n- 👥 Share with your team, friends or family\n- 📎 Attach files and embed them in your Markdown description\n- 💬 Discuss with your team using comments\n- ⚡ Keep track of changes in the activity stream\n- 🚀 Get your project organized" : "Deck es una herramienta de organización de estilo kanban dirigida a la planificación personal y la organización de proyectos para equipos integrados con Nextcloud.\n\n\n- 📥 Agrega tus tareas a las tarjetas y ordénalas.\n- 📄 Escriba notas adicionales\n- 🔖 Asignar etiquetas para una organización mejor\n- 👥 Comparte con tu equipo, amigos o familia.\n- 📎 Adjuntar archivos e incrustarlos en su descripción\n- 💬 Discuta con su equipo usando comentarios.\n- ⚡ Mantenga un registro de los cambios en el flujo de actividad\n- 🚀 Organiza tu proyecto",

l10n/es_AR.json

@@ -32,9 +32,14 @@
     "Later" : "Después",
     "copy" : "copiar",
     "Done" : "Hecho",
+    "The file was uploaded" : "El archivo ha sido subido",
+    "The uploaded file exceeds the upload_max_filesize directive in php.ini" : "El archivo cargado excede el valor establecido en la directiva upload_max_filesize en el archivo php.ini",
     "The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form" : "El archivo subido sobrepasa el valor MAX_FILE_SIZE especificada en el formulario HTML",
+    "The file was only partially uploaded" : "El archivo sólo fue cargado parcialmente",
     "No file was uploaded" : "No se subió ningún archivo ",
     "Missing a temporary folder" : "Falta un directorio temporal",
+    "Could not write file to disk" : "No se pudo escribir el archivo en el disco",
+    "A PHP extension stopped the file upload" : "Una extensión de PHP detuvo la carga del archivo",
     "Card not found" : "Tarjeta no encontrada",
     "Invalid date, date format must be YYYY-MM-DD" : "La fecha es inválida, favor de seguir el formato AAAA-MM-DD",
     "Deck is a kanban style organization tool aimed at personal planning and project organization for teams integrated with Nextcloud.\n\n\n- 📥 Add your tasks to cards and put them in order\n- 📄 Write down additional notes in Markdown\n- 🔖 Assign labels for even better organization\n- 👥 Share with your team, friends or family\n- 📎 Attach files and embed them in your Markdown description\n- 💬 Discuss with your team using comments\n- ⚡ Keep track of changes in the activity stream\n- 🚀 Get your project organized" : "Deck es una herramienta de organización de estilo kanban dirigida a la planificación personal y la organización de proyectos para equipos integrados con Nextcloud.\n\n\n- 📥 Agrega tus tareas a las tarjetas y ordénalas.\n- 📄 Escriba notas adicionales\n- 🔖 Asignar etiquetas para una organización mejor\n- 👥 Comparte con tu equipo, amigos o familia.\n- 📎 Adjuntar archivos e incrustarlos en su descripción\n- 💬 Discuta con su equipo usando comentarios.\n- ⚡ Mantenga un registro de los cambios en el flujo de actividad\n- 🚀 Organiza tu proyecto",

l10n/fa.js

@@ -257,6 +257,7 @@ OC.L10N.register(
     "Shift" : "تغییر مکان",
     "Ctrl" : "Ctrl",
     "Search" : "جستجو",
+    "Show help dialog" : "نمایش پنجرهٔ راهنما",
     "Enter" : "Enter",
     "Space" : "Space",
     "All boards" : "همه تخته‌ها",

l10n/fa.json

@@ -255,6 +255,7 @@
     "Shift" : "تغییر مکان",
     "Ctrl" : "Ctrl",
     "Search" : "جستجو",
+    "Show help dialog" : "نمایش پنجرهٔ راهنما",
     "Enter" : "Enter",
     "Space" : "Space",
     "All boards" : "همه تخته‌ها",

l10n/hu.js

@@ -247,6 +247,7 @@ OC.L10N.register(
     "Choose a date" : "Válasszon dátumot",
     "Remove due date" : "Határidő eltávolítása",
     "Mark as done" : "Megjelölés készként",
+    "Not done" : "Nincs kész",
     "Unarchive card" : "Kártya archiválásának visszavonása",
     "Archive card" : "Kártya archiválása",
     "Select Date" : "Dátum kiválasztása",

l10n/hu.json

@@ -245,6 +245,7 @@
     "Choose a date" : "Válasszon dátumot",
     "Remove due date" : "Határidő eltávolítása",
     "Mark as done" : "Megjelölés készként",
+    "Not done" : "Nincs kész",
     "Unarchive card" : "Kártya archiválásának visszavonása",
     "Archive card" : "Kártya archiválása",
     "Select Date" : "Dátum kiválasztása",

lib/Service/CardService.php

@@ -40,6 +40,7 @@ class CardService {
 	private StackMapper $stackMapper;
 	private BoardMapper $boardMapper;
 	private LabelMapper $labelMapper;
+	private LabelService $labelService;
 	private PermissionService $permissionService;
 	private BoardService $boardService;
 	private NotificationHelper $notificationHelper;
@@ -61,6 +62,7 @@ class CardService {
 		StackMapper $stackMapper,
 		BoardMapper $boardMapper,
 		LabelMapper $labelMapper,
+		LabelService $labelService,
 		PermissionService $permissionService,
 		BoardService $boardService,
 		NotificationHelper $notificationHelper,
@@ -81,6 +83,7 @@ class CardService {
 		$this->stackMapper = $stackMapper;
 		$this->boardMapper = $boardMapper;
 		$this->labelMapper = $labelMapper;
+		$this->labelService = $labelService;
 		$this->permissionService = $permissionService;
 		$this->boardService = $boardService;
 		$this->notificationHelper = $notificationHelper;
@@ -349,8 +352,34 @@ class CardService {
 		}
 		$card->setDescription($description);
 
-
+		// @var Card $card
 		$card = $this->cardMapper->update($card);
+		$oldBoardId = $this->stackMapper->findBoardId($changes->getBefore()->getStackId());
+		$boardId = $this->cardMapper->findBoardId($card->getId());
+		if($boardId !== $oldBoardId) {
+			$stack = $this->stackMapper->find($card->getStackId());
+			$board = $this->boardService->find($this->cardMapper->findBoardId($card->getId()));
+			$boardLabels = $board->getLabels() ?? [];
+			foreach($card->getLabels() as $cardLabel) {
+				$this->removeLabel($card->getId(), $cardLabel->getId());
+				$label = $this->labelMapper->find($cardLabel->getId());
+				$filteredLabels = array_values(array_filter($boardLabels, fn ($item) => $item->getTitle() === $label->getTitle()));
+				// clone labels that are assigned to card but don't exist in new board
+				if (empty($filteredLabels)) {
+					if ($this->permissionService->getPermissions($boardId)[Acl::PERMISSION_MANAGE] === true) {
+						$newLabel = $this->labelService->create($label->getTitle(), $label->getColor(), $board->getId());
+						$boardLabels[] = $label;
+						$this->assignLabel($card->getId(), $newLabel->getId());
+					}
+				} else {
+					$this->assignLabel($card->getId(), $filteredLabels[0]->getId());
+				}
+			}
+			$board->setLabels($boardLabels);
+			$this->boardMapper->update($board);
+			$this->changeHelper->boardChanged($board->getId());
+		}
+
 		if ($resetDuedateNotification) {
 			$this->notificationHelper->markDuedateAsRead($card);
 		}

lib/Service/Importer/Systems/DeckJsonService.php

@@ -125,8 +125,10 @@ class DeckJsonService extends ABoardImportService {
 		foreach ($this->tmpCards as $sourceCard) {
 			foreach ($sourceCard->labels as $label) {
 				$cardId = $this->cards[$sourceCard->id]->getId();
-				$labelId = $this->labels[$label->id]->getId();
-				$cardsLabels[$cardId][] = $labelId;
+				if ($this->getImportService()->getData()->id === $label->boardId) {
+					$labelId = $this->labels[$label->id]->getId();
+					$cardsLabels[$cardId][] = $labelId;
+				}
 			}
 		}
 		return $cardsLabels;

package-lock.json

@@ -1994,9 +1994,9 @@
       "dev": true
     },
     "node_modules/@bundle-stats/plugin-webpack-validate": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/@bundle-stats/plugin-webpack-validate/-/plugin-webpack-validate-4.14.0.tgz",
-      "integrity": "sha512-VLXk50dAriPXM4i1HfH3rX6rKXKqnU7EKI/xkUaRfGgSCiMWsLfNpA/T+gv3CYYXM/HqCM2tXOy3dc9V5OIh8w==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@bundle-stats/plugin-webpack-validate/-/plugin-webpack-validate-4.15.0.tgz",
+      "integrity": "sha512-AKj6okcTFgQMFnJg3rSrLDw4dQ2U9I0WGecKf4qzeW3MsoSgnTW58ZBCebIoODEatw7bhawBlXhkl6tvjkjY4A==",
       "dev": true,
       "dependencies": {
         "lodash": "4.17.21",
@@ -3895,9 +3895,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.17.0.tgz",
-      "integrity": "sha512-BylZZlJcGiEfBO9k/TE8iuKEzzSfmxek1fFwU2fpo0xUDxH9qQurMdTli3ix/kgXaBJgwBD8H8hjzYirpAYbXg==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.17.1.tgz",
+      "integrity": "sha512-DC7nI04pp69vS5VxMDhpwPFhb5TWvyJgtmFciAx6j8RFrTPutdjNfOxOCncGaNXOlodaIpg/6EYV8YHU9DR9ng==",
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@linusborg/vue-simple-portal": "^0.1.5",
@@ -4180,14 +4180,14 @@
       }
     },
     "node_modules/@relative-ci/agent": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/@relative-ci/agent/-/agent-4.2.10.tgz",
-      "integrity": "sha512-w3aMOrSEyrL6s8i69o6Jjo58WYMz51cI3MuCuoQDKJANew08lXpaQEBI6cyf/gQrVH/ixy9MQhOcESKUqwexEQ==",
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/@relative-ci/agent/-/agent-4.2.11.tgz",
+      "integrity": "sha512-EnX0yiSWUkHUnuWzvmysqJJk44EsSmCD7TuXGMgJ9EGxHkAFdEg/+d3+r0UHdThSJ1tDKX6C0h9S4DoOIl8BSQ==",
       "dev": true,
       "dependencies": {
-        "@bundle-stats/plugin-webpack-filter": "4.14.0",
-        "@bundle-stats/plugin-webpack-validate": "4.14.0",
-        "core-js": "3.38.0",
+        "@bundle-stats/plugin-webpack-filter": "4.15.0",
+        "@bundle-stats/plugin-webpack-validate": "4.15.0",
+        "core-js": "3.38.1",
         "cosmiconfig": "9.0.0",
         "debug": "4.3.6",
         "dotenv": "16.4.5",
@@ -4213,9 +4213,9 @@
       }
     },
     "node_modules/@relative-ci/agent/node_modules/@bundle-stats/plugin-webpack-filter": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/@bundle-stats/plugin-webpack-filter/-/plugin-webpack-filter-4.14.0.tgz",
-      "integrity": "sha512-/p8kMPHyFNcmpgQIOIFkSYObQQUf5F5Gbzsy+dgH+QXSGEppyI1m5Os4BJEBzqS8jUewwzcKVDIQCg2pWoKNAw==",
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@bundle-stats/plugin-webpack-filter/-/plugin-webpack-filter-4.15.0.tgz",
+      "integrity": "sha512-DQIFkcAkH4VjrDiaoe02c7n5ShGYHIdSMihwDAvRk/4x4PQ1v0/W1kyPxs71glj+6iSddumqNIE28G0DQ4mTQA==",
       "dev": true,
       "engines": {
         "node": ">= 14.0"
@@ -4225,9 +4225,9 @@
       }
     },
     "node_modules/@relative-ci/agent/node_modules/core-js": {
-      "version": "3.38.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
-      "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -7731,9 +7731,9 @@
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
     "node_modules/cypress": {
-      "version": "13.13.3",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.3.tgz",
-      "integrity": "sha512-hUxPrdbJXhUOTzuML+y9Av7CKoYznbD83pt8g3klgpioEha0emfx4WNIuVRx0C76r0xV2MIwAW9WYiXfVJYFQw==",
+      "version": "13.14.1",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.14.1.tgz",
+      "integrity": "sha512-Wo+byPmjps66hACEH5udhXINEiN3qS3jWNGRzJOjrRJF3D0+YrcP2LVB1T7oYaVQM/S+eanqEvBWYc8cf7Vcbg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "deck",
   "description": "",
-  "version": "1.14.0-beta.1",
+  "version": "1.14.0-beta.2",
   "authors": [
     {
       "name": "Julius Härtl",
@@ -107,4 +107,4 @@
       "<rootDir>/node_modules/jest-serializer-vue"
     ]
   }
-}
+}

src/App.vue

@@ -190,9 +190,8 @@ export default {
 	.modal__card {
 		width: 100%;
 		min-width: 100%;
-		height: 100vh;
-		max-height: calc(100vh - 120px);
-		overflow: auto;
+		height: calc(100% - 20px);
+		overflow: hidden;
 	}
 
 </style>

src/CardMoveDialog.vue

@@ -92,7 +92,6 @@ export default {
 
 <style lang="scss" scoped>
 .modal__content {
-	width: 25vw;
 	min-width: 250px;
 	min-height: 120px;
 	margin: 20px 20px 100px 20px;

src/components/Controls.vue

@@ -31,7 +31,8 @@
 		<div class="board-actions">
 			<SessionList v-if="isNotifyPushEnabled && presentUsers.length"
 				:sessions="presentUsers" />
-			<div v-if="searchQuery || true" class="deck-search">
+			<!-- Hide but not remove for now as search might change in the future -->
+			<div v-if="false" class="deck-search">
 				<input id="deck-search-input"
 					ref="search"
 					:tabindex="0"
@@ -46,8 +47,11 @@
 				id="stack-add"
 				v-click-outside="hideAddStack">
 				<NcActions v-if="!isAddStackVisible">
-					<NcActionButton icon="icon-add" @click.stop="showAddStack">
+					<NcActionButton @click.stop="showAddStack">
 						{{ t('deck', 'Add list') }}
+						<template #icon>
+							<TableColumnPlusAfter :size="20" />
+						</template>
 					</NcActionButton>
 				</NcActions>
 				<form v-else @submit.prevent="addNewStack()">
@@ -263,6 +267,7 @@ import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import ImageIcon from 'vue-material-design-icons/ImageMultiple.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
+import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
 import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
 import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
 import SessionList from './SessionList.vue'
@@ -286,6 +291,7 @@ export default {
 		FilterOffIcon,
 		ArrowCollapseVerticalIcon,
 		ArrowExpandVerticalIcon,
+		TableColumnPlusAfter,
 		SessionList,
 	},
 	mixins: [labelStyle],
@@ -475,7 +481,7 @@ export default {
 <style lang="scss" scoped>
 	.controls {
 		display: flex;
-		margin: 5px;
+		margin: calc(var(--default-grid-baseline) * 2);
 		height: var(--default-clickable-area);
 		padding-left: var(--default-clickable-area);
 
@@ -486,17 +492,17 @@ export default {
 			h2 {
 				margin: 0;
 				margin-right: 10px;
+				font-size: 18px;
 			}
 
 			.board-bullet {
 				display: inline-block;
-				width: 20px;
-				height: 20px;
+				width: 16px;
+				height: 16px;
 				border: none;
 				border-radius: 50%;
 				background-color: transparent;
-				margin: 12px;
-				margin-left: -4px;
+				margin: var(--default-grid-baseline);
 			}
 		}
 

src/components/board/Stack.vue

@@ -57,8 +57,11 @@
 				</NcActionButton>
 			</NcActions>
 			<NcActions v-if="canEdit && !showArchived && !isArchived">
-				<NcActionButton icon="icon-add" data-cy="action:add-card" @click.stop="showAddCard=true">
+				<NcActionButton data-cy="action:add-card" @click.stop="showAddCard=true">
 					{{ t('deck', 'Add card') }}
+					<template #icon>
+						<CardPlusOutline :size="20" />
+					</template>
 				</NcActionButton>
 			</NcActions>
 		</div>
@@ -136,6 +139,7 @@ import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
 import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 
@@ -153,6 +157,7 @@ export default {
 		Draggable,
 		NcModal,
 		ArchiveIcon,
+		CardPlusOutline,
 	},
 	directives: {
 		ClickOutside,
@@ -332,8 +337,9 @@ export default {
 		z-index: 100;
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
+		margin: 6px;
 		cursor: grab;
-		min-height: var(--default-clickable-area);
+		background-color: var(--color-main-background);
 
 		// Smooth fade out of the cards at the top
 		&:before {
@@ -354,7 +360,7 @@ export default {
 		}
 
 		&--add:before {
-			height: 80px;
+			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%);
@@ -383,9 +389,8 @@ export default {
 			text-overflow: ellipsis;
 			max-width: calc($stack-width - 60px);
 			border-radius: 3px;
-			margin: 6px;
 			padding: 4px 4px;
-			font-size: 120%;
+			font-size: var(--default-font-size);
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@@ -394,7 +399,15 @@ export default {
 		}
 
 		form {
-			margin: 2px 0;
+			margin: -4px;
+			input {
+				font-weight: bold;
+				padding: 0 6px;
+			}
+			input[type="submit"] {
+				border-style: solid;
+				border-left-style: none;
+			}
 		}
 
 		:deep {
@@ -406,20 +419,18 @@ export default {
 	}
 
 	.stack__card-add {
-		height: var(--default-clickable-area);
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
 		margin-top: 5px;
-		margin-bottom: 8px;
 		background-color: var(--color-main-background);
 
 		form {
 			display: flex;
-			margin-left: 12px;
-			margin-right: 12px;
+			margin-left: $stack-spacing;
+			margin-right: $card-spacing + $stack-spacing + 4px;
 			width: 100%;
-			border: 2px solid var(--color-border);
+			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
 			overflow: hidden;
 			padding: 2px;
@@ -436,6 +447,8 @@ export default {
 
 		input {
 			border: none;
+			margin: 0;
+			padding: 4px;
 		}
 	}
 

src/components/card/CardSidebar.vue

@@ -209,6 +209,10 @@ section.app-sidebar__tab--active {
 	height: 100%;
 }
 
+.modal-container {
+	overflow: hidden;
+}
+
 // FIXME: Obivously we should at some point not randomly reuse the sidebar component
 // since this is not oficially supported
 .modal__card .app-sidebar {
@@ -222,10 +226,23 @@ section.app-sidebar__tab--active {
 	max-width: calc(100% - #{$modal-padding * 2});
 	padding: 0 14px;
 	height: 97%;
-	overflow: initial;
+	overflow: hidden !important;
 	user-select: text;
 	-webkit-user-select: text;
 
+	.app-sidebar-header__mainname-container {
+		padding-top: calc(var(--default-grid-baseline, 4px) * 2);
+	}
+
+	.app-sidebar-tabs {
+		max-height: 90%;
+	}
+
+	.app-sidebar__tab {
+		min-height: calc(100% - 20px);
+		max-height: calc(100% - 20px);
+	}
+
 	// FIXME: test
 	&:deep {
 		.app-sidebar-header {

src/components/card/DueDateSelector.vue

@@ -247,7 +247,6 @@ export default defineComponent({
 .done-info--duedate,
 .done-info--done {
 	display: flex;
-	padding-top: 10px;
 	&.dimmed {
 		color: var(--color-text-maxcontrast);
 	}

src/components/cards/CardBadges.vue

@@ -168,13 +168,13 @@ export default {
 	}
 
 	.badge-left {
-		align-self: end;
-		margin-bottom: 8px;
 		flex-basis: auto;
 		flex-grow: 1;
 		flex-shrink: 1;
 		flex-wrap: wrap;
 		align-content: flex-end;
+		align-items: center;
+		align-self: center;
 		gap: 3px;
 	}
 
@@ -196,6 +196,10 @@ export default {
 		opacity: 0;
 	}
 
+	.avatars:deep(button) {
+		margin: 0;
+	}
+
 	@media print {
 		.badges {
 			align-items: flex-start;

src/components/cards/CardItem.vue

@@ -19,10 +19,10 @@
 			</div>
 			<CardCover v-if="showCardCover" :card-id="card.id" />
 			<div class="card-upper">
-				<h3 v-if="inlineEditingBlocked" dir="auto">
+				<h4 v-if="inlineEditingBlocked" dir="auto">
 					{{ card.title }}
-				</h3>
-				<h3 v-else
+				</h4>
+				<h4 v-else
 					dir="auto"
 					class="editable"
 					:aria-label="t('deck', 'Edit card title')">
@@ -35,7 +35,7 @@
 						@click.stop
 						@keyup.esc="cancelEdit"
 						@keyup.stop>{{ card.title }}</span>
-				</h3>
+				</h4>
 
 				<DueDate v-if="compactMode" :card="card" />
 				<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
@@ -294,7 +294,7 @@ export default {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
+		gap: var(--default-grid-baseline);
 
 		&:deep(*) {
 			cursor: pointer;
@@ -314,7 +314,8 @@ export default {
 
 		.card-upper {
 			display: flex;
-			h3 {
+			h4 {
+				font-weight: normal;
 				margin: 0;
 				padding: 6px;
 				flex-grow: 1;

src/components/navigation/AppNavigationBoard.vue

@@ -350,4 +350,10 @@ export default {
 	.forced-active {
 		box-shadow: inset 4px 0 var(--color-primary-element);
 	}
+
+	:deep(.active) {
+		.material-design-icon svg {
+			fill: var(--color-primary-element-text);
+		}
+	}
 </style>

src/css/selector.scss

@@ -9,9 +9,13 @@
 	margin-top: 10px;
 
 	&--icon {
-		width: 38px;
-		padding-top: 12px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		align-content: center;
+		justify-content: center;
 	}
 
 	&--selector {
@@ -21,5 +25,6 @@
 	&--content {
 		display: flex;
 		flex-grow: 1;
+		align-items: center;
 	}
 }

src/css/variables.scss

@@ -2,8 +2,8 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-$card-spacing: 16px;
-$card-padding: 8px;
-$stack-spacing: 12px;
-$stack-width: 280px;
-$board-spacing: 16px;
+ $card-spacing: 8px;
+ $card-padding: 4px;
+ $stack-spacing: 12px;
+ $stack-width: 280px;
+ $board-spacing: 16px;

tests/unit/Service/CardServiceTest.php

@@ -68,6 +68,8 @@ class CardServiceTest extends TestCase {
 	private $boardService;
 	/** @var LabelMapper|MockObject */
 	private $labelMapper;
+	/** @var LabelService|MockObject */
+	private $labelService;
 	private $boardMapper;
 	/** @var AttachmentService|MockObject */
 	private $attachmentService;
@@ -96,6 +98,7 @@ class CardServiceTest extends TestCase {
 		$this->stackMapper = $this->createMock(StackMapper::class);
 		$this->boardMapper = $this->createMock(BoardMapper::class);
 		$this->labelMapper = $this->createMock(LabelMapper::class);
+		$this->labelService = $this->createMock(LabelService::class);
 		$this->permissionService = $this->createMock(PermissionService::class);
 		$this->boardService = $this->createMock(BoardService::class);
 		$this->notificationHelper = $this->createMock(NotificationHelper::class);
@@ -118,6 +121,7 @@ class CardServiceTest extends TestCase {
 			$this->stackMapper,
 			$this->boardMapper,
 			$this->labelMapper,
+			$this->labelService,
 			$this->permissionService,
 			$this->boardService,
 			$this->notificationHelper,