Changeset 35405 for main/trunk
- Timestamp:
- 2021-09-15T14:26:48+12:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue
r35404 r35405 4 4 <div class="transcription__header"> 5 5 <button class="btn-fab" v-on:click="playAudio(0)" type="button"> 6 <span class="material-icons ">play_arrow</span>6 <span class="material-icons mdi-l">play_arrow</span> 7 7 </button> 8 8 -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35403 r35405 2 2 <div> 3 3 <div class="editor-controls"> 4 <label for="displayMode">{{ translations.get("TranscriptionItemEditor_SetDisplayMode") }}:</label> 5 <select id="displayMode" v-model="displayMode"> 6 <option value="words">{{ translations.get("TranscriptionItemEditor_DisplayMode_Words") }}</option> 7 <option value="editor">{{ translations.get("TranscriptionItemEditor_DisplayMode_Editor") }}</option> 8 </select> 9 10 <!-- <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> --> 4 <button class="btn-toggle" @click="enableEditing = enableEditing == null ? true : null" :toggled="enableEditing"> 5 <span class="material-icons .mdi-m">edit</span> 6 </button> 11 7 </div> 12 8 13 <div class="text-container words-container" :hidden=" displayMode == 'editor'">14 <ul class="list-view" v-if=" displayMode == 'words'">9 <div class="text-container words-container" :hidden="enableEditing"> 10 <ul class="list-view" v-if="!enableEditing"> 15 11 <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)"> 16 12 <span class="word-highlight word" :class="{ 'word-highlight-applied': word.shouldHighlight }"> … … 20 16 </ul> 21 17 22 <ul class="list-view" v-if=" displayMode == 'editor'">18 <ul class="list-view" v-if="enableEditing"> 23 19 <li v-for="(word, index) in words" :key="word.id" class="word-container"> 24 20 <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id" … … 38 34 39 35 .editor-controls { 40 display: grid; 41 grid-template-columns: auto auto auto 1fr; 42 gap: 0 1em; 36 display: flex; 43 37 align-items: center; 38 justify-content: flex-end; 39 margin: 0.5em 0 0.3em 0; 40 gap: 0.3em; 44 41 } 45 42 … … 117 114 data() { 118 115 return { 119 displayMode: "words",116 enableEditing: false, 120 117 words: [], 121 118 lastHighlightedWord: 0 -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
r35399 r35405 108 108 @extend .btn-primary; 109 109 110 font-size: 48px;111 110 border-radius: 50%; 112 111 padding: 0.2em; … … 114 113 .material-icons { 115 114 margin-right: 0em; 115 } 116 } 117 118 .btn-toggle { 119 @extend .btn-fab; 120 color: var(--primary-bg-color); 121 background-color: var(--paper-color); 122 border: 2px solid var(--primary-bg-color); 123 box-shadow: var(--primary-box-shadow-thin); 124 125 &[toggled] { 126 color: var(--primary-fg-color); 127 background-color: var(--primary-bg-color); 116 128 } 117 129 } … … 202 214 display: inline-block; 203 215 position: relative; 204 margin: 1em;216 margin: 6px; 205 217 background-color: #c7c7c7; 206 218 transition-duration: var(--transition-duration);
Note:
See TracChangeset
for help on using the changeset viewer.