zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: header bar component

Browse Source
This commit is contained in:
Ramires Viana
2021-02-25 18:37:07 +00:00
parent 62fff5ca60
commit 95811e99bc
17 changed files with 415 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/views/Errors.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div>
<header-bar v-if="showHeader" showMenu showLogo />
<h2 class="message">
<i class="material-icons">{{ icon }}</i>
<span>{{ message }}</span>
</h2>
</div>
</template>
<script>
import HeaderBar from '@/components/header/HeaderBar'
const errors = {
403: {
icon: 'error',
message: 'errors.forbidden'
},
404: {
icon: 'gps_off',
message: 'errors.notFound'
},
500: {
icon: 'error_outline',
message: 'errors.internal'
}
}
export default {
name: 'errors',
components: {
HeaderBar
},
props: [
'errorCode', 'showHeader'
],
data: function () {
return {
icon: errors[this.errorCode].icon,
message: this.$t(errors[this.errorCode].message)
}
}
}
</script>

128
frontend/src/views/Files.vue
View File

@@ -1,5 +1,36 @@
<template>
<div>
<header-bar showMenu showLogo>
<search /> <title />
<action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
<template #actions v-if="!error">
<template v-if="!isMobile">
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</template>
<shell-button v-if="headerButtons.shell" />
<switch-button />
<download-button v-if="headerButtons.download" />
<upload-button v-if="headerButtons.upload" />
<info-button />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template>
</header-bar>
<div id="file-selection" v-if="isMobile">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<share-button v-if="headerButtons.share" />
<rename-button v-if="headerButtons.rename" />
<copy-button v-if="headerButtons.copy" />
<move-button v-if="headerButtons.move" />
<delete-button v-if="headerButtons.delete" />
</div>
<div id="breadcrumbs" v-if="isListing || error">
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
@@ -11,11 +42,7 @@
</span>
</div>
<div v-if="error">
<not-found v-if="error.message === '404'"></not-found>
<forbidden v-else-if="error.message === '403'"></forbidden>
<internal-error v-else></internal-error>
</div>
<errors v-if="error" :errorCode="errorCode" />
<preview v-else-if="isPreview"></preview>
<editor v-else-if="isEditor"></editor>
<listing :class="{ multiple }" v-else-if="isListing"></listing>
@@ -28,13 +55,27 @@
</template>
<script>
import Forbidden from './errors/403'
import NotFound from './errors/404'
import InternalError from './errors/500'
import Preview from '@/components/files/Preview'
import Listing from '@/components/files/Listing'
import { files as api } from '@/api'
import { mapGetters, mapState, mapMutations } from 'vuex'
import { enableExec } from '@/utils/constants'
import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action'
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 Errors from '@/views/Errors'
import Preview from '@/components/files/Preview'
import Listing from '@/components/files/Listing'
function clean (path) {
return path.endsWith('/') ? path.slice(0, -1) : path
@@ -43,12 +84,29 @@ function clean (path) {
export default {
name: 'files',
components: {
Forbidden,
NotFound,
InternalError,
HeaderBar,
Action,
Search,
InfoButton,
DeleteButton,
ShareButton,
RenameButton,
DownloadButton,
CopyButton,
UploadButton,
SwitchButton,
MoveButton,
ShellButton,
Errors,
Preview,
Listing,
Editor: () => import('@/components/files/Editor')
Editor: () => import('@/components/files/Editor'),
},
data: function () {
return {
error: null,
width: window.innerWidth
}
},
computed: {
...mapGetters([
@@ -100,12 +158,25 @@ export default {
}
return breadcrumbs
}
},
data: function () {
return {
error: null
}
},
headerButtons() {
return {
upload: this.user.perm.create,
download: this.user.perm.download,
shell: this.user.perm.execute && enableExec,
delete: this.selectedCount > 0 && this.user.perm.delete,
rename: this.selectedCount === 1 && this.user.perm.rename,
share: this.selectedCount === 1 && this.user.perm.share,
move: this.selectedCount === 1 && this.user.perm.rename,
copy: this.selectedCount === 1 && this.user.perm.create,
}
},
errorCode() {
return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
},
isMobile () {
return this.width <= 736
},
},
created () {
this.fetchData()
@@ -121,12 +192,17 @@ export default {
mounted () {
window.addEventListener('keydown', this.keyEvent)
window.addEventListener('scroll', this.scroll)
window.addEventListener('resize', this.windowsResize)
},
beforeDestroy () {
window.removeEventListener('keydown', this.keyEvent)
window.removeEventListener('scroll', this.scroll)
window.removeEventListener('resize', this.windowsResize)
},
destroyed () {
if (this.$store.state.showShell) {
this.$store.commit('toggleShell')
}
this.$store.commit('updateRequest', {})
},
methods: {
@@ -172,7 +248,7 @@ export default {
}
// Esc!
if (event.keyCode === 27) {
if (event.keyCode === 27) {
// If we're on a listing, unselect all
// files and folders.
if (this.isListing) {
@@ -234,11 +310,15 @@ export default {
document.querySelector('#listing.list .item.header').style.top = top + 'px'
},
openSidebar () {
this.$store.commit('showHover', 'sidebar')
},
openSearch () {
this.$store.commit('showHover', 'search')
},
toggleMultipleSelection () {
this.$store.commit('multiple', !this.multiple)
this.$store.commit('closeHovers')
},
windowsResize () {
this.width = window.innerWidth
}
}
}

3
frontend/src/views/Layout.vue
View File

@@ -3,7 +3,6 @@
<div id="progress">
<div v-bind:style="{ width: this.progress + '%' }"></div>
</div>
<site-header></site-header>
<sidebar></sidebar>
<main>
<router-view></router-view>
@@ -17,7 +16,6 @@
import { mapState, mapGetters } from 'vuex'
import Sidebar from '@/components/Sidebar'
import Prompts from '@/components/prompts/Prompts'
import SiteHeader from '@/components/Header'
import Shell from '@/components/Shell'
import { enableExec } from '@/utils/constants'
@@ -25,7 +23,6 @@ export default {
name: 'layout',
components: {
Sidebar,
SiteHeader,
Prompts,
Shell
},

11
frontend/src/views/Settings.vue
View File

@@ -1,5 +1,7 @@
<template>
<div class="dashboard">
<header-bar showMenu showLogo />
<div id="nav">
<div class="wrapper">
<ul>
@@ -18,8 +20,15 @@
<script>
import { mapState } from 'vuex'
import HeaderBar from '@/components/header/HeaderBar'
export default {
name: 'settings',
computed: mapState([ 'user' ])
components: {
HeaderBar
},
computed: {
...mapState([ 'user' ])
}
}
</script>

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

@@ -1,98 +1,107 @@
<template>
<div v-if="!loading">
<div id="breadcrumbs">
<router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
</router-link>
<div>
<header-bar showMenu showLogo>
<title />
<span v-for="(link, index) in breadcrumbs" :key="index">
<span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
<router-link :to="link.url">{{ link.name }}</router-link>
</span>
</div>
<div class="share">
<div class="share__box share__box__info">
<div class="share__box__header">
{{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
</div>
<div class="share__box__element share__box__center share__box__icon">
<i class="material-icons">{{ icon }}</i>
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
</div>
<div class="share__box__element share__box__center">
<a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
</div>
<div class="share__box__element share__box__center">
<qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
</div>
<template #actions v-if="!error">
<download-button v-if="selectedCount" />
<action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
</template>
</header-bar>
<div v-if="!loading">
<div id="breadcrumbs">
<router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
</router-link>
<span v-for="(link, index) in breadcrumbs" :key="index">
<span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
<router-link :to="link.url">{{ link.name }}</router-link>
</span>
</div>
<div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
<div class="share__box__header" v-if="req.isDir">
{{ $t('files.files') }}
</div>
<div id="listing" class="list">
<item v-for="(item) in req.items.slice(0, this.showLimit)"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
<div v-if="req.items.length > showLimit" class="item">
<div>
<p class="name"> + {{ req.items.length - showLimit }} </p>
<div class="share">
<div class="share__box share__box__info">
<div class="share__box__header">
{{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
</div>
<div class="share__box__element share__box__center share__box__icon">
<i class="material-icons">{{ icon }}</i>
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
</div>
<div class="share__box__element">
<strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
</div>
<div class="share__box__element share__box__center">
<a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
</div>
<div class="share__box__element share__box__center">
<qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
</div>
</div>
<div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
<div class="share__box__header" v-if="req.isDir">
{{ $t('files.files') }}
</div>
<div id="listing" class="list">
<item v-for="(item) in req.items.slice(0, this.showLimit)"
:key="base64(item.name)"
v-bind:index="item.index"
v-bind:name="item.name"
v-bind:isDir="item.isDir"
v-bind:url="item.url"
v-bind:modified="item.modified"
v-bind:type="item.type"
v-bind:size="item.size">
</item>
<div v-if="req.items.length > showLimit" class="item">
<div>
<p class="name"> + {{ req.items.length - showLimit }} </p>
</div>
</div>
<div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i>
<div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t('files.lonely') }}</span>
</h2>
<div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
<h2 class="message">
<i class="material-icons">sentiment_dissatisfied</i>
<span>{{ $t('files.lonely') }}</span>
</h2>
</div>
</div>
</div>
</div>
<div v-else-if="error">
<not-found v-if="error.message === '404'"></not-found>
<forbidden v-else-if="error.message === '403'"></forbidden>
<div v-else-if="error.message === '401'">
<div class="card floating" id="password">
<div v-if="attemptedPasswordLogin" class="share__wrong__password">{{ $t('login.wrongCredentials') }}</div>
<div class="card-title">
<h2>{{ $t('login.password') }}</h2>
</div>
<div v-if="error">
<div v-if="error.message === '401'">
<div class="card floating" id="password">
<div v-if="attemptedPasswordLogin" class="share__wrong__password">{{ $t('login.wrongCredentials') }}</div>
<div class="card-title">
<h2>{{ $t('login.password') }}</h2>
</div>
<div class="card-content">
<input v-focus type="password" :placeholder="$t('login.password')" v-model="password" @keyup.enter="fetchData">
</div>
<div class="card-action">
<button class="button button--flat"
@click="fetchData"
:aria-label="$t('buttons.submit')"
:title="$t('buttons.submit')">{{ $t('buttons.submit') }}</button>
<div class="card-content">
<input v-focus type="password" :placeholder="$t('login.password')" v-model="password" @keyup.enter="fetchData">
</div>
<div class="card-action">
<button class="button button--flat"
@click="fetchData"
:aria-label="$t('buttons.submit')"
:title="$t('buttons.submit')">{{ $t('buttons.submit') }}</button>
</div>
</div>
</div>
<errors v-else :errorCode="errorCode" />
</div>
<internal-error v-else></internal-error>
</div>
</template>
@@ -102,20 +111,23 @@ import { share as api } from '@/api'
import { baseURL } from '@/utils/constants'
import filesize from 'filesize'
import moment from 'moment'
import HeaderBar from '@/components/header/HeaderBar'
import Action from '@/components/header/Action'
import DownloadButton from '@/components/buttons/Download'
import Errors from '@/views/Errors'
import QrcodeVue from 'qrcode.vue'
import Item from "@/components/files/ListingItem"
import Forbidden from './errors/403'
import NotFound from './errors/404'
import InternalError from './errors/500'
export default {
name: 'share',
components: {
HeaderBar,
Action,
DownloadButton,
Item,
Forbidden,
NotFound,
InternalError,
QrcodeVue
QrcodeVue,
Errors
},
data: () => ({
error: null,
@@ -140,7 +152,7 @@ export default {
},
computed: {
...mapState(['hash', 'req', 'loading', 'multiple']),
...mapGetters(['selectedCount']),
...mapGetters(['selectedCount', 'selectedCount']),
icon: function () {
if (this.req.isDir) return 'folder'
if (this.req.type === 'image') return 'insert_photo'
@@ -198,6 +210,9 @@ export default {
}
return breadcrumbs
},
errorCode() {
return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
}
},
methods: {

13
frontend/src/views/errors/403.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<h2 class="message">
<i class="material-icons">error</i>
<span>{{ $t('errors.forbidden') }}</span>
</h2>
</div>
</template>
<script>
export default {name: 'forbidden'}
</script>

13
frontend/src/views/errors/404.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<h2 class="message">
<i class="material-icons">gps_off</i>
<span>{{ $t('errors.notFound') }}</span>
</h2>
</div>
</template>
<script>
export default {name: 'not-found'}
</script>

13
frontend/src/views/errors/500.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<h2 class="message">
<i class="material-icons">error_outline</i>
<span>{{ $t('errors.internal') }}</span>
</h2>
</div>
</template>
<script>
export default {name: 'internal-error'}
</script>