sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More file manager updates

This commit is contained in:
Dane Everitt 2018-08-18 22:03:19 -07:00
parent 58f8ec338b
commit cf32742132
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
3 changed files with 100 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
resources/assets/scripts/components/server/components/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>

88
resources/assets/scripts/components/server/components/FileManagerFileRow.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <div class="flex-none icon">
<file-text-icon v-if="!file.symlink"/> <file-text-icon v-if="!file.symlink"/>
<link2-icon v-else/> <link2-icon v-else/>
@ -10,55 +10,21 @@
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div> <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div> <div class="flex-none w-1/6"></div>
</div> </div>
<div class="context-menu" v-show="contextMenuVisible" ref="contextMenu"> <file-manager-context-menu 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>
</div> </div>
</template> </template>
<script> <script>
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, Link2Icon } from 'vue-feather-icons';
import * as Helpers from './../../../helpers/index'; import * as Helpers from './../../../helpers/index';
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
import isObject from 'lodash/isObject';
import FileManagerContextMenu from './FileManagerContextMenu';
export default { export default {
name: 'file-manager-file-row', name: 'file-manager-file-row',
components: { components: {
CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, FileManagerContextMenu,
Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, FileTextIcon, Link2Icon
Link2Icon,
}, },
props: { props: {
file: {type: Object, required: true}, file: {type: Object, required: true},
@ -67,23 +33,12 @@
data: function () { data: function () {
return { return {
listener: null,
contextMenuVisible: false, contextMenuVisible: false,
}; };
}, },
mounted: function () { mounted: function () {
// Handle a click anywhere in the document and hide the context menu if that click is not document.addEventListener('click', this._clickListener);
// 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;
}
});
// If the parent component emits the collapse menu event check if the unique ID of the component // 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). // is this one. If not, collapse the menu (we right clicked into another element).
@ -95,19 +50,25 @@
}, },
beforeDestroy: function () { beforeDestroy: function () {
document.removeEventListener('click', this.listener); document.removeEventListener('click', this._clickListener, false);
}, },
methods: { methods: {
/** /**
* Handle a right-click action on a file manager row. * Handle a right-click action on a file manager row.
* *
* @param {Event} e * @param {MouseEvent} e
*/ */
showContextMenu: function (e) { showContextMenu: function (e) {
e.preventDefault(); e.preventDefault();
this.$parent.$emit('collapse-menus', this._uid); 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; 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, readableSize: Helpers.readableSize,
formatDate: Helpers.formatDate, formatDate: Helpers.formatDate,
} }

10
resources/assets/styles/components/filemanager.css
View File

@ -8,18 +8,18 @@
} }
& .row { & .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 { & > div {
@apply .pr-4; @apply .pr-4;
} }
&.clickable { &.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 { & > .icon {