Changeset 35900 for main/trunk/model-interfaces-dev

Timestamp:

2022-01-07T15:04:19+13:00 (2 years ago)

Author:

cstephen

Message:

Allow removing files before macronisation

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• components/FileUpload.vue (modified) (3 diffs)
• styles/_material.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/FileUpload.vue

@@ -3 +3 @@
         <div class="input-bar">
             <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
-                <span class="text-placeholder material-icons" v-if="!anyFiles">attach_file</span>
+                <span class="text-placeholder material-icons">attach_file</span>
                 <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("FileUpload_SelectFiles") }}</span>
-                <span v-if="anyFiles">{{ getFileNameList }}</span>
+
+                <div class="uploaded-file-listing" v-for="(file, index) in files" :key="file.name">
+                    <span>{{ file.name }}</span>
+                    <button type="button" @click="onFileRemove($event, index)" class="btn-pin">
+                        <span class="material-icons mdi-s">close</span>
+                    </button>
+                </div>
             </div>
 
@@ -57 +63 @@
     gap: 0.5em;
     grid-template-columns: 1fr auto;
+}
+
+.uploaded-file-listing {
+    display: flex;
+    align-items: center;
+
+    padding: 3px;
+    gap: 5px;
+
+    border: 1px solid var(--bg-color);
+    border-radius: 3px;
+    border-left: 4px solid var(--bg-color);
+    background: rgba(var(--bg-color-raw), 0.1);
+
+    margin-right: 0.5em;
+    &:last-child {
+        margin-right: 0;
+    }
 }
 
@@ -135 +159 @@
             }
         },
+        /**
+         * Invoked when a drop event occurs on the file upload panel.
+         * @param {DragEvent} ev The drop event.
+         */
+        onFilesDropped(ev) {
+            ev.preventDefault();
+
+            if (ev.dataTransfer.items) {
+                for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+                    if (ev.dataTransfer.items[i].kind !== "file") {
+                        continue;
+                    }
+
+                    const file = ev.dataTransfer.items[i].getAsFile();
+                    this.files.push(file);
+                }
+            }
+            else {
+                this.files.push(ev.dataTransfer.files);
+            }
+        },
+        /**
+         * Invoked when the user clicks a button to remove a file.
+         * @param {MouseEvent} ev The mouse event.
+         * @param {Number} index The index of the file to remove.
+         */
+        onFileRemove(ev, index) {
+            ev.cancelBubble = true;
+            this.files.splice(index, 1);
+        },
 
         async doMacronisation() {

main/trunk/model-interfaces-dev/atea/macron-restoration/src/styles/_material.scss

@@ -131 +131 @@
     border-radius: 50%;
     padding: 0.3em;
+}
+
+.btn-pin {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 2px;
+    background: none;
+    border: none;
+    border-radius: 50%;
+
+    &:hover {
+        background-color: rgba(30, 30, 30, 0.15);
+    }
 }