fix: Avoid duplicate scrollbars

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

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",

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;