From 62e4df8a1ff10afc16c337cfe3e59d5f4fdceef3 Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:06:05 +0200
Subject: [PATCH 1/4] feat(File Uploader): open file details from search

---
 frappe/public/js/frappe/file_uploader/TreeNode.vue | 14 ++++++++++++++
 frappe/public/scss/desk/tree.scss                  | 13 +++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/frappe/public/js/frappe/file_uploader/TreeNode.vue b/frappe/public/js/frappe/file_uploader/TreeNode.vue
index 308bb2b825..f7c7aca706 100644
--- a/frappe/public/js/frappe/file_uploader/TreeNode.vue
+++ b/frappe/public/js/frappe/file_uploader/TreeNode.vue
@@ -8,6 +8,16 @@
 		>
 			<div v-html="icon"></div>
 			<a class="tree-label">{{ node.label }}</a>
+			<!-- Icon open File record in new tab -->
+			<a
+				v-if="node.is_leaf"
+				:href="open_file(node.value)"
+				:disabled="node.fetching"
+				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>
+			</a>
 		</span>
 		<ul class="tree-children" v-show="node.open">
 			<TreeNode
@@ -59,6 +69,10 @@ let icon = computed(() => {
 	return icons.closed;
 });
 
+let open_file = (filename) => {
+	return frappe.utils.get_form_link("File", filename);
+};
+
 </script>
 
 <style scoped>
diff --git a/frappe/public/scss/desk/tree.scss b/frappe/public/scss/desk/tree.scss
index d400932e51..bf99d7c55d 100644
--- a/frappe/public/scss/desk/tree.scss
+++ b/frappe/public/scss/desk/tree.scss
@@ -58,6 +58,19 @@
 	}
 }
 
+.tree-link .file-doc-link {
+	opacity: 0;
+}
+
+.tree-link:hover .file-doc-link {
+	opacity: 0.4;
+}
+
+.tree-link .file-doc-link:hover {
+	transform: scale(1.1);
+	opacity: 0.5;
+}
+
 .tree-hover {
 	background-color: var(--highlight-color);
 	min-height: 25px;

From 920a88e1ac9a68f667eb92daa1f35d18dcae62f0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Sep 2023 16:58:45 +0530
Subject: [PATCH 2/4] feat: show preview on popover if file is image type

---
 .../js/frappe/file_uploader/TreeNode.vue      | 69 +++++++++++++++++--
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++
 3 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/frappe/public/js/frappe/file_uploader/TreeNode.vue b/frappe/public/js/frappe/file_uploader/TreeNode.vue
index f7c7aca706..3368a94875 100644
--- a/frappe/public/js/frappe/file_uploader/TreeNode.vue
+++ b/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)"
-				@load-more="n => emit('load-more', n)"
+				@node-click="(n) => emit('node-click', 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>
diff --git a/package.json b/package.json
index 0794ae5d1d..63907dee69 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index f632157bbe..75fb245e9e 100644
--- a/yarn.lock
+++ b/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"

From a6468cab3a253bf54da704389634b9cf1f0c95bd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Sep 2023 18:20:02 +0530
Subject: [PATCH 3/4] fix: using icon instead of svg

---
 frappe/public/icons/timeless/icons.svg             |  8 +++++++-
 frappe/public/js/frappe/file_uploader/TreeNode.vue | 12 +++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frappe/public/icons/timeless/icons.svg b/frappe/public/icons/timeless/icons.svg
index 29aa428d99..a67fadfd36 100644
--- a/frappe/public/icons/timeless/icons.svg
+++ b/frappe/public/icons/timeless/icons.svg
@@ -120,6 +120,12 @@
 		<path d="M3.14886 8.08422L5.23297 6.00012L3.14886 3.91602" stroke="var(--icon-stroke)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 	</symbol>
 
+	<symbol viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-external-link">
+		<path d="M9.75003 7.83333V9C9.75003 9.82843 9.07846 10.5 8.25003 10.5H3.25C2.42157 10.5 1.75 9.82843 1.75 9V4C1.75 3.17158 2.42151 2.50001 3.24993 2.50001C3.62327 2.5 4.02808 2.5 4.4167 2.5" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M6.75 1.5H10.25V4.5" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M6.75 5L9.75 2" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
+	</symbol>
+
 	<symbol viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="#112B42" id="icon-up">
 		<path d="M3 5h6L6 2 3 5z"></path>
 		<path opacity=".5" d="M6 10l3-3H3l3 3z"></path>
@@ -302,7 +308,7 @@
 		<path stroke="#E24C4C" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.2 14.4v8.571"></path>
 	</symbol>
 
-	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-external-link">
+	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-pen">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M10.348 3.207a1 1 0 0 1 1.415 0l1.03 1.03a1 1 0 0 1 0 1.415l-6.626 6.626L2.5 13.5l1.222-3.667 6.626-6.626z" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"></path>
 	</symbol>
 
diff --git a/frappe/public/js/frappe/file_uploader/TreeNode.vue b/frappe/public/js/frappe/file_uploader/TreeNode.vue
index 3368a94875..759504bf65 100644
--- a/frappe/public/js/frappe/file_uploader/TreeNode.vue
+++ b/frappe/public/js/frappe/file_uploader/TreeNode.vue
@@ -17,15 +17,9 @@
 				:href="open_file(node.value)"
 				:disabled="node.fetching"
 				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>
-			</a>
+				class="file-doc-link ml-2"
+				v-html="frappe.utils.icon('external-link', 'sm')"
+			/>
 		</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">

From 655047c2742448fadbe480f8d4e0a72808b687b0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Sep 2023 18:23:23 +0530
Subject: [PATCH 4/4] fix: stop parent click if external link icon is clicked

---
 frappe/public/js/frappe/file_uploader/TreeNode.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frappe/public/js/frappe/file_uploader/TreeNode.vue b/frappe/public/js/frappe/file_uploader/TreeNode.vue
index 759504bf65..9b9f673ec9 100644
--- a/frappe/public/js/frappe/file_uploader/TreeNode.vue
+++ b/frappe/public/js/frappe/file_uploader/TreeNode.vue
@@ -19,6 +19,7 @@
 				target="_blank"
 				class="file-doc-link ml-2"
 				v-html="frappe.utils.icon('external-link', 'sm')"
+				@click.stop
 			/>
 		</span>
 		<div v-if="node.file_url && frappe.utils.is_image_file(node.file_url)">