dynamic entry size for grid view

navigator/src/components/DirectoryEntry.vue

@@ -65,9 +65,10 @@
 		<div v-show="show" @dblclick="doubleClickCallback"
 		@click.prevent="$emit('toggleSelected', entry, $event)"
 		ref="selectIntersectElement"
-		:class="['hover:!bg-red-600/10 select-none dir-entry flex flex-col items-center w-20 overflow-hidden', entry.selected ? 'dir-entry-selected' : '']">
-			<div class="relative w-20">
-				<component :is="icon" class="icon-default w-20 h-auto" :class="{ 'text-gray-500/50': entry.cut }" />
+		class="hover:!bg-red-600/10 select-none dir-entry flex flex-col items-center overflow-hidden entry-width p-2"
+		:class="{ 'dir-entry-selected': entry.selected, '!border-t-0': suppressBorders.top, '!border-b-0': suppressBorders.bottom, '!border-l-0': suppressBorders.left, '!border-r-0': suppressBorders.right }">
+			<div class="relative w-full">
+				<component :is="icon" class="icon-default w-full h-auto" :class="{ 'text-gray-500/50': entry.cut }" />
 				<div :class="[directoryLike ? 'right-3 bottom-5' : 'right-5 bottom-3', 'inline absolute']"
 					:title="`-> ${entry.target?.rawPath ?? '?'}`">
 					<LinkIcon v-if="entry.type === 'l'"
@@ -213,12 +214,16 @@ tr.dir-entry>td {
 tr.dir-entry-selected>td {
 	@apply border-y first:border-l-red-600/50 last:border-red-600/50 bg-red-600/10;
 }
-/* 
+
 div.dir-entry {
 	@apply border-solid border border-transparent;
-} */
+}
 
 div.dir-entry-selected {
-	@apply  bg-red-600/10;
+	@apply border-red-600/50 bg-red-600/10;
+}
+
+div.entry-width {
+	width: v-bind('`${settings.directoryView?.gridEntrySize ?? 80}px`');
 }
 </style>

navigator/src/components/DirectoryEntryList.vue

@@ -2,13 +2,12 @@
 	<template v-for="entry, index in visibleEntries" :key="entry.path">
 		<DirectoryEntry :show="true" :host="host" :entry="entry" :inheritedSortCallback="sortCallback"
 			:searchFilterRegExp="searchFilterRegExp" @cd="(...args) => $emit('cd', ...args)"
-			@edit="(...args) => $emit('edit', ...args)"
-			@toggleSelected="(...args) => $emit('toggleSelected', ...args)"
+			@edit="(...args) => $emit('edit', ...args)" @toggleSelected="(...args) => $emit('toggleSelected', ...args)"
 			@sortEntries="sortEntries" @updateStats="emitStats"
 			@startProcessing="(...args) => $emit('startProcessing', ...args)"
 			@stopProcessing="(...args) => $emit('stopProcessing', ...args)" ref="entryRefs" :level="level"
 			@setEntryProp="(prop, value) => entry[prop] = value"
-			:suppressBorders="{ top: visibleEntries[index - 1]?.selected && !(visibleEntries[index - 1]?.dirOpen), bottom: visibleEntries[index + 1]?.selected && !(entry.dirOpen), left: false, right: false }" />
+			:suppressBorders="getBorderSuppression(entry, index)" />
 	</template>
 	<tr v-if="show && visibleEntries.length === 0">
 		<td :colspan="Object.values(settings?.directoryView?.cols ?? {}).reduce((sum, current) => current ? sum + 1 : sum, 1) ?? 100"
@@ -44,6 +43,11 @@ export default {
 			default: (() => 0),
 		},
 		level: Number,
+		cols: {
+			type: Number,
+			required: false,
+			default: 1,
+		},
 	},
 	setup(props, { emit }) {
 		const settings = inject(settingsInjectionKey);
@@ -167,6 +171,15 @@ export default {
 			);
 		}
 
+		const getBorderSuppression = (entry, index) => {
+			return {
+				top: visibleEntries.value[index - props.cols]?.selected && !(visibleEntries.value[index - props.cols]?.dirOpen),
+				bottom: visibleEntries.value[index + props.cols]?.selected && !(entry.dirOpen),
+				left: settings.directoryView.view !== 'list' && (visibleEntries.value[index - 1]?.selected && (index) % props.cols !== 0),
+				right: settings.directoryView.view !== 'list' && (visibleEntries.value[index + 1]?.selected && (index + 1) % props.cols !== 0),
+			}
+		};
+
 		const fileSystemWatcher = FileSystemWatcher(props.path, { superuser: 'try', host: props.host, ignoreSelf: true });
 
 		fileSystemWatcher.onCreated = async (eventObj) => {
@@ -248,6 +261,7 @@ export default {
 			sortEntries,
 			entryFilterCallback,
 			gatherEntries,
+			getBorderSuppression,
 		}
 	},
 	components: {

navigator/src/components/DirectoryView.vue

@@ -67,22 +67,22 @@
 						:searchFilterRegExp="searchFilterRegExp" @cd="(...args) => $emit('cd', ...args)"
 						@edit="(...args) => $emit('edit', ...args)" @toggleSelected="toggleSelected"
 						@updateStats="(...args) => $emit('updateStats', ...args)" @startProcessing="processing++"
-						@stopProcessing="processing--" ref="directoryEntryListRef" :level="0" />
+						@stopProcessing="processing--" ref="directoryEntryListRef" :level="0" :cols="1" />
 				</template>
 			</Table>
-			<div v-else class="flex flex-wrap p-2 bg-well h-full overflow-y-auto content-start">
+			<div v-else class="flex flex-wrap bg-well h-full overflow-y-auto content-start" ref="gridRef" @wheel="scrollHandler">
 				<DirectoryEntryList :host="host" :path="path" :sortCallback="sortCallback"
 					:searchFilterRegExp="searchFilterRegExp" @cd="(...args) => $emit('cd', ...args)"
 					@edit="(...args) => $emit('edit', ...args)" @toggleSelected="toggleSelected"
 					@updateStats="(...args) => $emit('updateStats', ...args)" @startProcessing="processing++"
-					@stopProcessing="processing--" ref="directoryEntryListRef" :level="0" />
+					@stopProcessing="processing--" ref="directoryEntryListRef" :level="0" :cols="cols" />
 			</div>
 		</DragSelectArea>
 	</div>
 </template>
 
 <script>
-import { ref, inject } from 'vue';
+import { ref, inject, watch, onMounted, computed, onBeforeUnmount } from 'vue';
 import Table from './Table.vue';
 import { clipboardInjectionKey, notificationsInjectionKey, settingsInjectionKey } from '../keys';
 import LoadingSpinner from './LoadingSpinner.vue';
@@ -105,6 +105,8 @@ export default {
 		const notifications = inject(notificationsInjectionKey);
 		const processing = ref(0);
 		const directoryEntryListRef = ref();
+		const gridRef = ref();
+		const cols = ref(1);
 
 		const sortCallbacks = {
 			name: (a, b) => a.name.localeCompare(b.name),
@@ -224,15 +226,46 @@ export default {
 			event.preventDefault();
 		}
 
+		const scrollHander = (event) => {
+			console.log(event);
+			if (event.ctrlKey) {
+				event.preventDefault();
+				event.stopPropagation();
+				console.log(event);
+			}
+		}
+
+		const getCols = () => {
+			const gridRect = gridRef.value?.getBoundingClientRect();
+			if (!gridRect)
+				return cols.value = 1;
+			const entryWidth = settings.directoryView?.gridEntrySize;
+			if (!entryWidth)
+				return cols.value = 1;
+			return cols.value = Math.floor(gridRect.width / entryWidth);
+		}
+
+		onMounted(() => {
+			getCols();
+			window.addEventListener('resize', getCols);
+		});
+
+		onBeforeUnmount(() => {
+			window.removeEventListener('resize', getCols);
+		});
+
 		return {
 			settings,
 			processing,
 			directoryEntryListRef,
+			cols,
+			gridRef,
 			sortCallbacks,
 			sortCallback,
 			refresh,
 			getSelected,
 			keyHandler,
+			scrollHander,
 			getSelected,
 			toggleSelected,
 			selectAll,

navigator/src/components/SettingsMenu.vue

@@ -168,6 +168,7 @@ const defaultSettings = {
 			mtime: true,
 			atime: true,
 		},
+		gridEntrySize: 80,
 	},
 }