Merge pull request #1213 from nextcloud/highlightActiveCard

active is highlighted

src/components/board/BoardSidebar.vue

@@ -26,19 +26,19 @@
 		:title="board.title"
 		@close="closeSidebar">
 
-		<AppSidebarTab name="Sharing" icon="icon-shared">
+		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
 			<SharingTabSidebard :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab name="Tags" icon="icon-tag">
+		<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
 			<TagsTabSidebard :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab name="Deleted items" icon="icon-delete">
+		<AppSidebarTab :order="2" name="Deleted items" icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab name="Timeline" icon="icon-activity">
+		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
 			<TimelineTabSidebard :board="board" />
 		</AppSidebarTab>
 

src/components/cards/CardItem.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div :class="{'compact': compactMode}" tag="div" class="card"
+	<div :class="{'compact': compactMode, 'current-card': currentCard}" tag="div" class="card"
 		@click.self="openCard">
 		<div class="card-upper">
 			<h3 v-if="showArchived">{{ card.title }}</h3>
@@ -99,6 +99,9 @@ export default {
 					color: this.textColor(label.color)
 				}
 			}
+		},
+		currentCard() {
+			return this.$route.params.cardId === this.id
 		}
 	},
 	methods: {
@@ -203,6 +206,10 @@ export default {
 				height: 44px;
 			}
 		}
+
+		&.current-card {
+			box-shadow: 0 0 6px 0 var(--color-box-shadow);
+		}
 	}
 
 	.compact {

src/router.js

@@ -107,6 +107,11 @@ export default new Router({
 						sidebar: CardSidebar
 					},
 					props: {
+						default: (route) => {
+							return {
+								cardId: parseInt(route.params.cardId, 10)
+							}
+						},
 						sidebar: (route) => {
 							return {
 								id: parseInt(route.params.cardId, 10)