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

UI improvements

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

Legend:

Unmodified
Added
Removed

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

    r35265 r35267  
    88* The name of the file input that audio files can be uploaded to.
    99*/
    10 const FILE_UPLOAD_INPUT_NAME = "#fileUpload";
     10const FILE_UPLOAD_INPUT_NAME = "#audioFileUpload";
    1111
    1212/**
    … …  
    126126    const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true);
    127127
     128    const textElement = clone.querySelector(".transcription__text");
     129    textElement.textContent = transcription.transcription;
    128130    const fileNameElement = clone.querySelector(".transcription__file-name");
    129131    fileNameElement.textContent = transcription.file_name;
    … …  
    275277{
    276278    if (e.target.files.length <= 0) {
    277         $("#btnFileUpload").prop("disabled", true);
     279        $("#btnBeginTranscription").prop("disabled", true);
    278280    }
    279281    else {
    280         $("#btnFileUpload").prop("disabled", false);
     282        $("#btnBeginTranscription").prop("disabled", false);
    281283    }
    282284});

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

    r35265 r35267  
     1@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
     2
     3/* === Start theme definitions === */
     4
    15:root {
    2     --primary-bg-color: #21bbc0;
    3     --primary-bg-shadow-color: #0a2e4d;
    4     --primary-bg-shadow-blur: 2px;
    5     --primary-bg-shadow-active-blur: 4px;
    6 
    7     --primary-fg-color: black;
    8 
    9     --error-bg-color: #fa5757;
     6    --primary-bg-color: #2191c0;
     7    --primary-bg-color-d1: #2785ad;
     8    --primary-bg-color-d2: #227497;
     9    --primary-box-shadow: 0px 2px 4px 0px #505050;
     10
     11    --primary-fg-color: white;
     12
     13    --error-bg-color: #ff4242;
    1014    --error-fg-color: black;
    11     --error-shadow-color: #331212;
    1215
    1316    --paper-color: #FCFCFC;
    14     --paper-shadow-color: #444;
    15 }
    16 
    17 body {
    18     background-color: var(--paper-color);
    19 }
    20 
    21 #gs_content {
    22     padding: 0;
    23     background-color: var(--paper-color);
    24 }
    25 
    26 #gs_banner {
    27     margin-bottom: 1em;
    28     border-radius: 0 0 0.5em 0.5em;
    2917}
    3018
    … …  
    3220    background-color: var(--paper-color);
    3321    padding: 1em;
    34     border-radius: 0.5em;
    35     box-shadow: 0 0 6px 0 var(--paper-shadow-color);
    36 }
    37 
    38 .paper-inset {
    39     background-color: var(--paper-color);
    40     padding: 1em;
    41     border-radius: 0.5em;
    42     box-shadow: 0 0 3px 0 var(--paper-shadow-color) inset;
     22    border-radius: 0.3em;
     23    box-shadow: var(--primary-box-shadow);
    4324}
    4425
    … …  
    4627    margin: 1em 2em;
    4728    height: 1px;
    48     background-color: #AAA;
     29    background-color: #0000001F;
    4930    border: none;
    5031}
    … …  
    5637    color: var(--primary-fg-color);
    5738    border: none;
    58     box-shadow: 0 0 var(--primary-bg-shadow-blur) 0 var(--primary-bg-shadow-color);
     39    box-shadow: var(--primary-box-shadow);
    5940   
    6041    font-size: 48px;
    … …  
    6243    padding: 0.2em;
    6344    cursor: pointer;
     45    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
    6446
    6547    -webkit-transition-duration: 0.2s;
    … …  
    6850
    6951.btn-fab:hover {
    70     box-shadow: 0 0 var(--primary-bg-shadow-active-blur) 0 var(--primary-bg-shadow-color);
    71 }
    72 
    73 .btn-fab-small {
     52    filter: brightness(92%);
     53}
     54
     55.btn-fab:disabled {
     56    filter: grayscale(100%);
     57}
     58
     59.btn-primary {
     60    background-color: var(--primary-bg-color);
     61    color: var(--primary-fg-color);
     62    border: none;
     63    box-shadow: var(--primary-box-shadow);
     64
     65    border-radius: 0.3em;
     66    padding: 0.5em;
     67    cursor: pointer;
     68    font-family: 'Roboto', sans-serif;
     69    font-size: 16px;
     70    text-align: center;
     71    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
     72
     73    -webkit-transition-duration: 0.2s;
     74    transition-duration: 0.2s;
     75}
     76
     77.btn-primary span {
     78    text-align: center;
     79    vertical-align: middle;
     80}
     81
     82.btn-primary:hover {
     83    filter: brightness(92%);
     84}
     85
     86.btn-primary:disabled {
     87    filter: grayscale(100%);
     88}
     89
     90.color-primary {
     91    background-color: var(--primary-bg-color);
     92    color: var(--primary-fg-color);
     93}
     94
     95.color-error {
     96    background-color: var(--error-bg-color);
     97    color: var(--error-fg-color);
     98}
     99
     100.color-flat {
     101    background-color: transparent;
     102    color: #222;
     103    box-shadow: none;
     104}
     105
     106.color-flat:hover {
     107    background-color: #EEE;
     108}
     109
     110.mdi-s {
     111    font-size: 18px;
     112}
     113
     114.mdi-m {
    74115    font-size: 24px;
     116}
     117
     118.mdi-l {
     119    font-size: 36px;
     120}
     121
     122.mdi-xl {
     123    font-size: 48px;
     124}
     125
     126.body1 {
     127    font-size: 16px;
     128}
     129
     130.body2 {
     131    font-size: 14px;
     132}
     133
     134.heading1 {
     135    font-size: 48px;
     136}
     137
     138/* === End theme definitions === */
     139
     140body {
     141    background-color: var(--paper-color);
     142    font-family: 'Roboto', sans-serif;
     143    font-size: 16px;
     144}
     145
     146#gs_content {
     147    padding: 0;
     148    background-color: var(--paper-color);
     149}
     150
     151#gs_banner {
     152    margin-bottom: 1em;
     153    border-radius: 0 0 0.3em 0.3em;
     154}
     155
     156#audio-transcription-container {
     157    margin-top: 2em;
    75158}
    76159
    77160.asr-hidden {
    78161    display: none;
     162}
     163
     164#btnBeginTranscription {
     165    float: right;
    79166}
    80167
    … …  
    103190
    104191.transcription__file-name {
    105     margin: 0;
    106192    margin: 0 1em 0 1em;
    107     font-weight: bold;
    108193}
    109194
    110195.transcription__remove-button {
    111     --primary-bg-color: var(--error-bg-color);
    112     --primary-fg-color: var(--error-fg-color);
    113     --primary-bg-shadow-color: var(--error-shadow-color);
    114 
    115196    order: 100;
    116197}

  • 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.