Changeset 35405

Timestamp:

2021-09-15T14:26:48+12:00 (3 years ago)

Author:

cstephen

Message:

Add toggle button to switch to edit mode

Location:

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

Files:

• components/TranscriptionItem.vue (modified) (1 diff)
• components/TranscriptionItemEditor.vue (modified) (4 diffs)
• styles/_material.scss (modified) (3 diffs)

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

@@ -4 +4 @@
         <div class="transcription__header">
             <button class="btn-fab" v-on:click="playAudio(0)" type="button">
-                <span class="material-icons">play_arrow</span>
+                <span class="material-icons mdi-l">play_arrow</span>
             </button>
 

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

@@ -2 +2 @@
     <div>
         <div class="editor-controls">
-            <label for="displayMode">{{ translations.get("TranscriptionItemEditor_SetDisplayMode") }}:</label>
-            <select id="displayMode" v-model="displayMode">
-                <option value="words">{{ translations.get("TranscriptionItemEditor_DisplayMode_Words") }}</option>
-                <option value="editor">{{ translations.get("TranscriptionItemEditor_DisplayMode_Editor") }}</option>
-            </select>
-
-            <!-- <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> -->
+            <button class="btn-toggle" @click="enableEditing = enableEditing == null ? true : null" :toggled="enableEditing">
+                <span class="material-icons .mdi-m">edit</span>
+            </button>
         </div>
 
-        <div class="text-container words-container" :hidden="displayMode == 'editor'">
-            <ul class="list-view" v-if="displayMode == 'words'">
+        <div class="text-container words-container" :hidden="enableEditing">
+            <ul class="list-view" v-if="!enableEditing">
                 <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)">
                         <span class="word-highlight word" :class="{ 'word-highlight-applied': word.shouldHighlight }">
@@ -20 +16 @@
             </ul>
 
-            <ul class="list-view" v-if="displayMode == 'editor'">
+            <ul class="list-view" v-if="enableEditing">
                 <li v-for="(word, index) in words" :key="word.id" class="word-container">
                     <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id"
@@ -38 +34 @@
 
 .editor-controls {
-    display: grid;
-    grid-template-columns: auto auto auto 1fr;
-    gap: 0 1em;
+    display: flex;
     align-items: center;
+    justify-content: flex-end;
+    margin: 0.5em 0 0.3em 0;
+    gap: 0.3em;
 }
 
@@ -117 +114 @@
     data() {
         return {
-            displayMode: "words",
+            enableEditing: false,
             words: [],
             lastHighlightedWord: 0

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

@@ -108 +108 @@
     @extend .btn-primary;
     
-    font-size: 48px;
     border-radius: 50%;
     padding: 0.2em;
@@ -114 +113 @@
     .material-icons {
         margin-right: 0em;
+    }
+}
+
+.btn-toggle {
+    @extend .btn-fab;
+    color: var(--primary-bg-color);
+    background-color: var(--paper-color);
+    border: 2px solid var(--primary-bg-color);
+    box-shadow: var(--primary-box-shadow-thin);
+
+    &[toggled] {
+        color: var(--primary-fg-color);
+        background-color: var(--primary-bg-color);
     }
 }
@@ -202 +214 @@
     display: inline-block;
     position: relative;
-    margin: 1em;
+    margin: 6px;
     background-color: #c7c7c7;
     transition-duration: var(--transition-duration);