Changeset 35399 for main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

Timestamp:

2021-09-15T11:22:30+12:00 (3 years ago)

Author:

cstephen

Message:

Add prototype download popup.
FAB theme cleanup.
Link translations.

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue (modified) (4 diffs)

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

@@ -9 +9 @@
             <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
 
-            <button @click="downloadAsText" type="button">
-                <span class="material-icons">download</span>
-                <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
-            </button>
+            <div>
+                <button @click="showDownloadOptions = !showDownloadOptions" type="button">
+                    <span class="material-icons">download</span>
+                    <span>{{ translations.get("TranscriptionItem_Download") }}</span>
+                </button>
+
+                <div class="download-popup card" :style="showDownloadOptions === false ? 'display: none;' : 'display: flex;'">
+                    <button @click="downloadAsText" type="button" class="theme-flat">
+                        <span class="material-icons">text_snippet</span>
+                        <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
+                    </button>
+
+                    <button @click="downloadAsJson" type="button" class="theme-flat">
+                        <span class="material-icons">integration_instructions</span>
+                        <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
+                    </button>
+
+                    <button @click="downloadAsWebvtt" type="button" class="theme-flat">
+                        <span class="material-icons">subtitles</span>
+                        <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
+                    </button>
+                </div>
+            </div>
 
             <button class="theme-error" @click="remove" type="button">
@@ -24 +43 @@
         <hr />
 
-        <button type="button" class="theme-flat" @click="toggleEditor">
+        <button @click="toggleEditor" type="button" class="theme-flat">
             <span class="material-icons" :class="{ 'transform-rotate180': showEditor }">expand_more</span>
             <span>{{ translations.get("TranscriptionItem_ExpandEditor") }}</span>
@@ -47 +66 @@
     padding-top: 1em;
 }
+
+.download-popup {
+    display: flex;
+    flex-direction: column;
+
+    position: absolute;
+    top: 10px;
+    left: 10px;
+
+    padding: 2px;
+    margin: 0;
+}
 </style>
 
@@ -68 +99 @@
         return {
             isDeleted: false,
-            showEditor: false
+            showEditor: false,
+            showDownloadOptions: false
         }
     },