mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
FilePreview solved v0.3 issues
This commit is contained in:
Miloš Holba
2
.gitignore
vendored
2
.gitignore
vendored
@@ -11,8 +11,10 @@
|
||||
.env.backup
|
||||
.phpunit.result.cache
|
||||
.phpstorm.meta.php
|
||||
.vscode/
|
||||
_ide_helper.php
|
||||
Homestead.json
|
||||
Homestead.yaml
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
prettier.json
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/js/main.1e37c7b25acd36f7eda9.hot-update.js": "/js/main.1e37c7b25acd36f7eda9.hot-update.js",
|
||||
"/js/main.8dba352fe9551e10fe92.hot-update.js": "/js/main.8dba352fe9551e10fe92.hot-update.js",
|
||||
"/js/main.2067a539e7fd47de9e8b.hot-update.js": "/js/main.2067a539e7fd47de9e8b.hot-update.js",
|
||||
"/js/main.2f57ea87830cf952c235.hot-update.js": "/js/main.2f57ea87830cf952c235.hot-update.js",
|
||||
"/js/main.8f99a2048dd222012eea.hot-update.js": "/js/main.8f99a2048dd222012eea.hot-update.js",
|
||||
"/js/main.dc3de7faec7bd4b74e73.hot-update.js": "/js/main.dc3de7faec7bd4b74e73.hot-update.js",
|
||||
"/js/main.abe8591d01cb790f28ef.hot-update.js": "/js/main.abe8591d01cb790f28ef.hot-update.js"
|
||||
"/js/main.972096550c1a7f368735.hot-update.js": "/js/main.972096550c1a7f368735.hot-update.js",
|
||||
"/js/main.f5bdb077ae008261b7cc.hot-update.js": "/js/main.f5bdb077ae008261b7cc.hot-update.js",
|
||||
"/js/main.f5271b849a9afac1ca3e.hot-update.js": "/js/main.f5271b849a9afac1ca3e.hot-update.js",
|
||||
"/js/main.cd26f566c89e3ea7d999.hot-update.js": "/js/main.cd26f566c89e3ea7d999.hot-update.js",
|
||||
"/js/main.ec8883e3bc6200937b70.hot-update.js": "/js/main.ec8883e3bc6200937b70.hot-update.js",
|
||||
"/js/main.86422d63264ce98aedc4.hot-update.js": "/js/main.86422d63264ce98aedc4.hot-update.js",
|
||||
"/js/main.c73a3d4490ae4ef2ccb0.hot-update.js": "/js/main.c73a3d4490ae4ef2ccb0.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -1,97 +1,94 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-full-preview-wrapper"
|
||||
v-if="showFullPreview"
|
||||
id="fileFullPreview"
|
||||
ref="filePreview"
|
||||
tabindex="-1"
|
||||
@click="closeContextMenu"
|
||||
@keydown.esc="(showFullPreview = false), hideMenu()"
|
||||
@keydown.right="next"
|
||||
@keydown.left="prev"
|
||||
>
|
||||
<FilePreviewNavigationPanel />
|
||||
<MediaFullPreview v-if="isMedia" />
|
||||
<FilePreviewActions />
|
||||
</div>
|
||||
<div
|
||||
v-if="showFullPreview"
|
||||
class="file-full-preview-wrapper"
|
||||
id="fileFullPreview"
|
||||
ref="filePreview"
|
||||
tabindex="-1"
|
||||
@click="closeContextMenu"
|
||||
@keydown.esc=";(showFullPreview = false), hideContextMenu()"
|
||||
@keydown.right="next"
|
||||
@keydown.left="prev"
|
||||
>
|
||||
<FilePreviewNavigationPanel />
|
||||
<MediaFullPreview />
|
||||
<FilePreviewActions />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from "@/bus";
|
||||
import { mapGetters } from "vuex";
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import MediaFullPreview from "@/components/FilesView/MediaFullPreview";
|
||||
import FilePreviewActions from "@/components/FilesView/FilePreviewActions";
|
||||
import FilePreviewNavigationPanel from "@/components/FilesView/FilePreviewNavigationPanel";
|
||||
import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
|
||||
import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
|
||||
import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MediaFullPreview,
|
||||
FilePreviewNavigationPanel,
|
||||
FilePreviewActions,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFullPreview: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeContextMenu(event) {
|
||||
if( (event.target.parentElement.id || event.target.id) === "fast-preview-menu") {
|
||||
return
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
},
|
||||
next: function () {
|
||||
events.$emit("filePreviewAction:next");
|
||||
},
|
||||
prev: function () {
|
||||
events.$emit("filePreviewAction:prev");
|
||||
},
|
||||
hideMenu() {
|
||||
events.$emit("showContextMenuPreview:hide");
|
||||
},
|
||||
},
|
||||
name: 'FileFullPreview',
|
||||
components: {
|
||||
MediaFullPreview,
|
||||
FilePreviewNavigationPanel,
|
||||
FilePreviewActions
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFullPreview: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeContextMenu(event) {
|
||||
if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
|
||||
return
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
},
|
||||
next: function() {
|
||||
events.$emit('filePreviewAction:next')
|
||||
},
|
||||
prev: function() {
|
||||
events.$emit('filePreviewAction:prev')
|
||||
},
|
||||
hideContextMenu() {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
},
|
||||
|
||||
updated() {
|
||||
if (this.showFullPreview) {
|
||||
this.$refs.filePreview.focus();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail" , "data"]),
|
||||
isMedia() {
|
||||
return this.fileInfoDetail === "image" || "video" || "audio";
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
events.$on("fileFullPreview:show", () => {
|
||||
this.showFullPreview = true;
|
||||
});
|
||||
events.$on("fileFullPreview:hide", () => {
|
||||
this.showFullPreview = false;
|
||||
});
|
||||
},
|
||||
};
|
||||
updated() {
|
||||
//Focus file preview for key binding
|
||||
if (this.showFullPreview) {
|
||||
this.$refs.filePreview.focus()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('fileFullPreview:show', () => {
|
||||
this.showFullPreview = true
|
||||
})
|
||||
events.$on('fileFullPreview:hide', () => {
|
||||
this.showFullPreview = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
|
||||
.file-full-preview-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-full-preview-wrapper {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
.file-full-preview-wrapper {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,520 +1,459 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-wrapper"
|
||||
@click.stop="clickedItem"
|
||||
@dblclick="goToItem"
|
||||
spellcheck="false"
|
||||
>
|
||||
<!--List preview-->
|
||||
<div
|
||||
:draggable="canDrag"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
$emit('drop');
|
||||
area = false;
|
||||
"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
</span>
|
||||
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
|
||||
<!--List preview-->
|
||||
<div
|
||||
:draggable="canDrag"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
$emit('drop')
|
||||
area = false
|
||||
"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img
|
||||
v-if="isImage"
|
||||
class="image"
|
||||
:src="data.thumbnail"
|
||||
:alt="data.name"
|
||||
/>
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon
|
||||
v-if="isFolder"
|
||||
:class="{ 'is-deleted': isDeleted }"
|
||||
class="folder-icon"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<b
|
||||
ref="name"
|
||||
@input="renameItem"
|
||||
:contenteditable="canEditName"
|
||||
class="name"
|
||||
>
|
||||
{{ itemName }}
|
||||
</b>
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
|
||||
{{ itemName }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<!--Shared Icon-->
|
||||
<div
|
||||
v-if="$checkPermission('master') && data.shared"
|
||||
class="item-shared"
|
||||
>
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<div
|
||||
v-if="$checkPermission('master') && data.user_scope !== 'master'"
|
||||
class="item-shared"
|
||||
>
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="!isFolder" class="item-size"
|
||||
>{{ data.filesize }}, {{ timeStamp }}</span
|
||||
>
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
|
||||
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length">
|
||||
{{
|
||||
folderItems == 0
|
||||
? $t("folder.empty")
|
||||
: $tc("folder.item_counts", folderItems)
|
||||
}}, {{ timeStamp }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Go Next icon-->
|
||||
<div
|
||||
class="actions"
|
||||
v-if="$isMobile() && !($checkPermission('visitor') && isFolder)"
|
||||
>
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon
|
||||
icon="ellipsis-v"
|
||||
class="icon-action"
|
||||
></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Go Next icon-->
|
||||
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon } from "vue-feather-icons";
|
||||
import { debounce } from "lodash";
|
||||
import { mapGetters } from "vuex";
|
||||
import { events } from "@/bus";
|
||||
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import { debounce } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: "FileItemList",
|
||||
props: ["data"],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["FilePreviewType"]),
|
||||
isFolder() {
|
||||
return this.data.type === "folder";
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== "folder" && this.data.type !== "image";
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === "image";
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === "pdf";
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === "video";
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg' , "mp3" , 'mp4', 'wan' ,'flac'];
|
||||
return (
|
||||
mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
);
|
||||
},
|
||||
canEditName() {
|
||||
return (
|
||||
!this.$isMobile() &&
|
||||
!this.$isThisLocation(["trash", "trash-root"]) &&
|
||||
!this.$checkPermission("visitor") &&
|
||||
!(this.sharedDetail && this.sharedDetail.type === "file")
|
||||
);
|
||||
},
|
||||
canDrag() {
|
||||
return !this.isDeleted && this.$checkPermission(["master", "editor"]);
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at
|
||||
? this.$t("item_thumbnail.deleted_at", { time: this.data.deleted_at })
|
||||
: this.data.created_at;
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items;
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false;
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
limitCharacters(str) {
|
||||
if (str.length > 3) {
|
||||
return str.substring(0, 3) + "...";
|
||||
} else {
|
||||
return str.substring(0, 3);
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
itemName: undefined,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.data);
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
|
||||
},
|
||||
canDrag() {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
limitCharacters(str) {
|
||||
if (str.length > 3) {
|
||||
return str.substring(0, 3) + '...'
|
||||
} else {
|
||||
return str.substring(0, 3)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
itemName: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
|
||||
//this.isClicked = true
|
||||
//this.isClicked = true
|
||||
|
||||
events.$emit("mobileMenu:show");
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== "folder") return;
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
|
||||
this.area = true;
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false;
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit("contextMenu:hide");
|
||||
events.$emit("fileItem:deselect");
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit('contextMenu:hide')
|
||||
events.$emit('fileItem:deselect')
|
||||
|
||||
// Set clicked item
|
||||
this.isClicked = true;
|
||||
// Set clicked item
|
||||
this.isClicked = true
|
||||
|
||||
// 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.data, back: false, init: false },
|
||||
]);
|
||||
} else {
|
||||
this.$store.dispatch("getFolder", [
|
||||
{ folder: this.data, back: false, init: false },
|
||||
]);
|
||||
}
|
||||
}
|
||||
// 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.data, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit("fileFullPreview:show");
|
||||
}
|
||||
}
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
}
|
||||
|
||||
// Load file info detail
|
||||
this.$store.commit("GET_FILEINFO_DETAIL", this.data);
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
|
||||
// Get target classname
|
||||
let itemClass = e.target.className;
|
||||
// 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) {
|
||||
// this.$openImageOnNewTab(this.data.file_url)
|
||||
events.$emit("fileFullPreview:show");
|
||||
}
|
||||
if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
// this.$openImageOnNewTab(this.data.file_url)
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
|
||||
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + "." + this.data.mimetype
|
||||
);
|
||||
}
|
||||
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
|
||||
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
|
||||
}
|
||||
|
||||
if (this.isFolder) {
|
||||
if (this.$isThisLocation("public")) {
|
||||
this.$store.dispatch("browseShared", [
|
||||
{ folder: this.data, back: false, init: false },
|
||||
]);
|
||||
} else {
|
||||
this.$store.dispatch("getFolder", [
|
||||
{ folder: this.data, back: false, init: false },
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
renameItem: debounce(function (e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText.trim() === "") return;
|
||||
if (this.isFolder) {
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
},
|
||||
renameItem: debounce(function(e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
this.$store.dispatch("renameItem", {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText,
|
||||
});
|
||||
}, 300),
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name;
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name
|
||||
|
||||
events.$on("fileItem:deselect", () => {
|
||||
// Deselect file
|
||||
this.isClicked = false;
|
||||
});
|
||||
events.$on('fileItem:deselect', () => {
|
||||
// Deselect file
|
||||
this.isClicked = false
|
||||
})
|
||||
|
||||
// Change item name
|
||||
events.$on("change:name", (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name;
|
||||
});
|
||||
},
|
||||
};
|
||||
// Change item name
|
||||
events.$on('change:name', (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 6px 12px;
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 6px 12px;
|
||||
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable="true"]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
.file-item {
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,90 +1,74 @@
|
||||
<template>
|
||||
<div v-if="filteredFiles.length > 1">
|
||||
<chevron-left-icon
|
||||
class="prev"
|
||||
@click.prevent="prev"
|
||||
size="17"
|
||||
></chevron-left-icon>
|
||||
|
||||
<chevron-right-icon
|
||||
class="next"
|
||||
@click.prevent="next"
|
||||
size="17"
|
||||
></chevron-right-icon>
|
||||
</div>
|
||||
<div v-if="filteredFiles.length > 1">
|
||||
<chevron-left-icon class="prev" @click.prevent="prev" size="17"></chevron-left-icon>
|
||||
<chevron-right-icon class="next" @click.prevent="next" size="17"></chevron-right-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus';
|
||||
import { mapGetters } from "vuex";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
|
||||
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
export default {
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["fileInfoDetail", "data"]),
|
||||
name: 'FilePreviewActions',
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
|
||||
filteredFiles() {
|
||||
let filteredData = []
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
filteredData.push(element);
|
||||
}
|
||||
});
|
||||
return filteredData
|
||||
},
|
||||
},
|
||||
filteredFiles() {
|
||||
let filteredData = []
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
filteredData.push(element)
|
||||
}
|
||||
})
|
||||
return filteredData
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
next: function() {
|
||||
events.$emit('filePreviewAction:next');
|
||||
},
|
||||
prev: function() {
|
||||
events.$emit('filePreviewAction:prev');
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
methods: {
|
||||
next: function() {
|
||||
events.$emit('filePreviewAction:next')
|
||||
},
|
||||
prev: function() {
|
||||
events.$emit('filePreviewAction:prev')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
|
||||
.icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 53.5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: white !important;
|
||||
color: $text;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 53.5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $text;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0px 0px 0.8px rgba(255, 255, 255, 1));
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
margin-left: 10px;
|
||||
left: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
background-color: $dark_mode_background !important;
|
||||
}
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
filter: drop-shadow(0px 0px 0.8px rgba(17, 19, 20, 1));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,164 +1,127 @@
|
||||
<template>
|
||||
<!-- <div class="navigation-wrapper"> -->
|
||||
<div class="navigation-panel" v-if="fileInfoDetail"
|
||||
>
|
||||
<div class="name-wrapper">
|
||||
<x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon>
|
||||
<div class="name-count-wrapper">
|
||||
<p class="title">{{ formatedName }}</p>
|
||||
<div class="navigation-panel" v-if="fileInfoDetail">
|
||||
<div class="name-wrapper">
|
||||
<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
|
||||
<div class="name-count-wrapper">
|
||||
<p class="title">{{ formatedName }}</p>
|
||||
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
|
||||
</div>
|
||||
<span id="fast-preview-menu" class="fast-menu-icon" @click="menuOpen" v-if="$checkPermission(['master', 'editor'])">
|
||||
<more-horizontal-icon class="more-icon" size="14"> </more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="file-count">
|
||||
({{
|
||||
showImageIndex +
|
||||
' ' +
|
||||
$t('pronouns.of') +
|
||||
' ' +
|
||||
filteredFiles.length
|
||||
}})
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
id="fast-preview-menu"
|
||||
class="fast-menu-icon"
|
||||
@click="menuOpen"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<more-horizontal-icon class="more-icon" size="14">
|
||||
</more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
<div class="created_at-wrapper">
|
||||
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<div class="navigation-tool-wrapper">
|
||||
<ToolbarButton
|
||||
v-if="!this.$isMobile()"
|
||||
source="download"
|
||||
@click.native="downloadItem"
|
||||
:action="$t('actions.download')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!this.$isMobile()"
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="this.fileInfoDetail.type === 'image'"
|
||||
source="print"
|
||||
:action="$t('actions.print')"
|
||||
@click.native="printMethod()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div class="created-at-wrapper">
|
||||
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<div class="navigation-tool-wrapper">
|
||||
<ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
|
||||
<ToolbarButton source="share" class="mobile-hide" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem" />
|
||||
<ToolbarButton v-if="this.fileInfoDetail.type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons';
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
|
||||
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton';
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
|
||||
export default {
|
||||
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
|
||||
data() {
|
||||
return {
|
||||
showContextMenu: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
filteredFiles() {
|
||||
let files = [];
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
files.push(element);
|
||||
}
|
||||
});
|
||||
name: 'FilePreviewNavigationPanel',
|
||||
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
filteredFiles() {
|
||||
let files = []
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
files.push(element)
|
||||
}
|
||||
})
|
||||
return files
|
||||
},
|
||||
showingImageIndex() {
|
||||
let activeIndex = ''
|
||||
this.filteredFiles.filter((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
activeIndex = index + 1
|
||||
}
|
||||
})
|
||||
return activeIndex
|
||||
},
|
||||
|
||||
return files;
|
||||
},
|
||||
showImageIndex() {
|
||||
let activeIndex = '';
|
||||
this.filteredFiles.filter((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
activeIndex = index + 1;
|
||||
}
|
||||
});
|
||||
return activeIndex;
|
||||
},
|
||||
|
||||
formatedName() {
|
||||
let name = this.fileInfoDetail.name;
|
||||
if (name.lastIndexOf('.') > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
|
||||
length: 27,
|
||||
});
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: 27,
|
||||
});
|
||||
}
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
'base',
|
||||
'participant_uploads',
|
||||
'latest',
|
||||
'shared',
|
||||
'public',
|
||||
]);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
printMethod() {
|
||||
var tab = document.getElementById('image');
|
||||
var win = window.open('', '', 'height=700,width=700');
|
||||
win.document.write(tab.outerHTML);
|
||||
win.document.close();
|
||||
win.print();
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.fileInfoDetail.file_url,
|
||||
this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
|
||||
);
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
} else {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-create',
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit('mobileMenu:show', 'showFromMediaPreview');
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:show', this.fileInfoDetail);
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit('fileFullPreview:hide');
|
||||
events.$emit('showContextMenuPreview:hide');
|
||||
},
|
||||
},
|
||||
};
|
||||
formatedName() {
|
||||
//Name length handling
|
||||
let name = this.fileInfoDetail.name
|
||||
let windowWidth = window.innerWidth
|
||||
let nameLength
|
||||
if (windowWidth < 410) {
|
||||
nameLength = 18
|
||||
} else {
|
||||
nameLength = 27
|
||||
}
|
||||
if (name.lastIndexOf('.') > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
|
||||
length: nameLength
|
||||
})
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: nameLength
|
||||
})
|
||||
}
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContextMenu: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
printMethod() {
|
||||
var tab = document.getElementById('image')
|
||||
var win = window.open('', '', 'height=700,width=700')
|
||||
win.document.write(tab.outerHTML)
|
||||
win.document.close()
|
||||
win.print()
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.fileInfoDetail
|
||||
})
|
||||
} else {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-create',
|
||||
item: this.fileInfoDetail
|
||||
})
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit('mobileMenu:show', 'showFromMediaPreview')
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit('fileFullPreview:hide')
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -166,169 +129,195 @@ export default {
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.name-wrapper {
|
||||
width: 33%;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
// align-items: center;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
.name-count-wrapper {
|
||||
.file-count {
|
||||
@include font-size(15);
|
||||
margin-left: 6px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-self: center;
|
||||
color: $text;
|
||||
}
|
||||
.title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-self: center;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
.icon-close {
|
||||
min-width: 17px;
|
||||
width: 33%;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
// align-items: center;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
.name-count-wrapper {
|
||||
.file-count {
|
||||
@include font-size(15);
|
||||
margin-left: 6px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-self: center;
|
||||
color: $text;
|
||||
}
|
||||
.title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.title,
|
||||
.file-count {
|
||||
@include font-size(17);
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-close {
|
||||
min-width: 22px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
color: $text;
|
||||
align-self: center;
|
||||
@include transition(150ms);
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fast-menu-icon {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
color: $text;
|
||||
align-self: center;
|
||||
@include transition(150ms);
|
||||
}
|
||||
.fast-menu-icon {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
.more-icon {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
.more-icon {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
top: 29px;
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
top: 29px;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) and (max-width: 930px) {
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
@media (min-width: 420px) and (max-width: 985px) {
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.created_at-wrapper {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
@media (max-width: 930px) {
|
||||
display: none;
|
||||
}
|
||||
.created-at-wrapper {
|
||||
width: 33%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
@media (max-width: 985px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navigation-icons {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
|
||||
.navigation-tool-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
display: none;
|
||||
}
|
||||
.navigation-tool-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
height: 63px;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
color: $text;
|
||||
height: 63px;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
color: $text;
|
||||
@media (max-width: 960px) {
|
||||
& {
|
||||
height: 53px;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
.icon-close {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.fast-menu-icon:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
.title,
|
||||
.file-count {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
.navigation-icons {
|
||||
.button:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
.icon-close {
|
||||
color: $dark_mode_text_primary;
|
||||
&:hover {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
.fast-menu-icon:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
.title,
|
||||
.file-count {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
.navigation-icons {
|
||||
.button:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,157 +1,127 @@
|
||||
<template>
|
||||
<div class="media-full-preview" id="mediaPreview" v-if="fileInfoDetail" @click="closeContextMenu" >
|
||||
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i" >
|
||||
<div class="file-wrapper" >
|
||||
<audio
|
||||
class="file audio"
|
||||
v-if="fileInfoDetail.type == 'audio'"
|
||||
:src="currentFile.file_url"
|
||||
controlsList="nodownload"
|
||||
controls
|
||||
></audio>
|
||||
|
||||
<img
|
||||
v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
|
||||
class="file"
|
||||
id="image"
|
||||
:src="currentFile.file_url"
|
||||
v-on:load="onLoaded"
|
||||
/>
|
||||
<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
|
||||
<video
|
||||
:src="currentFile.file_url"
|
||||
class="video"
|
||||
controlsList="nodownload"
|
||||
disablePictureInPicture
|
||||
playsinline
|
||||
controls
|
||||
/>
|
||||
</div>
|
||||
<spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail">
|
||||
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
|
||||
<div class="file-wrapper">
|
||||
<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
|
||||
<img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
|
||||
<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
|
||||
<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus';
|
||||
import { mapGetters } from 'vuex';
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton';
|
||||
import Spinner from '@/components/FilesView/Spinner';
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
|
||||
export default {
|
||||
components: { ToolbarButton, Spinner },
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 1,
|
||||
sliderFile: [],
|
||||
loaded: false,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
name: 'MediaFullPreview',
|
||||
components: { ToolbarButton, Spinner },
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
|
||||
currentFile: function() {
|
||||
return this.sliderFile[
|
||||
Math.abs(this.currentIndex) % this.sliderFile.length
|
||||
];
|
||||
},
|
||||
isMobileDevice() {
|
||||
return this.$isMobile()
|
||||
},
|
||||
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
'base',
|
||||
'participant_uploads',
|
||||
'latest',
|
||||
'shared',
|
||||
'public',
|
||||
]);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if(this.sliderFile.length > 1 ) {
|
||||
events.$on('filePreviewAction:next', () => {
|
||||
this.currentIndex += 1;
|
||||
this.slideType = 'next'
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
});
|
||||
events.$on('filePreviewAction:prev', () => {
|
||||
this.slideType = 'prev'
|
||||
this.currentIndex -= 1;
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.filteredFiles();
|
||||
},
|
||||
watch: {
|
||||
sliderFile() {
|
||||
if(this.sliderFile.length == 0 ) {
|
||||
events.$emit('fileFullPreview:hide');
|
||||
currentFile: function() {
|
||||
return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
|
||||
},
|
||||
isMedia() {
|
||||
return this.fileInfoDetail === 'image' || 'video' || 'audio'
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
currentFile() {
|
||||
//HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
|
||||
if(this.fileInfoDetail) {
|
||||
this.loaded = false
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
|
||||
events.$emit('actualShowingImage:ContextMenu', this.currentFile);
|
||||
}
|
||||
},
|
||||
fileInfoDetail() {
|
||||
//FILE DELETE HANDLING
|
||||
if (!this.fileInfoDetail) {
|
||||
this.currentIndex = this.currentIndex - 1;
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
|
||||
this.sliderFile = [];
|
||||
this.filteredFiles();
|
||||
}
|
||||
},
|
||||
data(newValue, oldValue) {
|
||||
//MOVE ITEM HANDLING
|
||||
if (newValue != oldValue) {
|
||||
this.sliderFile = [];
|
||||
this.filteredFiles();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 1,
|
||||
sliderFile: []
|
||||
// loaded: false
|
||||
}
|
||||
},
|
||||
|
||||
closeContextMenu() {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
},
|
||||
|
||||
closeFullPreview() {
|
||||
events.$emit('fileFullPreview:hide');
|
||||
},
|
||||
|
||||
|
||||
filteredFiles() {
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
this.sliderFile.push(element);
|
||||
}
|
||||
});
|
||||
this.choseActiveFile();
|
||||
},
|
||||
onLoaded() {
|
||||
this.loaded = true;
|
||||
},
|
||||
choseActiveFile() {
|
||||
this.sliderFile.forEach((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
this.currentIndex = index;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
watch: {
|
||||
sliderFile() {
|
||||
//Close file preview after delete all items
|
||||
if (this.sliderFile.length == 0) {
|
||||
events.$emit('fileFullPreview:hide')
|
||||
}
|
||||
},
|
||||
currentFile() {
|
||||
//Handle actual view image in fileInfoDetail
|
||||
if (this.fileInfoDetail) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
|
||||
events.$emit('actualShowingImage:ContextMenu', this.currentFile)
|
||||
// this.loaded = false
|
||||
}
|
||||
},
|
||||
fileInfoDetail() {
|
||||
//File delete handling - show next image after delete one
|
||||
if (!this.fileInfoDetail) {
|
||||
this.currentIndex = this.currentIndex - 1
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
|
||||
this.sliderFile = []
|
||||
this.filteredFiles()
|
||||
}
|
||||
},
|
||||
data(newValue, oldValue) {
|
||||
//Move item handling
|
||||
if (newValue != oldValue) {
|
||||
this.sliderFile = []
|
||||
this.filteredFiles()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filteredFiles() {
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
this.sliderFile.push(element)
|
||||
}
|
||||
})
|
||||
this.choseActiveFile()
|
||||
},
|
||||
// onLoaded(event) {
|
||||
// this.loaded = true
|
||||
// },
|
||||
choseActiveFile() {
|
||||
this.sliderFile.forEach((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.sliderFile.length > 1) {
|
||||
events.$on('filePreviewAction:next', () => {
|
||||
this.currentIndex += 1
|
||||
this.slideType = 'next'
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0
|
||||
}
|
||||
})
|
||||
events.$on('filePreviewAction:prev', () => {
|
||||
this.slideType = 'prev'
|
||||
this.currentIndex -= 1
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.filteredFiles()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -159,94 +129,102 @@ export default {
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.media-full-preview {
|
||||
height: calc(100% - 72px) ;
|
||||
top: 72px;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: calc(100% - 72px);
|
||||
top: 72px;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
background-color: $light-background;
|
||||
color: $text;
|
||||
.icon-close {
|
||||
color: $text;
|
||||
@include font-size(21);
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
background-color: $light-background;
|
||||
color: $text;
|
||||
.icon-close {
|
||||
color: $text;
|
||||
@include font-size(21);
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-wrapper-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
.file-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.file {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
box-shadow: 0 8px 40px rgba($text, 0.3);
|
||||
}
|
||||
.audio {
|
||||
border-radius: 28px;
|
||||
}
|
||||
.video-wrapper {
|
||||
max-width: 1080px;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
.file-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.file-shadow {
|
||||
box-shadow: 0 8px 40px rgba(17, 26, 52, 0.1);
|
||||
}
|
||||
.file {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
.audio {
|
||||
border-radius: 28px;
|
||||
}
|
||||
.video-wrapper {
|
||||
max-width: 1080px;
|
||||
max-height: 100%;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
& {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
& {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2560px) {
|
||||
& {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2560px) and (max-width: 3840px) {
|
||||
& {
|
||||
max-width: 1440px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3840px) {
|
||||
& {
|
||||
max-width: 2160px;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
box-shadow: 0 8px 40px rgba($text, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) and (max-width: 2560px) {
|
||||
& {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2560px) and (max-width: 3840px) {
|
||||
& {
|
||||
max-width: 1440px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3840px) {
|
||||
& {
|
||||
max-width: 2160px;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper-preview {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
.file-wrapper-preview {
|
||||
background-color: $dark_mode_background;
|
||||
.file-wrapper {
|
||||
.file-shadow {
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user