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 @@ ...@@ -18,25 +18,30 @@
<!-- Clip sequence # badge --> <!-- Clip sequence # badge -->
<span class="clip-badge badge">{{ index + 1 }}</span> <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 --> <!-- Context menu for clip -->
<div class="btn-group dropstart context-menu"> <div class="btn-group dropstart context-menu" title="Clip 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"> <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><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><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><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> <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
</ul> </ul>
</div> </div>
<!-- Clip text input --> <!-- Clip text input -->
<div v-if="clip.json.hasOwnProperty('text')" class="mb-3 clip-text"> <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> </div>
<!-- Clip length label --> <!-- Clip length label -->
...@@ -101,13 +106,12 @@ export default { ...@@ -101,13 +106,12 @@ export default {
} }
}, },
methods: { methods: {
AddTextBtn(clipObj) { toggleText(clipObj) {
clipObj.json.text = "" if (Object.prototype.hasOwnProperty.call(clipObj.json, 'text')) {
let payload = { data: clipObj } delete clipObj.json.text
this.editClip(payload) } else {
}, clipObj.json.text = ""
RemoveTextBtn(clipObj) { }
delete clipObj.json.text
let payload = { data: clipObj } let payload = { data: clipObj }
this.editClip(payload) this.editClip(payload)
}, },
...@@ -273,8 +277,24 @@ export default { ...@@ -273,8 +277,24 @@ export default {
position: absolute; position: absolute;
top: 0%; top: 0%;
right: 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; padding: 10px;
cursor: pointer; cursor: pointer;
display: inline-flex;
}
.text-menu:hover {
color: #0d6efd;
} }
.small-dropdown { .small-dropdown {
min-width: 5em; min-width: 5em;
...@@ -292,30 +312,39 @@ export default { ...@@ -292,30 +312,39 @@ export default {
padding: 3px; padding: 3px;
opacity: 75%; 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 { .clip-text {
position: absolute; position: absolute;
width: 96%; width: 87%;
opacity: 80%; top: 0%;
bottom: 10%;
padding: 10px; padding: 10px;
} }
.export-btn { input.form-control {
float: right; background-color: rgba(255, 255, 255, 0.20);
} color: #fff;
.dropdown-toggle { border-color: #0d6efd;
filter: drop-shadow(0px 0px 2px #000000); filter: drop-shadow(0px 0px 1px #000000);
} }
.clip-badge { .form-control::placeholder {
position: absolute; filter: none;
bottom: 5%; color: #e3e3e3;
left: 5%; }
padding: 8px;
opacity: 75%;
background-color: #000000;
border-radius: 4px;
}
video {
background-color: #000000;
width: 100%;
}
</style> </style>
\ No newline at end of file
src/components/Files.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="row mb-3 gx-2 p-2 scrolling-container"> <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;"> <div v-for="file in searchedFiles" :key="file.id" class="col-sm-12 col-md-6 col-lg-4" style="position: relative;">
<!-- Context Menu --> <!-- 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"> <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"/> <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>
...@@ -163,9 +163,13 @@ export default { ...@@ -163,9 +163,13 @@ export default {
position: absolute; position: absolute;
top: 0%; top: 0%;
right: 0%; right: 0%;
padding: 10px; padding-top: 10px;
padding-right: 10px;
cursor: pointer; cursor: pointer;
} }
.context-menu:hover {
color: #0d6efd;
}
.small-dropdown { .small-dropdown {
min-width: 5em; min-width: 5em;
opacity: 80%; opacity: 80%;
......
src/components/Projects.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<span class="project-badge badge">{{ project.name }}</span> <span class="project-badge badge">{{ project.name }}</span>
<!-- Context menu for project --> <!-- 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"> <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"/> <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>
...@@ -203,9 +203,13 @@ export default { ...@@ -203,9 +203,13 @@ export default {
position: absolute; position: absolute;
top: 0%; top: 0%;
right: 0%; right: 0%;
padding: 10px; padding-top: 10px;
padding-right: 10px;
cursor: pointer; cursor: pointer;
} }
.context-menu:hover {
color: #0d6efd;
}
.img-parent { .img-parent {
position: relative; position: relative;
} }
......
src/data/caption.json
...@@ -85,7 +85,7 @@ ...@@ -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", "caption_text": "00:00:00:000 --> 00:10:00:000\\nEdit this caption with our caption editor",
"class_name": "Caption", "class_name": "Caption",
"color": { "color": {
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
{ {
"co": { "co": {
"X": 1, "X": 1,
"Y": 48 "Y": 52
}, },
"handle_type": 0, "handle_type": 0,
"interpolation": 0 "interpolation": 0
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
{ {
"co": { "co": {
"X": 1, "X": 1,
"Y": 0.25 "Y": 0.20
}, },
"handle_type": 0, "handle_type": 0,
"interpolation": 0 "interpolation": 0
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
{ {
"co": { "co": {
"X": 1, "X": 1,
"Y": 0.10000000149011612 "Y": 0.1
}, },
"handle_type": 0, "handle_type": 0,
"interpolation": 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