Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move some files around

Browse source
This commit is contained in:
Dane Everitt 2018-08-31 20:30:38 -07:00
parent b731659135
commit 5c4d5f733f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

63
resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue Normal file
View file

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

102
resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue Normal file
View file

@ -0,0 +1,102 @@
<template>
<div>
<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/>
</div>
<div class="flex-1">{{file.name}}</div>
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div>
</div>
<file-manager-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
</div>
</template>
<script>
import * as Helpers from './../../../../helpers/index';
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
import FileManagerContextMenu from './FileManagerContextMenu';
export default {
name: 'file-manager-file-row',
components: {
FileManagerContextMenu,
FileTextIcon, Link2Icon
},
props: {
file: {type: Object, required: true},
editable: {type: Array, required: true}
},
data: function () {
return {
contextMenuVisible: false,
};
},
mounted: function () {
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).
this.$parent.$on('collapse-menus', (uid) => {
if (this._uid !== uid) {
this.contextMenuVisible = false;
}
})
},
beforeDestroy: function () {
document.removeEventListener('click', this._clickListener, false);
},
methods: {
/**
* Handle a right-click action on a file manager row.
*
* @param {MouseEvent} e
*/
showContextMenu: function (e) {
e.preventDefault();
this.$parent.$emit('collapse-menus', this._uid);
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}`;
},
/**
* Determine if a file can be edited on the Panel.
*
* @param {Object} file
* @return {Boolean}
*/
canEdit: function (file) {
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,
}
};
</script>

47
resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue Normal file
View file

@ -0,0 +1,47 @@
<template>
<div>
<router-link class="row clickable"
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\//, '') }}"
>
<div class="flex-none icon">
<folder-icon/>
</div>
<div class="flex-1">{{directory.name}}</div>
<div class="flex-1 text-right text-grey-dark"></div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
<div class="flex-none w-1/6"></div>
</router-link>
</div>
</template>
<script>
import { FolderIcon } from 'vue-feather-icons';
import { formatDate } from './../../../../helpers/index';
export default {
name: 'file-manager-folder-row',
components: { FolderIcon },
props: {
directory: {type: Object, required: true},
},
data: function () {
return {
currentDirectory: this.$route.params.path || '/',
};
},
methods: {
/**
* Return a formatted directory path that is used to switch to a nested directory.
*
* @return {String}
*/
getClickablePath (directory) {
return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
},
formatDate: formatDate,
}
}
</script>