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

Admin & User account frontend consolidation

Browse Source
This commit is contained in:
Peter Papp
2021-03-15 16:56:26 +01:00
parent ba902a30b3
commit 803cc089bd
57 changed files with 472 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileItemGrid.vue
+33 -42
View File
@@ -10,7 +10,7 @@
<!-- 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="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17"/>
<CheckIcon v-if="isClicked" class="icon" size="17" />
</div>
</div>
@@ -20,19 +20,19 @@
</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file" />
<!--Image thumbnail-->
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder" />
</div>
<!--Name-->
<div class="item-name">
<!--Name-->
<b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
<b :ref="this.item.id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
@@ -66,11 +66,11 @@
</template>
<script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import {LinkIcon, UserPlusIcon, CheckIcon} from 'vue-feather-icons'
import FolderIcon from '@/components/FilesView/FolderIcon'
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
import {debounce} from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FileItemGrid',
@@ -85,23 +85,23 @@ export default {
...mapGetters([
'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
]),
folderEmojiOrColor(){
folderEmojiOrColor() {
// If folder have set some color
if(this.item.icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.item.unique_id}`].firstElementChild.style.fill = `${this.item.icon_color}`
// If folder have set some color
if (this.item.icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.item.id}`].firstElementChild.style.fill = this.item.icon_color
})
return false
}
// If folder have set some emoji
if(this.item.icon_emoji)
if (this.item.icon_emoji)
return this.item.icon_emoji
},
isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
return this.fileInfoDetail.some(element => element.id === this.item.id)
},
isFolder() {
return this.item.type === 'folder'
@@ -177,10 +177,10 @@ export default {
// After click deselect new folder rename input
document.getSelection().removeAllRanges();
if (e.ctrlKey || e.metaKey && !e.shiftKey) {
// Click + Ctrl
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
@@ -218,9 +218,9 @@ export default {
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
}
}
@@ -233,21 +233,12 @@ export default {
}
if (this.multiSelectMode && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
if (this.fileInfoDetail.some(item => item.id === this.item.id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else {
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
}
}
// Get target classname
let itemClass = e.target.className
if (
['name', 'icon', 'file-link', 'file-icon-text'].includes(
itemClass
)
)
return
},
goToItem() {
if (this.isImage || this.isVideo || this.isAudio) {
@@ -262,19 +253,19 @@ export default {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('browseShared', [{folder: this.item, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
this.$store.dispatch('getFolder', [{folder: this.item, back: false, init: false}])
}
}
},
renameItem: debounce(function(e) {
renameItem: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
unique_id: this.item.unique_id,
id: this.item.id,
type: this.item.type,
name: e.target.innerText
})
@@ -283,10 +274,10 @@ export default {
created() {
this.itemName = this.item.name
events.$on('newFolder:focus', (unique_id) => {
events.$on('newFolder:focus', (id) => {
if(this.item.unique_id == unique_id && !this.$isMobile()) {
this.$refs[unique_id].focus()
if (this.item.id === id && !this.$isMobile()) {
this.$refs[id].focus()
document.execCommand('selectAll')
}
})
@@ -302,7 +293,7 @@ export default {
})
// Change item name
events.$on('change:name', (item) => {
if (this.item.unique_id == item.unique_id) this.itemName = item.name
if (this.item.id === item.id) this.itemName = item.name
})
}
}
@@ -559,7 +550,7 @@ export default {
.file-icon-text {
@include font-size(12);
}
.folder {
width: 75px;
@@ -569,7 +560,7 @@ export default {
/deep/ .folder-icon {
@include font-size(75)
}
}
}
.image {