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

Fix ViewMode related bugs:

Browse Source 
- The user will no longer lost their 'ViewMode' option after being updated in the settings.
- The console will not output errors due tot he scroll function when Mosaic mode is on.


Former-commit-id: 97aa6abdc8b864dc7a55dbf03a2e58895ea7613f [formerly ff9e6ff0898f32bd106b644b2e9002b5de45281c] [formerly 556cc12bd5ff1d91776c81f48dd1dceb8bb627b4 [formerly 51104c5ee70710b434ab42c58f738ecdce548fe6]]
Former-commit-id: dd63b2b818a7bd4960a7243866d6b2829f4c03a8 [formerly 45855d70eaa9a2b060d3a89cb70388040ea8e6d9]
Former-commit-id: 6e0ebf10d7fe3e2c234abc9c0ffd447cfbdd7455
This commit is contained in:
Henrique Dias
2017-10-31 18:23:31 +00:00
parent c716d126eb
commit 59a0daa293
7 changed files with 290 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

462
assets/src/views/Files.vue
View File

@@ -1,231 +1,231 @@
<template>
<div>
<div id="breadcrumbs">
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
</router-link>
<span v-for="link in breadcrumbs" :key="link.name">
<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="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>
<editor v-else-if="isEditor"></editor>
<listing :class="{ multiple }" v-else-if="isListing"></listing>
<preview v-else-if="isPreview"></preview>
<div v-else>
<h2 class="message">
<span>{{ $t('files.loading') }}</span>
</h2>
</div>
</div>
</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 Editor from '@/components/files/Editor'
import * as api from '@/utils/api'
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
name: 'files',
components: {
Forbidden,
NotFound,
InternalError,
Preview,
Listing,
Editor
},
computed: {
...mapGetters([
'selectedCount'
]),
...mapState([
'req',
'user',
'reload',
'multiple',
'loading'
]),
isListing () {
return this.req.kind === 'listing' && !this.loading
},
isPreview () {
return this.req.kind === 'preview' && !this.loading
},
isEditor () {
return this.req.kind === 'editor' && !this.loading
},
breadcrumbs () {
let parts = this.$route.path.split('/')
if (parts[0] === '') {
parts.shift()
}
if (parts[parts.length - 1] === '') {
parts.pop()
}
let breadcrumbs = []
for (let i = 0; i < parts.length; i++) {
if (i === 0) {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/' + parts[i] + '/' })
} else {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
}
}
breadcrumbs.shift()
if (breadcrumbs.length > 3) {
while (breadcrumbs.length !== 4) {
breadcrumbs.shift()
}
breadcrumbs[0].name = '...'
}
return breadcrumbs
}
},
data: function () {
return {
error: null
}
},
created () {
this.fetchData()
},
watch: {
'$route': 'fetchData',
'reload': function () {
this.fetchData()
}
},
mounted () {
window.addEventListener('keydown', this.keyEvent)
window.addEventListener('scroll', this.scroll)
},
beforeDestroy () {
window.removeEventListener('keydown', this.keyEvent)
window.removeEventListener('scroll', this.scroll)
},
destroyed () {
this.$store.commit('updateRequest', {})
},
methods: {
...mapMutations([ 'setLoading' ]),
fetchData () {
// Reset view information.
this.$store.commit('setReload', false)
this.$store.commit('resetSelected')
this.$store.commit('multiple', false)
this.$store.commit('closeHovers')
// Set loading to true and reset the error.
this.setLoading(true)
this.error = null
let url = this.$route.path
if (url === '') url = '/'
if (url[0] !== '/') url = '/' + url
api.fetch(url)
.then((req) => {
if (!url.endsWith('/') && req.url.endsWith('/')) {
window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
}
this.$store.commit('updateRequest', req)
document.title = req.name
this.setLoading(false)
})
.catch(error => {
this.setLoading(false)
this.error = error
})
},
keyEvent (event) {
// Esc!
if (event.keyCode === 27) {
this.$store.commit('closeHovers')
// If we're on a listing, unselect all
// files and folders.
if (this.req.kind === 'listing') {
this.$store.commit('resetSelected')
}
}
// Del!
if (event.keyCode === 46) {
if (this.req.kind === 'editor' ||
this.$route.name !== 'Files' ||
this.loading ||
!this.user.allowEdit ||
(this.req.kind === 'listing' && this.selectedCount === 0)) return
this.$store.commit('showHover', 'delete')
}
// F1!
if (event.keyCode === 112) {
event.preventDefault()
this.$store.commit('showHover', 'help')
}
// F2!
if (event.keyCode === 113) {
if (this.req.kind === 'editor' ||
this.$route.name !== 'Files' ||
this.loading ||
!this.user.allowEdit ||
(this.req.kind === 'listing' && this.selectedCount === 0) ||
(this.req.kind === 'listing' && this.selectedCount > 1)) return
this.$store.commit('showHover', 'rename')
}
// CTRL + S
if (event.ctrlKey || event.metaKey) {
if (String.fromCharCode(event.which).toLowerCase() === 's') {
event.preventDefault()
if (this.req.kind !== 'editor') {
document.getElementById('download-button').click()
}
}
}
},
scroll (event) {
if (this.req.kind !== 'listing' || this.$store.state.req.display === 'mosaic') return
let top = 112 - window.scrollY
if (top < 64) {
top = 64
}
document.querySelector('#listing.list .item.header').style.top = top + 'px'
},
openSidebar () {
this.$store.commit('showHover', 'sidebar')
},
openSearch () {
this.$store.commit('showHover', 'search')
}
}
}
</script>
<template>
<div>
<div id="breadcrumbs">
<router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
<i class="material-icons">home</i>
</router-link>
<span v-for="link in breadcrumbs" :key="link.name">
<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="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>
<editor v-else-if="isEditor"></editor>
<listing :class="{ multiple }" v-else-if="isListing"></listing>
<preview v-else-if="isPreview"></preview>
<div v-else>
<h2 class="message">
<span>{{ $t('files.loading') }}</span>
</h2>
</div>
</div>
</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 Editor from '@/components/files/Editor'
import * as api from '@/utils/api'
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
name: 'files',
components: {
Forbidden,
NotFound,
InternalError,
Preview,
Listing,
Editor
},
computed: {
...mapGetters([
'selectedCount'
]),
...mapState([
'req',
'user',
'reload',
'multiple',
'loading'
]),
isListing () {
return this.req.kind === 'listing' && !this.loading
},
isPreview () {
return this.req.kind === 'preview' && !this.loading
},
isEditor () {
return this.req.kind === 'editor' && !this.loading
},
breadcrumbs () {
let parts = this.$route.path.split('/')
if (parts[0] === '') {
parts.shift()
}
if (parts[parts.length - 1] === '') {
parts.pop()
}
let breadcrumbs = []
for (let i = 0; i < parts.length; i++) {
if (i === 0) {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/' + parts[i] + '/' })
} else {
breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
}
}
breadcrumbs.shift()
if (breadcrumbs.length > 3) {
while (breadcrumbs.length !== 4) {
breadcrumbs.shift()
}
breadcrumbs[0].name = '...'
}
return breadcrumbs
}
},
data: function () {
return {
error: null
}
},
created () {
this.fetchData()
},
watch: {
'$route': 'fetchData',
'reload': function () {
this.fetchData()
}
},
mounted () {
window.addEventListener('keydown', this.keyEvent)
window.addEventListener('scroll', this.scroll)
},
beforeDestroy () {
window.removeEventListener('keydown', this.keyEvent)
window.removeEventListener('scroll', this.scroll)
},
destroyed () {
this.$store.commit('updateRequest', {})
},
methods: {
...mapMutations([ 'setLoading' ]),
fetchData () {
// Reset view information.
this.$store.commit('setReload', false)
this.$store.commit('resetSelected')
this.$store.commit('multiple', false)
this.$store.commit('closeHovers')
// Set loading to true and reset the error.
this.setLoading(true)
this.error = null
let url = this.$route.path
if (url === '') url = '/'
if (url[0] !== '/') url = '/' + url
api.fetch(url)
.then((req) => {
if (!url.endsWith('/') && req.url.endsWith('/')) {
window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
}
this.$store.commit('updateRequest', req)
document.title = req.name
this.setLoading(false)
})
.catch(error => {
this.setLoading(false)
this.error = error
})
},
keyEvent (event) {
// Esc!
if (event.keyCode === 27) {
this.$store.commit('closeHovers')
// If we're on a listing, unselect all
// files and folders.
if (this.req.kind === 'listing') {
this.$store.commit('resetSelected')
}
}
// Del!
if (event.keyCode === 46) {
if (this.req.kind === 'editor' ||
this.$route.name !== 'Files' ||
this.loading ||
!this.user.allowEdit ||
(this.req.kind === 'listing' && this.selectedCount === 0)) return
this.$store.commit('showHover', 'delete')
}
// F1!
if (event.keyCode === 112) {
event.preventDefault()
this.$store.commit('showHover', 'help')
}
// F2!
if (event.keyCode === 113) {
if (this.req.kind === 'editor' ||
this.$route.name !== 'Files' ||
this.loading ||
!this.user.allowEdit ||
(this.req.kind === 'listing' && this.selectedCount === 0) ||
(this.req.kind === 'listing' && this.selectedCount > 1)) return
this.$store.commit('showHover', 'rename')
}
// CTRL + S
if (event.ctrlKey || event.metaKey) {
if (String.fromCharCode(event.which).toLowerCase() === 's') {
event.preventDefault()
if (this.req.kind !== 'editor') {
document.getElementById('download-button').click()
}
}
}
},
scroll (event) {
if (this.req.kind !== 'listing' || this.$store.state.user.viewMode === 'mosaic') return
let top = 112 - window.scrollY
if (top < 64) {
top = 64
}
document.querySelector('#listing.list .item.header').style.top = top + 'px'
},
openSidebar () {
this.$store.commit('showHover', 'sidebar')
},
openSearch () {
this.$store.commit('showHover', 'search')
}
}
}
</script>

51
assets/src/views/settings/User.vue
View File

@@ -7,10 +7,21 @@
</div>
<div class="card-content">
<p>
<label for="username">{{ $t('settings.username') }}</label>
<input type="text" v-model="username" id="username">
</p>
<p>
<label for="password">{{ $t('settings.password') }}</label>
<input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password">
</p>
<p>
<label for="scope">{{ $t('settings.scope') }}</label>
<input type="text" v-model="filesystem" id="scope">
</p>
<p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
<p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
<p><label for="scope">{{ $t('settings.scope') }}</label><input type="text" v-model="filesystem" id="scope"></p>
<p>
<label for="locale">{{ $t('settings.language') }}</label>
<languages id="locale" :selected.sync="locale"></languages>
@@ -91,6 +102,7 @@ export default {
components: { Languages },
data: () => {
return {
originalUser: null,
id: 0,
admin: false,
allowNew: false,
@@ -141,6 +153,7 @@ export default {
}
getUser(user).then(user => {
this.originalUser = user
this.id = user.ID
this.admin = user.admin
this.allowCommands = user.allowCommands
@@ -242,23 +255,21 @@ export default {
})
},
parseForm () {
let user = {
ID: this.id,
username: this.username,
password: this.password,
lockPassword: this.lockPassword,
filesystem: this.filesystem,
admin: this.admin,
allowCommands: this.allowCommands,
allowNew: this.allowNew,
allowEdit: this.allowEdit,
allowPublish: this.allowPublish,
permissions: this.permissions,
css: this.css,
locale: this.locale,
commands: this.commands.split(' '),
rules: []
}
let user = this.originalUser
user.username = this.username
user.password = this.password
user.lockPassword = this.lockPassword
user.filesystem = this.filesystem
user.admin = this.admin
user.allowCommands = this.allowCommands
user.allowNew = this.allowNew
user.allowEdit = this.allowEdit
user.allowPublish = this.allowPublish
user.permissions = this.permissions
user.css = this.css
user.locale = this.locale
user.commands = this.commands.split(' ')
user.rules = []
let rules = this.rules.split('\n')