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

Add accessability buttons to the file rows

Browse source
This commit is contained in:
Dane Everitt 2019-03-17 17:49:04 -07:00
parent ce911f827e
commit 743ae040be
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
resources/assets/scripts/components/server/components/filemanager/FileRow.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-on:contextmenu="showContextMenu"> <div v-on:contextmenu="showContextMenu">
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory"> <div class="row" :class="{ 'cursor-pointer': canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory">
<div class="flex-none icon"> <div class="flex-none icon">
<Icon name="file-text" v-if="!file.symlink"/> <Icon name="file-text" v-if="!file.symlink"/>
<Icon name="link2" v-else/> <Icon name="link2" v-else/>
@ -9,9 +9,11 @@
<div class="flex-1">{{file.name}}</div> <div class="flex-1">{{file.name}}</div>
<div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div> <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div> <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div> <div class="flex-none icon cursor-pointer" v-on:click="showContextMenu" ref="menuTriggerIcon">
<Icon name="more-vertical" class="text-neutral-500"/>
</div>
</div> </div>
<router-link class="row clickable" <router-link class="row"
:class="{ 'active-selection': contextMenuVisible }" :class="{ 'active-selection': contextMenuVisible }"
:to="{ name: 'server-files', params: { path: getClickablePath(file.name) }}" :to="{ name: 'server-files', params: { path: getClickablePath(file.name) }}"
v-else v-else
@ -22,9 +24,10 @@
<div class="flex-1">{{file.name}}</div> <div class="flex-1">{{file.name}}</div>
<div class="flex-1 text-right text-neutral-600"></div> <div class="flex-1 text-right text-neutral-600"></div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div> <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div> <div class="flex-none icon" v-on:click="showContextMenu" ref="menuTriggerIcon">
<Icon name="more-vertical" class="text-neutral-500"/>
</div>
</router-link> </router-link>
</div> </div>
<FileContextMenu <FileContextMenu
class="context-menu" class="context-menu"
@ -129,13 +132,14 @@
// @ts-ignore // @ts-ignore
this.$parent.$emit('collapse-menus', this._uid); this.$parent.$emit('collapse-menus', this._uid);
this.contextMenuVisible = true; this.contextMenuVisible = true;
const menuWidth = (this.$refs.contextMenu as VueType).$el.clientWidth; this.$nextTick(() => {
const positionElement = e.clientX - Math.round(menuWidth / 2); const menuWidth = (this.$refs.contextMenu as VueType).$el.clientWidth;
const positionElement = e.clientX - Math.round(menuWidth / 2);
(this.$refs.contextMenu as VueType).$el.setAttribute('style', `left: ${positionElement}; top: ${e.clientY}`); (this.$refs.contextMenu as VueType).$el.setAttribute('style', `left: ${positionElement}px; top: ${e.layerY}px`);
});
}, },
/** /**
@ -153,6 +157,14 @@
*/ */
_clickListener: function (e: MouseEvent) { _clickListener: function (e: MouseEvent) {
if (e.button !== 2 && this.contextMenuVisible) { if (e.button !== 2 && this.contextMenuVisible) {
// If we're clicking the trigger icon don't discard the event.
if (this.$refs.menuTriggerIcon) {
if (e.target === this.$refs.menuTriggerIcon || (this.$refs.menuTriggerIcon as HTMLDivElement).contains(e.target as Node)) {
return;
}
}
// If the target is outside the scope of the context menu, hide it.
if (e.target !== (this.$refs.contextMenu as VueType).$el && !(this.$refs.contextMenu as VueType).$el.contains(e.target as Node)) { if (e.target !== (this.$refs.contextMenu as VueType).$el && !(this.$refs.contextMenu as VueType).$el.contains(e.target as Node)) {
this.contextMenuVisible = false; this.contextMenuVisible = false;
} }

2
resources/assets/scripts/components/server/subpages/FileManager.vue
View file

@ -29,7 +29,7 @@
<div class="flex-1">Name</div> <div class="flex-1">Name</div>
<div class="flex-1 text-right">Size</div> <div class="flex-1 text-right">Size</div>
<div class="flex-1 text-right">Modified</div> <div class="flex-1 text-right">Modified</div>
<div class="flex-none w-1/6">Actions</div> <div class="flex-none"></div>
</div> </div>
<div v-for="file in Array.concat(directories, files)"> <div v-for="file in Array.concat(directories, files)">
<FileRow <FileRow

13
resources/assets/styles/components/filemanager.css
View file

@ -2,28 +2,25 @@
& .header { & .header {
@apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase; @apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase;
& > div { & > div:not(:last-of-type) {
@apply .pr-4; @apply .pr-4;
} }
} }
& .row { & .row {
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded; @apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded .no-underline;
& > div { & > div:not(:last-of-type) {
@apply .pr-4; @apply .pr-4;
} }
&.clickable { &.active-selection, &:hover {
@apply .no-underline .cursor-pointer;
}
&.active-selection, &.clickable:hover {
@apply .bg-neutral-50 .text-neutral-900; @apply .bg-neutral-50 .text-neutral-900;
} }
& > .icon { & > .icon {
@apply .w-8 .text-center; @apply .w-8 .text-center;
& > svg { & > svg {
@apply .h-4; @apply .h-4;
} }