From 14dd49e4b0ce5120c00a50c0ef2109211e59cc75 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:22:47 +0200
Subject: [PATCH] feat: divide most tasks.scss styles into components

- ShowTasks.vue
- List.vue
- defer-task.vue
- edit-task.vue
- Kanban.vue, relatedTasks.vue and singleTaskInView.vue
---
 src/components/tasks/edit-task.vue            |  33 ++
 src/components/tasks/partials/defer-task.vue  |  59 ++++
 src/components/tasks/partials/kanban-card.vue | 155 +++++++++
 .../tasks/partials/relatedTasks.vue           |  24 ++
 .../tasks/partials/singleTaskInList.vue       | 146 +++++++++
 src/styles/components/tasks.scss              | 302 +-----------------
 src/views/list/views/Kanban.vue               | 162 +---------
 src/views/list/views/List.vue                 |  47 ++-
 src/views/tasks/ShowTasks.vue                 |  27 ++
 9 files changed, 498 insertions(+), 457 deletions(-)

diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 53459736..d032fc94 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -142,3 +142,36 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.priority-select {
+	.select,
+	select {
+		width: 100%;
+	}
+}
+
+ul.assingees {
+	list-style: none;
+	margin: 0;
+
+	li {
+		padding: 0.5rem 0.5rem 0;
+
+		a {
+			float: right;
+			color: $red;
+			transition: all $transition;
+		}
+	}
+}
+
+.tag {
+	margin-right: 0.5rem;
+	margin-bottom: 0.5rem;
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index c5ef510b..c36a49d4 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -131,3 +131,62 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+// 100px is roughly the size the pane is pulled to the right
+$defer-task-max-width: 350px + 100px;
+
+.defer-task {
+	position: absolute;
+	width: 100%;
+	max-width: $defer-task-max-width;
+	border-radius: $radius;
+	border: 1px solid $grey-200;
+	padding: 1rem;
+	margin: 1rem;
+	background: $white;
+	color: $text;
+	cursor: default;
+	z-index: 10;
+	box-shadow: $shadow-lg;
+
+	@media screen and (max-width: ($defer-task-max-width)) {
+		left: .5rem;
+		right: .5rem;
+		max-width: 100%;
+		width: calc(100vw - 1rem - 2rem);
+	}
+}
+
+.defer-days {
+	justify-content: space-between;
+	display: flex;
+	margin: .5rem 0;
+}
+
+::v-deep {
+	input.input {
+		display: none;
+	}
+
+	.flatpickr-calendar {
+		margin: 0 auto;
+		box-shadow: none;
+
+		@media screen and (max-width: ($defer-task-max-width)) {
+			max-width: 100%;
+		}
+
+		span {
+			width: auto !important;
+		}
+
+	}
+
+	.flatpickr-innerContainer {
+		@media screen and (max-width: ($defer-task-max-width)) {
+			overflow: scroll;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 6bc60297..81c871d7 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -110,3 +110,158 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+$task-background: $white;
+
+.task {
+	-webkit-touch-callout: none; // iOS Safari
+	user-select: none;
+	cursor: pointer;
+	box-shadow: $shadow-xs;
+	display: block;
+	border: 3px solid transparent;
+
+	font-size: .9rem;
+	margin: .5rem;
+	padding: .4rem;
+	border-radius: $radius;
+	background: $task-background;
+
+	&.loader-container.is-loading::after {
+		width: 1.5rem;
+		height: 1.5rem;
+		top: calc(50% - .75rem);
+		left: calc(50% - .75rem);
+		border-width: 2px;
+	}
+
+	h3 {
+		font-family: $family-sans-serif;
+		font-size: .85rem;
+		word-break: break-word;
+	}
+
+	.progress {
+		margin: 8px 0 0 0;
+		width: 100%;
+		height: 0.5rem;
+	}
+
+	.due-date {
+		float: right;
+		display: flex;
+		align-items: center;
+
+		.icon {
+			margin-right: .25rem;
+		}
+
+		&.overdue {
+			color: $red;
+		}
+	}
+
+	.label-wrapper .tag {
+		margin: .5rem .5rem 0 0;
+	}
+
+	.footer {
+		background: transparent;
+		padding: 0;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		::v-deep.tag,
+		.assignees,
+		.icon,
+		.priority-label {
+			margin-top: .25rem;
+			margin-right: .25rem;
+		}
+
+		.assignees {
+			display: flex;
+
+			.user {
+				display: inline;
+				margin: 0;
+
+				img {
+					margin: 0;
+				}
+			}
+		}
+
+		// FIXME: should be in labels.vue
+		::v-deep.tag {
+			margin-left: 0;
+		}
+
+		.priority-label {
+			font-size: .75rem;
+			height: 2rem;
+
+			.icon {
+				height: 1rem;
+				padding: 0 .25rem;
+				margin-top: 0;
+			}
+		}
+	}
+
+	.footer .icon,
+	.due-date,
+	.priority-label {
+		background: $grey-100;
+		border-radius: $radius;
+		padding: 0 .5rem;
+	}
+
+	.due-date {
+		padding: 0 .25rem;
+	}
+
+	.task-id {
+		color: $grey-500;
+		font-size: .8rem;
+		margin-bottom: .25rem;
+		display: flex;
+	}
+
+	.is-done {
+		font-size: .75rem;
+		padding: .2rem .3rem;
+		margin: 0 .25rem 0 0;
+	}
+
+	&.is-moving {
+		opacity: .5;
+	}
+
+	span {
+		width: auto;
+	}
+
+	&.has-light-text {
+		color: $white;
+
+		.task-id {
+			color: $grey-200;
+		}
+
+		.footer .icon,
+		.due-date,
+		.priority-label {
+			background: $grey-800;
+		}
+
+		.footer {
+			.icon svg {
+				fill: $white;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 8afcafb3..269382f4 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -299,6 +299,30 @@ $remove-icon-width: 24px;
         text-align: center;
       }
     }
+
+	.task {
+		display: flex;
+		flex-wrap: wrap;
+		padding: .4rem;
+		transition: background-color $transition;
+		align-items: center;
+		cursor: pointer;
+		border-radius: $radius;
+		border: 2px solid transparent;
+
+		a {
+			color: $text;
+			transition: color ease $transition-duration;
+
+			&:hover {
+				color: $grey-900;
+			}
+		}
+
+		.remove {
+			color: $red;
+		}
+	}
   }
 
   .none {
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 697207cf..60fd2ca4 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -211,3 +211,149 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.task {
+	display: flex;
+	flex-wrap: wrap;
+	padding: .4rem;
+	transition: background-color $transition;
+	align-items: center;
+	cursor: pointer;
+	border-radius: $radius;
+	border: 2px solid transparent;
+
+	&:hover {
+		background-color: $grey-100;
+	}
+
+	.tasktext,
+	&.tasktext {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		display: inline-block;
+		flex: 1 0 50%;
+
+		.overdue {
+			color: $red;
+		}
+	}
+
+	.task-list {
+		width: auto;
+		color: $grey-400;
+		font-size: .9rem;
+		white-space: nowrap;
+	}
+
+	.color-bubble {
+		height: 10px;
+		flex: 0 0 10px;
+	}
+
+	.tag {
+		margin: 0 0.5rem;
+	}
+
+	.avatar {
+		border-radius: 50%;
+		vertical-align: bottom;
+		margin-left: 5px;
+		height: 27px;
+		width: 27px;
+	}
+
+	.list-task-icon {
+		margin-left: 6px;
+
+		&:not(:first-of-type) {
+			margin-left: 8px;
+		}
+
+	}
+
+	a {
+		color: $text;
+		transition: color ease $transition-duration;
+
+		&:hover {
+			color: $grey-900;
+		}
+	}
+
+	.favorite {
+		opacity: 0;
+		text-align: center;
+		width: 27px;
+		transition: opacity $transition, color $transition;
+
+		&:hover {
+			color: $orange;
+		}
+
+		&.is-favorite {
+			opacity: 1;
+			color: $orange;
+		}
+	}
+
+	&:hover .favorite {
+		opacity: 1;
+	}
+
+	.handle {
+		opacity: 0;
+		transition: opacity $transition;
+		margin-right: .25rem;
+		cursor: grab;
+	}
+
+	&:hover .handle {
+		opacity: 1;
+	}
+
+	::v-deep.fancycheckbox {
+		height: 18px;
+		padding-top: 0;
+		padding-right: .5rem;
+
+		span {
+			display: none;
+		}
+	}
+
+	.tasktext.done {
+		text-decoration: line-through;
+		color: $grey-500;
+	}
+
+	span.parent-tasks {
+		color: $grey-500;
+		width: auto;
+	}
+
+	.remove {
+		color: $red;
+	}
+
+	input[type="checkbox"] {
+		vertical-align: middle;
+	}
+
+	.settings {
+		float: right;
+		width: 24px;
+		cursor: pointer;
+	}
+
+	&.loader-container.is-loading:after {
+		top: calc(50% - 1rem);
+		left: calc(50% - 1rem);
+		width: 2rem;
+		height: 2rem;
+		border-left-color: $grey-300;
+		border-bottom-color: $grey-300;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 99e8e3c1..e6abd143 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -1,48 +1,3 @@
-.tasks-container {
-	display: flex;
-
-	.tasks {
-		width: 100%;
-
-		.ghost {
-			border-radius: $radius;
-			background: $grey-100;
-			border: 2px dashed $grey-300;
-
-			* {
-				opacity: 0;
-			}
-		}
-	}
-
-	&.has-task-edit-open {
-		flex-direction: column;
-
-		@media screen and (min-width: $tablet) {
-			flex-direction: row;
-
-			.tasks {
-				width: 66%;
-			}
-		}
-	}
-
-	.taskedit {
-		width: 33%;
-		margin-right: 1rem;
-		margin-left: .5rem;
-
-		@media screen and (max-width: $tablet) {
-			width: 100%;
-			border-radius: 0;
-			margin: 0;
-			border-left: 0;
-			border-right: 0;
-			border-bottom: 0;
-		}
-	}
-}
-
 .tasks {
 	margin-top: 1rem;
 	padding: 0;
@@ -53,160 +8,15 @@
 	}
 
 	.task {
-		display: flex;
-		flex-wrap: wrap;
-		padding: .4rem;
-		transition: background-color $transition;
-		align-items: center;
-		cursor: pointer;
 		margin: 0 .5rem;
-		border-radius: $radius;
-		border: 2px solid transparent;
-
+	
 		&:first-child {
 			margin-top: .5rem;
 		}
-
+	
 		&:last-child {
 			margin-bottom: .5rem;
 		}
-
-		&:hover {
-			background-color: $grey-100;
-		}
-
-		.tasktext,
-		&.tasktext {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			display: inline-block;
-			flex: 1 0 50%;
-
-			.overdue {
-				color: $red;
-			}
-		}
-
-		.task-list {
-			width: auto;
-			color: $grey-400;
-			font-size: .9rem;
-			white-space: nowrap;
-		}
-
-		.fancycheckbox span {
-			display: none;
-		}
-
-		.color-bubble {
-			height: 10px;
-			flex: 0 0 10px;
-		}
-
-		.tag {
-			margin: 0 0.5rem;
-		}
-
-		.avatar {
-			border-radius: 50%;
-			vertical-align: bottom;
-			margin-left: 5px;
-			height: 27px;
-			width: 27px;
-		}
-
-		.list-task-icon {
-			margin-left: 6px;
-
-			&:not(:first-of-type) {
-				margin-left: 8px;
-			}
-
-		}
-
-		a {
-			color: $text;
-			transition: color ease $transition-duration;
-
-			&:hover {
-				color: $grey-900;
-			}
-		}
-
-		.favorite {
-			opacity: 0;
-			text-align: center;
-			width: 27px;
-			transition: opacity $transition, color $transition;
-
-			&:hover {
-				color: $orange;
-			}
-
-			&.is-favorite {
-				opacity: 1;
-				color: $orange;
-			}
-		}
-
-		&:hover .favorite {
-			opacity: 1;
-		}
-
-		.handle {
-			opacity: 0;
-			transition: opacity $transition;
-			margin-right: .25rem;
-			cursor: grab;
-		}
-
-		&:hover .handle {
-			opacity: 1;
-		}
-
-		.fancycheckbox {
-			height: 18px;
-			padding-top: 0;
-			padding-right: .5rem;
-
-			span {
-				display: none;
-			}
-		}
-
-		.tasktext.done {
-			text-decoration: line-through;
-			color: $grey-500;
-		}
-
-		span.parent-tasks {
-			color: $grey-500;
-			width: auto;
-		}
-
-		.remove {
-			color: $red;
-		}
-
-		input[type="checkbox"] {
-			vertical-align: middle;
-		}
-
-		.settings {
-			float: right;
-			width: 24px;
-			cursor: pointer;
-		}
-
-		&.loader-container.is-loading:after {
-			top: calc(50% - 1rem);
-			left: calc(50% - 1rem);
-			width: 2rem;
-			height: 2rem;
-			border-left-color: $grey-300;
-			border-bottom-color: $grey-300;
-		}
 	}
 
 	.checklist-summary {
@@ -247,114 +57,6 @@
 	}
 }
 
-.taskedit {
-	.priority-select {
-		.select, select {
-			width: 100%;
-		}
-	}
-
-	ul.assingees {
-		list-style: none;
-		margin: 0;
-
-		li {
-			padding: 0.5rem 0.5rem 0;
-
-			a {
-				float: right;
-				color: $red;
-				transition: all $transition;
-			}
-		}
-	}
-
-	.tag {
-		margin-right: 0.5rem;
-		margin-bottom: 0.5rem;
-
-		&:last-child {
-			margin-right: 0;
-		}
-	}
-}
-
-.show-tasks {
-	h3 {
-		text-align: left;
-
-		&.nothing {
-			text-align: center;
-			margin-top: 3rem;
-		}
-
-		.input {
-			width: 190px;
-			vertical-align: middle;
-			margin: .5rem 0;
-		}
-	}
-
-	img {
-		margin-top: 2rem;
-	}
-
-	.user img {
-		margin: 0;
-	}
-}
-
-.defer-task {
-	$defer-task-max-width: 350px;
-
-	position: absolute;
-	width: 100%;
-	max-width: $defer-task-max-width;
-	border-radius: $radius;
-	border: 1px solid $grey-200;
-	padding: 1rem;
-	margin: 1rem;
-	background: $white;
-	color: $text;
-	cursor: default;
-	z-index: 10;
-	box-shadow: $shadow-lg;
-
-	input.input {
-		display: none;
-	}
-
-	.flatpickr-calendar {
-		margin: 0 auto;
-		box-shadow: none;
-
-		span {
-			width: auto !important;
-		}
-	}
-
-	.defer-days {
-		justify-content: space-between;
-		display: flex;
-		margin: .5rem 0;
-	}
-
-	@media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
-		left: .5rem;
-		right: .5rem;
-		max-width: 100%;
-		width: calc(100vw - 1rem - 2rem);
-
-		.flatpickr-calendar {
-			max-width: 100%;
-
-			.flatpickr-innerContainer {
-				overflow: scroll;
-			}
-		}
-	}
-}
-
 .is-max-width-desktop .tasks .task {
 	max-width: $desktop;
 }
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 20df0931..eca78c30 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -594,7 +594,6 @@ export default {
 
 <style lang="scss">
 $bucket-background: $grey-100;
-$task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 $bucket-header-height: 60px;
@@ -654,161 +653,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
 			}
 
-			.task {
-				-webkit-touch-callout: none; // iOS Safari
-				user-select: none;
-				cursor: pointer;
-				box-shadow: $shadow-xs;
-				display: block;
-				border: 3px solid transparent;
-
-				font-size: .9rem;
-				margin: .5rem;
-				border-radius: $radius;
-				background: $task-background;
-
-				&.loader-container.is-loading:after {
-					width: 1.5rem;
-					height: 1.5rem;
-					top: calc(50% - .75rem);
-					left: calc(50% - .75rem);
-					border-width: 2px;
-				}
-
-				h3 {
-					font-family: $family-sans-serif;
-					font-size: .85rem;
-					word-break: break-word;
-				}
-
-				.progress {
-					margin: 8px 0 0 0;
-					width: 100%;
-					height: 0.5rem;
-				}
-
-				.due-date {
-					float: right;
-					display: flex;
-					align-items: center;
-
-					.icon {
-						margin-right: .25rem;
-					}
-
-					&.overdue {
-						color: $red;
-					}
-				}
-
-				.label-wrapper .tag {
-					margin: .5rem .5rem 0 0;
-				}
-
-				.footer {
-					background: transparent;
-					padding: 0;
-					display: flex;
-					flex-wrap: wrap;
-					align-items: center;
-
-					.tag, .assignees, .icon, .priority-label {
-						margin-top: .25rem;
-						margin-right: .25rem;
-					}
-
-					.assignees {
-						display: flex;
-
-						.user {
-							display: inline;
-							margin: 0;
-
-							img {
-								margin: 0;
-							}
-						}
-					}
-
-					.tag {
-						margin-left: 0;
-					}
-
-					.priority-label {
-						font-size: .75rem;
-						height: 2rem;
-
-						.icon {
-							height: 1rem;
-							padding: 0 .25rem;
-							margin-top: 0;
-						}
-					}
-				}
-
-				.footer .icon,
-				.due-date,
-				.priority-label {
-					background: $grey-100;
-					border-radius: $radius;
-					padding: 0 .5rem;
-				}
-
-				.due-date {
-					padding: 0 .25rem;
-				}
-
-				.task-id {
-					color: $grey-500;
-					font-size: .8rem;
-					margin-bottom: .25rem;
-					display: flex;
-				}
-
-				.is-done {
-					font-size: .75rem;
-					padding: .2rem .3rem;
-					margin: 0 .25rem 0 0;
-				}
-
-				&.is-moving {
-					opacity: .5;
-				}
-
-				span {
-					width: auto;
-				}
-
-				&.has-light-text {
-					color: $white;
-
-					.task-id {
-						color: $grey-200;
-					}
-
-					.footer .icon,
-					.due-date,
-					.priority-label {
-						background: $grey-800;
-					}
-
-					.footer {
-						.icon svg {
-							fill: $white;
-						}
-					}
-				}
-
-				&.v-leave-from,
-				&.v-leave-to,
-				&.v-leave-active
-				&.move-card-leave-from,
-				&.move-card-leave-to,
-				&.move-card-leave-active {
-					display: none;
-				}
-			}
-
 			.dropper {
 				&, > div {
 					min-height: 40px;
@@ -908,4 +752,10 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	transition: transform 0.18s ease;
 	transform: rotateZ(3deg)
 }
+
+.move-card-leave-from,
+.move-card-leave-to,
+.move-card-leave-active {
+	display: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index ac62ea57..11ce974f 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -311,7 +311,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.tasks-container {
+	display: flex;
+
+	&.has-task-edit-open {
+		flex-direction: column;
+
+		@media screen and (min-width: $tablet) {
+			flex-direction: row;
+
+			.tasks {
+				width: 66%;
+			}
+		}
+	}
+
+	.tasks {
+		width: 100%;
+
+		.ghost {
+			border-radius: $radius;
+			background: $grey-100;
+			border: 2px dashed $grey-300;
+
+			* {
+				opacity: 0;
+			}
+		}
+	}
+
+	.taskedit {
+		width: 33%;
+		margin-right: 1rem;
+		margin-left: .5rem;
+
+		@media screen and (max-width: $tablet) {
+			width: 100%;
+			border-radius: 0;
+			margin: 0;
+			border-left: 0;
+			border-right: 0;
+			border-bottom: 0;
+		}
+	}
+}
+
 .list-view .task-add {
 	padding: 1rem 1rem 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index f9f1a9d3..3ef59fde 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -254,3 +254,30 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.show-tasks {
+	h3 {
+		text-align: left;
+
+		&.nothing {
+			text-align: center;
+			margin-top: 3rem;
+		}
+
+		.input {
+			width: 190px;
+			vertical-align: middle;
+			margin: .5rem 0;
+		}
+	}
+
+	img {
+		margin-top: 2rem;
+	}
+
+	.user img {
+		margin: 0;
+	}
+}
+</style>
\ No newline at end of file