Changeset 35508 for main/trunk
- Timestamp:
- 2021-09-28T15:37:44+13:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue
r35454 r35508 1 1 <template> 2 <div class="app-bar theme-primary -l1">2 <div class="app-bar theme-primary"> 3 3 <div class="app-bar-content"> 4 4 <span class="heading1">{{ translations.get("Title") }}</span> 5 5 6 <a class="btn-primary theme- accent" href="https://koreromaori.io" target="_blank">6 <a class="btn-primary theme-primary-l1" href="https://koreromaori.io" target="_blank"> 7 7 <span class="material-icons mdi-m">open_in_new</span> 8 8 <u>koreromaori.io</u> 9 9 </a> 10 10 11 <toggle-button class="theme- accent" v-model="showInfo" :reverseState="true">11 <toggle-button class="theme-primary-l1" v-model="showInfo" :reverseState="true"> 12 12 <span class="material-icons mdi-l">info</span> 13 13 </toggle-button> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35506 r35508 10 10 </ul> 11 11 12 <ul class="list-view" v- if="enableEditing">12 <ul class="list-view" v-else> 13 13 <li v-for="(word, index) in words" :key="word.id" class="word-container"> 14 <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id"14 <input :size="word.word.length" :ref="word.id" 15 15 class="editor-word" v-model="word.word" type="text" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }" 16 16 @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
r35506 r35508 3 3 <span>{{ minTimeString }}</span> 4 4 5 <div class="words-container" ref="wordsContainer">5 <div class="words-container" v-width="onWordsContainerWidthChanged"> 6 6 <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }" 7 7 :class="{ 'hoisted': shouldHoist(word) }"> … … 112 112 mySurroundingWords: [], 113 113 canShiftMinValue: false, 114 canShiftMaxValue: false 114 canShiftMaxValue: false, 115 wordsContainerWidth: 0 115 116 } 116 117 }, … … 118 119 computed: { 119 120 myWord() { 120 console.log("updated"); 121 return this.convertWord(this.word); 121 return this.mySurroundingWords[this.wordIndex]; 122 122 }, 123 123 minTimeString() { … … 136 136 }, 137 137 leftHandleLeft() { 138 return `calc(${this. getWord().left}px - 1em)`;138 return `calc(${this.myWord.left}px - 1em)`; 139 139 }, 140 140 rightHandleLeft() { 141 return `calc(${this. getWord().left}px + ${this.getWord().length}px)`;141 return `calc(${this.myWord.left}px + ${this.myWord.length}px)`; 142 142 }, 143 143 wordIndex() { … … 146 146 audioSnippetLength() { 147 147 return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime; 148 },149 /**150 * Gets the amount of pixel space in which words can be position on-screen.151 */152 wordSpacePx() {153 if (!this.isMounted) {154 return 0;155 }156 else {157 return this.$refs.wordsContainer.offsetWidth;158 }159 148 }, 160 149 /** … … 163 152 */ 164 153 scalingFactor() { 165 return this.word SpacePx/ this.audioSnippetLength;154 return this.wordsContainerWidth / this.audioSnippetLength; 166 155 }, 167 156 /** … … 179 168 }, 180 169 methods: { 170 onWordsContainerWidthChanged(newValue) { 171 this.wordsContainerWidth = newValue; 172 }, 181 173 convertSurroundingWords() { 182 174 const myWords = []; … … 200 192 shouldHoist(word) { 201 193 return word.startTime === this.word.startTime && word.word === this.word.word; 202 },203 getWord() {204 return this.mySurroundingWords[this.wordIndex];205 194 }, 206 195 /** … … 212 201 } 213 202 214 const word = this. getWord();203 const word = this.myWord; 215 204 216 205 if (event.movementX < 0 && word.left + event.movementX < 0) { … … 230 219 } 231 220 232 const word = this. getWord();221 const word = this.myWord; 233 222 234 223 const lastWord = this.mySurroundingWords[this.mySurroundingWords.length - 1]; -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js
r35454 r35508 128 128 AudioPlayback.initialise(store); 129 129 130 createApp(App) 131 .use(store) 130 const app = createApp(App); 131 132 app.use(store) 132 133 .component("ToggleButton", ToggleButton) 134 .directive("width", { 135 mounted(el, binding) { 136 binding.value(el.offsetWidth); 137 138 window.addEventListener("resize", function() { 139 binding.value(el.offsetWidth); 140 }); 141 } 142 }) 133 143 .mount("#app"); 134 144 -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
r35505 r35508 19 19 // For the paper style, but more generally the neutral background color 20 20 --paper-color: #FCFCFC; 21 22 --body-font-family: Arial, sans-serif; 21 23 22 24 --primary-box-shadow: 0 2px 4px 0 #505050; -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss
r35505 r35508 4 4 5 5 @use "./_material.scss"; 6 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono& family=Roboto:wght@300;400;700&display=swap');6 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); 7 7 @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 8 8 … … 27 27 --primary-box-shadow: 0 2px 4px 0 #524545; 28 28 --primary-box-shadow-thin: 0 1px 3px 0 #685757; 29 30 --hover-brightness: 110%; 31 32 --body-font-family: Arial, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 29 33 } 30 34 … … 32 36 background-color: var(--page-bg-color); 33 37 color: var(--body-color); 34 font-family: 'Roboto', sans-serif;38 font-family: var(--body-font-family); 35 39 36 40 margin: 0;
Note:
See TracChangeset
for help on using the changeset viewer.