Merge pull request #411 from gitbutlerapp/mattias/dnd-tray

Add a left side tray to virtual branch experiment

src/lib/components/Checkbox/Checkbox.svelte

@@ -27,7 +27,7 @@
 		appearance: none;
 		border: 0;
 		border-radius: 4px;
-		display: grid;
+		display: inline-grid;
 		place-content: center;
 	}
 

src/routes/+layout.svelte

@@ -84,7 +84,7 @@
 		</div>
 	</header>
 
-	<div class="flex-auto overflow-auto">
+	<div class="flex-grow overflow-auto">
 		<slot />
 	</div>
 

src/routes/projects_new/[projectId]/+page.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import Board from './Board.svelte';
+	import Tray from './Tray.svelte';
 	import type { BranchLane } from './board';
 
 	let columnsData: BranchLane[] = [
 		{
 			id: 'c1',
 			name: 'TODO',
+			active: true,
 			items: [
 				{ id: 1, name: 'item41' },
 				{ id: 2, name: 'item42' },
@@ -21,6 +23,7 @@
 		{
 			id: 'c2',
 			name: 'DOING',
+			active: true,
 			items: [
 				{ id: 10, name: 'item50' },
 				{ id: 11, name: 'item51' }
@@ -29,20 +32,14 @@
 		{
 			id: 'c3',
 			name: 'DONE',
+			active: false,
 			items: [{ id: 13, name: 'item52' }]
 		}
 	];
-	function handleBoardUpdated(newColumnsData: BranchLane[]) {
-		// TODO: API calls
-		columnsData = newColumnsData;
-	}
+	$: console.log(columnsData);
 </script>
 
-<Board columns={columnsData} onFinalUpdate={handleBoardUpdated} />
-
-<style>
-	:global(*) {
-		box-sizing: border-box;
-		margin: 0;
-	}
-</style>
+<div class="flex h-full gap-x-4 p-4">
+	<Tray bind:columns={columnsData} />
+	<Board bind:columns={columnsData} />
+</div>

src/routes/projects_new/[projectId]/Board.svelte

@@ -1,38 +1,26 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	import { dndzone } from 'svelte-dnd-action';
-	import type { FileCard, BranchLane } from './board';
+	import type { BranchLane } from './board';
 	import Lane from './Lane.svelte';
-	const flipDurationMs = 300;
 
 	export let columns: BranchLane[];
-	export let onFinalUpdate: (newColumns: BranchLane[]) => void;
 
-	function handleDndConsiderColumns(e: { detail: { items: BranchLane[] } }) {
-		columns = e.detail.items;
-	}
-	function handleDndFinalizeColumns(e: { detail: { items: BranchLane[] } }) {
-		onFinalUpdate(e.detail.items);
-	}
-	function handleItemFinalize(columnIdx: number, newItems: FileCard[]) {
-		columns[columnIdx].items = newItems;
-		onFinalUpdate([...columns]);
-	}
+	const flipDurationMs = 300;
 </script>
 
 <section
-	class="w-100"
-	style="height: 90vh;"
+	class="flex gap-x-4"
 	use:dndzone={{ items: columns, flipDurationMs, type: 'column' }}
-	on:consider={handleDndConsiderColumns}
-	on:finalize={handleDndFinalizeColumns}
+	on:consider={(e) => (columns = e.detail.items)}
+	on:finalize={(e) => (columns = e.detail.items)}
 >
-	{#each columns as { id, name, items }, idx (id)}
+	{#each columns.filter((c) => c.active) as { id, name, items }, idx (id)}
 		<div
-			class="float-left m-2 flex h-full w-64 border border-zinc-700 bg-zinc-900/50 p-2"
+			class="flex w-64 border border-zinc-700 bg-zinc-900/50 p-4"
 			animate:flip={{ duration: flipDurationMs }}
 		>
-			<Lane {name} {items} onDrop={(newItems) => handleItemFinalize(idx, newItems)} />
+			<Lane {name} bind:items />
 		</div>
 	{/each}
 </section>

src/routes/projects_new/[projectId]/Lane.svelte

@@ -2,35 +2,27 @@
 	import { flip } from 'svelte/animate';
 	import { dndzone } from 'svelte-dnd-action';
 	import type { FileCard } from './board';
-	const flipDurationMs = 150;
+
 	export let name: string;
 	export let items: FileCard[];
-	export let onDrop: (items: FileCard[]) => void;
 
-	function handleDndConsiderCards(e: { detail: { items: FileCard[] } }) {
-		console.warn('got consider', name);
-		items = e.detail.items;
-	}
-	function handleDndFinalizeCards(e: { detail: { items: FileCard[] } }) {
-		onDrop(e.detail.items);
-	}
+	const flipDurationMs = 150;
 </script>
 
-<div class="h-full w-full overflow-y-hidden">
-	<div class="flex h-12 items-center justify-center font-bold">
+<div class="flex h-full w-full flex-col">
+	<div class="flex items-center justify-center p-4 font-bold">
 		{name}
 	</div>
 	<div
-		class="overflow-y-scroll"
-		style="height: calc(100% - 2.5em);"
+		class="flex flex-grow flex-col gap-y-4"
 		use:dndzone={{ items, flipDurationMs, zoneTabIndex: -1 }}
-		on:consider={handleDndConsiderCards}
-		on:finalize={handleDndFinalizeCards}
+		on:consider={(e) => (items = e.detail.items)}
+		on:finalize={(e) => (items = e.detail.items)}
 	>
 		{#each items as item (item.id)}
 			<div
 				animate:flip={{ duration: flipDurationMs }}
-				class="my-2 flex h-14 w-full items-center justify-center rounded border border-zinc-600 bg-zinc-700"
+				class="flex h-14 w-full items-center justify-center rounded border border-zinc-600 bg-zinc-700"
 			>
 				{item.name}
 			</div>

src/routes/projects_new/[projectId]/Tray.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { Checkbox } from '$lib/components';
+	import type { BranchLane } from './board';
+
+	export let columns: BranchLane[];
+</script>
+
+<section
+	class="flex h-full w-64 flex-col gap-y-4 rounded border border-zinc-700 bg-zinc-900/50 p-4"
+>
+	{#each columns as column (column.id)}
+		<div animate:flip={{ duration: 150 }} class="rounded border border-zinc-600 bg-zinc-700 p-2">
+			<Checkbox bind:checked={column.active} />
+			<span class="ml-2">{column.name}</span>
+		</div>
+	{/each}
+</section>

src/routes/projects_new/[projectId]/board.ts

@@ -6,5 +6,6 @@ export type FileCard = {
 export type BranchLane = {
 	id: string;
 	name: string;
+	active: boolean;
 	items: FileCard[];
 };