Move everything back to vue SFCs
This commit is contained in:
Dane Everitt
parent
761704408e
commit
5bff8d99cc
58 changed files with 2558 additions and 2518 deletions
|
|
@ -1,59 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import Icon from "../../../core/Icon";
|
||||
|
||||
export default Vue.component('file-context-menu', {
|
||||
components: { Icon },
|
||||
|
||||
template: `
|
||||
<div class="context-menu">
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="edit-3"/>
|
||||
</div>
|
||||
<div class="action"><span>Rename</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="corner-up-left" class="h-4"/>
|
||||
</div>
|
||||
<div class="action"><span class="text-left">Move</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="copy" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Copy</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="download" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="file-plus" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New File</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<icon name="folder-plus" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New Folder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row danger">
|
||||
<div class="icon">
|
||||
<icon name="delete" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="context-menu">
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="edit-3"/>
|
||||
</div>
|
||||
<div class="action"><span>Rename</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="corner-up-left" class="h-4"/>
|
||||
</div>
|
||||
<div class="action"><span class="text-left">Move</span></div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="copy" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Copy</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="download" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="file-plus" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New File</div>
|
||||
</div>
|
||||
<div class="context-row">
|
||||
<div class="icon">
|
||||
<Icon name="folder-plus" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">New Folder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row danger">
|
||||
<div class="icon">
|
||||
<Icon name="delete" class="h-4"/>
|
||||
</div>
|
||||
<div class="action">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Icon from "../../../core/Icon.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FileContextMenu',
|
||||
components: { Icon },
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import Icon from "../../../core/Icon";
|
||||
import {Vue as VueType} from "vue/types/vue";
|
||||
import { readableSize, formatDate } from '../../../../helpers'
|
||||
import FileContextMenu from "./FileContextMenu";
|
||||
|
||||
export default Vue.component('file-row', {
|
||||
components: {
|
||||
Icon,
|
||||
FileContextMenu,
|
||||
},
|
||||
|
||||
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: string) => {
|
||||
// @ts-ignore
|
||||
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.
|
||||
*/
|
||||
showContextMenu: function (e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
// @ts-ignore
|
||||
this.$parent.$emit('collapse-menus', this._uid);
|
||||
|
||||
this.contextMenuVisible = true;
|
||||
|
||||
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}`);
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if a file can be edited on the Panel.
|
||||
*/
|
||||
canEdit: function (file: any): boolean {
|
||||
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.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_clickListener: function (e: MouseEvent) {
|
||||
if (e.button !== 2 && this.contextMenuVisible) {
|
||||
if (e.target !== (this.$refs.contextMenu as VueType).$el && !(this.$refs.contextMenu as VueType).$el.contains(e.target as Node)) {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
readableSize: readableSize,
|
||||
formatDate: formatDate,
|
||||
},
|
||||
|
||||
template: `
|
||||
<div>
|
||||
<div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
|
||||
<div class="flex-none icon">
|
||||
<icon name="file-text" v-if="!file.symlink"/>
|
||||
<icon name="link2" v-else/>
|
||||
</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">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</div>
|
||||
<file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
|
@ -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">
|
||||
<Icon name="file-text" v-if="!file.symlink"/>
|
||||
<Icon name="link2" v-else/>
|
||||
</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">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</div>
|
||||
<FileContextMenu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Icon from "../../../core/Icon.vue";
|
||||
import {Vue as VueType} from "vue/types/vue";
|
||||
import {formatDate, readableSize} from '../../../../helpers'
|
||||
import FileContextMenu from "./FileContextMenu.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FileRow',
|
||||
components: {
|
||||
Icon,
|
||||
FileContextMenu,
|
||||
},
|
||||
|
||||
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: string) => {
|
||||
// @ts-ignore
|
||||
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.
|
||||
*/
|
||||
showContextMenu: function (e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
// @ts-ignore
|
||||
this.$parent.$emit('collapse-menus', this._uid);
|
||||
|
||||
this.contextMenuVisible = true;
|
||||
|
||||
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}`);
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if a file can be edited on the Panel.
|
||||
*/
|
||||
canEdit: function (file: any): boolean {
|
||||
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.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_clickListener: function (e: MouseEvent) {
|
||||
if (e.button !== 2 && this.contextMenuVisible) {
|
||||
if (e.target !== (this.$refs.contextMenu as VueType).$el && !(this.$refs.contextMenu as VueType).$el.contains(e.target as Node)) {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
readableSize: readableSize,
|
||||
formatDate: formatDate,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import { formatDate } from "@/helpers";
|
||||
import Icon from "@/components/core/Icon";
|
||||
|
||||
export default Vue.component('folder-row', {
|
||||
components: { Icon },
|
||||
|
||||
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.
|
||||
*/
|
||||
getClickablePath (directory: string): string {
|
||||
return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
|
||||
},
|
||||
|
||||
formatDate: formatDate,
|
||||
},
|
||||
|
||||
template: `
|
||||
<div>
|
||||
<router-link class="row clickable"
|
||||
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\\//, '') }}"
|
||||
>
|
||||
<div class="flex-none icon text-primary-700">
|
||||
<icon name="folder"/>
|
||||
</div>
|
||||
<div class="flex-1">{{directory.name}}</div>
|
||||
<div class="flex-1 text-right text-neutral-600"></div>
|
||||
<div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</router-link>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div>
|
||||
<router-link class="row clickable"
|
||||
:to="{ name: 'server-files', params: { path: getClickablePath(directory.name) }}"
|
||||
>
|
||||
<div class="flex-none icon text-primary-700">
|
||||
<Icon name="folder"/>
|
||||
</div>
|
||||
<div class="flex-1">{{directory.name}}</div>
|
||||
<div class="flex-1 text-right text-neutral-600"></div>
|
||||
<div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { formatDate } from "@/helpers";
|
||||
import Icon from "@/components/core/Icon.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FolderRow',
|
||||
components: { Icon },
|
||||
|
||||
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.
|
||||
*/
|
||||
getClickablePath (directory: string): string {
|
||||
return `${this.currentDirectory.replace(/\/$/, '')}/${directory}`;
|
||||
},
|
||||
|
||||
formatDate: formatDate,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue