nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

FilePreview solved v0.3 issues

Browse Source
This commit is contained in:
Miloš Holba
2020-08-26 22:37:33 +02:00
parent aac0aa755f
commit 82b43eb996
7 changed files with 1015 additions and 1126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -11,8 +11,10 @@
.env.backup .env.backup
.phpunit.result.cache .phpunit.result.cache
.phpstorm.meta.php .phpstorm.meta.php
.vscode/
_ide_helper.php _ide_helper.php
Homestead.json Homestead.json
Homestead.yaml Homestead.yaml
npm-debug.log npm-debug.log
yarn-error.log yarn-error.log
prettier.json

14
public/mix-manifest.json
View File

@@ -1,11 +1,11 @@
{ {
"/js/main.js": "/js/main.js", "/js/main.js": "/js/main.js",
"/css/app.css": "/css/app.css", "/css/app.css": "/css/app.css",
"/js/main.1e37c7b25acd36f7eda9.hot-update.js": "/js/main.1e37c7b25acd36f7eda9.hot-update.js", "/js/main.972096550c1a7f368735.hot-update.js": "/js/main.972096550c1a7f368735.hot-update.js",
"/js/main.8dba352fe9551e10fe92.hot-update.js": "/js/main.8dba352fe9551e10fe92.hot-update.js", "/js/main.f5bdb077ae008261b7cc.hot-update.js": "/js/main.f5bdb077ae008261b7cc.hot-update.js",
"/js/main.2067a539e7fd47de9e8b.hot-update.js": "/js/main.2067a539e7fd47de9e8b.hot-update.js", "/js/main.f5271b849a9afac1ca3e.hot-update.js": "/js/main.f5271b849a9afac1ca3e.hot-update.js",
"/js/main.2f57ea87830cf952c235.hot-update.js": "/js/main.2f57ea87830cf952c235.hot-update.js", "/js/main.cd26f566c89e3ea7d999.hot-update.js": "/js/main.cd26f566c89e3ea7d999.hot-update.js",
"/js/main.8f99a2048dd222012eea.hot-update.js": "/js/main.8f99a2048dd222012eea.hot-update.js", "/js/main.ec8883e3bc6200937b70.hot-update.js": "/js/main.ec8883e3bc6200937b70.hot-update.js",
"/js/main.dc3de7faec7bd4b74e73.hot-update.js": "/js/main.dc3de7faec7bd4b74e73.hot-update.js", "/js/main.86422d63264ce98aedc4.hot-update.js": "/js/main.86422d63264ce98aedc4.hot-update.js",
"/js/main.abe8591d01cb790f28ef.hot-update.js": "/js/main.abe8591d01cb790f28ef.hot-update.js" "/js/main.c73a3d4490ae4ef2ccb0.hot-update.js": "/js/main.c73a3d4490ae4ef2ccb0.hot-update.js"
} }

157
resources/js/components/FilesView/FileFullPreview.vue
View File

@@ -1,97 +1,94 @@
<template> <template>
<div <div
class="file-full-preview-wrapper" v-if="showFullPreview"
v-if="showFullPreview" class="file-full-preview-wrapper"
id="fileFullPreview" id="fileFullPreview"
ref="filePreview" ref="filePreview"
tabindex="-1" tabindex="-1"
@click="closeContextMenu" @click="closeContextMenu"
@keydown.esc="(showFullPreview = false), hideMenu()" @keydown.esc=";(showFullPreview = false), hideContextMenu()"
@keydown.right="next" @keydown.right="next"
@keydown.left="prev" @keydown.left="prev"
> >
<FilePreviewNavigationPanel /> <FilePreviewNavigationPanel />
<MediaFullPreview v-if="isMedia" /> <MediaFullPreview />
<FilePreviewActions /> <FilePreviewActions />
</div> </div>
</template> </template>
<script> <script>
import { events } from "@/bus"; import { events } from '@/bus'
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import MediaFullPreview from "@/components/FilesView/MediaFullPreview"; import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
import FilePreviewActions from "@/components/FilesView/FilePreviewActions"; import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
import FilePreviewNavigationPanel from "@/components/FilesView/FilePreviewNavigationPanel"; import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
export default { export default {
components: { name: 'FileFullPreview',
MediaFullPreview, components: {
FilePreviewNavigationPanel, MediaFullPreview,
FilePreviewActions, FilePreviewNavigationPanel,
}, FilePreviewActions
data() { },
return { computed: {
showFullPreview: false, ...mapGetters(['fileInfoDetail', 'data'])
}; },
}, data() {
methods: { return {
closeContextMenu(event) { showFullPreview: false
if( (event.target.parentElement.id || event.target.id) === "fast-preview-menu") { }
return },
} else { methods: {
events.$emit('showContextMenuPreview:hide') closeContextMenu(event) {
} if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
}, return
next: function () { } else {
events.$emit("filePreviewAction:next"); events.$emit('showContextMenuPreview:hide')
}, }
prev: function () { },
events.$emit("filePreviewAction:prev"); next: function() {
}, events.$emit('filePreviewAction:next')
hideMenu() { },
events.$emit("showContextMenuPreview:hide"); prev: function() {
}, events.$emit('filePreviewAction:prev')
}, },
hideContextMenu() {
events.$emit('showContextMenuPreview:hide')
}
},
updated() { updated() {
if (this.showFullPreview) { //Focus file preview for key binding
this.$refs.filePreview.focus(); if (this.showFullPreview) {
} this.$refs.filePreview.focus()
}, }
computed: { },
...mapGetters(["fileInfoDetail" , "data"]), mounted() {
isMedia() { events.$on('fileFullPreview:show', () => {
return this.fileInfoDetail === "image" || "video" || "audio"; this.showFullPreview = true
}, })
events.$on('fileFullPreview:hide', () => {
}, this.showFullPreview = false
})
mounted() { }
events.$on("fileFullPreview:show", () => { }
this.showFullPreview = true;
});
events.$on("fileFullPreview:hide", () => {
this.showFullPreview = false;
});
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables"; @import '@assets/vue-file-manager/_variables';
.file-full-preview-wrapper { .file-full-preview-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 7; z-index: 7;
background-color: white; background-color: white;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.file-full-preview-wrapper { .file-full-preview-wrapper {
background-color: $dark_mode_background; background-color: $dark_mode_background;
} }
} }
</style> </style>

833
resources/js/components/FilesView/FileItemList.vue
View File

@@ -1,520 +1,459 @@
<template> <template>
<div <div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
class="file-wrapper" <!--List preview-->
@click.stop="clickedItem" <div
@dblclick="goToItem" :draggable="canDrag"
spellcheck="false" @dragstart="$emit('dragstart')"
> @drop="
<!--List preview--> $emit('drop')
<div area = false
:draggable="canDrag" "
@dragstart="$emit('dragstart')" @dragleave="dragLeave"
@drop=" @dragover.prevent="dragEnter"
$emit('drop'); class="file-item"
area = false; :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
" >
@dragleave="dragLeave" <!--Thumbnail for item-->
@dragover.prevent="dragEnter" <div class="icon-item">
class="file-item" <!--If is file or image, then link item-->
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }" <span v-if="isFile" class="file-icon-text">
> {{ data.mimetype | limitCharacters }}
<!--Thumbnail for item--> </span>
<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--> <!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" /> <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
<!--Image thumbnail--> <!--Image thumbnail-->
<img <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
v-if="isImage"
class="image"
:src="data.thumbnail"
:alt="data.name"
/>
<!--Else show only folder icon--> <!--Else show only folder icon-->
<FontAwesomeIcon <FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
v-if="isFolder" </div>
:class="{ 'is-deleted': isDeleted }"
class="folder-icon"
icon="folder"
/>
</div>
<!--Name--> <!--Name-->
<div class="item-name"> <div class="item-name">
<!--Name--> <!--Name-->
<b <b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
ref="name" {{ itemName }}
@input="renameItem" </b>
:contenteditable="canEditName"
class="name"
>
{{ itemName }}
</b>
<div class="item-info"> <div class="item-info">
<!--Shared Icon--> <!--Shared Icon-->
<div <div v-if="$checkPermission('master') && data.shared" class="item-shared">
v-if="$checkPermission('master') && data.shared" <link-icon size="12" class="shared-icon"></link-icon>
class="item-shared" </div>
>
<link-icon size="12" class="shared-icon"></link-icon>
</div>
<!--Participant owner Icon--> <!--Participant owner Icon-->
<div <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
v-if="$checkPermission('master') && data.user_scope !== 'master'" <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
class="item-shared" </div>
>
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
</div>
<!--Filesize and timestamp--> <!--Filesize and timestamp-->
<span v-if="!isFolder" class="item-size" <span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
>{{ data.filesize }}, {{ timeStamp }}</span
>
<!--Folder item counts--> <!--Folder item counts-->
<span v-if="isFolder" class="item-length"> <span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
{{ </div>
folderItems == 0 </div>
? $t("folder.empty")
: $tc("folder.item_counts", folderItems)
}}, {{ timeStamp }}
</span>
</div>
</div>
<!--Go Next icon--> <!--Go Next icon-->
<div <div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
class="actions" <span @click.stop="showItemActions" class="show-actions">
v-if="$isMobile() && !($checkPermission('visitor') && isFolder)" <FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
> </span>
<span @click.stop="showItemActions" class="show-actions"> </div>
<FontAwesomeIcon </div>
icon="ellipsis-v" </div>
class="icon-action"
></FontAwesomeIcon>
</span>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { LinkIcon, UserPlusIcon } from "vue-feather-icons"; import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
import { debounce } from "lodash"; import { debounce } from 'lodash'
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import { events } from "@/bus"; import { events } from '@/bus'
export default { export default {
name: "FileItemList", name: 'FileItemList',
props: ["data"], props: ['data'],
components: { components: {
UserPlusIcon, UserPlusIcon,
LinkIcon, LinkIcon
}, },
computed: { computed: {
...mapGetters(["FilePreviewType"]), ...mapGetters(['FilePreviewType']),
isFolder() { isFolder() {
return this.data.type === "folder"; return this.data.type === 'folder'
}, },
isFile() { isFile() {
return this.data.type !== "folder" && this.data.type !== "image"; return this.data.type !== 'folder' && this.data.type !== 'image'
}, },
isImage() { isImage() {
return this.data.type === "image"; return this.data.type === 'image'
}, },
isPdf() { isPdf() {
return this.data.mimetype === "pdf"; return this.data.mimetype === 'pdf'
}, },
isVideo() { isVideo() {
return this.data.type === "video"; return this.data.type === 'video'
}, },
isAudio() { isAudio() {
let mimetypes = ['mpeg' , "mp3" , 'mp4', 'wan' ,'flac']; let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
return ( return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
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')
canEditName() { },
return ( canDrag() {
!this.$isMobile() && return !this.isDeleted && this.$checkPermission(['master', 'editor'])
!this.$isThisLocation(["trash", "trash-root"]) && },
!this.$checkPermission("visitor") && timeStamp() {
!(this.sharedDetail && this.sharedDetail.type === "file") return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
); },
}, folderItems() {
canDrag() { return this.data.deleted_at ? this.data.trashed_items : this.data.items
return !this.isDeleted && this.$checkPermission(["master", "editor"]); },
}, isDeleted() {
timeStamp() { return this.data.deleted_at ? true : false
return this.data.deleted_at }
? this.$t("item_thumbnail.deleted_at", { time: this.data.deleted_at }) },
: this.data.created_at; filters: {
}, limitCharacters(str) {
folderItems() { if (str.length > 3) {
return this.data.deleted_at ? this.data.trashed_items : this.data.items; return str.substring(0, 3) + '...'
}, } else {
isDeleted() { return str.substring(0, 3)
return this.data.deleted_at ? true : false; }
}, }
}, },
filters: { data() {
limitCharacters(str) { return {
if (str.length > 3) { isClicked: false,
return str.substring(0, 3) + "..."; area: false,
} else { itemName: undefined
return str.substring(0, 3); }
} },
}, methods: {
}, showItemActions() {
data() { // Load file info detail
return { this.$store.commit('GET_FILEINFO_DETAIL', this.data)
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"); events.$emit('mobileMenu:show')
}, },
dragEnter() { dragEnter() {
if (this.data.type !== "folder") return; if (this.data.type !== 'folder') return
this.area = true; this.area = true
}, },
dragLeave() { dragLeave() {
this.area = false; this.area = false
}, },
clickedItem(e) { clickedItem(e) {
events.$emit("contextMenu:hide"); events.$emit('contextMenu:hide')
events.$emit("fileItem:deselect"); events.$emit('fileItem:deselect')
// Set clicked item // Set clicked item
this.isClicked = true; this.isClicked = true
// Open in mobile version on first click // Open in mobile version on first click
if (this.$isMobile() && this.isFolder) { if (this.$isMobile() && this.isFolder) {
// Go to folder // Go to folder
if (this.$isThisLocation("public")) { if (this.$isThisLocation('public')) {
this.$store.dispatch("browseShared", [ this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
{ folder: this.data, back: false, init: false }, } else {
]); this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
} else { }
this.$store.dispatch("getFolder", [ }
{ folder: this.data, back: false, init: false },
]);
}
}
if (this.$isMobile()) { if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) { if (this.isImage || this.isVideo || this.isAudio) {
events.$emit("fileFullPreview:show"); events.$emit('fileFullPreview:show')
} }
} }
// Load file info detail // Load file info detail
this.$store.commit("GET_FILEINFO_DETAIL", this.data); this.$store.commit('GET_FILEINFO_DETAIL', this.data)
// Get target classname // Get target classname
let itemClass = e.target.className; let itemClass = e.target.className
if (["name", "icon", "file-link", "file-icon-text"].includes(itemClass)) if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
return; },
}, goToItem() {
goToItem() { if (this.isImage || this.isVideo || this.isAudio) {
if (this.isImage || this.isVideo || this.isAudio) { // this.$openImageOnNewTab(this.data.file_url)
// this.$openImageOnNewTab(this.data.file_url) events.$emit('fileFullPreview:show')
events.$emit("fileFullPreview:show"); }
}
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) { if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
this.$downloadFile( this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
this.data.file_url, }
this.data.name + "." + this.data.mimetype
);
}
if (this.isFolder) { if (this.isFolder) {
if (this.$isThisLocation("public")) { if (this.$isThisLocation('public')) {
this.$store.dispatch("browseShared", [ this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
{ folder: this.data, back: false, init: false }, } else {
]); this.$store.dispatch('getFolder', [{ 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
},
renameItem: debounce(function (e) {
// Prevent submit empty string
if (e.target.innerText.trim() === "") return;
this.$store.dispatch("renameItem", { this.$store.dispatch('renameItem', {
unique_id: this.data.unique_id, unique_id: this.data.unique_id,
type: this.data.type, type: this.data.type,
name: e.target.innerText, name: e.target.innerText
}); })
}, 300), }, 300)
}, },
created() { created() {
this.itemName = this.data.name; this.itemName = this.data.name
events.$on("fileItem:deselect", () => { events.$on('fileItem:deselect', () => {
// Deselect file // Deselect file
this.isClicked = false; this.isClicked = false
}); })
// Change item name // Change item name
events.$on("change:name", (item) => { events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name; if (this.data.unique_id == item.unique_id) this.itemName = item.name
}); })
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@assets/vue-file-manager/_variables"; @import '@assets/vue-file-manager/_variables';
@import "@assets/vue-file-manager/_mixins"; @import '@assets/vue-file-manager/_mixins';
.file-wrapper { .file-wrapper {
user-select: none; user-select: none;
position: relative; position: relative;
&:hover { &:hover {
border-color: transparent; border-color: transparent;
} }
.actions { .actions {
text-align: right; text-align: right;
width: 50px; width: 50px;
.show-actions { .show-actions {
cursor: pointer; cursor: pointer;
padding: 12px 6px 12px; padding: 12px 6px 12px;
.icon-action { .icon-action {
@include font-size(14); @include font-size(14);
path { path {
fill: $theme; fill: $theme;
} }
} }
} }
} }
.item-name { .item-name {
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
.item-info { .item-info {
display: block; display: block;
line-height: 1; line-height: 1;
} }
.item-shared { .item-shared {
display: inline-block; display: inline-block;
.label { .label {
@include font-size(12); @include font-size(12);
font-weight: 400; font-weight: 400;
color: $theme; color: $theme;
} }
.shared-icon { .shared-icon {
vertical-align: middle; vertical-align: middle;
path, path,
circle, circle,
line { line {
stroke: $theme; stroke: $theme;
} }
} }
} }
.item-size, .item-size,
.item-length { .item-length {
@include font-size(11); @include font-size(11);
font-weight: 400; font-weight: 400;
color: rgba($text, 0.7); color: rgba($text, 0.7);
} }
.name { .name {
white-space: nowrap; white-space: nowrap;
&[contenteditable] { &[contenteditable] {
-webkit-user-select: text; -webkit-user-select: text;
user-select: text; user-select: text;
} }
&[contenteditable="true"]:hover { &[contenteditable='true']:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.name { .name {
color: $text; color: $text;
@include font-size(14); @include font-size(14);
font-weight: 700; font-weight: 700;
max-height: 40px; max-height: 40px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.actived { &.actived {
max-height: initial; max-height: initial;
} }
} }
} }
&.selected { &.selected {
.file-item { .file-item {
background: $light_background; background: $light_background;
} }
} }
.icon-item { .icon-item {
text-align: center; text-align: center;
position: relative; position: relative;
flex: 0 0 50px; flex: 0 0 50px;
line-height: 0; line-height: 0;
margin-right: 20px; margin-right: 20px;
.folder-icon { .folder-icon {
@include font-size(52); @include font-size(52);
path { path {
fill: $theme; fill: $theme;
} }
&.is-deleted { &.is-deleted {
path { path {
fill: $dark_background; fill: $dark_background;
} }
} }
} }
.file-icon { .file-icon {
@include font-size(45); @include font-size(45);
path { path {
fill: #fafafc; fill: #fafafc;
stroke: #dfe0e8; stroke: #dfe0e8;
stroke-width: 1; stroke-width: 1;
} }
} }
.file-icon-text { .file-icon-text {
line-height: 1; line-height: 1;
top: 40%; top: 40%;
@include font-size(11); @include font-size(11);
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
text-align: center; text-align: center;
left: 0; left: 0;
right: 0; right: 0;
color: $theme; color: $theme;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
max-width: 50px; max-width: 50px;
max-height: 20px; max-height: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.image { .image {
object-fit: cover; object-fit: cover;
user-select: none; user-select: none;
max-width: 100%; max-width: 100%;
border-radius: 5px; border-radius: 5px;
width: 50px; width: 50px;
height: 50px; height: 50px;
pointer-events: none; pointer-events: none;
} }
} }
.file-item { .file-item {
border: 2px dashed transparent; border: 2px dashed transparent;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 7px; padding: 7px;
&.is-dragenter { &.is-dragenter {
border: 2px dashed $theme; border: 2px dashed $theme;
border-radius: 8px; border-radius: 8px;
} }
&:hover, &:hover,
&.is-clicked { &.is-clicked {
border-radius: 8px; border-radius: 8px;
background: $light_background; background: $light_background;
.item-name .name { .item-name .name {
color: $theme; color: $theme;
} }
} }
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.file-wrapper { .file-wrapper {
.icon-item { .icon-item {
.file-icon { .file-icon {
path { path {
fill: $dark_mode_foreground; fill: $dark_mode_foreground;
stroke: #2f3c54; stroke: #2f3c54;
} }
} }
.folder-icon { .folder-icon {
&.is-deleted { &.is-deleted {
path { path {
fill: lighten($dark_mode_foreground, 5%); fill: lighten($dark_mode_foreground, 5%);
} }
} }
} }
} }
.file-item { .file-item {
&:hover, &:hover,
&.is-clicked { &.is-clicked {
background: $dark_mode_foreground; background: $dark_mode_foreground;
.file-icon { .file-icon {
path { path {
fill: $dark_mode_background; fill: $dark_mode_background;
} }
} }
} }
} }
.item-name { .item-name {
.name { .name {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
.item-size, .item-size,
.item-length { .item-length {
color: $dark_mode_text_secondary; color: $dark_mode_text_secondary;
} }
} }
} }
} }
</style> </style>

122
resources/js/components/FilesView/FilePreviewActions.vue
View File

@@ -1,90 +1,74 @@
<template> <template>
<div v-if="filteredFiles.length > 1"> <div v-if="filteredFiles.length > 1">
<chevron-left-icon <chevron-left-icon class="prev" @click.prevent="prev" size="17"></chevron-left-icon>
class="prev" <chevron-right-icon class="next" @click.prevent="next" size="17"></chevron-right-icon>
@click.prevent="prev" </div>
size="17"
></chevron-left-icon>
<chevron-right-icon
class="next"
@click.prevent="next"
size="17"
></chevron-right-icon>
</div>
</template> </template>
<script> <script>
import { events } from '@/bus'; import { events } from '@/bus'
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'; import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
export default { export default {
components: { name: 'FilePreviewActions',
ChevronLeftIcon, components: {
ChevronRightIcon, ChevronLeftIcon,
}, ChevronRightIcon
computed: { },
...mapGetters(["fileInfoDetail", "data"]), computed: {
...mapGetters(['fileInfoDetail', 'data']),
filteredFiles() { filteredFiles() {
let filteredData = [] let filteredData = []
this.data.filter((element) => { this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) { if (element.type == this.fileInfoDetail.type) {
filteredData.push(element); filteredData.push(element)
} }
}); })
return filteredData return filteredData
}, }
}, },
methods: { methods: {
next: function() { next: function() {
events.$emit('filePreviewAction:next'); events.$emit('filePreviewAction:next')
}, },
prev: function() { prev: function() {
events.$emit('filePreviewAction:prev'); events.$emit('filePreviewAction:prev')
}, }
}
}, }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables'; @import '@assets/vue-file-manager/_variables';
.icon-wrapper {
width: 40px;
height: 40px;
}
.prev, .prev,
.next { .next {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 53.5%; top: 53.5%;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: white !important; color: $text;
color: $text; border-radius: 50%;
border-radius: 50%; text-decoration: none;
text-decoration: none; user-select: none;
user-select: none; filter: drop-shadow(0px 0px 0.8px rgba(255, 255, 255, 1));
} }
.next { .next {
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
} }
.prev { .prev {
left: 0; left: 0;
margin-left: 10px; margin-left: 10px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.prev, .prev,
.next { .next {
color: $light-text; color: $light-text;
background-color: $dark_mode_background !important; filter: drop-shadow(0px 0px 0.8px rgba(17, 19, 20, 1));
} }
} }
</style> </style>

589
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
View File

@@ -1,164 +1,127 @@
<template> <template>
<!-- <div class="navigation-wrapper"> --> <div class="navigation-panel" v-if="fileInfoDetail">
<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-wrapper"> <div class="name-count-wrapper">
<x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon> <p class="title">{{ formatedName }}</p>
<div class="name-count-wrapper"> <span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
<p class="title">{{ formatedName }}</p> </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"> <div class="created-at-wrapper">
({{ <p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
showImageIndex + </div>
' ' + <div class="navigation-icons">
$t('pronouns.of') + <div class="navigation-tool-wrapper">
' ' + <ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
filteredFiles.length <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()" />
</span> </div>
</div> </div>
<span </div>
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> -->
</template> </template>
<script> <script>
import { events } from '@/bus'; import { events } from '@/bus'
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex'
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'; import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import ToolbarButton from '@/components/FilesView/ToolbarButton'; import ToolbarButton from '@/components/FilesView/ToolbarButton'
export default { export default {
components: { ToolbarButton, XIcon, MoreHorizontalIcon }, name: 'FilePreviewNavigationPanel',
data() { components: { ToolbarButton, XIcon, MoreHorizontalIcon },
return { computed: {
showContextMenu: false, ...mapGetters(['fileInfoDetail', 'data']),
}; filteredFiles() {
}, let files = []
computed: { this.data.filter((element) => {
...mapGetters(['fileInfoDetail', 'data']), if (element.type == this.fileInfoDetail.type) {
filteredFiles() { files.push(element)
let files = []; }
this.data.filter((element) => { })
if (element.type == this.fileInfoDetail.type) { return files
files.push(element); },
} showingImageIndex() {
}); let activeIndex = ''
this.filteredFiles.filter((element, index) => {
if (element.unique_id == this.fileInfoDetail.unique_id) {
activeIndex = index + 1
}
})
return activeIndex
},
return files; formatedName() {
}, //Name length handling
showImageIndex() { let name = this.fileInfoDetail.name
let activeIndex = ''; let windowWidth = window.innerWidth
this.filteredFiles.filter((element, index) => { let nameLength
if (element.unique_id == this.fileInfoDetail.unique_id) { if (windowWidth < 410) {
activeIndex = index + 1; nameLength = 18
} } else {
}); nameLength = 27
return activeIndex; }
}, if (name.lastIndexOf('.') > -1) {
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
formatedName() { length: nameLength
let name = this.fileInfoDetail.name; })
if (name.lastIndexOf('.') > -1) { } else {
return _.truncate(name.substring(0, name.lastIndexOf('.')), { return _.truncate(name, {
length: 27, length: nameLength
}); })
} else { }
return _.truncate(name, { },
length: 27, canShareInView() {
}); return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
} }
}, },
canShareInView() { data() {
return !this.$isThisLocation([ return {
'base', showContextMenu: false
'participant_uploads', }
'latest', },
'shared', methods: {
'public', printMethod() {
]); var tab = document.getElementById('image')
}, var win = window.open('', '', 'height=700,width=700')
}, win.document.write(tab.outerHTML)
win.document.close()
methods: { win.print()
printMethod() { },
var tab = document.getElementById('image'); downloadItem() {
var win = window.open('', '', 'height=700,width=700'); // Download file
win.document.write(tab.outerHTML); this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
win.document.close(); },
win.print(); shareItem() {
}, if (this.fileInfoDetail.shared) {
downloadItem() { events.$emit('popup:open', {
// Download file name: 'share-edit',
this.$downloadFile( item: this.fileInfoDetail
this.fileInfoDetail.file_url, })
this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype } else {
); events.$emit('popup:open', {
}, name: 'share-create',
shareItem() { item: this.fileInfoDetail
if (this.fileInfoDetail.shared) { })
events.$emit('popup:open', { }
name: 'share-edit', },
item: this.fileInfoDetail, menuOpen() {
}); if (this.$isMobile()) {
} else { events.$emit('mobileMenu:show', 'showFromMediaPreview')
events.$emit('popup:open', { } else {
name: 'share-create', events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
item: this.fileInfoDetail, }
}); },
} closeFullPreview() {
}, events.$emit('fileFullPreview:hide')
menuOpen() { events.$emit('showContextMenuPreview:hide')
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -166,169 +129,195 @@ export default {
@import '@assets/vue-file-manager/_mixins'; @import '@assets/vue-file-manager/_mixins';
.name-wrapper { .name-wrapper {
width: 33%; width: 33%;
height: 22px; height: 22px;
display: flex; display: flex;
position: relative; position: relative;
// align-items: center; // align-items: center;
flex-grow: 1; flex-grow: 1;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
.name-count-wrapper { .name-count-wrapper {
.file-count { .file-count {
@include font-size(15); @include font-size(15);
margin-left: 6px; margin-left: 6px;
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
align-self: center; align-self: center;
color: $text; color: $text;
} }
.title { .title {
@include font-size(15); @include font-size(15);
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
align-self: center; color: $text;
color: $text; }
} @media (max-width: 570px) {
} .title,
.icon-close { .file-count {
min-width: 17px; @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; svg circle {
cursor: pointer; @include transition(150ms);
margin-right: 6px; }
color: $text; &:hover {
align-self: center; background: $light_background;
@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 { svg circle {
@include transition(150ms); stroke: $theme;
} }
&:hover { }
background: $light_background; .more-icon {
vertical-align: middle;
svg circle { cursor: pointer;
stroke: $theme; }
} }
}
.more-icon {
vertical-align: middle;
cursor: pointer;
}
}
} }
.context-menu { .context-menu {
min-width: 250px; min-width: 250px;
position: absolute; position: absolute;
z-index: 99; z-index: 99;
box-shadow: $shadow; box-shadow: $shadow;
background: white; background: white;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
top: 29px; top: 29px;
&.showed { &.showed {
display: block; display: block;
} }
} }
@media (min-width: 420px) and (max-width: 930px) { @media (min-width: 420px) and (max-width: 985px) {
.name-wrapper { .name-wrapper {
width: 67%; width: 67%;
} }
} }
@media (max-width: 570px) { @media (max-width: 570px) {
.name-wrapper { .name-wrapper {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
} }
} }
.created_at-wrapper { .created-at-wrapper {
width: 33%; width: 33%;
height: 100%; // height: 100%;
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
p { p {
display: flex; display: flex;
align-items: center; align-items: center;
@include font-size(11); @include font-size(11);
} }
@media (max-width: 930px) { @media (max-width: 985px) {
display: none; display: none;
} }
} }
.navigation-icons { .navigation-icons {
width: 33%; width: 33%;
text-align: right; text-align: right;
.navigation-tool-wrapper { .navigation-tool-wrapper {
margin-left: 28px; margin-left: 28px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.button { @media (max-width: 960px) {
margin-left: 5px; .mobile-hide {
&:hover { display: none;
background: $light_background; }
} }
} .button {
@media (max-width: 570px) { margin-left: 5px;
display: none; &:hover {
} background: $light_background;
}
}
@media (max-width: 570px) {
display: none;
}
} }
.navigation-panel { .navigation-panel {
height: 63px; height: 63px;
width: 100%; width: 100%;
padding: 10px 15px; padding: 10px 15px;
display: flex; display: flex;
position: absolute; position: absolute;
z-index: 8; z-index: 8;
align-items: center; align-items: center;
background-color: white; background-color: white;
color: $text; color: $text;
@media (max-width: 960px) {
& {
height: 53px;
padding: 15px;
}
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.navigation-panel { .navigation-panel {
background-color: $dark_mode_foreground; background-color: $dark_mode_foreground;
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
.icon-close { .icon-close {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} &:hover {
.fast-menu-icon:hover { background-color: $dark_mode_background;
background: $dark_mode_background; }
} }
} .fast-menu-icon:hover {
.name-wrapper { background: $dark_mode_background;
.title, }
.file-count { }
color: $dark_mode_text_primary !important; .name-wrapper {
} .title,
} .file-count {
.navigation-icons { color: $dark_mode_text_primary !important;
.button:hover { }
background: $dark_mode_background; }
} .navigation-icons {
} .button:hover {
background: $dark_mode_background;
}
}
} }
</style> </style>

424
resources/js/components/FilesView/MediaFullPreview.vue
View File

@@ -1,157 +1,127 @@
<template> <template>
<div class="media-full-preview" id="mediaPreview" v-if="fileInfoDetail" @click="closeContextMenu" > <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-preview" v-for="i in [currentIndex]" :key="i">
<div class="file-wrapper" > <div class="file-wrapper">
<audio <audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
class="file audio" <img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
v-if="fileInfoDetail.type == 'audio'" <div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
:src="currentFile.file_url" <video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
controlsList="nodownload" </div>
controls </div>
></audio> <!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
</div>
<img </div>
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>
</template> </template>
<script> <script>
import { events } from '@/bus'; import { events } from '@/bus'
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex'
import ToolbarButton from '@/components/FilesView/ToolbarButton'; import ToolbarButton from '@/components/FilesView/ToolbarButton'
import Spinner from '@/components/FilesView/Spinner'; import Spinner from '@/components/FilesView/Spinner'
export default { export default {
components: { ToolbarButton, Spinner }, name: 'MediaFullPreview',
data() { components: { ToolbarButton, Spinner },
return { computed: {
currentIndex: 1, ...mapGetters(['fileInfoDetail', 'data']),
sliderFile: [],
loaded: false,
};
},
computed: {
...mapGetters(['fileInfoDetail', 'data']),
currentFile: function() { isMobileDevice() {
return this.sliderFile[ return this.$isMobile()
Math.abs(this.currentIndex) % this.sliderFile.length },
];
},
canShareInView() { currentFile: function() {
return !this.$isThisLocation([ return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
'base', },
'participant_uploads', isMedia() {
'latest', return this.fileInfoDetail === 'image' || 'video' || 'audio'
'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');
} canShareInView() {
}, return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
currentFile() { }
//HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL },
if(this.fileInfoDetail) { data() {
this.loaded = false return {
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile); currentIndex: 1,
events.$emit('actualShowingImage:ContextMenu', this.currentFile); sliderFile: []
} // loaded: false
}, }
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: {
closeContextMenu() { watch: {
events.$emit('showContextMenuPreview:hide') sliderFile() {
}, //Close file preview after delete all items
if (this.sliderFile.length == 0) {
closeFullPreview() { events.$emit('fileFullPreview:hide')
events.$emit('fileFullPreview:hide'); }
}, },
currentFile() {
//Handle actual view image in fileInfoDetail
filteredFiles() { if (this.fileInfoDetail) {
this.data.filter((element) => { this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
if (element.type == this.fileInfoDetail.type) { events.$emit('actualShowingImage:ContextMenu', this.currentFile)
this.sliderFile.push(element); // this.loaded = false
} }
}); },
this.choseActiveFile(); fileInfoDetail() {
}, //File delete handling - show next image after delete one
onLoaded() { if (!this.fileInfoDetail) {
this.loaded = true; this.currentIndex = this.currentIndex - 1
}, this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
choseActiveFile() { this.sliderFile = []
this.sliderFile.forEach((element, index) => { this.filteredFiles()
if (element.unique_id == this.fileInfoDetail.unique_id) { }
this.currentIndex = index; },
} 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -159,94 +129,102 @@ export default {
@import '@assets/vue-file-manager/_mixins'; @import '@assets/vue-file-manager/_mixins';
.media-full-preview { .media-full-preview {
height: calc(100% - 72px) ; height: calc(100% - 72px);
top: 72px; top: 72px;
position: relative; position: relative;
background-color: white; background-color: white;
} }
.navigation-panel { .navigation-panel {
width: 100%; width: 100%;
height: 7%; height: 7%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
justify-content: space-between; justify-content: space-between;
background-color: $light-background; background-color: $light-background;
color: $text; color: $text;
.icon-close { .icon-close {
color: $text; color: $text;
@include font-size(21); @include font-size(21);
&:hover { &:hover {
color: $theme; color: $theme;
} }
} }
}
.loading-spinner {
position: relative;
} }
.file-wrapper-preview { .file-wrapper-preview {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 30px 0px; padding: 30px 0px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: white; background-color: white;
.file-wrapper { .file-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.file { .file-shadow {
max-width: 100%; box-shadow: 0 8px 40px rgba(17, 26, 52, 0.1);
max-height: 100%; }
align-self: center; .file {
box-shadow: 0 8px 40px rgba($text, 0.3); max-width: 100%;
} max-height: 100%;
.audio { align-self: center;
border-radius: 28px; }
} .audio {
.video-wrapper { border-radius: 28px;
max-width: 1080px; }
max-height: 100%; .video-wrapper {
max-width: 1080px;
max-height: 100%;
@media (min-width: 1200px) { @media (min-width: 1200px) {
& { & {
max-width: 800px; max-width: 800px;
} }
} }
@media (min-width: 1920px) and (max-width: 2560px) { @media (min-width: 1920px) and (max-width: 2560px) {
& { & {
max-width: 1080px; max-width: 1080px;
} }
} }
@media (min-width: 2560px) and (max-width: 3840px) { @media (min-width: 2560px) and (max-width: 3840px) {
& { & {
max-width: 1440px; max-width: 1440px;
} }
} }
@media (min-width: 3840px) { @media (min-width: 3840px) {
& { & {
max-width: 2160px; max-width: 2160px;
} }
} }
.video { .video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
align-self: center; align-self: center;
box-shadow: 0 8px 40px rgba($text, 0.3); }
} }
} }
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.file-wrapper-preview { .file-wrapper-preview {
background-color: $dark_mode_background; background-color: $dark_mode_background;
} .file-wrapper {
.file-shadow {
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}
}
}
} }
</style> </style>