Changeset 35412 for main

Timestamp:

2021-09-16T13:22:16+12:00 (3 years ago)

Author:

cstephen

Message:

Add ToggleButton component.
Improve button themes.

Location:

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

Files:

• components/ToggleButton.vue (added)
• components/TranscriptionItemEditor.vue (modified) (2 diffs)
• main.js (modified) (2 diffs)
• styles/_material.scss (modified) (4 diffs)
• styles/theme.scss (modified) (1 diff)

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

@@ -1 +1 @@
 <template>
-    <div>
-        <div class="editor-controls">
-            <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="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 }">
-                            {{ word.word }}
-                        </span>
-                </li>
-            </ul>
-
-            <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"
-                        class="editor-word" v-model="word.word" type="text"
-                        @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" />
-                    <span>&nbsp;</span>
-                </li>
-            </ul>
-        </div>
+<div>
+    <div class="editor-controls">
+        <input type="range" class="slider-continuous" />
+
+        <toggle-button v-model="enableEditing">
+            <span class="material-icons .mdi-m">edit</span>
+        </toggle-button>
     </div>
+
+    <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 }">
+                        {{ word.word }}
+                    </span>
+            </li>
+        </ul>
+
+        <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"
+                    class="editor-word" v-model="word.word" type="text"
+                    @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" />
+                <span>&nbsp;</span>
+            </li>
+        </ul>
+    </div>
+</div>
 </template>
 
@@ -34 +36 @@
 
 .editor-controls {
-    display: flex;
+    display: grid;
     align-items: center;
-    justify-content: flex-end;
+    grid-template-columns: 1fr auto;
     margin: 0.5em 0 0.3em 0;
-    gap: 0.3em;
+    gap: 1em;
 }
 

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

@@ -2 +2 @@
 import { createStore } from "vuex"
 import App from "./App.vue";
+import ToggleButton from "./components/ToggleButton.vue"
 import Util from "./js/Util"
 
@@ -102 +103 @@
 createApp(App)
     .use(store)
+    .component("ToggleButton", ToggleButton)
     .mount("#app");
 

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

@@ -99 +99 @@
         filter: grayscale(100%);
     }
-
-    .material-icons {
-        margin-right: 0.3em;
-    }
 }
 
@@ -110 +106 @@
     border-radius: 50%;
     padding: 0.2em;
-
-    .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);
-    }
 }
 
@@ -246 +225 @@
 }
 
+/* Sliders */
+
+@mixin slider-clear {
+    appearance: none;
+    width: 100%; // Required for firefox
+
+    &:focus {
+        outline: none;
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+    }
+
+    &::-moz-range-track {
+        outline: none;
+    }
+
+    &::-ms-track {
+        width: 100%;
+        background: transparent; 
+        border-color: transparent;
+        color: transparent;
+    }
+}
+
+@mixin slider-thumb {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+
+    background: var(--primary-bg-color);
+    box-shadow: var(--primary-box-shadow-thin);
+
+    &:hover {
+        filter: brightness(var(--hover-brightness));
+        }
+}
+
+.slider-continuous {
+    @include slider-clear();
+
+    margin: 0;
+    padding: 0;
+    height: 8px;
+    border-radius: 4px;
+    background: scale-color($primary-bg-color-l1, $alpha: -70%);
+
+    transition-duration: var(--transition-duration);
+
+    &::-webkit-slider-thumb {
+        @include slider-thumb()
+    }
+
+    &::-moz-range-thumb {
+        @include slider-thumb()
+    }
+
+    &::-ms-thumb {
+        @include slider-thumb()
+    }
+
+    &:hover {
+        background: scale-color($primary-bg-color-l1, $alpha: -60%);
+    }
+}
+
 /* List Views */
 
@@ -265 +312 @@
 /* === End component definitions === */
 
-/* Material Design Icon sizes */
-
-.mdi-s {
-    font-size: 18px;
-}
-
-.mdi-m {
-    font-size: 24px;
-}
-
-.mdi-l {
-    font-size: 36px;
-}
-
-.mdi-xl {
-    font-size: 48px;
-}
-
 /* Font sizes */
 

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

@@ -37 +37 @@
     @extend .switch;
 }
+
+.button-primary .material-icons {
+    margin-right: 0.3em;
+}
+
+.btn-fab .material-icons {
+    margin-right: 0em;
+}
+
+/* Material Design Icon sizes */
+
+.mdi-s {
+    font-size: 18px;
+}
+
+.mdi-m {
+    font-size: 24px;
+}
+
+.mdi-l {
+    font-size: 36px;
+}
+
+.mdi-xl {
+    font-size: 48px;
+}