Changeset 35715

Timestamp:

2021-11-01T21:09:21+13:00 (2 years ago)

Author:

cstephen

Message:

Add support for basic direct input macronisation

Location:

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

Files:

• App.vue (modified) (2 diffs)
• components/AudioUpload.vue (modified) (1 diff)
• styles/_material.scss (modified) (3 diffs)

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

@@ -8 +8 @@
                 <u>Ngā Pae o te Māramatanga (Replace with image)</u>
             </a>
-
-            <toggle-button class="theme-primary-l1" v-model="showInfo" :reverseState="true">
-                <span class="material-icons mdi-l">info</span>
-            </toggle-button>
         </div>
-
-        <div v-if="showInfo" class="paper" v-html="translations.get('Description')" />
     </div>
 
     <div class="paper content">
-        <AudioUpload />
+        <DirectInput />
     </div>
 
@@ -64 +58 @@
 }
 
-.transcription-list-item {
-    transition: all 0.8s ease;
-    margin-bottom: 1em;
+// .transcription-list-item {
+//     transition: all 0.8s ease;
+//     margin-bottom: 1em;
 
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
+//     &:last-child {
+//         margin-bottom: 0;
+//     }
+// }
 
-.transcription-list-leave-to {
-    opacity: 0;
-}
+// .transcription-list-leave-to {
+//     opacity: 0;
+// }
 
-.transcription-list-leave-active {
-  position: absolute;
-}
+// .transcription-list-leave-active {
+//     position: absolute;
+// }
 </style>
 
 <script>
 import { mapState } from "vuex";
-import AudioUpload from "./components/AudioUpload.vue"
-import ToggleButton from "./components/ToggleButton.vue";
+import DirectInput from "./components/DirectInput.vue"
 
 export default {
     name: "App",
     components: {
-        AudioUpload,
-        ToggleButton
-    },
-    data() {
-        return {
-            showInfo: false
-        }
+        DirectInput
     },
     computed: mapState({

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

@@ -72 +72 @@
 <script>
 import { mapState } from "vuex";
-import TranscribeService from "../js/TranscribeModule";
+import TranscribeService from "../js/MacronRestorationModule";
 import Util, { log } from "../js/Util";
 import { TranscriptionViewModel } from "../main"

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

@@ -108 +108 @@
 .text-container {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
 
@@ -128 +128 @@
 
     border-radius: var(--border-radius) var(--border-radius) 0 0;
+    border: none;
     border-bottom: 1px solid #AAA;
+    outline: none;
     cursor: text;
 
+    font-family: var(--body-font-family);
+    font-size: 1em;
+
     transition-duration: var(--transition-duration);
 
@@ -137 +142 @@
     }
 
-    &:active, &:focus {
-        border-bottom: 1px solid var(--bg-color);
+    &:active, &:focus, &:focus-visible {
+        background-color: #CDCDCD;
+        border-bottom: 2px solid var(--bg-color);
         
         .text-input-active {