Changeset 35429

Timestamp:

2021-09-20T10:43:51+12:00 (3 years ago)

Author:

cstephen

Message:

Remove default button theme

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• App.vue (modified) (1 diff)
• components/AudioUpload.vue (modified) (1 diff)
• components/TranscriptionItem.vue (modified) (6 diffs)
• styles/_material.scss (modified) (1 diff)
• styles/theme.scss (modified) (2 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue

@@ -26 +26 @@
     position: absolute;
     top: -100px;
-}
-
-.transform-rotate180 {
-    --transition-duration: 0.4s;
-    transition-duration: var(--transition-duration);
-
-    transform: rotate(180deg);
-}
-
-.transform-slideout-up {
-    --transition-duration: 0.4s;
-    transition-duration: var(--transition-duration);
-
-    z-index: -1;
-    transform: translate(0, -100%);
-    opacity: 0;
 }
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue

@@ -12 +12 @@
                 accept="audio/wav" multiple :disabled="isTranscribing" />
 
-            <button type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
+            <button class="btn-primary" type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
                 <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
                 <span>{{ translations.get("AudioUpload_TranscribeFiles") }}</span>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -10 +10 @@
 
             <div style="position: relative;">
-                <button @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
+                <button class="btn-primary" @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
                     <span class="material-icons">download</span>
                     <span>{{ translations.get("TranscriptionItem_Download") }}</span>
@@ -17 +17 @@
                 <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
                      @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
-                    <button @click="downloadAsText" type="button" class="theme-flat">
+                    <button @click="downloadAsText" type="button" class="btn-primary theme-flat">
                         <span class="material-icons">text_snippet</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
                     </button>
 
-                    <button @click="downloadAsJson" type="button" class="theme-flat">
+                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat">
                         <span class="material-icons">integration_instructions</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
                     </button>
 
-                    <button @click="downloadAsWebvtt" type="button" class="theme-flat">
+                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat">
                         <span class="material-icons">subtitles</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
@@ -34 +34 @@
             </div>
 
-            <button class="theme-error" @click="remove" type="button">
+            <button class="btn-primary theme-error" @click="remove" type="button">
                 <span class="material-icons">delete</span>
                 <span>{{ translations.get("TranscriptionItem_Remove") }}</span>
@@ -40 +40 @@
         </div>
 
-        <TranscriptionItemEditor :transcription="transcription" />
-
         <hr />
 
-        <button @click="toggleEditor" type="button" class="theme-flat">
-            <span class="material-icons" :class="{ 'transform-rotate180': showEditor }">expand_more</span>
+        <TranscriptionItemEditor :transcription="transcription" style="margin-bottom: 1em" />
+
+        <button @click="toggleEditor" type="button" class="btn-primary theme-flat">
+            <span class="material-icons expander-toggle" :class="{ 'rotate-180': showEditor }">expand_more</span>
             <span>{{ translations.get("TranscriptionItem_ExpandEditor") }}</span>
         </button>
@@ -57 +57 @@
     grid-template-columns: auto 1fr auto auto;
     align-items: center;
-
-    margin-bottom: 0.5em;
-}
-
-.transcription__editor-container {
-    display: flex;
-    flex-direction: column;
-
-    padding-top: 1em;
 }
 
@@ -89 +80 @@
     visibility: visible;
     opacity: 1;
+}
+
+.expander-toggle {
+    transition-duration: 0.4s;
+}
+
+.rotate-180 {
+    transform: rotate(180deg);
 }
 </style>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -71 +71 @@
     background-color: #0000001F;
     border: none;
+    margin: 1rem 2rem;
 }
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss

@@ -26 +26 @@
 }
 
-button {
-    @extend .btn-primary;
-}
-
 hr {
     @extend .divider;
@@ -38 +34 @@
 }
 
-.button-primary .material-icons {
+.btn-primary .material-icons {
     margin-right: 0.3em;
 }