ui: replace upload box with new UI
This commit is contained in:
Torsten Dittmann
parent
e91a6392dd
commit
d84f876aae
|
|
@ -222,22 +222,49 @@
|
|||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
id="upload-modal" style="position: fixed; right:0; bottom: 0; background: white;z-index: 9999;">
|
||||
<template x-data x-if="$store.uploader.files.length > 0">
|
||||
<template x-data x-for="file in $store.uploader.files" :key="file.id">
|
||||
<p>
|
||||
<span x-text="file.progress"></span>
|
||||
<span x-text="file.name"></span>
|
||||
<button @click="$store.uploader.removeFile(file.id)">X</button>
|
||||
</p>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<section class="upload-box" x-data>
|
||||
<div class="upload-box-header">
|
||||
<h4 class="upload-box-title">
|
||||
<span class="text">Uploading files</span>
|
||||
<span class="amount" x-text="$store.uploader.files.length"></span>
|
||||
</h4>
|
||||
<button class="icon-button" :class="$store.uploader.isOpen ? '' : 'is-open'" aria-label="toggle upload box" @click="$store.uploader.toggle()"><span class="icon-down-open" aria-hidden="true"></span></button>
|
||||
<button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<div class="upload-box-content" :class="$store.uploader.isOpen ? 'is-open' : ''">
|
||||
<ul class="upload-box-list">
|
||||
<template x-if="$store.uploader.files.length > 0">
|
||||
<template x-for="file in $store.uploader.files" :key="file.id">
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image u-margin-inline-end-16" :class="file.completed ? 'is-finished' : ''">
|
||||
<div class="progress"
|
||||
style="--progress-value:20"
|
||||
:style="'--progress-value:' + file.progress"
|
||||
:aria-valuenow="file.progress"
|
||||
role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name" x-text="file.name"></label>
|
||||
<button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
||||
<button x-show="!file.completed" class="icon-button" aria-label="Uploading" @click="$store.uploader.removeFile(file.id)"><span class="icon-cancel"></span></button>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('uploader', {
|
||||
files: [],
|
||||
isOpen: true,
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
addFile(file) {
|
||||
this.files.push(file);
|
||||
},
|
||||
|
|
@ -269,7 +296,7 @@
|
|||
completed: false,
|
||||
failed: false,
|
||||
});
|
||||
|
||||
|
||||
try {
|
||||
const response = await sdk.storage.createFile(
|
||||
formData.get('bucketId'),
|
||||
|
|
|
|||
|
|
@ -211,64 +211,3 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- for Torsten TEMP LOCATION-->
|
||||
<div class="pill">default</div>
|
||||
<div class="pill is-disabled">disabled</div>
|
||||
<div class="pill is-pending">pending</div>
|
||||
<section class="upload-box">
|
||||
<div class="upload-box-header">
|
||||
<h4 class="upload-box-title">
|
||||
<span class="text">Uploading files</span>
|
||||
<span class="amount">3</span>
|
||||
</h4>
|
||||
<button class="icon-button is-open" aria-label="toggle upload box"><span class="icon-down-open" aria-hidden="true"></span></button>
|
||||
<button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<div class="upload-box-content is-open">
|
||||
<ul class="upload-box-list">
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:20"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button" aria-label="Uploading"><span class="icon-cancel"></span></button>
|
||||
</li>
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:70"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button" aria-label="Uploading"><span class="icon-cancel"></span></button>
|
||||
</li>
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image is-finished u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:100"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
Loading…
Reference in a new issue