Changeset 35491
- Timestamp:
- 2021-09-27T14:08:38+13:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/.eslintrc.js
r35355 r35491 12 12 }, 13 13 rules: { 14 "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",15 14 "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 16 15 "space-before-function-paren": "off", -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue
r35486 r35491 4 4 5 5 <div class="words-container" ref="wordsContainer"> 6 <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: word.left, width: word.length}"7 :class=" [ shouldHoist(word) ? 'hoisted' : 'surround-word' ]">6 <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }" 7 :class="{ 'hoisted': shouldHoist(word) }"> 8 8 <span>{{ word.word }}</span> 9 9 </div> 10 11 <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }" 12 @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true"> 13 first_page 14 </span> 15 <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }" @mousemove="onMaxHandleMouseMove">last_page</span> 10 16 </div> 11 17 … … 17 23 .word-timing-selector-root { 18 24 display: flex; 19 align-items: center;25 align-items: flex-end; 20 26 justify-content: center; 21 27 gap: 1em; … … 42 48 } 43 49 44 .surround-word { 45 top: 50%; 50 .word-handle { 51 @extend .theme-flat; 52 53 position: absolute; 54 top: -105%; 55 56 color: var(--fg-color); 57 cursor: pointer; 58 user-select: none; 59 60 animation: pulse 0.8s linear 0s infinite alternate; 61 } 62 63 @keyframes pulse { 64 from { 65 opacity: 1; 66 } 67 to { 68 opacity: 0.2; 69 } 46 70 } 47 71 48 72 .hoisted { 49 top: - 50%;73 top: -100%; 50 74 background-color: var(--highlighted-word-bg); 51 75 } … … 61 85 this.startTime = startTime; 62 86 this.endTime = endTime; 63 this.left = `${left}px`;64 this.length = `${length}px`;87 this.left = left; 88 this.length = length; 65 89 } 66 90 } … … 77 101 return { 78 102 isMounted: false, 79 mySurroundingWords: [] 80 } 81 }, 82 emits: [ "update:word", "update:word" ], 103 /** @type {Array<Word>} */ 104 mySurroundingWords: [], 105 canShiftMinValue: false, 106 canShiftMaxValue: false 107 } 108 }, 109 emits: [ "update:word" ], 83 110 computed: { 84 111 minTime() { … … 95 122 96 123 return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2); 124 }, 125 leftHandleLeft() { 126 return `calc(${this.getWord().left}px - 1em)`; 127 }, 128 rightHandleLeft() { 129 return `calc(${this.getWord().left}px + ${this.getWord().length}px)`; 130 }, 131 wordIndex() { 132 return this.surroundingWords.indexOf(this.word); 97 133 } 98 134 }, … … 127 163 } 128 164 129 // myWords.splice(this.surroundingWords.indexOf(this.word), 1);130 165 this.mySurroundingWords = myWords; 131 166 }, 132 167 shouldHoist(word) { 133 168 return word.startTime === this.word.startTime && word.word === this.word.word; 169 }, 170 getWord() { 171 return this.mySurroundingWords[this.wordIndex]; 172 }, 173 /** 174 * @param {MouseEvent} event 175 */ 176 onMinHandleMouseMove(event) { 177 if (event.buttons < 1) { 178 return; 179 } 180 181 const word = this.getWord(); 182 word.left += event.movementX; 183 word.length -= event.movementX; 184 }, 185 onMaxHandleMouseMove(event) { 186 if (event.buttons < 1) { 187 return; 188 } 189 190 const word = this.getWord(); 191 word.length += event.movementX; 192 }, 193 onHandleMouseUp() { 194 this.canShiftMinValue = false; 195 this.canShiftMaxValue = false; 134 196 } 135 197 }, -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
r35454 r35491 333 333 border-radius: 50%; 334 334 335 animation: 1.5s linear 0s infinite running rotate360;335 animation: rotate360 1.5s linear 0s infinite running; 336 336 } 337 337 … … 429 429 --bg-color-raw: var(--primary-bg-color); 430 430 --fg-color: rgb(var(--primary-fg-color)); 431 --fg-color-faw: var(--primary-fg-color); 431 432 } 432 433 … … 435 436 --bg-color-raw: var(--primary-bg-color-l1); 436 437 --fg-color: rgb(var(--primary-fg-color)); 438 --fg-color-raw: var(--primary-fg-color); 437 439 } 438 440 … … 446 448 --bg-color-raw: transparent; 447 449 --fg-color: rgb(var(--primary-bg-color)); 450 --fg-color-raw: var(--primary-bg-color); 448 451 449 452 box-shadow: none; … … 458 461 --bg-color-raw: var(--accent-bg-color); 459 462 --fg-color: rgb(var(--accent-fg-color)); 463 --fg-color-raw: var(--accent-fg-color); 460 464 } 461 465
Note:
See TracChangeset
for help on using the changeset viewer.