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

Timestamp:

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

Author:

cstephen

Message:

Remove default button theme

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue (modified) (6 diffs)

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>