feat: show preview on popover if file is image type
This commit is contained in:
Shariq Ansari
parent
62e4df8a1f
commit
920a88e1ac
3 changed files with 70 additions and 5 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue