Move card styles to component and add compact mode

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

src/components/Controls.vue

@@ -32,7 +32,7 @@
 			</div>
 		</div>
 		<div v-if="board" class="crumb svg">
-			<div class="board-bullet"></div>
+			<div class="board-bullet" />
 			<a href="#todo">{{ board.title }}</a>
 			<span style="display: inline;" class="icon-shared" />
 		</div>
@@ -42,12 +42,13 @@
 					<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
 					<input id="new-stack-input-main" type="text" class="no-close"
 						placeholder="Add a new stack">
-					<input class="icon-confirm" type="button" title="Submit" />
+					<input class="icon-confirm" type="button" title="Submit">
 				</form>
 			</div>
 			<div class="board-action-buttons">
 				<button title="Show archived cards" class="icon icon-archive" />
-				<button title="Toggle compact mode" class="icon icon-toggle-compact-expanded" />
+				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]" title="Toggle compact mode" class="icon"
+					@click="toggleCompactMode" />
 				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
 					tag="button" />
 			</div>
@@ -57,6 +58,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
 	name: 'Controls',
 	props: {
@@ -66,12 +68,20 @@ export default {
 			default: null
 		}
 	},
+	computed: {
+		...mapState({
+			compactMode: state => state.compactMode
+		})
+	},
 	methods: {
 		toggleNav() {
 			this.$store.dispatch('toggleNav')
 		},
 		toggleSidebar: function() {
 			this.$store.dispatch('toggleSidebar')
+		},
+		toggleCompactMode() {
+			this.$store.dispatch('toggleCompactMode')
 		}
 	}
 }

src/components/card/CardSidebar.vue

@@ -22,13 +22,11 @@
 
 <template>
 	<app-sidebar
+		:actions="[]"
 		title="andy-yeo-1387151-unsplash.jpg"
 		subtitle="4,3 MB, last edited 19 days ago"
-				 :actions="[]"
 		@close="closeSidebar">
-		<template #action>
-
-		</template>
+		<template #action />
 		<AppSidebarTab name="Description" icon="icon-description">
 			this is the description tab
 		</AppSidebarTab>

src/components/cards/CardBadges.vue

@@ -22,29 +22,23 @@
 
 <template>
 	<div class="badges">
-		<i v-if="true" class="icon icon-description" title="" />
-		<span v-if="true" class="due">
-			<i class="icon icon-badge" />
-			<span data-timestamp="" class="live-relative-timestamp" />
-		</span>
-		<div v-if="true" class="card-tasks">
-			<i class="icon icon-checkmark" />
+		<div v-if="true" class="icon icon-description" title="" />
+		<div v-if="true" class="due icon icon-calendar-dark">
+			<span>Now</span>
+		</div>
+		<div v-if="true" class="card-tasks icon icon-checkmark">
 			<span>0/0</span>
 		</div>
-		<div v-if="true" class="card-files">
-			<i class="icon icon-files-dark" />
+		<div v-if="true" class="card-files icon icon-files-dark">
 			<span>1</span>
 		</div>
-		<div v-if="true" class="card-comments">
-			<i class="icon icon-comment" />
+		<div v-if="true" class="card-comments icon icon-comment">
 			<span>1</span>
 		</div>
 		<div v-if="true" class="card-assigned-users">
-			<div class="assigned-user">
 			<avatar user="admin" />
 		</div>
 	</div>
-	</div>
 </template>
 <script>
 import { Avatar } from 'nextcloud-vue'
@@ -70,5 +64,21 @@ export default {
 	.badges {
 		display: flex;
 		flex-grow: 1;
+		.icon {
+			opacity: 0.5;
+			padding: 12px 3px;
+			background-position: left;
+			span {
+				margin-left: 18px;
+			}
+		}
+		.card-assigned-users {
+			flex-grow: 1;
+			padding: 6px 0px;
+			margin-right: -5px;
+			.avatardiv {
+				float: right;
+			}
+		}
 	}
 </style>

src/components/cards/CardItem.vue

@@ -21,35 +21,33 @@
   -->
 
 <template>
-	<div tag="div" class="card" @click="openCard">
+	<div :class="{'compact': compactMode}" tag="div" class="card"
+		@click="openCard">
 		<div class="card-upper">
 			<h3>{{ card.title }}</h3>
+			<action :actions="visibilityPopover" />
+		</div>
 		<ul class="labels">
 			<li v-for="label in labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
 		</ul>
-		</div>
-		<div class="card-controls compact-item">
+		<div v-show="!compactMode" class="card-controls compact-item">
 			<card-badges />
-			<div v-click-outside="hidePopoverMenu">
-				<a class="icon-more" @click.prevent="togglePopoverMenu" />
-				<div :class="{open: menuOpened}" class="popovermenu">
-					<PopoverMenu :menu="visibilityPopover" />
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { PopoverMenu } from 'nextcloud-vue'
+import { PopoverMenu, Action } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
+import { mapState } from 'vuex'
 
 import CardBadges from './CardBadges'
 import LabelTag from './LabelTag'
 import Color from '../../mixins/color'
+
 export default {
 	name: 'CardItem',
-	components: { PopoverMenu, CardBadges, LabelTag },
+	components: { PopoverMenu, CardBadges, LabelTag, Action },
 	directives: {
 		ClickOutside
 	},
@@ -66,9 +64,9 @@ export default {
 		}
 	},
 	computed: {
-		compactMode() {
-			return false
-		},
+		...mapState({
+			compactMode: state => state.compactMode
+		}),
 		card() {
 			return this.$store.getters.cardById(this.id)
 		},
@@ -91,6 +89,11 @@ export default {
 		},
 		visibilityPopover() {
 			return [
+				{
+					action: () => {},
+					icon: 'icon-archive-dark',
+					text: t('deck', 'Archive card')
+				},
 				{
 					action: () => {},
 					icon: 'icon-settings-dark',
@@ -116,19 +119,58 @@ export default {
 <style lang="scss" scoped>
 	.card {
 		box-shadow: 0 0 5px #aaa;
-		.icon-more {
-			width: 44px;
-		}
-		.popovermenu {
-			display: none;
-			&.open {
-				display: block;
-				top: 44px;
+		border-radius: 3px;
+		margin: 10px;
+		width: 260px; // TODO: TMP
+		font-size: 100%;
+		background-color: var(--color-main-background);
+
+		.card-upper {
+			display: flex;
+			h3 {
+				margin: 12px;
+				flex-grow: 1;
+				font-size: 100%;
 			}
 		}
-		.card-controls > div {
+
+		.labels {
+			display: flex;
+			margin-left: 12px;
+			margin-top: -5px;
+			margin-bottom: -5px;
+
+			li {
+				padding: 1px 4px;
+				border-radius: 3px;
+				font-size: 90%;
+				margin-right: 2px;
+			}
+		}
+
+		.card-controls {
+			display: flex;
+			margin-left: 12px;
+			margin-right: 12px;
+			& > div {
 				display: flex;
 				height: 44px;
 			}
 		}
+	}
+
+	.compact {
+		padding-bottom: 12px;
+		.labels {
+			height: 6px;
+			margin-top: -10px;
+			margin-bottom: 3px;
+		}
+		.labels li {
+			width: 30px;
+			height: 6px;
+			font-size: 0;
+			color: transparent;
+		}
+	}
 </style>

src/components/navigation/AppNavigationBoard.vue

@@ -65,7 +65,7 @@
 <script>
 import { PopoverMenu } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
-import ColorPicker from '../ColorPicker';
+import ColorPicker from '../ColorPicker'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -91,7 +91,7 @@ export default {
 			menuOpen: false,
 			undoTimeoutHandle: null,
 			editTitle: '',
-			editColor: '',
+			editColor: ''
 		}
 	},
 	computed: {

src/store/main.js

@@ -47,6 +47,7 @@ export default new Vuex.Store({
 	strict: debug,
 	state: {
 		navShown: true,
+		compactMode: false,
 		sidebarShown: false,
 		currentBoard: null,
 		boards: [],
@@ -117,6 +118,9 @@ export default new Vuex.Store({
 		toggleSidebar(state) {
 			state.sidebarShown = !state.sidebarShown
 		},
+		toggleCompactMode(state) {
+			state.compactMode = !state.compactMode
+		},
 		setBoards(state, boards) {
 			state.boards = boards
 		},
@@ -199,6 +203,9 @@ export default new Vuex.Store({
 		toggleSidebar({ commit }) {
 			commit('toggleSidebar')
 		},
+		toggleCompactMode({ commit }) {
+			commit('toggleCompactMode')
+		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		}