From 83b739d1179a968620918ed31a79ad5790d84bf6 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 21 Mar 2022 09:12:43 +0100
Subject: [PATCH] style: update modal UI styles

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 src/components/card/AttachmentList.vue        |  2 +-
 src/components/card/AttachmentsTab.vue        |  1 -
 src/components/card/CardModal.vue             | 67 +++++++++++++------
 .../card/CardSidebarTabComments.vue           |  3 +-
 src/components/card/DueDateTab.vue            |  2 +-
 src/components/card/MembersTab.vue            |  1 +
 src/components/card/ProjectTab.vue            | 23 +++++--
 src/components/card/TagsTab.vue               | 10 ++-
 8 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index 3c64b4fef..89a13fbab 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -269,7 +269,7 @@ export default {
 			padding-left: 44px;
 			background-position: 16px center;
 			flex-grow: 1;
-			height: 44px;
+			height: auto;
 			margin-bottom: 12px;
 			text-align: left;
 		}
diff --git a/src/components/card/AttachmentsTab.vue b/src/components/card/AttachmentsTab.vue
index a79a1c837..5d97caf92 100644
--- a/src/components/card/AttachmentsTab.vue
+++ b/src/components/card/AttachmentsTab.vue
@@ -7,7 +7,6 @@
 			@restore-attachment="restoreAttachment" />
 	</div>
 </template>
-
 <script>
 import AttachmentList from './AttachmentList'
 
diff --git a/src/components/card/CardModal.vue b/src/components/card/CardModal.vue
index 88a512575..d32890c92 100644
--- a/src/components/card/CardModal.vue
+++ b/src/components/card/CardModal.vue
@@ -53,7 +53,7 @@
 			</div>
 		</div>
 		<div class="content">
-			<div class="content-tabs">
+			<div :class="[currentCard.labels.length > 3 ? 'content-two-tabs' : 'content-three-tabs']">
 				<MembersTab
 					:card="currentCard"
 					:active-tabs="activeTabs"
@@ -91,15 +91,22 @@
 			<Description :key="currentCard.id" :card="currentCard" @change="descriptionChanged" />
 		</div>
 		<div class="activities">
-			<h2 class="activities-title">
-				<div class="icon-activity" /> {{ t('deck', 'Activity') }}
-			</h2>
-			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-			<ActivityList v-if="hasActivity"
-				filter="deck"
-				:object-id="currentBoard.id"
-				object-type="deck"
-				type="deck" />
+			<div class="activities-header">
+				<div class="activities-title">
+					<i class="icon-activity" /> {{ t('deck', 'Activity') }}
+				</div>
+				<div class="show-details-btn" @click="showDetails = !showDetails">
+					{{ showDetails ? t('deck', 'Hide details') : t('deck', 'Show details') }}
+				</div>
+			</div>
+			<template v-if="showDetails">
+				<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
+				<ActivityList v-if="hasActivity"
+					filter="deck"
+					:object-id="currentBoard.id"
+					object-type="deck"
+					type="deck" />
+			</template>
 		</div>
 	</div>
 </template>
@@ -166,6 +173,7 @@ export default {
 			comment: '',
 			currentTab: null,
 			activeTabs: [],
+			showDetails: false,
 		}
 	},
 	computed: {
@@ -292,12 +300,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content-tabs {
+.show-details-btn {
+	cursor: pointer;
+	text-decoration: underline;
+	color: var(--color-text-maxcontrast);
+}
+
+.activities-header{
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-two-tabs, .content-three-tabs {
 	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
 	align-items: flex-start;
 }
 
+.content-two-tabs {
+	grid-template-columns: 1fr 2fr;
+}
+
+.content-three-tabs {
+	grid-template-columns: 1fr 2fr 1fr;
+}
+
 .icon-activity {
 	background-image: url(../../../img/flash-black.svg);
 	width: 15px;
@@ -324,7 +350,7 @@ export default {
 }
 
 .activities {
-	&-title {
+	&-title{
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
@@ -338,12 +364,12 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&-input {
+	&-input{
 		width: 100%;
 		margin-left: 10px;
 	}
 
-	.comment-form {
+	.comment-form{
 		width: 95%;
 	}
 }
@@ -366,10 +392,8 @@ export default {
 
 .tabs {
 	margin-top: 20px;
-	margin-bottom: 20px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 30px;
+	margin-bottom: 5px;
+	display: flex;
 }
 
 .tab {
@@ -382,12 +406,11 @@ export default {
 	display: flex;
 	flex-direction: row;
 	overflow: hidden;
-	padding: 10px 10px;
+	padding: 10px 20px;
 	border-radius: 10px;
 	font-size: 85%;
 	margin-bottom: 3px;
-	margin-right: 5px;
-	width: 100px;
+	margin-right: 15px;
 }
 
 .action-btn {
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index d10260cb6..bcb163774 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -26,8 +26,7 @@
 			</InfiniteLoading>
 		</ul>
 		<div v-else-if="isLoading" class="icon icon-loading" />
-		<div v-else class="emptycontent">
-			<div :class="{ 'icon-comment': !error, 'icon-error': error }" />
+		<div v-else>
 			<p>{{ error || t('deck', 'No comments yet. Begin the discussion!') }}</p>
 		</div>
 	</div>
diff --git a/src/components/card/DueDateTab.vue b/src/components/card/DueDateTab.vue
index ffd963554..e7f2b45b6 100644
--- a/src/components/card/DueDateTab.vue
+++ b/src/components/card/DueDateTab.vue
@@ -166,12 +166,12 @@ export default {
 	},
 }
 </script>
-
 <style lang="scss" scoped>
 .section-details{
 	margin-right: 5px;
 	display: flex;
 	align-items: flex-start;
+	margin-top: 10px;
 }
 </style>
 
diff --git a/src/components/card/MembersTab.vue b/src/components/card/MembersTab.vue
index 5135751f7..f6e53d1f0 100644
--- a/src/components/card/MembersTab.vue
+++ b/src/components/card/MembersTab.vue
@@ -192,6 +192,7 @@ export default {
 
 .section-details {
 	width: 100%;
+	margin-top: 10px;
 }
 
 .members {
diff --git a/src/components/card/ProjectTab.vue b/src/components/card/ProjectTab.vue
index 0c3d64dc6..93f1de890 100644
--- a/src/components/card/ProjectTab.vue
+++ b/src/components/card/ProjectTab.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-if="activeTabs.includes('project')" class="section-details">
-		<div class="section-wrapper">
+		<div class="section-wrapper project-tab">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"
@@ -8,10 +8,8 @@
 		</div>
 	</div>
 </template>
-
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
-
 export default {
 	components: { CollectionList },
 	props: {
@@ -26,7 +24,12 @@ export default {
 	},
 }
 </script>
-
+<style scoped>
+.section-details{
+	margin-top: 10px;
+	min-width: 500px;
+}
+</style>
 <style lang="scss">
 #collection-select-container p {
 	display: none;
@@ -35,4 +38,16 @@ export default {
 #collection-list li {
 	align-items: flex-end;
 }
+
+.project-tab .collection-list-item {
+	display: flex !important;
+	align-items: center !important;
+}
+
+.project-tab .linked-icons {
+	img {
+		height: 20px !important;
+	}
+}
+
 </style>
diff --git a/src/components/card/TagsTab.vue b/src/components/card/TagsTab.vue
index 4b4052d1d..e0ca72a85 100644
--- a/src/components/card/TagsTab.vue
+++ b/src/components/card/TagsTab.vue
@@ -144,7 +144,7 @@ export default {
 	align-items: center;
 
 	&-item {
-		border-radius: 5px;
+		border-radius: 15px;
 		margin-right: 5px;
 		min-width: 110px;
 		height: 32px;
@@ -156,12 +156,16 @@ export default {
 
 .select-tag {
 	height: 32px;
-  width: 34px;
-  padding: 5px 8px;
+	width: 34px;
+	padding: 5px 8px;
 }
 
 .tag{
 	padding: 0px 5px;
 	border-radius: 15px;
 }
+
+.section-details{
+	margin-top: 10px;
+}
 </style>