Changeset 35508

Timestamp:

2021-09-28T15:37:44+13:00 (3 years ago)

Author:

cstephen

Message:

Attempt to make WordTimingSelector reactive to size changes.
Restyle colors

Location:

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

Files:

• App.vue (modified) (1 diff)
• components/TranscriptionItemEditor.vue (modified) (1 diff)
• components/WordTimingSelector.vue (modified) (10 diffs)
• main.js (modified) (1 diff)
• styles/_material.scss (modified) (1 diff)
• styles/theme.scss (modified) (3 diffs)

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

@@ -1 +1 @@
 <template>
-    <div class="app-bar theme-primary-l1">
+    <div class="app-bar theme-primary">
         <div class="app-bar-content">
             <span class="heading1">{{ translations.get("Title") }}</span>
 
-            <a class="btn-primary theme-accent" href="https://koreromaori.io" target="_blank">
+            <a class="btn-primary theme-primary-l1" 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">
+            <toggle-button class="theme-primary-l1" v-model="showInfo" :reverseState="true">
                 <span class="material-icons mdi-l">info</span>
             </toggle-button>

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

@@ -10 +10 @@
         </ul>
 
-        <ul class="list-view" v-if="enableEditing">
+        <ul class="list-view" v-else>
             <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"
+                <input :size="word.word.length" :ref="word.id"
                     class="editor-word" v-model="word.word" type="text" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }"
                     @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />

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

@@ -3 +3 @@
     <span>{{ minTimeString }}</span>
 
-    <div class="words-container" ref="wordsContainer">
+    <div class="words-container" v-width="onWordsContainerWidthChanged">
         <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }"
             :class="{ 'hoisted': shouldHoist(word) }">
@@ -112 +112 @@
             mySurroundingWords: [],
             canShiftMinValue: false,
-            canShiftMaxValue: false
+            canShiftMaxValue: false,
+            wordsContainerWidth: 0
         }
     },
@@ -118 +119 @@
     computed: {
         myWord() {
-            console.log("updated");
-            return this.convertWord(this.word);
+            return this.mySurroundingWords[this.wordIndex];
         },
         minTimeString() {
@@ -136 +136 @@
         },
         leftHandleLeft() {
-            return `calc(${this.getWord().left}px - 1em)`;
+            return `calc(${this.myWord.left}px - 1em)`;
         },
         rightHandleLeft() {
-            return `calc(${this.getWord().left}px + ${this.getWord().length}px)`;
+            return `calc(${this.myWord.left}px + ${this.myWord.length}px)`;
         },
         wordIndex() {
@@ -146 +146 @@
         audioSnippetLength() {
             return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
-        },
-        /**
-         * Gets the amount of pixel space in which words can be position on-screen.
-         */
-        wordSpacePx() {
-            if (!this.isMounted) {
-                return 0;
-            }
-            else {
-                return this.$refs.wordsContainer.offsetWidth;
-            }
         },
         /**
@@ -163 +152 @@
          */
         scalingFactor() {
-            return this.wordSpacePx / this.audioSnippetLength;
+            return this.wordsContainerWidth / this.audioSnippetLength;
         },
         /**
@@ -179 +168 @@
     },
     methods: {
+        onWordsContainerWidthChanged(newValue) {
+            this.wordsContainerWidth = newValue;
+        },
         convertSurroundingWords() {
             const myWords = [];
@@ -200 +192 @@
         shouldHoist(word) {
             return word.startTime === this.word.startTime && word.word === this.word.word;
-        },
-        getWord() {
-            return this.mySurroundingWords[this.wordIndex];
         },
         /**
@@ -212 +201 @@
             }
 
-            const word = this.getWord();
+            const word = this.myWord;
 
             if (event.movementX < 0 && word.left + event.movementX < 0) {
@@ -230 +219 @@
             }
 
-            const word = this.getWord();
+            const word = this.myWord;
 
             const lastWord = this.mySurroundingWords[this.mySurroundingWords.length - 1];

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

@@ -128 +128 @@
 AudioPlayback.initialise(store);
 
-createApp(App)
-    .use(store)
+const app = createApp(App);
+
+app.use(store)
     .component("ToggleButton", ToggleButton)
+    .directive("width", {
+        mounted(el, binding) {
+            binding.value(el.offsetWidth);
+
+            window.addEventListener("resize", function() {
+                binding.value(el.offsetWidth);
+            });
+        }
+    })
     .mount("#app");
 

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

@@ -19 +19 @@
     // For the paper style, but more generally the neutral background color
     --paper-color: #FCFCFC;
+
+    --body-font-family: Arial, sans-serif;
     
     --primary-box-shadow: 0 2px 4px 0 #505050;

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@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
@@ -27 +27 @@
     --primary-box-shadow: 0 2px 4px 0 #524545;
     --primary-box-shadow-thin: 0 1px 3px 0 #685757;
+
+    --hover-brightness: 110%;
+
+    --body-font-family: Arial, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
 }
 
@@ -32 +36 @@
     background-color: var(--page-bg-color);
     color: var(--body-color);
-    font-family: 'Roboto', sans-serif;
+    font-family: var(--body-font-family);
     
     margin: 0;