Skip to content

S
simple-editor
Commit 521fa85f by Jonathan Thomas
Options

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.
parent 1f1e9c35
Showing with 35 additions and 25 deletions
src/components/Clips.vue
...@@ -19,24 +19,27 @@ ...@@ -19,24 +19,27 @@
<span class="clip-badge badge">{{ index + 1 }}</span> <span class="clip-badge badge">{{ index + 1 }}</span>
<!-- Clip text icon --> <!-- Clip text icon -->
<div @click.prevent="toggleText(clip)" class="text-menu" title="Add Text"> <div class="context-menu">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-textarea-t" viewBox="0 0 16 16"> <span @click.prevent="toggleText(clip)" class="menu-icon" title="Add Text">
<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"/> <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="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"/> <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"/>
</svg> <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"/>
</div> </svg>
</span>
<!-- Context menu for clip --> <!-- 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"> <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"/> <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> </svg>
<ul class="dropdown-menu small-dropdown"> <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 v-if="index > 0"><a 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 v-if="index < clips.length - 1"><a 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 || index < clips.length - 1"><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li> <li><a class="dropdown-item" href="#" @click="toggleSelection(clip)">Edit</a></li>
</ul> <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
</ul>
</span>
</div> </div>
<!-- Clip text input --> <!-- Clip text input -->
...@@ -84,8 +87,8 @@ ...@@ -84,8 +87,8 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" ref="Close" data-bs-dismiss="modal">Cancel</button> <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> <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" :disabled="exporting">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 Again</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -102,7 +105,8 @@ export default { ...@@ -102,7 +105,8 @@ export default {
props: ['project'], props: ['project'],
data() { data() {
return { return {
show_spinner: false show_spinner: false,
exporting: false
} }
}, },
methods: { methods: {
...@@ -121,6 +125,8 @@ export default { ...@@ -121,6 +125,8 @@ export default {
this.editClip(payload) this.editClip(payload)
}, },
async startExport() { async startExport() {
this.exporting = true
// Search for existing caption effect (we can re-use it) // 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 caption_results = this.effects.filter(e => e.layer == 999 && e.position == 0.0 && e.type == 'Caption')
let effect_payload = {} let effect_payload = {}
...@@ -237,8 +243,9 @@ export default { ...@@ -237,8 +243,9 @@ export default {
}, },
current_export() { current_export() {
if (this.current_export.output) { if (this.current_export.output) {
// Video is available, load video // Video is available, load video
this.$refs.video.load() this.exporting = false
this.$refs.video.load()
} }
} }
}, },
...@@ -279,9 +286,11 @@ export default { ...@@ -279,9 +286,11 @@ export default {
right: 0%; right: 0%;
padding-top: 10px; padding-top: 10px;
padding-right: 10px; padding-right: 10px;
}
.menu-icon {
cursor: pointer; cursor: pointer;
} }
.context-menu:hover { .menu-icon:hover {
color: #0d6efd; color: #0d6efd;
} }
.text-menu { .text-menu {
...@@ -333,9 +342,10 @@ export default { ...@@ -333,9 +342,10 @@ export default {
} }
.clip-text { .clip-text {
position: absolute; position: absolute;
width: 87%; width: 75%;
top: 0%; top: 0%;
padding: 10px; padding-left: 5%;
padding-top: 10px;
} }
input.form-control { input.form-control {
background-color: rgba(255, 255, 255, 0.20); background-color: rgba(255, 255, 255, 0.20);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment