Refactored context menu and text menu icon into same DIV, icons work on all…

Refactored context menu and text menu icon into same DIV, icons work on all sizes now. Better disabling of export buttons when button is clicked.

src/components/Clips.vue

@@ -19,24 +19,27 @@
           <span class="clip-badge badge">{{ index + 1 }}</span>
 
           <!-- Clip text icon -->
-          <div @click.prevent="toggleText(clip)" class="text-menu" title="Add Text">
+          <div class="context-menu">
+            <span @click.prevent="toggleText(clip)" class="menu-icon" title="Add Text">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-textarea-t" viewBox="0 0 16 16">
                 <path d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v3.563a2 2 0 0 1 0 3.874V13.5A1.5 1.5 0 0 1 13 15H3a1.5 1.5 0 0 1-1.5-1.5V9.937a2 2 0 0 1 0-3.874V2.5zm1 3.563a2 2 0 0 1 0 3.874V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.937a2 2 0 0 1 0-3.874V2.5A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5v3.563zM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                 <path d="M11.434 4H4.566L4.5 5.994h.386c.21-1.252.612-1.446 2.173-1.495l.343-.011v6.343c0 .537-.116.665-1.049.748V12h3.294v-.421c-.938-.083-1.054-.21-1.054-.748V4.488l.348.01c1.56.05 1.963.244 2.173 1.496h.386L11.434 4z"/>
               </svg>
-          </div>
+            </span>
 
             <!-- Context menu for clip -->
-          <div class="btn-group dropstart context-menu" title="Clip Menu">
+            <span class="btn-group dropstart menu-icon" title="Clip Menu">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="dropdown-toggle bi bi-three-dots-vertical" data-bs-toggle="dropdown" aria-expanded="false" viewBox="0 0 16 16">
                 <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
               </svg>
               <ul class="dropdown-menu small-dropdown">
-              <li><a v-if="index > 0" class="dropdown-item" href="#" @click="moveClipBtn('up', clip, index, index - 1)">Move Up</a></li>
-              <li><a v-if="index < clips.length - 1" class="dropdown-item" href="#" @click="moveClipBtn('down', clip, index, index + 1)">Move Down</a></li>
-              <li><hr class="dropdown-divider"></li>
+                <li v-if="index > 0"><a class="dropdown-item" href="#" @click="moveClipBtn('up', clip, index, index - 1)">Move Up</a></li>
+                <li v-if="index < clips.length - 1"><a class="dropdown-item" href="#" @click="moveClipBtn('down', clip, index, index + 1)">Move Down</a></li>
+                <li v-if="index > 0 || index < clips.length - 1"><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#" @click="toggleSelection(clip)">Edit</a></li>
                 <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
               </ul>
+            </span>
           </div>
 
           <!-- Clip text input -->
@@ -84,8 +87,8 @@
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" ref="Close" data-bs-dismiss="modal">Cancel</button>
           <a v-if="current_export.output" :href="current_export.output" class="btn btn-info" download target="_blank">Download</a>
-          <button v-if="!current_export.output" type="button" class="btn btn-primary" @click="startExport" :disabled="!current_export.output && current_export.progress > 0">Export</button>
-          <button v-if="current_export.output" type="button" class="btn btn-primary" @click="startExport">Export Again</button>
+          <button v-if="!current_export.output" type="button" class="btn btn-primary" @click="startExport" :disabled="exporting">Export</button>
+          <button v-if="current_export.output" type="button" class="btn btn-primary" @click="startExport" :disabled="exporting">Export Again</button>
         </div>
       </div>
     </div>
@@ -102,7 +105,8 @@ export default {
   props: ['project'],
   data() {
     return {
-      show_spinner: false
+      show_spinner: false,
+      exporting: false
     }
   },
   methods: {
@@ -121,6 +125,8 @@ export default {
       this.editClip(payload)
     },
     async startExport() {
+      this.exporting = true
+
       // Search for existing caption effect (we can re-use it)
       let caption_results = this.effects.filter(e => e.layer == 999 && e.position == 0.0 && e.type == 'Caption')
       let effect_payload = {}
@@ -238,6 +244,7 @@ export default {
     current_export() {
       if (this.current_export.output) {
         // Video is available, load video
+        this.exporting = false
         this.$refs.video.load()
       }
     }
@@ -279,9 +286,11 @@ export default {
     right: 0%;
     padding-top: 10px;
     padding-right: 10px;
+  }
+  .menu-icon {
     cursor: pointer;
   }
-  .context-menu:hover {
+  .menu-icon:hover {
     color: #0d6efd;
   }
   .text-menu {
@@ -333,9 +342,10 @@ export default {
   }
   .clip-text {
     position: absolute;
-    width: 87%;
+    width: 75%;
     top: 0%;
-    padding: 10px;
+    padding-left: 5%;
+    padding-top: 10px;
   }
   input.form-control {
     background-color: rgba(255, 255, 255, 0.20);