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

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
resources/js/views/SharedSingleFile.vue
View File

@@ -1,61 +1,73 @@
<template>
<div class="flex h-screen items-center justify-center p-4">
<!--App logo-->
<div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
<router-link :to="{ name: 'SignIn' }" class="block">
<!--Image logo-->
<img
v-if="config.app_logo_horizontal"
class="mx-auto w-44"
:src="$getImage(config.app_logo_horizontal)"
:alt="config.app_name"
/>
<!--App logo-->
<div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
<router-link :to="{name: 'SignIn'}" class="block">
<!--Image logo-->
<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
<!--Text logo if image isn't available-->
<b v-if="!config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
{{ config.app_name }}
</b>
</router-link>
</div>
<!--Text logo if image isn't available-->
<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
{{ config.app_name }}
</b>
</router-link>
</div>
<!--File preview-->
<!--File preview-->
<div v-if="file" class="w-full text-center">
<!--App logo-->
<router-link v-if="isVideo" :to="{ name: 'SignIn' }" class="block">
<!--Image logo-->
<img
v-if="config.app_logo_horizontal"
class="mx-auto w-44"
:src="$getImage(config.app_logo_horizontal)"
:alt="config.app_name"
/>
<!--App logo-->
<router-link v-if="isVideo" :to="{name: 'SignIn'}" class="block">
<!--Image logo-->
<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
<!--Text logo if image isn't available-->
<b v-if="!config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
{{ config.app_name }}
</b>
</router-link>
<!--Text logo if image isn't available-->
<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
{{ config.app_name }}
</b>
</router-link>
<!--File item-->
<ItemGrid v-if="!isVideo" :entry="file" :mobile-handler="false" class="mt-2" />
<!--File item-->
<ItemGrid v-if="! isVideo" :entry="file" :mobile-handler="false" class="mt-2" />
<!--Video preview-->
<div v-if="isVideo" class="mb-4">
<!--Video preview-->
<Video
:file="file"
class="mx-auto my-10 w-full self-center rounded-lg shadow-xl lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl"
/>
<!--Video preview-->
<div v-if="isVideo" class="mb-4">
<!--Item Info-->
<div class="text-center">
<!--Item Title-->
<b class="inline-block w-full text-sm tracking-tight md:px-6">
{{ file.data.attributes.name }}
</b>
<!--Video preview-->
<Video :file="file" class="w-full lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl self-center mx-auto my-10 shadow-xl rounded-lg"/>
<!--Item sub line-->
<div class="flex items-center justify-center">
<!--File & Image sub line-->
<small class="block text-xs text-gray-500 dark:text-gray-500">
{{ file.data.attributes.filesize
}}<span class="text-xs text-gray-500 lg:inline-block"
>, {{ file.data.attributes.created_at }}</span
>
</small>
</div>
</div>
</div>
<!--Item Info-->
<div class="text-center">
<!--Item Title-->
<b class="tracking-tight inline-block w-full text-sm md:px-6">
{{ file.data.attributes.name }}
</b>
<!--Item sub line-->
<div class="flex items-center justify-center">
<!--File & Image sub line-->
<small class="block text-xs text-gray-500 dark:text-gray-500">
{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
</small>
</div>
</div>
</div>
<!--Download button-->
<!--Download button-->
<ButtonBase @click.native="$downloadSelection(file)" button-style="theme" class="mx-auto">
{{ $t('page_shared.download_file') }}
</ButtonBase>
@@ -68,7 +80,7 @@
<script>
import ButtonBase from '../components/FilesView/ButtonBase'
import Video from "../components/FilePreview/Media/Video"
import Video from '../components/FilePreview/Media/Video'
import ItemGrid from '../components/FilesView/ItemGrid'
import { mapGetters } from 'vuex'
import axios from 'axios'
@@ -78,13 +90,13 @@ export default {
components: {
ButtonBase,
ItemGrid,
Video,
Video,
},
computed: {
...mapGetters(['config']),
isVideo() {
return this.file.data.type === 'video'
}
isVideo() {
return this.file.data.type === 'video'
},
},
data() {
return {
@@ -98,8 +110,7 @@ export default {
this.file = response.data
})
.catch((error) => {
if (error.response.status === 403)
this.$router.push({ name: 'SharedAuthentication' })
if (error.response.status === 403) this.$router.push({ name: 'SharedAuthentication' })
})
},
}