fix: design review issues

Signed-off-by: Luka Trovic <luka@nextcloud.com>
2024-07-15 19:00:15 +02:00 · 2024-07-15 19:00:15 +02:00 · 9bc601c7a9
--- a/css/deck.css
+++ b/css/deck.css
@ -11,3 +11,13 @@
 	background-image: url(../img/deck.svg);
 	filter: var(--background-invert-if-dark);
 }
+
+input[type=submit].icon-confirm {
+	border-color: var(--color-border-maxcontrast) !important;
+	border-left: none;
+}
+
+input[type=text]:focus+input[type=submit].icon-confirm,
+input[type=text]:hover+input[type=submit].icon-confirm {
+	border-color: var(--color-main-text) !important;
+}
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@ -120,7 +120,7 @@ export default {
 			margin-left: 10px;
 		}
 		.activity--message {
-			margin-left: 44px;
+			margin-left: var(--default-clickable-area);
 			color: var(--color-text-light);
 			margin-bottom: 10px;
 		}
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@ -476,8 +476,8 @@ export default {
 	.controls {
 		display: flex;
 		margin: 5px;
-		height: 44px;
-		padding-left: 44px;
+		height: var(--default-clickable-area);
+		padding-left: var(--default-clickable-area);

 		.board-title {
 			display: flex;
@ -507,8 +507,8 @@ export default {

 	#app-navigation-toggle-custom {
 		position: static;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		cursor: pointer;
 		opacity: 1;
 		display: inline-block !important;
@ -567,8 +567,8 @@ export default {
 	.filter-button {
 		padding: 0;
 		border-radius: 50%;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);

 		&[data-popper-shown] {
 			background-color: var(--color-background-hover);
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@ -56,7 +56,7 @@ export default {
 <style scoped lang="scss">

 .avatar-list {
-	min-height: 44px;
+	min-height: var(--default-clickable-area);
 	align-items: center;
 	padding-right: 0.5em;
 	border: none;
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@ -250,7 +250,7 @@ export default {
 	.board {
 		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - 44px);
+		max-height: calc(100% - var(--default-clickable-area));
 		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@ -100,3 +100,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+:deep {
+	.app-sidebar-tabs__tab-caption,
+	.app-sidebar-tabs__nav .checkbox-content__text {
+		white-space: normal !important;
+	}
+}
+</style>
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@ -4,7 +4,7 @@
 -->
 <template>
 	<div>
-		<h3>{{ t('deck', 'Deleted lists') }}</h3>
+		<h5>{{ t('deck', 'Deleted lists') }}</h5>
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
@ -18,7 +18,7 @@
 			</li>
 		</ul>

-		<h3>{{ t('deck', 'Deleted cards') }}</h3>
+		<h5>{{ t('deck', 'Deleted cards') }}</h5>
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
@ -102,7 +102,7 @@ export default {
 		}

 		* {
-			flex-basis: 44px;
+			flex-basis: var(--default-clickable-area);
 		}

 		.title {
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@ -322,7 +322,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		cursor: grab;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);

 		// Smooth fade out of the cards at the top
 		&:before {
@ -374,6 +374,7 @@ export default {
 			border-radius: 3px;
 			margin: 6px;
 			padding: 4px 4px;
+			font-size: 120%;

 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@ -384,10 +385,17 @@ export default {
 		form {
 			margin: 2px 0;
 		}
+
+		:deep {
+			.action-item,
+			.v-popper--theme-dropdown {
+				display: flex;
+			}
+		}
 	}

 	.stack__card-add {
-		height: 44px;
+		height: var(--default-clickable-area);
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@ -173,7 +173,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-	$clickable-area: 44px;
+	$clickable-area: var(--default-clickable-area);

 	.labels li {
 		display: flex;
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@ -62,7 +62,7 @@ export default {

 <style lang="scss">
 	.board-list {
-		margin-top: -44px;
+		margin-top: - var(--default-clickable-area); //@TODO

 		.board-list-row {
 			align-items: center;
@ -77,7 +77,7 @@ export default {

 		.board-list-header-row {
 			color: var(--color-text-lighter);
-			height: 44px;
+			height: var(--default-clickable-area);
 		}

 		.board-list-bullet-cell,
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@ -253,10 +253,10 @@ export default {
 		gap: calc(var(--default-grid-baseline) * 3);

 		.icon-upload, .icon-folder {
-			padding-left: 44px;
+			padding-left: var(--default-clickable-area);
 			background-position: 16px center;
 			flex-grow: 1;
-			height: 44px;
+			height: var(--default-clickable-area);
 			margin-bottom: 12px;
 			text-align: left;
 		}
@ -291,7 +291,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
-			min-height: 44px;
+			min-height: var(--default-clickable-area);

 			&.deleted {
 				opacity: .5;
@ -339,7 +339,7 @@ export default {
 				}
 			}
 			button.icon-history {
-				width: 44px;
+				width: var(--default-clickable-area);
 			}
 			progress {
 				margin-top: 3px;
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@ -221,7 +221,7 @@ section.app-sidebar__tab--active {
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
 	padding: 0 14px;
-	height: 100%;
+	height: 97%;
 	overflow: initial;
 	user-select: text;
 	-webkit-user-select: text;
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@ -213,7 +213,7 @@ export default {
 	@import '../../css/comments';

 	.reply {
-		margin: 0 0 0 44px;
+		margin: 0 0 0 var(--default-clickable-area);

 		&.reply--preview {
 			margin: 4px 0;
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@ -367,7 +367,7 @@ h5 {
 }

 .description__text :deep(.ProseMirror) {
-	padding-bottom: 44px;
+	padding-bottom: var(--default-clickable-area);
 }

 </style>
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@ -338,7 +338,7 @@ export default {
 				}
 			}
 			.card-menu {
-				height: 44px;
+				height: var(--default-clickable-area);
 				align-self: end;
 			}
 		}
@ -391,7 +391,7 @@ export default {
 	}

 	.compact {
-		min-height: 44px;
+		min-height: var(--default-clickable-area);

 		.duedate {
 			margin-right: 0;
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@ -73,7 +73,7 @@ export default {
 	.board-create {
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);

 		form {
 			display: flex;
@ -86,8 +86,8 @@ export default {
 	}

 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@ -319,10 +319,10 @@ export default {

 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);

 		form {
 			display: flex;
@ -335,8 +335,8 @@ export default {
 	}

 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@ -158,7 +158,7 @@ export default {

 .overview {
 	position: relative;
-	height: calc(100% - 44px);
+	height: calc(100% - var(--default-clickable-area));
 	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
--- a/src/components/search/Placeholder.vue
+++ b/src/components/search/Placeholder.vue
@ -59,7 +59,7 @@ export default {

 <style lang="scss" scoped>
@import '../../css/variables';
-$clickable-area: 44px;
+$clickable-area: var(--default-clickable-area);

 .card--placeholder {
 	width: $stack-width;
--- a/src/css/comments.scss
+++ b/src/css/comments.scss
@ -9,7 +9,7 @@

 	.editor__content:deep {
 		flex-grow: 1;
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);

 		.ProseMirror {
 			width: 100%;
@ -17,8 +17,8 @@
 	}

 	input[type='submit'] {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		margin: 0;
 		padding: 13px;
 		background-color: transparent;
@ -51,6 +51,6 @@
 }

 .comment--content {
-	margin-left: 44px;
+	margin-left: var(--default-clickable-area);
 	word-break: break-word;
 }
--- a/src/helpers/mentions.js
+++ b/src/helpers/mentions.js
@ -2,6 +2,7 @@
 * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
+
 const rawToParsed = (text) => {
 	text = text.replace(/<br>/g, '\n')
 	text = text.replace(/&nbsp;/g, ' ')
--- a/src/helpers/xml.js
+++ b/src/helpers/xml.js
@ -2,6 +2,7 @@
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
+
 const xmlToJson = (xml) => {
 	let obj = {}
 	if (xml.nodeType === 1) {