nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

- select search dark mode

Browse Source 
- file showing fix on mobile devices
- frontend build
This commit is contained in:
Peter Papp
2021-04-19 08:43:18 +02:00
parent fc11a38457
commit 79d3e2beac
7 changed files with 177 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+22 -19
View File
@@ -7,10 +7,10 @@
<CookieDisclaimer />
<!--Show spinner before translations is loaded-->
<Spinner v-if="! isLoadedTranslations"/>
<Spinner v-if="! isLoaded"/>
<!--App view-->
<router-view v-if="isLoadedTranslations" />
<router-view v-if="isLoaded" />
<Vignette />
</div>
@@ -35,7 +35,7 @@ export default {
},
data() {
return {
isLoadedTranslations: false
isLoaded: false
}
},
methods: {
@@ -45,25 +45,12 @@ export default {
},
beforeMount() {
// Get language translations
this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.language)
.then(() => {
this.isLoadedTranslations = true
// Store config to vuex
this.$store.commit('INIT', {
config: this.$root.$data.config,
rootDirectory: {
name: this.$t('locations.home'),
location: 'base',
id: undefined
}
})
})
// Get installation state
let installation = this.$root.$data.config.installation
if (['setup-disclaimer', 'setup-database'].includes(installation))
this.isLoaded = true
// Redirect to database verify code
if (installation === 'setup-database')
this.$router.push({name: 'PurchaseCode'})
@@ -71,6 +58,22 @@ export default {
// Redirect to starting installation process
if (installation === 'setup-disclaimer')
this.$router.push({name: 'InstallationDisclaimer'})
if (installation === 'setup-done')
this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.language)
.then(() => {
this.isLoaded = true
// Store config to vuex
this.$store.commit('INIT', {
config: this.$root.$data.config,
rootDirectory: {
name: this.$t('locations.home'),
location: 'base',
id: undefined
}
})
})
},
mounted() {
this.$checkOS()
resources/js/components/FilesView/FileItemGrid.vue
+18 -19
View File
@@ -1,5 +1,5 @@
<template>
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<div class="file-wrapper" @mousedown.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<!--Grid preview-->
<div :draggable="canDrag" @dragstart="$emit('dragstart')" @drop="
drop()
@@ -8,7 +8,7 @@
<div class="icon-item">
<!-- MultiSelecting for the mobile version -->
<div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="multiSelectMode">
<div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="mobileMultiSelect">
<div class="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17" />
</div>
@@ -58,7 +58,7 @@
</div>
</div>
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
<span @mousedown.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! mobileMultiSelect && canShowMobileOptions">
<MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme"/>
</span>
</div>
@@ -149,7 +149,7 @@ export default {
return {
area: false,
itemName: undefined,
multiSelectMode: false
mobileMultiSelect: false
}
},
methods: {
@@ -214,26 +214,25 @@ export default {
}
}
if (!this.multiSelectMode && this.$isMobile()) {
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
}
}
if (!this.mobileMultiSelect && this.$isMobile()) {
if (this.isFolder) {
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
}
} else {
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
this.$store.commit('LOAD_FILEINFO_DETAIL', this.item)
events.$emit('file-preview:show')
}
}
}
if (this.multiSelectMode && this.$isMobile()) {
if (this.mobileMultiSelect && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
@@ -284,12 +283,12 @@ export default {
})
events.$on('mobileSelecting:start', () => {
this.multiSelectMode = true
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('mobileSelecting:stop', () => {
this.multiSelectMode = false
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
// Change item name
resources/js/components/FilesView/FileItemList.vue
+6 -8
View File
@@ -1,5 +1,5 @@
<template>
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<div class="file-wrapper" @mousedown.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<!--List preview-->
<div
:draggable="canDrag"
@@ -63,7 +63,7 @@
<!--Show item actions-->
<transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @click.stop="showItemActions" class="show-actions">
<span @mousedown.stop="showItemActions" class="show-actions">
<MoreVerticalIcon size="16" class="icon-action text-theme" />
</span>
</div>
@@ -211,19 +211,17 @@ export default {
if (!this.mobileMultiSelect && this.$isMobile()) {
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.isFolder) {
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
}
}
} else {
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
this.$store.commit('LOAD_FILEINFO_DETAIL', this.item)
events.$emit('file-preview:show')
}
}
resources/js/components/Others/Forms/SelectInput.vue
+8
View File
@@ -237,6 +237,14 @@
@media (prefers-color-scheme: dark) {
.select-search {
background: $dark_mode_foreground;
.search-input {
background: $dark_mode_background;
}
}
.input-area {
background: $dark_mode_foreground;
border-color: $dark_mode_foreground;
resources/js/store/modules/fileBrowser.js
Vendored
+4 -3
View File
@@ -252,10 +252,11 @@ const mutations = {
state.fileInfoDetail.push(item)
},
GET_FILEINFO_DETAIL(state, item) {
let checkData = state.data.find(el => el.id === item.id)
if(state.fileInfoDetail.includes(checkData)) return
let selectedItem = state.data.find(el => el.id === item.id)
state.fileInfoDetail.push(checkData ? checkData : state.currentFolder)
if(state.fileInfoDetail.includes(selectedItem)) return
state.fileInfoDetail.push(selectedItem ? selectedItem : state.currentFolder)
},
SELECT_ALL_FILES(state){
state.fileInfoDetail = state.data