Ignore:
Timestamp:
2021-08-09T13:49:44+12:00 (3 years ago)
Author:
davidb
Message:

UI improvements

File:
1 edited

Legend:

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

    r35265 r35267  
    3333    <!-- the page content -->
    3434    <xsl:template match="/page">
    35         <xsl:call-template name="audio-upload"/>
     35        <xsl:call-template name="audio-transcription"/>
    3636    </xsl:template>
    3737   
    3838    <!-- Template for processing audio file uploads -->
    39     <xsl:template name="audio-upload">
     39    <xsl:template name="audio-transcription">
     40        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    4041        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
    41         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    4242
    43         <div class="paper">
    44             <div>
     43        <section id="audio-transcription-container" class="paper">
     44            <div class="paper-inset">
     45               
    4546                <form onSubmit="doAudioUpload(); return false;" enctype="multipart/form-data">
    46                     <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" />
    47                     <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button>
     47                    <button class="btn-primary" type="button" onclick="document.getElementById('audioFileUpload').click()">
     48                        <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
     49                        <span>Upload Audio Files</span>
     50                    </button>
     51
     52                    <input id="audioFileUpload" type="file" accept="audio/wav" multiple="multiple" />
     53                   
     54                    <button id="btnBeginTranscription" class="btn-primary" type="submit" disabled="disabled">
     55                        <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
     56                        <span>Transcribe</span>
     57                    </button>
    4858                </form>
     59
     60                <div id="prgFileUploadContainer" class="asr-hidden">
     61                    <label for="prgFileUpload">Processing:</label>
     62                    <progress id="prgFileUpload" />
     63                </div>
    4964            </div>
    5065   
    51             <div class="audio-slider__container">
    52                 <button type="button" class="btn-fab btn-fab-small">
    53                     <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
     66            <!-- <div class="audio-slider__container">
     67                <button type="button" class="btn-fab">
     68                    <span class="material-icons mdi-xl">&#xE037;</span>
    5469                </button>
    5570                <input type="range" min="0" value="0" class="audio-slider__range" />
    5671                <span class="audio-slider__value">1:23</span>
    57             </div>
     72            </div> -->
    5873   
    59             <div id="prgFileUploadContainer" class="asr-hidden">
    60                 <label for="prgFileUpload">Processing:</label>
    61                 <progress id="prgFileUpload" />
    62             </div>
    63    
     74            <!-- The list of each transcription -->
    6475            <div id="transcriptionsDisplayContainer">
     76
    6577                <audio id="transcriptionAudio">
    6678                    <source id="transcriptionAudioSource" />
     
    7183                <template id="transcriptionTemplate">
    7284                    <li class="transcription__container">
     85
    7386                        <div class="transcription__header">
    74                             <button class="btn-fab transcription__play-button" type="button">
     87                            <button class="color-flat btn-fab transcription__play-button" type="button">
    7588                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
    7689                            </button>
    77                             <button class="btn-fab transcription__remove-button" type="button">
     90                            <button class="color-error btn-fab transcription__remove-button" type="button">
    7891                                <span class="material-icons">&#xE872;</span> <!-- delete -->
    7992                            </button>
    80                             <p class="transcription__file-name"></p>   
     93                            <p class="transcription__text"></p>
     94                            <p class="body2 transcription__file-name">test</p>
    8195                        </div>
     96
    8297                        <details>
    8398                            <summary>Character Information</summary>
     
    89104                            </div>
    90105                        </details>
     106
    91107                        <hr class="divider" />
     108
    92109                    </li>
    93110                </template>
     
    128145                </template>
    129146            </div>
    130         </div>
     147        </section>
    131148       
    132149        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
Note: See TracChangeset for help on using the changeset viewer.