chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

chore: removed header buttons components

This commit is contained in:
Ramires Viana 2021-03-01 13:41:35 +00:00
parent 4fb832c042
commit 057307181e
15 changed files with 87 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/buttons/Copy.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.copy')" :title="$t('buttons.copy')" class="action" id="copy-button">
<i class="material-icons">content_copy</i>
<span>{{ $t('buttons.copyFile') }}</span>
</button>
</template>
<script>
export default {
name: 'copy-button',
methods: {
show: function () {
this.$store.commit('showHover', 'copy')
}
}
}
</script>

17
frontend/src/components/buttons/Delete.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')" class="action" id="delete-button">
<i class="material-icons">delete</i>
<span>{{ $t('buttons.delete') }}</span>
</button>
</template>
<script>
export default {
name: 'delete-button',
methods: {
show: function () {
this.$store.commit('showHover', 'delete')
}
}
}
</script>

35
frontend/src/components/buttons/Download.vue
View File

@ -1,35 +0,0 @@
<template>
<button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
<i class="material-icons">file_download</i>
<span>{{ $t('buttons.download') }}</span>
<span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
</button>
</template>
<script>
import {mapGetters, mapState} from 'vuex'
import { files as api } from '@/api'
export default {
name: 'download-button',
computed: {
...mapState(['req', 'selected']),
...mapGetters(['isListing', 'selectedCount', 'isSharing'])
},
methods: {
download: function () {
if (!this.isListing && !this.isSharing) {
api.download(null, this.$route.path)
return
}
if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
api.download(null, this.req.items[this.selected[0]].url)
return
}
this.$store.commit('showHover', 'download')
}
}
}
</script>

17
frontend/src/components/buttons/Info.vue
View File

@ -1,17 +0,0 @@
<template>
<button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="show">
<i class="material-icons">info</i>
<span>{{ $t('buttons.info') }}</span>
</button>
</template>
<script>
export default {
name: 'info-button',
methods: {
show: function () {
this.$store.commit('showHover', 'info')
}
}
}
</script>

17
frontend/src/components/buttons/Move.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.move')" :title="$t('buttons.move')" class="action" id="move-button">
<i class="material-icons">forward</i>
<span>{{ $t('buttons.moveFile') }}</span>
</button>
</template>
<script>
export default {
name: 'move-button',
methods: {
show: function () {
this.$store.commit('showHover', 'move')
}
}
}
</script>

22
frontend/src/components/buttons/PreviewSize.vue
View File

@ -1,22 +0,0 @@
<template>
<button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="$emit('change-size')">
<i class="material-icons">{{ this.icon }}</i>
<span>{{ $t('buttons.info') }}</span>
</button>
</template>
<script>
export default {
name: 'preview-size-button',
props: [ 'size' ],
computed: {
icon () {
if (this.size) {
return 'photo_size_select_large'
}
return 'hd'
}
}
}
</script>

17
frontend/src/components/buttons/Rename.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.rename')" :title="$t('buttons.rename')" class="action" id="rename-button">
<i class="material-icons">mode_edit</i>
<span>{{ $t('buttons.rename') }}</span>
</button>
</template>
<script>
export default {
name: 'rename-button',
methods: {
show: function () {
this.$store.commit('showHover', 'rename')
}
}
}
</script>

17
frontend/src/components/buttons/Share.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.share')" :title="$t('buttons.share')" class="action">
<i class="material-icons">share</i>
<span>{{ $t('buttons.share') }}</span>
</button>
</template>
<script>
export default {
name: 'share-button',
methods: {
show () {
this.$store.commit('showHover', 'share')
}
}
}
</script>

17
frontend/src/components/buttons/Shell.vue
View File

@ -1,17 +0,0 @@
<template>
<button @click="show" :aria-label="$t('buttons.shell')" :title="$t('buttons.shell')" class="action">
<i class="material-icons">code</i>
<span>{{ $t('buttons.shell') }}</span>
</button>
</template>
<script>
export default {
name: 'shell-button',
methods: {
show: function () {
this.$store.commit('toggleShell')
}
}
}
</script>

40
frontend/src/components/buttons/SwitchView.vue
View File

@ -1,40 +0,0 @@
<template>
<button @click="change" :aria-label="$t('buttons.switchView')" :title="$t('buttons.switchView')" class="action" id="switch-view-button">
<i class="material-icons">{{ icon }}</i>
<span>{{ $t('buttons.switchView') }}</span>
</button>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { users as api } from '@/api'
export default {
name: 'switch-button',
computed: {
...mapState(['user']),
icon: function () {
if (this.user.viewMode === 'mosaic') return 'view_list'
return 'view_module'
}
},
methods: {
...mapMutations([ 'updateUser', 'closeHovers' ]),
change: async function () {
this.closeHovers()
const data = {
id: this.user.id,
viewMode: (this.icon === 'view_list') ? 'list' : 'mosaic'
}
try {
await api.update(data, ['viewMode'])
this.updateUser(data)
} catch (e) {
this.$showError(e)
}
}
}
}
</script>

21
frontend/src/components/buttons/Upload.vue
View File

@ -1,21 +0,0 @@
<template>
<button @click="upload" :aria-label="$t('buttons.upload')" :title="$t('buttons.upload')" class="action" id="upload-button">
<i class="material-icons">file_upload</i>
<span>{{ $t('buttons.upload') }}</span>
</button>
</template>
<script>
export default {
name: 'upload-button',
methods: {
upload: function () {
if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
this.$store.commit('showHover', 'upload')
} else {
document.getElementById('upload-input').click();
}
}
}
}
</script>

19
frontend/src/components/header/Action.vue
View File

@ -1,14 +1,29 @@
<template> <template>
<button @click="$emit('action')" :aria-label="label" :title="label" class="action"> <button @click="action" :aria-label="label" :title="label" class="action">
<i class="material-icons">{{ icon }}</i> <i class="material-icons">{{ icon }}</i>
<span>{{ label }}</span> <span>{{ label }}</span>
<span v-if="counter > 0" class="counter">{{ counter }}</span>
</button> </button>
</template> </template>
<script> <script>
export default { export default {
name: 'action', name: 'action',
props: [ 'icon', 'label' ] props: [
'icon',
'label',
'counter',
'show'
],
methods: {
action: function () {
if (this.show) {
this.$store.commit('showHover', this.show)
}
this.$emit('action')
}
}
} }
</script> </script>

20
frontend/src/views/Share.vue
View File

@ -3,10 +3,8 @@
<header-bar showMenu showLogo> <header-bar showMenu showLogo>
<title /> <title />
<template #actions v-if="!error"> <action v-if="selectedCount" icon="file_download" :label="$t('buttons.download')" @action="download" :counter="selectedCount" />
<download-button v-if="selectedCount" /> <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template>
</header-bar> </header-bar>
<div v-if="!loading"> <div v-if="!loading">
@ -107,14 +105,13 @@
<script> <script>
import {mapState, mapMutations, mapGetters} from 'vuex'; import {mapState, mapMutations, mapGetters} from 'vuex';
import { share as api } from '@/api' import { files, share as api } from '@/api'
import { baseURL } from '@/utils/constants' import { baseURL } from '@/utils/constants'
import filesize from 'filesize' import filesize from 'filesize'
import moment from 'moment' import moment from 'moment'
import HeaderBar from '@/components/header/HeaderBar' import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action' import Action from '@/components/header/Action'
import DownloadButton from '@/components/buttons/Download'
import Errors from '@/views/Errors' import Errors from '@/views/Errors'
import QrcodeVue from 'qrcode.vue' import QrcodeVue from 'qrcode.vue'
import Item from "@/components/files/ListingItem" import Item from "@/components/files/ListingItem"
@ -124,7 +121,6 @@ export default {
components: { components: {
HeaderBar, HeaderBar,
Action, Action,
DownloadButton,
Item, Item,
QrcodeVue, QrcodeVue,
Errors Errors
@ -151,7 +147,7 @@ export default {
window.removeEventListener('keydown', this.keyEvent) window.removeEventListener('keydown', this.keyEvent)
}, },
computed: { computed: {
...mapState(['hash', 'req', 'loading', 'multiple']), ...mapState(['hash', 'req', 'loading', 'multiple', 'selected']),
...mapGetters(['selectedCount', 'selectedCount']), ...mapGetters(['selectedCount', 'selectedCount']),
icon: function () { icon: function () {
if (this.req.isDir) return 'folder' if (this.req.isDir) return 'folder'
@ -262,6 +258,14 @@ export default {
}, },
toggleMultipleSelection () { toggleMultipleSelection () {
this.$store.commit('multiple', !this.multiple) this.$store.commit('multiple', !this.multiple)
},
download () {
if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
files.download(null, this.req.items[this.selected[0]].url)
return
}
this.$store.commit('showHover', 'download')
} }
} }
} }

84
frontend/src/views/files/Listing.vue
View File

@ -6,29 +6,29 @@
<template #actions> <template #actions>
<template v-if="!isMobile"> <template v-if="!isMobile">
<share-button v-if="headerButtons.share" /> <action v-if="headerButtons.share" icon="share" :label="$t('buttons.share')" show="share" />
<rename-button v-if="headerButtons.rename" /> <action v-if="headerButtons.rename" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
<copy-button v-if="headerButtons.copy" /> <action v-if="headerButtons.copy" icon="content_copy" :label="$t('buttons.copyFile')" show="copy" />
<move-button v-if="headerButtons.move" /> <action v-if="headerButtons.move" icon="forward" :label="$t('buttons.moveFile')" show="move" />
<delete-button v-if="headerButtons.delete" /> <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
</template> </template>
<shell-button v-if="headerButtons.shell" /> <action v-if="headerButtons.shell" icon="code" :label="$t('buttons.shell')" @action="$store.commit('toggleShell')" />
<switch-button /> <action :icon="user.viewMode === 'mosaic' ? 'view_list' : 'view_module'" :label="$t('buttons.switchView')" @action="switchView" />
<download-button v-if="headerButtons.download" /> <action icon="file_download" :label="$t('buttons.download')" @action="download" :counter="selectedCount" />
<upload-button v-if="headerButtons.upload" /> <action icon="file_upload" :label="$t('buttons.upload')" @action="upload" />
<info-button /> <action icon="info" :label="$t('buttons.info')" show="info" />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" /> <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template> </template>
</header-bar> </header-bar>
<div v-if="isMobile" id="file-selection"> <div v-if="isMobile" id="file-selection">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span> <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<share-button v-if="headerButtons.share" /> <action v-if="headerButtons.share" icon="share" :label="$t('buttons.share')" show="share" />
<rename-button v-if="headerButtons.rename" /> <action v-if="headerButtons.rename" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
<copy-button v-if="headerButtons.copy" /> <action v-if="headerButtons.copy" icon="content_copy" :label="$t('buttons.copyFile')" show="copy" />
<move-button v-if="headerButtons.move" /> <action v-if="headerButtons.move" icon="forward" :label="$t('buttons.moveFile')" show="move" />
<delete-button v-if="headerButtons.delete" /> <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
</div> </div>
<div v-if="(req.numDirs + req.numFiles) == 0"> <div v-if="(req.numDirs + req.numFiles) == 0">
@ -128,16 +128,6 @@ import css from '@/utils/css'
import HeaderBar from '@/components/header/HeaderBar' import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action' import Action from '@/components/header/Action'
import Search from '@/components/Search' import Search from '@/components/Search'
import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
import UploadButton from '@/components/buttons/Upload'
import DownloadButton from '@/components/buttons/Download'
import SwitchButton from '@/components/buttons/SwitchView'
import MoveButton from '@/components/buttons/Move'
import CopyButton from '@/components/buttons/Copy'
import ShareButton from '@/components/buttons/Share'
import ShellButton from '@/components/buttons/Shell'
import Item from '@/components/files/ListingItem' import Item from '@/components/files/ListingItem'
export default { export default {
@ -146,16 +136,6 @@ export default {
HeaderBar, HeaderBar,
Action, Action,
Search, Search,
InfoButton,
DeleteButton,
ShareButton,
RenameButton,
DownloadButton,
CopyButton,
UploadButton,
SwitchButton,
MoveButton,
ShellButton,
Item Item
}, },
data: function () { data: function () {
@ -241,8 +221,8 @@ export default {
delete: this.selectedCount > 0 && this.user.perm.delete, delete: this.selectedCount > 0 && this.user.perm.delete,
rename: this.selectedCount === 1 && this.user.perm.rename, rename: this.selectedCount === 1 && this.user.perm.rename,
share: this.selectedCount === 1 && this.user.perm.share, share: this.selectedCount === 1 && this.user.perm.share,
move: this.selectedCount === 1 && this.user.perm.rename, move: this.selectedCount > 0 && this.user.perm.rename,
copy: this.selectedCount === 1 && this.user.perm.create, copy: this.selectedCount > 0 && this.user.perm.create,
} }
}, },
isMobile () { isMobile () {
@ -586,6 +566,36 @@ export default {
}, },
windowsResize () { windowsResize () {
this.width = window.innerWidth this.width = window.innerWidth
},
download() {
if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
api.download(null, this.req.items[this.selected[0]].url)
return
}
this.$store.commit('showHover', 'download')
},
switchView: async function () {
this.$store.commit('closeHovers')
const data = {
id: this.user.id,
viewMode: (this.user.viewMode === 'mosaic') ? 'list' : 'mosaic'
}
try {
await users.update(data, ['viewMode'])
this.$store.commit('updateUser', data)
} catch (e) {
this.$showError(e)
}
},
upload: function () {
if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
this.$store.commit('showHover', 'upload')
} else {
document.getElementById('upload-input').click();
}
} }
} }
} }

29
frontend/src/views/files/Preview.vue
View File

@ -3,13 +3,13 @@
<header-bar> <header-bar>
<action icon="close" :label="$t('buttons.close')" @action="close()" /> <action icon="close" :label="$t('buttons.close')" @action="close()" />
<title>{{ name }}</title> <title>{{ name }}</title>
<preview-size-button v-if="isResizeEnabled && req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading" /> <action :disabled="loading" v-if="isResizeEnabled && req.type === 'image'" :icon="fullSize ? 'photo_size_select_large' : 'hd'" @action="toggleSize" />
<template #actions> <template #actions>
<rename-button :disabled="loading" v-if="user.perm.rename" /> <action :disabled="loading" icon="mode_edit" :label="$t('buttons.rename')" show="rename" />
<delete-button :disabled="loading" v-if="user.perm.delete" /> <action :disabled="loading" icon="delete" :label="$t('buttons.delete')" show="delete" />
<download-button :disabled="loading" v-if="user.perm.download" /> <action :disabled="loading" icon="file_download" :label="$t('buttons.download')" @action="download" />
<info-button :disabled="loading" /> <action :disabled="loading" icon="info" :label="$t('buttons.info')" show="info" />
</template> </template>
</header-bar> </header-bar>
@ -33,11 +33,11 @@
:src="sub" :src="sub"
:label="'Subtitle ' + index" :default="index === 0"> :label="'Subtitle ' + index" :default="index === 0">
Sorry, your browser doesn't support embedded videos, Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a :href="download">download it</a> but don't worry, you can <a :href="downloadUrl">download it</a>
and watch it with your favorite video player! and watch it with your favorite video player!
</video> </video>
<object v-else-if="req.extension.toLowerCase() == '.pdf'" class="pdf" :data="raw"></object> <object v-else-if="req.extension.toLowerCase() == '.pdf'" class="pdf" :data="raw"></object>
<a v-else-if="req.type == 'blob'" :href="download"> <a v-else-if="req.type == 'blob'" :href="downloadUrl">
<h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2> <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
</a> </a>
</div> </div>
@ -61,11 +61,6 @@ import throttle from 'lodash.throttle'
import HeaderBar from '@/components/header/HeaderBar' import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action' import Action from '@/components/header/Action'
import PreviewSizeButton from '@/components/buttons/PreviewSize'
import InfoButton from '@/components/buttons/Info'
import DeleteButton from '@/components/buttons/Delete'
import RenameButton from '@/components/buttons/Rename'
import DownloadButton from '@/components/buttons/Download'
import ExtendedImage from '@/components/files/ExtendedImage' import ExtendedImage from '@/components/files/ExtendedImage'
const mediaTypes = [ const mediaTypes = [
@ -80,11 +75,6 @@ export default {
components: { components: {
HeaderBar, HeaderBar,
Action, Action,
PreviewSizeButton,
InfoButton,
DeleteButton,
RenameButton,
DownloadButton,
ExtendedImage ExtendedImage
}, },
data: function () { data: function () {
@ -108,7 +98,7 @@ export default {
hasNext () { hasNext () {
return (this.nextLink !== '') return (this.nextLink !== '')
}, },
download () { downloadUrl () {
return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}` return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
}, },
previewUrl () { previewUrl () {
@ -251,6 +241,9 @@ export default {
close () { close () {
let uri = url.removeLastDir(this.$route.path) + '/' let uri = url.removeLastDir(this.$route.path) + '/'
this.$router.push({ path: uri }) this.$router.push({ path: uri })
},
download() {
api.download(null, this.$route.path)
} }
} }
} }