From 4d5bcf85e249681c50e260c0b1b1372d421b0b11 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 16 Nov 2023 19:05:30 +0100
Subject: [PATCH] Make gallery view more responsive, add zoom button

---
 .../filesystem/filemanager/FileManager.svelte | 57 +++++++++++--
 .../filesystem/filemanager/GalleryView.svelte | 81 +++++++++++++------
 .../filesystem/filemanager/ListView.svelte    | 21 ++---
 3 files changed, 115 insertions(+), 44 deletions(-)

diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 04600cf..98b9d54 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -11,6 +11,7 @@ export let fs_navigator
 export let state
 export let edit_window
 export let directory_view = ""
+let large_icons = false
 let uploader
 let mode = "viewing"
 let creating_dir = false
@@ -20,6 +21,8 @@ export const upload = files => {
 	return uploader.upload(files)
 }
 
+// Navigation functions
+
 const node_click = e => {
 	let index = e.detail
 
@@ -39,6 +42,13 @@ const node_click = e => {
 		state.children[index].fm_selected = !state.children[index].fm_selected
 	}
 }
+let node_context = e => {
+	// If this is a touch event we will select the item
+	if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
+		e.detail.event.preventDefault()
+		node_select({detail: e.detail.index})
+	}
+}
 const node_share_click = e => {
 	let index = e.detail
 
@@ -67,6 +77,8 @@ const navigate_back = () => {
 	history.back()
 }
 
+// Deletion function
+
 const delete_selected = async () => {
 	let count = state.children.reduce((acc, cur) => {
 		if (cur.fm_selected) {
@@ -103,6 +115,9 @@ const delete_selected = async () => {
 		fs_navigator.reload()
 	}
 }
+
+// Mode switches
+
 const selecting_mode = () => {
 	mode = "selecting"
 }
@@ -128,6 +143,12 @@ const toggle_view = () => {
 
 	localStorage.setItem("directory_view", directory_view)
 }
+const toggle_large_icons = () => {
+	large_icons = !large_icons
+	localStorage.setItem("large_icons", large_icons)
+}
+
+// Moving functions
 
 let moving_items = []
 
@@ -160,7 +181,6 @@ const move_here = async () => {
 	let target_dir = state.base.path + "/"
 
 	try {
-		// Save all promises with deletion requests in an array
 		let promises = []
 		moving_items.forEach(item => {
 			console.log("moving", item.path, "to", target_dir + item.name)
@@ -181,6 +201,7 @@ const move_here = async () => {
 onMount(() => {
 	if(typeof Storage !== "undefined") {
 		directory_view = localStorage.getItem("directory_view")
+		large_icons = localStorage.getItem("large_icons") === "true"
 	}
 	if (directory_view === "" || directory_view === null) {
 		directory_view = "list"
@@ -201,13 +222,6 @@ onMount(() => {
 				<button on:click={fs_navigator.reload()} title="Refresh directory listing">
 					<i class="icon">refresh</i>
 				</button>
-					<button on:click={() => toggle_view()} title="Switch between gallery view and list view">
-						{#if directory_view === "list"}
-							<i class="icon">collections</i>
-						{:else if directory_view === "gallery"}
-							<i class="icon">list</i>
-						{/if}
-					</button>
 
 				<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
 					{#if show_hidden}
@@ -217,6 +231,22 @@ onMount(() => {
 					{/if}
 				</button>
 
+				<button on:click={() => toggle_view()} title="Switch between gallery view and list view">
+					{#if directory_view === "list"}
+						<i class="icon">collections</i>
+					{:else if directory_view === "gallery"}
+						<i class="icon">list</i>
+					{/if}
+				</button>
+
+				<button class="button_large_icons" on:click={() => toggle_large_icons()} title="Switch between large and small icons">
+					{#if large_icons}
+						<i class="icon">zoom_out</i>
+					{:else}
+						<i class="icon">zoom_in</i>
+					{/if}
+				</button>
+
 				<div class="toolbar_spacer"></div>
 				{#if state.permissions.update}
 					<button on:click={() => dispatch("upload_picker")} title="Upload files to this directory">
@@ -268,7 +298,9 @@ onMount(() => {
 		<ListView
 			state={state}
 			show_hidden={show_hidden}
+			large_icons={large_icons}
 			on:node_click={node_click}
+			on:node_context={node_context}
 			on:node_share_click={node_share_click}
 			on:node_settings={node_settings}
 			on:node_select={node_select}
@@ -277,7 +309,9 @@ onMount(() => {
 		<GalleryView
 			state={state}
 			show_hidden={show_hidden}
+			large_icons={large_icons}
 			on:node_click={node_click}
+			on:node_context={node_context}
 			on:node_settings={node_settings}
 			on:node_select={node_select}
 		/>
@@ -319,4 +353,11 @@ onMount(() => {
 .toolbar_edit {
 	background-color: rgba(0, 255, 0, 0.05);
 }
+
+/* Large icon mode only supported on wide screens. Hide the button on small screen */
+@media (max-width: 500px) {
+	.button_large_icons {
+		display: none;
+	}
+}
 </style>
diff --git a/svelte/src/filesystem/filemanager/GalleryView.svelte b/svelte/src/filesystem/filemanager/GalleryView.svelte
index c721e0b..59bd896 100644
--- a/svelte/src/filesystem/filemanager/GalleryView.svelte
+++ b/svelte/src/filesystem/filemanager/GalleryView.svelte
@@ -5,73 +5,102 @@ let dispatch = createEventDispatcher()
 
 export let state
 export let show_hidden = false
+export let large_icons = false
 </script>
 
 <div class="gallery">
 	{#each state.children as child, index (child.path)}
 		<a class="file"
 			href={"/d"+fs_encode_path(child.path)}
-			on:click|preventDefault={() => {dispatch("node_click", index)}}
+			on:click|preventDefault={() => dispatch("node_click", index)}
+			on:contextmenu={e => dispatch("node_context", {event: e, index: index})}
 			class:selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
+			class:large_icons
 			title={child.name}
 		>
 			<div
-				class="icon_container"
+				class="node_icon"
 				class:cover={fs_node_type(child) === "image" || fs_node_type(child) === "video"}
 				style='background-image: url("{fs_node_icon(child, 256, 256)}");'>
 			</div>
-			{child.name}
+			<div class="node_name">
+				{child.name}
+			</div>
 		</a>
 	{/each}
 </div>
 
 <style>
-.gallery{
-	padding: 16px;
-	overflow: hidden;
+.gallery {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 10px;
+	margin: 10px;
 	justify-content: center;
 }
-.file{
-	width: 200px;
-	max-width: 42%;
-	height: 200px;
-	margin: 8px;
+.file {
+	aspect-ratio: 1;
+	width: 150px;
+	height: 150px;
 	overflow: hidden;
 	border-radius: 8px;
 	background: var(--input_background);
-	word-break: break-all;
-	text-align: center;
-	line-height: 1.2em;
-	display: inline-block;
-	text-overflow: ellipsis;
-	text-decoration: none;
-	vertical-align: top;
+	display: flex;
+	flex-direction: column;
 	color: var(--body_text_color);
 	transition: background 0.2s;
+	text-decoration: none;
+	padding: 3px;
+}
+.file.large_icons {
+	width: 200px;
+	height: 200px;
+}
+
+/* On very small screens we switch to grid layout  */
+@media (max-width: 500px) {
+	.gallery {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	}
+	.file {
+		width: unset;
+		height: unset;
+		max-width: 200px;
+		max-height: 200px;
+	}
+	.file.large_icons {
+		width: unset;
+		height: unset;
+	}
 }
 .file:hover {
 	background: var(--input_hover_background);
 }
 .selected {
-	box-shadow: 0 0 2px 2px var(--highlight_color);
-	text-decoration: none;
+	background: var(--highlight_background);
+	color: var(--highlight_text_color);
 }
-.icon_container {
-	margin: 3px;
-	height: 148px;
+.node_icon {
+	flex: 1 1 0;
 	border-radius: 6px;
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
-	font-size: 22px;
-	text-align: left;
 }
-.icon_container.cover {
+.node_icon.cover {
 	background-size: cover;
 }
+.node_name {
+	flex: 0 0 auto;
+	word-break: break-all;
+	line-clamp: 2;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 .hidden {
 	display: none;
 }
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 668638f..6cc8249 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -7,14 +7,7 @@ let dispatch = createEventDispatcher()
 
 export let state
 export let show_hidden = false
-
-let handle_longpress = (e, index) => {
-	// If this is a touch event we will select the item
-	if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
-		e.preventDefault()
-		dispatch("node_select", index)
-	}
-}
+export let large_icons = false
 </script>
 
 <div class="directory">
@@ -28,13 +21,13 @@ let handle_longpress = (e, index) => {
 		<a
 			href={"/d"+fs_encode_path(child.path)}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
-			on:contextmenu={e => handle_longpress(e, index)}
+			on:contextmenu={e => {dispatch("node_context", {event: e, index: index})}}
 			class="node"
 			class:node_selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
 		>
 			<td>
-				<img src={fs_node_icon(child, 32, 32)} class="node_icon" alt="icon"/>
+				<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
 			</td>
 			<td class="node_name">
 				{child.name}
@@ -131,4 +124,12 @@ td {
 .hidden {
 	display: none;
 }
+
+/* Large icon mode only supported on wide screens */
+@media (min-width: 500px) {
+	.node_icon.large_icons {
+		height: 64px;
+		width: 64px;
+	}
+}
 </style>