From d84f876aae2a96055a7d18100a82c7867bb319c0 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 14 Feb 2022 19:18:01 +0100
Subject: [PATCH] ui: replace upload box with new UI

---
 app/views/console/comps/header.phtml  | 53 +++++++++++++++++------
 app/views/console/storage/index.phtml | 61 ---------------------------
 2 files changed, 40 insertions(+), 74 deletions(-)

diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index d367574ea0..88d0162152 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -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'),
diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 9de195d639..654b9318ab 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -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>
\ No newline at end of file