Add toggle for showing hidden files

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -12,6 +12,7 @@ export let directory_view = "list"
 let uploader
 let mode = "viewing"
 let creating_dir = false
+let show_hidden = false
 
 export const upload = files => {
 	return uploader.upload(files)
@@ -112,6 +113,14 @@ const toggle_select = () => {
 				</button>
 			{/if}
 
+			<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
+				{#if show_hidden}
+					<i class="icon">visibility_off</i>
+				{:else}
+					<i class="icon">visibility</i>
+				{/if}
+			</button>
+
 			<div class="toolbar_spacer"></div>
 			{#if state.permissions.update}
 				<button on:click={uploader.picker} title="Upload files to this directory">
@@ -166,9 +175,9 @@ const toggle_select = () => {
 	</div>
 
 	{#if directory_view === "list"}
-		<ListView state={state} on:node_click={node_click}></ListView>
+		<ListView state={state} show_hidden={show_hidden} on:node_click={node_click}></ListView>
 	{:else if directory_view === "gallery"}
-		<GalleryView state={state} on:node_click={node_click}></GalleryView>
+		<GalleryView state={state} show_hidden={show_hidden} on:node_click={node_click}></GalleryView>
 	{/if}
 </div>
 

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -3,7 +3,7 @@ import { createEventDispatcher } from "svelte"
 let dispatch = createEventDispatcher()
 
 export let state
-
+export let show_hidden = false
 
 const node_icon = node => {
 	if (node.type === "dir") {
@@ -51,6 +51,7 @@ const node_icon = node => {
 			href={state.path_root+child.path}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
 			class:selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".") && !show_hidden}
 			title={child.name}
 		>
 			<div
@@ -105,4 +106,7 @@ const node_icon = node => {
 	font-size: 22px;
 	text-align: left;
 }
+.hidden {
+	display: none;
+}
 </style>

svelte/src/filesystem/filemanager/ListView.svelte

@@ -5,6 +5,7 @@ import { formatDataVolume } from "../../util/Formatting.svelte";
 let dispatch = createEventDispatcher()
 
 export let state
+export let show_hidden = false
 
 const node_icon = node => {
 	if (node.type === "dir") {
@@ -45,7 +46,6 @@ const node_icon = node => {
 
 </script>
 
-
 <div class="directory">
 	<tr>
 		<td></td>
@@ -57,7 +57,9 @@ const node_icon = node => {
 			href={state.path_root+child.path}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
 			class="node"
-			class:node_selected={child.fm_selected}>
+			class:node_selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".") && !show_hidden}
+		>
 			<td>
 				<img src={node_icon(child)} class="node_icon" alt="icon"/>
 			</td>
@@ -131,4 +133,7 @@ td {
 	min-width: 50px;
 	white-space: nowrap;
 }
+.hidden {
+	display: none;
+}
 </style>