Changeset 35431

Timestamp:

2021-09-20T14:23:43+12:00 (3 years ago)

Author:

cstephen

Message:

Add app bar and basic information

Location:

main/trunk/model-interfaces-dev/atea

Files:

• korero-maori-asr/src/App.vue (modified) (5 diffs)
• korero-maori-asr/src/components/ToggleButton.vue (modified) (2 diffs)
• korero-maori-asr/src/components/TranscriptionItem.vue (modified) (1 diff)
• korero-maori-asr/src/styles/_material.scss (modified) (8 diffs)
• korero-maori-asr/src/styles/theme.scss (modified) (3 diffs)
• resources/interface_atea.properties (modified) (1 diff)
• resources/interface_atea_mi.properties (modified) (1 diff)
• transform/pages/korero-maori-asr.xsl (modified) (2 diffs)

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

@@ -3 +3 @@
     <span class="monospace-font-sizer">ngā tama a rangi</span>
 
-    <div class="paper">
+    <div class="app-bar">
+        <div class="app-bar-content">
+            <span class="heading1">{{ translations.get("Title") }}</span>
+
+            <a class="btn-primary theme-accent" href="https://koreromaori.io" target="_blank">
+                <span class="material-icons mdi-m">open_in_new</span>
+                <u>koreromaori.io</u>
+            </a>
+
+            <toggle-button class="theme-accent" v-model="showInfo" :reverseState="true">
+                <span class="material-icons mdi-l">info</span>
+            </toggle-button>
+        </div>
+
+        <div v-if="showInfo" class="card border-accent">
+            A tool to transcribe audio recordings of spoken Māori. Basic support for editing the transcriptions is provided,
+            and they can be downloaded in multiple formats.
+            <br />
+            The actual transcriptions are produced with gratitude by using <a href="https://koreromaori.io">koreromaori.io's</a> service.
+        </div>
+    </div>
+
+    <div class="paper content">
         <AudioUpload />
     </div>
 
-    <ul id="transcription-list" class="list-view">
+    <ul id="transcription-list" class="list-view content">
         <transition-group name="transcription-list">
             <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
@@ -28 +50 @@
 }
 
+.app-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
+    color: var(--primary-fg-color);
+    background-color: var(--primary-bg-color-l1);
+    box-shadow: 0px 0px 4px 3px #6d6d6d;
+
+    padding: 1em;
+    margin-bottom: 1em;
+}
+
+.app-bar-content {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    width: 100%;
+
+    & :first-child {
+        flex-grow: 1;
+    }
+}
+
+.content {
+    margin: 1em;
+}
+
 .transcription-list-item {
     transition: all 0.8s ease;
@@ -45 +96 @@
 import { mapState } from "vuex";
 import AudioUpload from "./components/AudioUpload.vue"
+import ToggleButton from "./components/ToggleButton.vue";
 import TranscriptionItem from "./components/TranscriptionItem.vue"
 
@@ -51 +103 @@
     components: {
         AudioUpload,
-        TranscriptionItem
+        TranscriptionItem,
+        ToggleButton
     },
     data() {
@@ -57 +110 @@
             /** @type {{id: String, url: String} | null} */
             currentlyLoadedAudio: null,
-            player: new Audio()
+            player: new Audio(),
+            showInfo: false
         }
     },

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

@@ -1 +1 @@
 <template>
-<button class="base" @click="toggle" :class="{ 'toggled': modelValue }">
+<button class="base" @click="toggle" :class="{ 'toggled': myValue }" type="button">
     <slot />
 </button>
@@ -24 +24 @@
     name: "ToggleButton",
     props: {
-        modelValue: Boolean
+        modelValue: Boolean,
+        reverseState: Boolean
     },
     emits: [ "update:modelValue" ],
+    computed: {
+        myValue: {
+            get() {
+                return this.reverseState ? !this.modelValue : this.modelValue;
+            },
+            set(newValue) {
+                this.$emit("update:modelValue", this.reverseState ? !newValue : newValue);
+            }
+        }
+    },
     methods: {
         toggle() {
-            this.$emit("update:modelValue", !this.modelValue);
+            this.myValue = !this.myValue;
         }
     }

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

@@ -3 +3 @@
         <!-- Header containing info and actions for the transcription -->
         <div class="transcription__header">
-            <button class="btn-fab" v-on:click="playAudio" type="button">
+            <button class="btn-fab" v-on:click="playAudio(0)" type="button">
                 <span class="material-icons mdi-l">play_arrow</span>
             </button>

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

@@ -9 +9 @@
 $primary-bg-color: #2191c0;
 
+$accent-bg-color: #19769e;//rgb(240, 176, 0);
+
 :root {
     --primary-bg-color-l1: #{$primary-bg-color-l1};
     --primary-bg-color: #{$primary-bg-color};
-
     --primary-fg-color: white;
 
+    --accent-bg-color: #{$accent-bg-color};
+    --accent-fg-color: white;//rgb(61, 61, 61);
+
+    --body-color: rgb(39, 39, 39);
+    
     --primary-box-shadow: 0px 2px 4px 0px #505050;
     --primary-box-shadow-thin: 0px 1px 3px 0px #747474;
@@ -20 +26 @@
 
     --paper-color: #FCFCFC;
-    --page-bg-color: #f7f4f0;
 
     --border-radius: 0.3em;
@@ -42 +47 @@
 }
 
+.theme-accent {
+    --primary-bg-color: var(--accent-bg-color);
+    --primary-fg-color: var(--accent-fg-color);
+}
+
+.border-accent {
+    border: 2px var(--accent-bg-color) solid;
+}
+
 /* === End theme definitions */
 
@@ -47 +61 @@
 
 .paper {
-    background-color: var(--paper-color);
     padding: 1.2em;
     border-radius: var(--border-radius);
+    
+    background-color: var(--paper-color);
+    color: var(--body-color);
     box-shadow: var(--primary-box-shadow);
 }
@@ -55 +71 @@
 .card {
     @extend .paper;
-    margin: 1em;
 
     box-shadow: var(--primary-box-shadow-thin);
@@ -89 +104 @@
     cursor: pointer;
     font-size: 16px;
+    text-decoration: none;
     margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
 
@@ -106 +122 @@
     
     border-radius: 50%;
-    padding: 0.2em;
+    padding: 0.3em;
 }
 
@@ -357 +373 @@
 
 .heading1 {
-    font-size: 48px;
+    font-size: 40px;
+    font-weight: 300;
 }
 

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

@@ -4 +4 @@
 
 @use "./_material.scss";
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;700&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
@@ -15 +15 @@
 :root {
     --monospace-font: 16px 'Roboto Mono', sans-serif;
+    --page-bg-color: #f7f4f0;
 }
 
@@ -21 +22 @@
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
+    
+    margin: 0;
+    padding: 0;
 
     -webkit-font-smoothing: antialiased;

main/trunk/model-interfaces-dev/atea/resources/interface_atea.properties

@@ +1 @@
+atea.Title=Korero Māori Transcription Interface
+
 atea.AudioUpload_SelectFileText=Select audio file/s...
 atea.AudioUpload_TranscribeFiles=Transcribe

main/trunk/model-interfaces-dev/atea/resources/interface_atea_mi.properties

@@ +1 @@
+atea.Title=Atanga Tuhituhi Korero Māori
+
 atea.AudioUpload_SelectFileText=Tohua he konae oro...
 atea.AudioUpload_TranscribeFiles=Tuhia

main/trunk/model-interfaces-dev/atea/transform/pages/korero-maori-asr.xsl

@@ -47 +47 @@
 
         <gsf:style>
+            .ui-widget-content a {
+                color: inherit;
+            }
+
             #container {
                 background-color: var(--page-bg-color);
@@ -62 +66 @@
             #topArea {
                 padding: 0.5em;
+                background-color: var(--primary-bg-color-l1);
+            }
+
+            .app-bar {
+                box-shadow: 0 3px 4px -3px #404040;
                 border-radius: 0 0 5px 5px;
-                margin-bottom: 2em;
-
-                background-color: var(--primary-bg-color);
-                box-shadow: var(--primary-box-shadow);
             }
         </gsf:style>