Changeset 35404 for main/trunk

Timestamp:

2021-09-15T13:38:25+12:00 (3 years ago)

Author:

cstephen

Message:

Improve download popup

File:

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

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

@@ -9 +9 @@
             <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
 
-            <div>
-                <button @click="showDownloadOptions = !showDownloadOptions" type="button">
+            <div style="position: relative;">
+                <button @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
                     <span class="material-icons">download</span>
                     <span>{{ translations.get("TranscriptionItem_Download") }}</span>
                 </button>
 
-                <div class="download-popup card" :style="showDownloadOptions === false ? 'display: none;' : 'display: flex;'">
+                <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
+                     @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
                     <button @click="downloadAsText" type="button" class="theme-flat">
                         <span class="material-icons">text_snippet</span>
@@ -70 +71 @@
     display: flex;
     flex-direction: column;
+    align-items: stretch;
 
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 97%;
+    z-index: 2;
 
     padding: 2px;
     margin: 0;
+    width: 14em;
+
+    transition-duration: var(--transition-duration);
+    visibility: hidden;
+    opacity: 0;
+}
+
+.download-popup-show {
+    visibility: visible;
+    opacity: 1;
 }
 </style>