Card layout polishing

cypress/e2e/cardFeatures.js

@@ -214,8 +214,7 @@ describe('Card', function() {
 			cy.tick(1_000)
 			cy.get('[data-cy-due-date-remove] button').should('be.visible').click()
 
-			cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state]').should('not.be.visible')
-
+			cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state]').should('not.exist')
 		})
 
 	})

src/components/board/Board.vue

@@ -249,9 +249,9 @@ export default {
 					padding: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
-					scrollbar-gutter: stable;
 					padding-top: 15px;
 					margin-top: -10px;
+					scrollbar-gutter: stable;
 				}
 
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {

src/components/board/Stack.vue

@@ -26,10 +26,9 @@
 		<div v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard}"
-			tabindex="0"
 			:aria-label="stack.title">
 			<transition name="fade" mode="out-in">
-				<h3 v-if="!canManage || isArchived">
+				<h3 v-if="!canManage || isArchived" tabindex="0">
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
@@ -330,8 +329,6 @@ export default {
 
 	.stack {
 		width: $stack-width + $stack-spacing * 3;
-		margin-left: math.div($stack-spacing, 2);
-		margin-right: math.div($stack-spacing, 2);
 	}
 
 	.stack__header {
@@ -340,6 +337,7 @@ export default {
 		top: 0;
 		z-index: 100;
 		padding-left: $card-spacing;
+		padding-right: $card-spacing;
 		cursor: grab;
 		min-height: 44px;
 
@@ -348,10 +346,10 @@ export default {
 			content: ' ';
 			display: block;
 			position: absolute;
-			width: 100%;
+			width: calc(100% - 16px);
 			height: 20px;
 			top: 30px;
-			right: 10px;
+			left: 0px;
 			z-index: 99;
 			transition: top var(--animation-slow);
 
@@ -411,15 +409,15 @@ export default {
 		z-index: 100;
 		display: flex;
 		margin-top: 5px;
-		margin-bottom: 20px;
+		margin-bottom: 8px;
 		background-color: var(--color-main-background);
 
 		form {
 			display: flex;
 			margin-left: 12px;
 			margin-right: 12px;
 			width: 100%;
-			box-shadow: 0 0 3px var(--color-box-shadow);
+			border: 2px solid var(--color-border);
 			border-radius: var(--border-radius-large);
 			overflow: hidden;
 			padding: 2px;

src/components/card/AttachmentList.vue

@@ -23,12 +23,12 @@
 <template>
 	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
 		<div v-if="!isReadOnly" class="button-group">
-			<button class="icon-upload" @click="uploadNewFile()">
+			<NcButton class="icon-upload" @click="uploadNewFile()">
 				{{ t('deck', 'Upload new files') }}
-			</button>
-			<button class="icon-folder" @click="shareFromFiles()">
+			</NcButton>
+			<NcButton class="icon-folder" @click="shareFromFiles()">
 				{{ t('deck', 'Share from Files') }}
-			</button>
+			</NcButton>
 		</div>
 		<input ref="filesAttachment"
 			type="file"
@@ -103,7 +103,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import { NcActions, NcActionButton, NcActionLink } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionLink, NcButton } from '@nextcloud/vue'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
 import relativeDate from '../../mixins/relativeDate.js'
 import { formatFileSize } from '@nextcloud/files'
@@ -128,6 +128,7 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionLink,
+		NcButton,
 		AttachmentDragAndDrop,
 	},
 	mixins: [relativeDate, attachmentUpload],
@@ -267,6 +268,7 @@ export default {
 
 	.button-group {
 		display: flex;
+		gap: calc(var(--default-grid-baseline) * 3);
 
 		.icon-upload, .icon-folder {
 			padding-left: 44px;

src/components/cards/AvatarList.vue

@@ -24,7 +24,7 @@
 	<div class="avatars">
 		<div class="avatar-list" @click.stop="togglePopover">
 			<div v-if="popover.length > 0">
-				<div class="avatardiv icon-more" />
+				<AccountMultiple class="avatardiv more-avatars" :size="24" />
 			</div>
 			<div v-for="user in firstUsers" :key="user.id">
 				<NcAvatar v-if="user.type === 0"
@@ -72,12 +72,14 @@
 <script>
 import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
 export default {
 	name: 'AvatarList',
 	components: {
 		NcAvatar,
 		NcPopoverMenu,
+		AccountMultiple,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -151,7 +153,6 @@ export default {
 
 <style scoped lang="scss">
 	.avatars {
-		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
 		:deep(.popovermenu) {
@@ -173,25 +174,29 @@ export default {
 		display: inline-flex;
 		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
+
+		& > div {
+			height: 32px;
+		}
+
 		.avatardiv,
 		:deep(.avatardiv) {
-			width: 36px;
-			height: 36px;
+			width: 32px;
+			height: 32px;
 			box-sizing: content-box !important;
 			margin-right: -$avatar-offset;
 			transition: margin-right 0.2s ease-in-out;
-
-			&.icon-more {
-				width: 32px;
-				height: 32px;
-				opacity: .5;
-				background-color: var(--color-background-dark) !important;
-				cursor: pointer;
-			}
+			border: 2px solid var(--color-main-background);
 		}
-		&:hover div:nth-child(n+2) :deep(.avatardiv) {
-			margin-right: 1px;
+
+		.more-avatars {
+			width: 32px;
+			height: 32px;
+			background-color: var(--color-background-dark) !important;
+			cursor: pointer;
+			color: var(--color-text-maxcontrast);
 		}
+
 	}
 
 	.popovermenu {

src/components/cards/CardBadges.vue

@@ -22,46 +22,66 @@
 
 <template>
 	<div v-if="card" class="badges">
-		<CardId v-if="idBadge" class="icon-badge" :card="card" />
-		<div v-if="card.commentsCount > 0"
-			v-tooltip="commentsHint"
-			class="icon-badge"
-			@click.stop="openComments">
-			<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
-			<CommentIcon v-else :size="16" />
-			<span>{{ card.commentsCount }}</span>
+		<div class="badge-left">
+			<DueDate v-if="card.duedate || card.done" :card="card" />
+
+			<div class="inline-badges">
+				<CardId v-if="idBadge" class="icon-badge" :card="card" />
+
+				<div v-if="card.commentsCount > 0"
+					v-tooltip="commentsHint"
+					class="icon-badge"
+					@click.stop="openComments">
+					<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
+					<CommentIcon v-else :size="16" />
+					<span>{{ card.commentsCount }}</span>
+				</div>
+
+				<div v-if="card.description && checkListCount > 0" class="icon-badge">
+					<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
+					<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
+				</div>
+
+				<div v-else-if="card.description && card.description.trim() && checkListCount == 0" class="icon-badge">
+					<TextIcon :size="16" decorative />
+				</div>
+
+				<div v-if="card.attachmentCount > 0" class="icon-badge">
+					<AttachmentIcon :size="16" />
+					<span>{{ card.attachmentCount }}</span>
+				</div>
+			</div>
 		</div>
 
-		<div v-if="card.description && checkListCount > 0" class="icon-badge">
-			<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
-			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
-		</div>
-
-		<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />
+		<div class="badge-right">
+			<NcAvatarList :users="card.assignedUsers" :size="32" />
 
-		<div v-if="card.attachmentCount > 0" class="icon-badge">
-			<AttachmentIcon :size="16" />
-			<span>{{ card.attachmentCount }}</span>
+			<slot />
 		</div>
-
-		<NcAvatarList :users="card.assignedUsers" />
-
-		<CardMenu class="card-menu" :card="card" />
 	</div>
 </template>
 <script>
 import NcAvatarList from './AvatarList.vue'
 import CardId from './badges/CardId.vue'
-import CardMenu from './CardMenu.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
 import CommentIcon from 'vue-material-design-icons/Comment.vue'
 import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
+import DueDate from './badges/DueDate.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
+	components: {
+		DueDate,
+		NcAvatarList,
+		TextIcon,
+		AttachmentIcon,
+		CheckmarkIcon,
+		CommentIcon,
+		CommentUnreadIcon,
+		CardId,
+	},
 	props: {
 		card: {
 			type: Object,
@@ -102,26 +122,33 @@ export default {
 		display: flex;
 		width: 100%;
 		flex-grow: 1;
+		flex-direction: row;
+		gap: 3px;
 
 		.icon-badge {
-			opacity: .7;
+			color: var(--color-text-maxcontrast);
 			display: flex;
 			margin-right: 2px;
 
 			span,
 			&:deep(span) {
-				padding: 10px 2px;
+				padding: 2px;
 			}
 		}
 	}
 
+	.inline-badges {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 3px;
+	}
+
 	.badges .icon.due {
 		background-position: 4px center;
-		border-radius: 3px;
-		margin-top: 10px;
-		margin-bottom: 10px;
+		border-radius: var(--border-radius);
 		padding: 4px;
-		font-size: 90%;
+		font-size: 13px;
 		display: flex;
 		align-items: center;
 		opacity: .5;
@@ -153,6 +180,31 @@ export default {
 		}
 	}
 
+	.badge-left, .badge-right {
+		display: flex;
+	}
+
+	.badge-left {
+		align-self: end;
+		margin-bottom: 8px;
+		flex-basis: auto;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-wrap: wrap;
+		align-content: flex-end;
+		gap: 3px;
+	}
+
+	.badge-right {
+		align-items: center;
+		align-self: flex-end;
+		display: flex;
+		justify-items: center;
+		max-width: 165px;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .125s;
 	}
@@ -166,9 +218,5 @@ export default {
 			align-items: flex-start;
 			max-height: none !important;
 		}
-
-		.card-menu {
-			display: none;
-		}
 	}
 </style>

src/components/cards/CardCover.vue

@@ -85,6 +85,10 @@ export default {
 .card-cover {
 	height: 100px;
 	display: flex;
+	margin-top: -8px;
+	margin-left: -8px;
+	margin-right: -8px;
+
 	.image-wrapper {
 		flex: 1;
 		position: relative;