Changeset 35899

Timestamp:

2022-01-07T14:51:11+13:00 (2 years ago)

Author:

cstephen

Message:

Allow uploaded files to be removed before transcribing

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• components/AudioUpload.vue (modified) (5 diffs)
• styles/_material.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue

@@ -56 +56 @@
             this.$refs.audioFileInput.click();
         },
+        /**
+         * Invoked when a drop event occurs on the file upload panel.
+         * @param {DragEvent} ev The drop event.
+         */
         onFilesDropped(ev) {
             ev.preventDefault();
@@ -72 +76 @@
                 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);
         },
         onFilesChanged() {
@@ -171 +184 @@
             <div class="text-input-sl" style="cursor: pointer;"
                 @click="openFilePicker" @drop="onFilesDropped" @dragover="$event.preventDefault()">
-                <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
+                <span class="text-placeholder material-icons">&#xe226;</span> <!-- attach_file -->
                 <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</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>
 
@@ -204 +223 @@
 </template>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .audio-file-picker {
@@ -220 +238 @@
 }
 
+.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;
+    }
+}
+
 .input-bar {
     display: grid;

main/trunk/model-interfaces-dev/atea/korero-maori-asr/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);
+    }
 }