vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #22108 from barredterra/open-file-from-picker

Browse source 
feat(File Uploader): open file details from search
This commit is contained in:
Shariq Ansari 2023-09-15 18:45:42 +05:30 • committed by GitHub
commit 6e62baeef9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 98 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frappe/public/icons/timeless/icons.svg
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 114 KiB

76
frappe/public/js/frappe/file_uploader/TreeNode.vue
View file

@ -1,22 +1,40 @@
<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>
<!-- 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-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)">
<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"
@ -32,7 +50,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({
@ -50,7 +69,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;
@ -59,6 +78,52 @@ let icon = computed(() => {
return icons.closed;
});
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>
@ -66,4 +131,7 @@ let icon = computed(() => {
margin-left: 1.6rem;
margin-top: 0.5rem;
}
.popover {
padding: 10px;
}
</style>

13
frappe/public/scss/desk/tree.scss
View file

@ -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;

1
package.json
View file

@ -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",

5
yarn.lock
View file

@ -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"