forked from Alex/Pterodactyl-Panel
More file manager updates
This commit is contained in:
Dane Everitt
parent
58f8ec338b
commit
cf32742132
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="context-menu">
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<edit3-icon/>
|
||||
</div>
|
||||
<div class="action"><span>Rename</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<corner-up-left-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action"><span class="text-left">Move</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<copy-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Copy</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<file-plus-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New File</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<folder-plus-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New Folder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<download-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Download</div>
|
||||
</div>
|
||||
<div class="context-row danger">
|
||||
<div class="icon">
|
||||
<delete-icon class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
|
||||
|
||||
export default {
|
||||
name: 'file-manager-context-menu',
|
||||
components: {
|
||||
CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row" :class="{ clickable: canEdit(file) }" v-on:contextmenu="showContextMenu">
|
||||
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
|
||||
<div class="flex-none icon">
|
||||
<file-text-icon v-if="!file.symlink"/>
|
||||
<link2-icon v-else/>
|
||||
@ -10,55 +10,21 @@
|
||||
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</div>
|
||||
<div class="context-menu" v-show="contextMenuVisible" ref="contextMenu">
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><edit3-icon/></div>
|
||||
<div class="action"><span>Rename</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><corner-up-left-icon class="h-4"/></div>
|
||||
<div class="action"><span class="text-left">Move</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><copy-icon class="h-4"/></div>
|
||||
<div class="action">Copy</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><file-plus-icon class="h-4"/></div>
|
||||
<div class="action">New File</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><folder-plus-icon class="h-4"/></div>
|
||||
<div class="action">New Folder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon"><download-icon class="h-4"/></div>
|
||||
<div class="action">Download</div>
|
||||
</div>
|
||||
<div class="context-row danger">
|
||||
<div class="icon"><delete-icon class="h-4"/></div>
|
||||
<div class="action">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<file-manager-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, Link2Icon } from 'vue-feather-icons';
|
||||
import * as Helpers from './../../../helpers/index';
|
||||
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
|
||||
import isObject from 'lodash/isObject';
|
||||
import FileManagerContextMenu from './FileManagerContextMenu';
|
||||
|
||||
export default {
|
||||
name: 'file-manager-file-row',
|
||||
components: {
|
||||
CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon,
|
||||
Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon,
|
||||
Link2Icon,
|
||||
FileManagerContextMenu,
|
||||
FileTextIcon, Link2Icon
|
||||
},
|
||||
props: {
|
||||
file: {type: Object, required: true},
|
||||
@ -67,23 +33,12 @@
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
listener: null,
|
||||
contextMenuVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
// Handle a click anywhere in the document and hide the context menu if that click is not
|
||||
// a right click and isn't occurring somewhere in the currently visible context menu.
|
||||
this.listener = document.addEventListener('click', (e) => {
|
||||
if (e.button !== 2
|
||||
&& this.contextMenuVisible
|
||||
&& e.target !== this.$refs.contextMenu
|
||||
&& !this.$refs.contextMenu.contains(e.target)
|
||||
) {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
});
|
||||
document.addEventListener('click', this._clickListener);
|
||||
|
||||
// If the parent component emits the collapse menu event check if the unique ID of the component
|
||||
// is this one. If not, collapse the menu (we right clicked into another element).
|
||||
@ -95,19 +50,25 @@
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
document.removeEventListener('click', this.listener);
|
||||
document.removeEventListener('click', this._clickListener, false);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Handle a right-click action on a file manager row.
|
||||
*
|
||||
* @param {Event} e
|
||||
* @param {MouseEvent} e
|
||||
*/
|
||||
showContextMenu: function (e) {
|
||||
e.preventDefault();
|
||||
this.$parent.$emit('collapse-menus', this._uid);
|
||||
this.contextMenuVisible = !this.contextMenuVisible;
|
||||
|
||||
this.contextMenuVisible = true;
|
||||
|
||||
const menuWidth = this.$refs.contextMenu.$el.offsetWidth;
|
||||
const positionElement = e.clientX - Math.round(menuWidth / 2);
|
||||
|
||||
this.$refs.contextMenu.$el.style = `left: ${positionElement}; top: ${e.clientY}`;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -120,6 +81,21 @@
|
||||
return this.editable.indexOf(file.mime) >= 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle a click anywhere in the document and hide the context menu if that click is not
|
||||
* a right click and isn't occurring somewhere in the currently visible context menu.
|
||||
*
|
||||
* @param {MouseEvent} e
|
||||
* @private
|
||||
*/
|
||||
_clickListener: function (e) {
|
||||
if (e.button !== 2 && this.contextMenuVisible) {
|
||||
if (e.target !== this.$refs.contextMenu.$el && !this.$refs.contextMenu.$el.contains(e.target)) {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
readableSize: Helpers.readableSize,
|
||||
formatDate: Helpers.formatDate,
|
||||
}
|
||||
|
||||
@ -8,18 +8,18 @@
|
||||
}
|
||||
|
||||
& .row {
|
||||
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black;
|
||||
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded;
|
||||
|
||||
& > div {
|
||||
@apply .pr-4;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
@apply .rounded .cursor-pointer .no-underline;
|
||||
@apply .cursor-pointer .no-underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply .bg-grey-lightest .border-blue-light .text-blue-dark;
|
||||
}
|
||||
&.active-selection, &.clickable:hover {
|
||||
@apply .bg-grey-lightest .border-blue-light .text-blue-dark;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user