Skip to content

S
simple-editor
Commit 1f1e9c35 by Jonathan Thomas
Options

Moved text from menu to icon/button (for more visibility). Re-styled… 

Moved text from menu to icon/button (for more visibility). Re-styled text-editor. Added menu icon hover styles. Updated Caption font/font-size/margins.
parent f5acc11c
Showing with 82 additions and 44 deletions
src/components/Clips.vue
......@@ -18,25 +18,30 @@
<!-- Clip sequence # badge -->
<span class="clip-badge badge">{{ index + 1 }}</span>
<!-- Clip text icon -->
<div @click.prevent="toggleText(clip)" class="text-menu" 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>
<!-- Context menu for clip -->
<div class="btn-group dropstart context-menu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="dropdown-toggle bi bi-three-dots-vertical" data-bs-toggle="dropdown" aria-expanded="false" viewBox="0 0 16 16">
<div class="btn-group dropstart context-menu" 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><a v-if="!clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="AddTextBtn(clip)">Add Text</a></li>
<li><a v-if="clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="RemoveTextBtn(clip)">Remove Text</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
</ul>
</div>
<!-- Clip text input -->
<div v-if="clip.json.hasOwnProperty('text')" class="mb-3 clip-text">
<input @blur="updateTextInput($event, clip)" type="text" class="form-control" placeholder="Enter text here" :value="clip.json.text">
<input @blur="updateTextInput($event, clip)" type="text" class="form-control" maxlength="35" placeholder="Enter text here" :value="clip.json.text">
</div>
<!-- Clip length label -->
......@@ -101,13 +106,12 @@ export default {
}
},
methods: {
AddTextBtn(clipObj) {
clipObj.json.text = ""
let payload = { data: clipObj }
this.editClip(payload)
},
RemoveTextBtn(clipObj) {
delete clipObj.json.text
toggleText(clipObj) {
if (Object.prototype.hasOwnProperty.call(clipObj.json, 'text')) {
delete clipObj.json.text
} else {
clipObj.json.text = ""
}
let payload = { data: clipObj }
this.editClip(payload)
},
......@@ -273,8 +277,24 @@ export default {
position: absolute;
top: 0%;
right: 0%;
padding-top: 10px;
padding-right: 10px;
cursor: pointer;
}
.context-menu:hover {
color: #0d6efd;
}
.text-menu {
color: #ffffff;
position: absolute;
top: 0%;
right: 5%;
padding: 10px;
cursor: pointer;
display: inline-flex;
}
.text-menu:hover {
color: #0d6efd;
}
.small-dropdown {
min-width: 5em;
......@@ -292,30 +312,39 @@ export default {
padding: 3px;
opacity: 75%;
}
.export-btn {
float: right;
}
.dropdown-toggle {
filter: drop-shadow(0px 0px 2px #000000);
}
.clip-badge {
position: absolute;
bottom: 5%;
left: 5%;
padding: 8px;
opacity: 75%;
background-color: #000000;
border-radius: 4px;
}
video {
background-color: #000000;
width: 100%;
}
.clip-text {
position: absolute;
width: 96%;
opacity: 80%;
bottom: 10%;
width: 87%;
top: 0%;
padding: 10px;
}
.export-btn {
float: right;
}
.dropdown-toggle {
filter: drop-shadow(0px 0px 2px #000000);
}
.clip-badge {
position: absolute;
bottom: 5%;
left: 5%;
padding: 8px;
opacity: 75%;
background-color: #000000;
border-radius: 4px;
}
video {
background-color: #000000;
width: 100%;
}
}
input.form-control {
background-color: rgba(255, 255, 255, 0.20);
color: #fff;
border-color: #0d6efd;
filter: drop-shadow(0px 0px 1px #000000);
}
.form-control::placeholder {
filter: none;
color: #e3e3e3;
}
</style>
\ No newline at end of file
src/components/Files.vue
......@@ -21,7 +21,7 @@
<div class="row mb-3 gx-2 p-2 scrolling-container">
<div v-for="file in searchedFiles" :key="file.id" class="col-sm-12 col-md-6 col-lg-4" style="position: relative;">
<!-- Context Menu -->
<div class="btn-group dropstart context-menu">
<div class="btn-group dropstart context-menu" title="File Menu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
......@@ -163,9 +163,13 @@ export default {
position: absolute;
top: 0%;
right: 0%;
padding: 10px;
padding-top: 10px;
padding-right: 10px;
cursor: pointer;
}
.context-menu:hover {
color: #0d6efd;
}
.small-dropdown {
min-width: 5em;
opacity: 80%;
......
src/components/Projects.vue
......@@ -25,7 +25,7 @@
<span class="project-badge badge">{{ project.name }}</span>
<!-- Context menu for project -->
<div class="btn-group dropstart context-menu">
<div class="btn-group dropstart context-menu" title="Project Menu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
......@@ -203,9 +203,13 @@ export default {
position: absolute;
top: 0%;
right: 0%;
padding: 10px;
padding-top: 10px;
padding-right: 10px;
cursor: pointer;
}
.context-menu:hover {
color: #0d6efd;
}
.img-parent {
position: relative;
}
......
src/data/caption.json
......@@ -85,7 +85,7 @@
}
]
},
"caption_font": "sans",
"caption_font": "Noto Sans CJK",
"caption_text": "00:00:00:000 --> 00:10:00:000\\nEdit this caption with our caption editor",
"class_name": "Caption",
"color": {
......@@ -179,7 +179,7 @@
{
"co": {
"X": 1,
"Y": 48
"Y": 52
},
"handle_type": 0,
"interpolation": 0
......@@ -191,7 +191,7 @@
{
"co": {
"X": 1,
"Y": 0.25
"Y": 0.20
},
"handle_type": 0,
"interpolation": 0
......@@ -204,7 +204,7 @@
{
"co": {
"X": 1,
"Y": 0.10000000149011612
"Y": 0.1
},
"handle_type": 0,
"interpolation": 0
......
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