Changeset 35399 for main

Timestamp:

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

Author:

cstephen

Message:

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

Location:

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

Files:

• public/resources (added)
• src/components/TranscriptionItem.vue (modified) (4 diffs)
• src/main.js (modified) (1 diff)
• src/styles/_material.scss (modified) (4 diffs)
• src/styles/theme.scss (modified) (1 diff)

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
         }
     },

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

@@ -82 +82 @@
 /* eslint-enable no-undef */
 else {
-    fetch("interface_atea.properties")
+    fetch("resources/interface_atea.properties")
         .then(async response => {
             const responseText = await response.text();

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -1 +1 @@
 ////
-/// Defines themes that mimic the material design specification
+/// Defines themes that mimic the material design specification.
 /// @author Carl Stephens
 ////
@@ -75 +75 @@
 /* Buttons */
 
-.btn-fab {
-    background-color: var(--primary-bg-color);
-    color: var(--primary-fg-color);
-    border: none;
-    box-shadow: var(--primary-box-shadow);
-    
-    font-size: 48px;
-    border-radius: 50%;
-    padding: 0.2em;
-    cursor: pointer;
-    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
-
-    transition-duration: var(--transition-duration);
-
-    &:hover {
-        filter: brightness(var(--hover-brightness));
-    }
-
-    &:disabled {
-        filter: grayscale(100%);
-    }
-}
-
 .btn-primary {
     display: flex;
@@ -121 +98 @@
     &:disabled {
         filter: grayscale(100%);
+    }
+
+    .material-icons {
+        margin-right: 0.3em;
+    }
+}
+
+.btn-fab {
+    @extend .btn-primary;
+    
+    font-size: 48px;
+    border-radius: 50%;
+    padding: 0.2em;
+
+    .material-icons {
+        margin-right: 0em;
     }
 }
@@ -235 +228 @@
 
         &::after {
-            transform: translatex(22px);
-            background: var(--primary-bg-color-l1);
+            transform: translatex(22px);    
+            background-color: var(--primary-bg-color-l1);
         }
     }

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss

@@ -1 +1 @@
 ////
-/// This file applies default themes.
+/// Applies default themes.
 ////