Skip to content

Commit cf32742

Browse files
DaneEverittDaneEveritt
committed
More file manager updates
1 parent 58f8ec3 commit cf32742

File tree

3 files changed

+100
-61
lines changed

3 files changed

+100
-61
lines changed

‎resources/assets/scripts/components/server/components/FileManagerContextMenu.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="context-menu">
3+
<div>
4+
<div class="context-row">
5+
<div class="icon">
6+
<edit3-icon/>
7+
</div>
8+
<div class="action"><span>Rename</span></div>
9+
</div>
10+
<div class="context-row">
11+
<div class="icon">
12+
<corner-up-left-icon class="h-4"/>
13+
</div>
14+
<div class="action"><span class="text-left">Move</span></div>
15+
</div>
16+
<div class="context-row">
17+
<div class="icon">
18+
<copy-icon class="h-4"/>
19+
</div>
20+
<div class="action">Copy</div>
21+
</div>
22+
</div>
23+
<div>
24+
<div class="context-row">
25+
<div class="icon">
26+
<file-plus-icon class="h-4"/>
27+
</div>
28+
<div class="action">New File</div>
29+
</div>
30+
<div class="context-row">
31+
<div class="icon">
32+
<folder-plus-icon class="h-4"/>
33+
</div>
34+
<div class="action">New Folder</div>
35+
</div>
36+
</div>
37+
<div>
38+
<div class="context-row">
39+
<div class="icon">
40+
<download-icon class="h-4"/>
41+
</div>
42+
<div class="action">Download</div>
43+
</div>
44+
<div class="context-row danger">
45+
<div class="icon">
46+
<delete-icon class="h-4"/>
47+
</div>
48+
<div class="action">Delete</div>
49+
</div>
50+
</div>
51+
</div>
52+
</template>
53+
54+
<script>
55+
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
56+
57+
export default {
58+
name: 'file-manager-context-menu',
59+
components: {
60+
CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon,
61+
},
62+
};
63+
</script>

‎resources/assets/scripts/components/server/components/FileManagerFileRow.vue‎

Lines changed: 32 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="row" :class="{ clickable: canEdit(file) }" v-on:contextmenu="showContextMenu">
3+
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
44
<div class="flex-none icon">
55
<file-text-icon v-if="!file.symlink"/>
66
<link2-icon v-else/>
@@ -10,55 +10,21 @@
1010
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
1111
<div class="flex-none w-1/6"></div>
1212
</div>
13-
<div class="context-menu" v-show="contextMenuVisible" ref="contextMenu">
14-
<div>
15-
<div class="context-row">
16-
<div class="icon"><edit3-icon/></div>
17-
<div class="action"><span>Rename</span></div>
18-
</div>
19-
<div class="context-row">
20-
<div class="icon"><corner-up-left-icon class="h-4"/></div>
21-
<div class="action"><span class="text-left">Move</span></div>
22-
</div>
23-
<div class="context-row">
24-
<div class="icon"><copy-icon class="h-4"/></div>
25-
<div class="action">Copy</div>
26-
</div>
27-
</div>
28-
<div>
29-
<div class="context-row">
30-
<div class="icon"><file-plus-icon class="h-4"/></div>
31-
<div class="action">New File</div>
32-
</div>
33-
<div class="context-row">
34-
<div class="icon"><folder-plus-icon class="h-4"/></div>
35-
<div class="action">New Folder</div>
36-
</div>
37-
</div>
38-
<div>
39-
<div class="context-row">
40-
<div class="icon"><download-icon class="h-4"/></div>
41-
<div class="action">Download</div>
42-
</div>
43-
<div class="context-row danger">
44-
<div class="icon"><delete-icon class="h-4"/></div>
45-
<div class="action">Delete</div>
46-
</div>
47-
</div>
48-
</div>
13+
<file-manager-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
4914
</div>
5015
</template>
5116

5217
<script>
53-
import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, Link2Icon } from 'vue-feather-icons';
5418
import * as Helpers from './../../../helpers/index';
19+
import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
20+
import isObject from 'lodash/isObject';
21+
import FileManagerContextMenu from './FileManagerContextMenu';
5522
5623
export default {
5724
name: 'file-manager-file-row',
5825
components: {
59-
CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon,
60-
Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon,
61-
Link2Icon,
26+
FileManagerContextMenu,
27+
FileTextIcon, Link2Icon
6228
},
6329
props: {
6430
file: {type: Object, required: true},
@@ -67,23 +33,12 @@
6733
6834
data: function () {
6935
return {
70-
listener: null,
7136
contextMenuVisible: false,
7237
};
7338
},
7439
7540
mounted: function () {
76-
// Handle a click anywhere in the document and hide the context menu if that click is not
77-
// a right click and isn't occurring somewhere in the currently visible context menu.
78-
this.listener = document.addEventListener('click', (e) => {
79-
if (e.button !== 2
80-
&& this.contextMenuVisible
81-
&& e.target !== this.$refs.contextMenu
82-
&& !this.$refs.contextMenu.contains(e.target)
83-
) {
84-
this.contextMenuVisible = false;
85-
}
86-
});
41+
document.addEventListener('click', this._clickListener);
8742
8843
// If the parent component emits the collapse menu event check if the unique ID of the component
8944
// is this one. If not, collapse the menu (we right clicked into another element).
@@ -95,19 +50,25 @@
9550
},
9651
9752
beforeDestroy: function () {
98-
document.removeEventListener('click', this.listener);
53+
document.removeEventListener('click', this._clickListener, false);
9954
},
10055
10156
methods: {
10257
/**
10358
* Handle a right-click action on a file manager row.
10459
*
105-
* @param {Event} e
60+
* @param {MouseEvent} e
10661
*/
10762
showContextMenu: function (e) {
10863
e.preventDefault();
10964
this.$parent.$emit('collapse-menus', this._uid);
110-
this.contextMenuVisible = !this.contextMenuVisible;
65+
66+
this.contextMenuVisible = true;
67+
68+
const menuWidth = this.$refs.contextMenu.$el.offsetWidth;
69+
const positionElement = e.clientX - Math.round(menuWidth / 2);
70+
71+
this.$refs.contextMenu.$el.style = `left: ${positionElement}; top: ${e.clientY}`;
11172
},
11273
11374
/**
@@ -120,6 +81,21 @@
12081
return this.editable.indexOf(file.mime) >= 0;
12182
},
12283
84+
/**
85+
* Handle a click anywhere in the document and hide the context menu if that click is not
86+
* a right click and isn't occurring somewhere in the currently visible context menu.
87+
*
88+
* @param {MouseEvent} e
89+
* @private
90+
*/
91+
_clickListener: function (e) {
92+
if (e.button !== 2 && this.contextMenuVisible) {
93+
if (e.target !== this.$refs.contextMenu.$el && !this.$refs.contextMenu.$el.contains(e.target)) {
94+
this.contextMenuVisible = false;
95+
}
96+
}
97+
},
98+
12399
readableSize: Helpers.readableSize,
124100
formatDate: Helpers.formatDate,
125101
}

‎resources/assets/styles/components/filemanager.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
}
99

1010
& .row {
11-
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black;
11+
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded;
1212

1313
& > div {
1414
@apply .pr-4;
1515
}
1616

1717
&.clickable {
18-
@apply .rounded .cursor-pointer .no-underline;
18+
@apply .cursor-pointer .no-underline;
19+
}
1920

20-
&:hover {
21-
@apply .bg-grey-lightest .border-blue-light .text-blue-dark;
22-
}
21+
&.active-selection, &.clickable:hover {
22+
@apply .bg-grey-lightest .border-blue-light .text-blue-dark;
2323
}
2424

2525
& > .icon {

0 commit comments

Comments
 (0)