fix: Adjust UI to be more consistent with new Nextcloud compact UI

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

src/components/Controls.vue

@@ -47,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()">
@@ -264,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'
@@ -287,6 +291,7 @@ export default {
 		FilterOffIcon,
 		ArrowCollapseVerticalIcon,
 		ArrowExpandVerticalIcon,
+		TableColumnPlusAfter,
 		SessionList,
 	},
 	mixins: [labelStyle],
@@ -476,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);
 
@@ -487,17 +492,17 @@ export default {
 			h2 {
 				margin: 0;
 				margin-right: 10px;
+				font-size: 18px;
 			}
 
 			.board-bullet {
 				display: inline-block;
-				width: 20px;
+				width: 16px;
-				height: 20px;
+				height: 16px;
 				border: none;
 				border-radius: 50%;
 				background-color: transparent;
-				margin: 12px;
+				margin: var(--default-grid-baseline);
-				margin-left: -4px;
 			}
 		}
 

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-left: $stack-spacing;
-			margin-right: 12px;
+			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/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>
+				</h4>
-				<h3 v-else
+				<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/css/selector.scss

@@ -9,9 +9,13 @@
 	margin-top: 10px;
 
 	&--icon {
-		width: 38px;
+		width: var(--default-clickable-area);
-		padding-top: 12px;
+		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-spacing: 8px;
-$card-padding: 8px;
+ $card-padding: 4px;
-$stack-spacing: 12px;
+ $stack-spacing: 12px;
-$stack-width: 280px;
+ $stack-width: 280px;
-$board-spacing: 16px;
+ $board-spacing: 16px;