feat: show preview on popover if file is image type

frappe/public/js/frappe/file_uploader/TreeNode.vue

@@ -1,10 +1,13 @@
 <template>
 	<div class="tree-node" :class="{ opened: node.open }">
 		<span
+			ref="reference"
 			class="tree-link"
 			@click="emit('node-click', node)"
 			:class="{ active: node.value === selected_node.value }"
 			:disabled="node.fetching"
+			@mouseover="onMouseover"
+			@mouseleave="onMouseleave"
 		>
 			<div v-html="icon"></div>
 			<a class="tree-label">{{ node.label }}</a>
@@ -16,17 +19,27 @@
 				target="_blank"
 				class="file-doc-link ml-3"
 			>
-				<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
+				<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+					<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+					<path
+						d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
+					/>
+				</svg>
 			</a>
 		</span>
+		<div v-if="node.file_url && frappe.utils.is_image_file(node.file_url)">
+			<div v-show="isOpen" class="popover" ref="popover" role="tooltip">
+				<img :src="node.file_url" />
+			</div>
+		</div>
 		<ul class="tree-children" v-show="node.open">
 			<TreeNode
 				v-for="n in node.children"
 				:key="n.value"
 				:node="n"
 				:selected_node="selected_node"
-				@node-click="n => emit('node-click', n)"
+				@node-click="(n) => emit('node-click', n)"
-				@load-more="n => emit('load-more', n)"
+				@load-more="(n) => emit('load-more', n)"
 			/>
 			<button
 				class="btn btn-xs btn-load-more"
@@ -42,7 +55,8 @@
 
 <script setup>
 import TreeNode from "./TreeNode.vue";
-import { computed } from "vue";
+import { createPopper } from "@popperjs/core";
+import { ref, computed } from "vue";
 
 // props
 const props = defineProps({
@@ -60,7 +74,7 @@ let icon = computed(() => {
 		open: frappe.utils.icon("folder-open", "md"),
 		closed: frappe.utils.icon("folder-normal", "md"),
 		leaf: frappe.utils.icon("primitive-dot", "xs"),
-		search: frappe.utils.icon("search")
+		search: frappe.utils.icon("search"),
 	};
 
 	if (props.node.by_search) return icons.search;
@@ -73,6 +87,48 @@ let open_file = (filename) => {
 	return frappe.utils.get_form_link("File", filename);
 };
 
+const reference = ref(null);
+const popover = ref(null);
+let isOpen = ref(false);
+
+let popper = ref(null);
+
+function setupPopper() {
+	if (!popper.value) {
+		popper.value = createPopper(reference.value, popover.value, {
+			placement: "top",
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [0, 4],
+					},
+				},
+			],
+		});
+	} else {
+		popper.value.update();
+	}
+}
+
+let hoverTimer = null;
+let leaveTimer = null;
+
+function onMouseover() {
+	leaveTimer && clearTimeout(leaveTimer) && (leaveTimer = null);
+	hoverTimer && clearTimeout(hoverTimer);
+	hoverTimer = setTimeout(() => {
+		isOpen.value = true;
+		setupPopper();
+	}, 800);
+}
+function onMouseleave() {
+	hoverTimer && clearTimeout(hoverTimer) && (hoverTimer = null);
+	leaveTimer && clearTimeout(leaveTimer);
+	leaveTimer = setTimeout(() => {
+		isOpen.value = false;
+	}, 100);
+}
 </script>
 
 <style scoped>
@@ -80,4 +136,7 @@ let open_file = (filename) => {
 	margin-left: 1.6rem;
 	margin-top: 0.5rem;
 }
+.popover {
+	padding: 10px;
+}
 </style>

package.json

@@ -20,6 +20,7 @@
   },
   "homepage": "https://frappeframework.com",
   "dependencies": {
+    "@popperjs/core": "^2.11.2",
     "@editorjs/editorjs": "^2.26.3",
     "@frappe/esbuild-plugin-postcss2": "^0.1.3",
     "@redis/client": "^1.5.8",

yarn.lock

@@ -81,6 +81,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@redis/client@^1.5.8":
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/@redis/client/-/client-1.5.8.tgz#a375ba7861825bd0d2dc512282b8bff7b98dbcb1"