mirror_html/DirectoryLister
1
0
Fork 0
mirror of https://github.com/DirectoryLister/DirectoryLister.git synced 2025-08-25 23:06:39 +02:00
Code Issues Projects Releases Wiki Activity

Fixed file info modal jank on close

Browse Source
This commit is contained in:
Chris Kankiewicz
2021-06-20 16:21:12 -07:00
parent 9e0040417c
commit d753af3dd7
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/resources/js/components/file-info-modal.js
View File

@@ -3,21 +3,19 @@ import axios from 'axios';
export default () => ({
error: null,
filePath: 'file.info',
hashes: {
md5: '••••••••••••••••••••••••••••••••',
sha1: '••••••••••••••••••••••••••••••••••••••••',
sha256: '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••'
},
loading: false,
hashes: null,
visible: false,
get title() {
return this.filePath.split('/').pop();
},
get loading() {
return this.hashes === null;
},
async show(filePath) {
this.filePath = filePath;
this.loading = true;
this.visible = true;
try {
@@ -28,12 +26,11 @@ export default () => ({
}
this.hashes = response.data.hashes;
this.loading = false;
},
hide() {
this.visible = false;
this.loading = false;
this.hashes = null;
this.error = null;
}
});

4
app/views/components/file-info-modal.twig
View File

@@ -1,8 +1,8 @@
<div class="fixed inset-0 flex justify-center items-center bg-gray-800 bg-opacity-50 p-4 z-50 dark:bg-gray-600 dark:bg-opacity-50"
x-data="file-info-modal" x-show="visible" @click.self="hide()" @keyup.escape.window="hide()"
@show-file-info.window="show($event.detail.file)" x-transition.opacity x-cloak
@show-file-info.window="show($event.detail.file)" x-transition:enter.opacity x-cloak
>
<div x-show="!loading" x-transition @click.away="hide()" class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white">
<div x-show="!loading" x-transition:enter @click.away="hide()" class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white">
<header class="flex justify-between items-center bg-blue-600 p-4 dark:bg-purple-700">
<i class="fas fa-info-circle fa-lg text-white"></i>