started listview

Signed-off-by: Jakob <[email protected]>

src/components/Controls.vue

@@ -53,6 +53,8 @@
 					@click="toggleShowArchived" />
 				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]" title="Toggle compact mode" class="icon"
 					@click="toggleCompactMode" />
+				<button :class="[(listMode ? 'icon-deck' : 'icon-menu')]" title="Toggle view" class="icon"
+					@click="toggleListMode" />
 				<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
 					tag="button" />
 			</div>
@@ -81,7 +83,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			compactMode: state => state.compactMode
+			compactMode: state => state.compactMode,
+			listMode: state => state.listMode
 		}),
 		archivStyle() {
 
@@ -101,6 +104,9 @@ export default {
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
 		},
+		toggleListMode() {
+			this.$store.dispatch('toggleListMode')
+		},
 		toggleShowArchived() {
 			this.$store.dispatch('toggleShowArchived')
 			this.showArchived = !this.showArchived

src/components/board/Board.vue

@@ -24,8 +24,8 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board" class="board">
-			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
-				<draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
+			<container lock-axix="y" :orientation="getOrientation" @drop="onDropStack">
+				<draggable v-for="stack in stacksByBoard" :key="stack.id" :class="[(listMode ? 'stack-list' : 'stack')]">
 					<stack :stack="stack" />
 				</draggable>
 			</container>
@@ -70,10 +70,17 @@ export default {
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
-			showArchived: state => state.showArchived
+			showArchived: state => state.showArchived,
+			listMode: state => state.listMode
 		}),
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
+		},
+		getOrientation() {
+			if (this.listMode) {
+				return 'vertical'
+			}
+			return 'horizontal'
 		}
 		/* cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
@@ -136,14 +143,20 @@ export default {
 
 	$board-spacing: 15px;
 	$stack-spacing: 10px;
-	$stack-width: 300px;
 
 	.board {
 		margin-left: $board-spacing;
 	}
 
 	.stack {
-		width: $stack-width;
+		width: 300px;
+		padding: $stack-spacing;
+		padding-top: 0;
+	}
+
+	.stack-list {
+		width: 80%;
+		margin: auto;
 		padding: $stack-spacing;
 		padding-top: 0;
 	}

src/components/board/Stack.vue

@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<div class="stack">
+	<div :class="[(listMode ? 'stack-list' : 'stack')]">
 		<div class="stack--header">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!editing" @click="startEditing(stack)">{{ stack.title }}</h3>
@@ -39,7 +39,12 @@
 
 		<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
 			<draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
-				<card-item v-if="card" :id="card.id" />
+				<template v-if="listMode">
+					<list-item v-if="card" :id="card.id" />
+				</template>
+				<template v-else>
+					<card-item v-if="card" :id="card.id" />
+				</template>
 			</draggable>
 		</container>
 
@@ -62,14 +67,17 @@
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { Actions } from 'nextcloud-vue/dist/Components/Actions'
 import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+import { mapState } from 'vuex'
 import CardItem from '../cards/CardItem'
+import ListItem from '../cards/ListItem'
 
 export default {
 	name: 'Stack',
 	components: {
 		Actions,
 		ActionButton,
 		CardItem,
+		ListItem,
 		Container,
 		Draggable
 	},
@@ -88,6 +96,9 @@ export default {
 		}
 	},
 	computed: {
+		...mapState({
+			listMode: state => state.listMode
+		}),
 		cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
 		}
@@ -147,10 +158,15 @@ export default {
 <style lang="scss" scoped>
 
 	$stack-spacing: 10px;
-	$stack-width: 300px;
 
 	.stack {
-		width: $stack-width;
+		width: 300px;
+		padding: $stack-spacing;
+		padding-top: 0;
+	}
+
+	.stack-list {
+		width: 80%;
 		padding: $stack-spacing;
 		padding-top: 0;
 	}