Changeset 35321 for main/trunk


Ignore:
Timestamp:
2021-08-25T12:37:35+12:00 (3 years ago)
Author:
cstephen
Message:

Continue attempts to implement word editing

Location:
main/trunk/model-interfaces-dev/atea
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-interfaces-dev/atea/js/asr/TranscribeModule.js

    r35301 r35321  
    206206    //         contentType: false,
    207207    //         processData: false,
    208     //         timeout: 60000 // TODO: Consider if we need a longer timeout.
     208    //         timeout: 60000
    209209    //     });
    210210    // }

  • main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

    r35305 r35321  
    215215            showCharDisplay: false,
    216216            enableTextEditing: false,
     217            displayMode: "words",
    217218            /** @type {{id: String, url: String} | null} Gets the ID of the transcription for which the audio is currently loaded */
    218219            currentlyLoadedAudio: null,
    … …  
    271272
    272273            return chars;
     274        },
     275        onEditorWordInput(event, word) {
     276            console.log(event);
     277            console.log(word);
    273278        }
    274279    },
    … …  
    380385        if (metadata.char == ' ')
    381386        {
    382             lastWord += "\u00A0";
    383387            words.push({ word: lastWord, startTime: currStartTime, endTime: metadata.start_time, shouldHighlight: false });
    384388
    … …  
    404408
    405409    return words;
    406     // console.log(this);
    407     // console.log(this.$refs);
    408     // let charsPerLine = Math.floor(this.$refs.wordListContainer.clientWidth / MONOSPACE_CHAR_SIZE);
    409 
    410     // return getWidthNormalisedLines(transcription.transcription, charsPerLine);
    411410}
    412411

  • main/trunk/model-interfaces-dev/atea/style/asr.scss

    r35305 r35321  
    1111}
    1212
     13@mixin transition-set {
     14    -webkit-transition-duration: var(--transition-duration);
     15    -moz-transition-duration: var(--transition-duration);
     16    transition-duration: var(--transition-duration);
     17}
     18
    1319/* === Start theme application === */
    1420
    … …  
    2733/* === End theme application === */
    2834
    29 .transform-slideout {
    30     -webkit-transition-duration: 0.4s;
    31     -moz-transition-duration: 0.4s;
    32     transition-duration: 0.4s;
    33 
    34     transform: translate(100%, 0);
     35.transform-rotate180 {
     36    --transition-duration: 0.4s;
     37    @include transition-set;
     38
     39    transform: rotate(180deg);
     40}
     41
     42.transform-slideout-up {
     43    --transition-duration: 0.4s;
     44    @include transition-set;
     45
     46    z-index: -1;
     47    transform: translate(0, -100%);
    3548    opacity: 0;
    3649}
    … …  
    8699
    87100.transcription__list {
    88     padding: 0;
    89101    list-style-type: none;
     102    margin-block: 0 0;
     103    padding-inline: 0 0;
    90104}
    91105
    … …  
    99113}
    100114
    101 .transcription__word-list {
    102     display: flex;
    103 
    104     padding-top: 1em;
    105 
    106     & .transcription__list {
    107         margin-left: 2em;
    108     }
    109 }
    110 
    111 .transcription__word-list__controls {
     115.transcription__details-container {
    112116    display: flex;
    113117    flex-direction: column;
    114     align-items: center;
     118
     119    padding-top: 1em;
     120
     121    & .transcription__details__word-list {
     122        list-style-type: none;
     123        margin-block: 0 0;
     124        padding-inline: 0 0;
     125    }
     126}
     127
     128.transcription__details__controls {
     129    display: grid;
     130    grid-template-columns: auto auto auto 1fr;
     131    gap: 0 1em;
     132    align-items: center;
     133}
     134
     135.transcription__word-highlight-applied {
     136    background-color: rgba(255, 255, 0, 0.4);
    115137}
    116138
    117139.transcription__word-highlight {
    118     background-color: rgba(255, 255, 0, 0.4);
     140    &:hover {
     141        @extend .transcription__word-highlight-applied;
     142    }
    119143}
    120144
    … …  
    122146    font: var(--monospace-font);
    123147    display: inline-block;
    124     margin-bottom: 1em;
    125 
    126     &:hover {
    127         @extend .transcription__word-highlight;
    128     }
     148    margin-top: 1em;
    129149}
    130150
    131151.transcription__word {
     152    @extend .transcription__word-highlight;
     153
    132154    font: var(--monospace-font);
    133155    display: inline;
    134156    background: transparent;
    135157    width: auto;
    136     border: none;
     158    border: 1px solid black;
     159    padding: 0;
    137160
    138161    &:disabled {
    139162        color: black;
     163        border: none;
    140164    }
    141165}

  • main/trunk/model-interfaces-dev/atea/style/material.scss

    r35305 r35321  
    137137    align-items: center;
    138138
    139     //line-height: 1.5em;
    140139    border-radius: var(--border-radius);
    141140    background: #DDD;
    … …  
    274273.body0 {
    275274    font-size: 18px;
     275    line-height: 24px;
    276276}
    277277

  • main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

    r35305 r35321  
    8383                    <li v-for="[id, failure] in failures">
    8484                        <xsl:attribute name="v-bind:class">
    85                             <xsl:text disable-output-escaping="yes">{ 'transform-slideout': failure.isDeleted }</xsl:text>
     85                            <xsl:text disable-output-escaping="yes">{ 'transform-slideout-up': failure.isDeleted }</xsl:text>
    8686                        </xsl:attribute>
    8787
    … …  
    101101                    <li v-for="[id, transcription] in transcriptions">
    102102                        <xsl:attribute name="v-bind:class">
    103                             <xsl:text disable-output-escaping="yes">{ 'transform-slideout': transcription.isDeleted }</xsl:text>
     103                            <xsl:text disable-output-escaping="yes">{ 'transform-slideout-up': transcription.isDeleted }</xsl:text>
    104104                        </xsl:attribute>
    105105
    … …  
    119119                            </div>
    120120
    121                             <div class="transcription__word-list" v-if="transcription.isExpanded">
    122                                 <div class="transcription__word-list__controls">
     121                            <div class="transcription__details-container" v-if="transcription.isExpanded">
     122                                <div class="transcription__details__controls">
    123123                                    <button class="btn-fab" v-on:click="playAudioFile(id, -1)" type="button">
    124124                                        <span class="material-icons">play_arrow</span>
    125125                                    </button>
    126126
    127                                     <input type="checkbox" v-model="showCharDisplay" title="Show characters" />
     127                                    <label for="displayMode">Display Mode:</label>
     128                                    <select id="displayMode" v-model="displayMode">
     129                                        <option value="words">Words</option>
     130                                        <option value="chars">Characters</option>
     131                                        <option value="editor">Editor</option>
     132                                    </select>
    128133
    129                                     <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" />
     134                                    <!-- <input type="checkbox" v-model="showCharDisplay" title="Show characters" />
     135
     136                                    <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> -->
    130137                                </div>
    131138                               
    132                                 <ul class="transcription__list">
    133                                     <li v-if="!showCharDisplay">
    134                                         <div v-for="word in transcription.words" class="transcription__word-container"
    135                                             v-on:click="playAudioFile(id, word.startTime)">
     139                                <ul class="transcription__details__word-list">
     140                                    <li v-if="displayMode == 'words'" v-for="word in transcription.words" class="transcription__word-container"
     141                                        v-on:click="playAudioFile(id, word.startTime)">
    136142                                            <xsl:attribute name="v-bind:class">
    137                                                 <xsl:text disable-output-escaping="yes">{ 'transcription__word-highlight': word.shouldHighlight }</xsl:text>
     143                                                <xsl:text disable-output-escaping="yes">{ 'transcription__word-highlight-applied': word.shouldHighlight }</xsl:text>
    138144                                            </xsl:attribute>
    139145
    140                                             <input type="text" v-bind:size="word.word.length - 1" v-model="word.word" class="transcription__word"
    141                                                 v-bind:disabled="!enableTextEditing" />
    142                                         </div>
     146                                            <span class="transcription__word-highlight">{{ word.word }}</span>
     147                                            <span>&#x00A0;</span> <!-- nbsp -->
    143148                                    </li>
    144                                     <li v-if="showCharDisplay">
    145                                         <span v-for="char in getChars(id)" class="transcription__word-container"
    146                                               v-on:click="playAudioFile(id, char.startTime)">
     149                                    <li v-if="displayMode == 'chars'" class="transcription__word-container" v-on:click="playAudioFile(id, char.startTime)"
     150                                        v-for="char in getChars(id)">
     151                                        <span class="transcription__word-highlight">
    147152                                            {{ char.char }}
    148153                                        </span>
     154                                    </li>
     155                                    <li v-if="displayMode == 'editor'" v-for="word in transcription.words" class="transcription__word-container">
     156                                        <!-- <span class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" contenteditable="true" v-text="word.word" /> -->
     157                                        <input type="text" v-bind:size="word.word.length == 1 ? 1 : word.word.length - 1" v-model="word.word"
     158                                            class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" />
     159                                        <span>&#x00A0;</span> <!-- nbsp -->
    149160                                    </li>
    150161                                </ul>
    … …  
    154165
    155166                            <button type="button" class="theme-flat" v-on:click="transcription.isExpanded = !transcription.isExpanded">
    156                                 <span class="material-icons" v-if="!transcription.isExpanded">expand_more</span>
    157                                 <span class="material-icons" v-if="transcription.isExpanded">expand_less</span>
     167                                <span class="material-icons">
     168                                    <xsl:attribute name="v-bind:class">
     169                                        <xsl:text disable-output-escaping="yes">{ 'transform-rotate180': transcription.isExpanded }</xsl:text>
     170                                    </xsl:attribute>
     171
     172                                    expand_more
     173                                </span>
    158174                                <span>Playback and Edit</span>
    159175                            </button>
Note: See TracChangeset for help on using the changeset viewer.