Skip to content

S
simple-editor
Commit 96339582 by Jonathan Thomas
Options

Removing 'Editor' router-link. Updating scrolling-container div, to correctly… 

Removing 'Editor' router-link. Updating scrolling-container div, to correctly size to vertical height of screen. Switching from overflow scroll to auto. Replacing favicon with OpenShot branding.
parent f2338909
Pipeline #8986 passed with stage
in 34 seconds
Showing with 67 additions and 69 deletions
public/index.html
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
src/App.vue
......@@ -17,12 +17,6 @@
<li v-show="isAuthenticated" class="nav-item">
<router-link to="/" class="nav-link" aria-current="page" exact>Projects</router-link>
</li>
<li v-if="project" v-show="isAuthenticated" class="nav-item">
<router-link :to="{'name': 'Editor', 'id': project.id}" class="nav-link" aria-current="page">Editor</router-link>
</li>
<li v-if="!project" v-show="isAuthenticated" class="nav-item">
<router-link to="/projects/none" class="nav-link" aria-current="page" :class="{ disabled: !project }">Editor</router-link>
</li>
<li v-show="isAuthenticated" class="nav-item">
<router-link to="/about" class="nav-link" aria-current="page">About</router-link>
</li>
......
src/components/Clips.vue
......@@ -11,49 +11,51 @@
</div>
<!-- Scrolling container for clips -->
<div class="col-12 scrolling-container">
<div class="row gy-2 gx-2 mb-2" v-for="(clip, index) in thumbnailedClips" :key="clip.id">
<div class="col-12 text-center img-parent">
<div class="container p-2 scrolling-container">
<div class="col-12">
<div class="row gy-2 gx-2 mb-2" v-for="(clip, index) in thumbnailedClips" :key="clip.id">
<div class="col-12 text-center img-parent">
<!-- Clip sequence # badge -->
<span class="clip-badge badge">{{ index + 1 }}</span>
<!-- Clip sequence # badge -->
<span class="clip-badge badge">{{ index + 1 }}</span>
<!-- Clip text icon -->
<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>
</span>
<!-- Clip text icon -->
<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>
</span>
<!-- Context menu for clip -->
<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 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>
<!-- Context menu for clip -->
<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 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 -->
<div v-if="clip.json.hasOwnProperty('text')" class="mb-3 clip-text">
<input @blur="updateTextInput($event, clip)" type="text" class="form-control" maxlength="35" placeholder="Enter text here" :value="clip.json.text">
</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" maxlength="35" placeholder="Enter text here" :value="clip.json.text">
</div>
<!-- Clip length label -->
<div ref="clip" class="clip-label">
{{ (clip.end - clip.start).toFixed(1) }} Seconds
</div>
<!-- Clip length label -->
<div ref="clip" class="clip-label">
{{ (clip.end - clip.start).toFixed(1) }} Seconds
</div>
<!-- Clip thumbnail image -->
<img @click="toggleSelection(clip)" :class="getSelectedClass(clip)" class="img-fluid img-thumbnail clip-thumbnail" @load="thumbnailLoaded($event, clip)" :title="clip.name" :src="clip.thumbnail"/>
<!-- Clip thumbnail image -->
<img @click="toggleSelection(clip)" :class="getSelectedClass(clip)" class="img-fluid img-thumbnail clip-thumbnail" @load="thumbnailLoaded($event, clip)" :title="clip.name" :src="clip.thumbnail"/>
</div>
</div>
</div>
</div>
......@@ -263,8 +265,8 @@ export default {
<style scoped>
.scrolling-container {
max-height: 300px;
overflow: scroll;
max-height: 45vh;
overflow: auto;
}
.img-parent {
position: relative;
......
src/components/Files.vue
......@@ -18,29 +18,31 @@
</div>
<!-- Scrolling container for files -->
<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" 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>
<ul class="dropdown-menu small-dropdown">
<li><a class="dropdown-item" href="#" @click="deleteFileBtn(file)">Delete</a></li>
</ul>
</div>
<div class="container p-2 scrolling-container">
<div class="row mb-3 gx-2">
<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" 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>
<ul class="dropdown-menu small-dropdown">
<li><a class="dropdown-item" href="#" @click="deleteFileBtn(file)">Delete</a></li>
</ul>
</div>
<!-- File thumbnail image -->
<img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" :src="file.thumbnail"/>
<figcaption class="figure-caption">{{ getFileName(file) }}</figcaption>
</div>
<!-- File thumbnail image -->
<img @click="toggleSelection(file)" :class="getSelectedClass(file)" class="file-thumbnail img-fluid img-thumbnail" :title="file.name" :src="file.thumbnail"/>
<figcaption class="figure-caption">{{ getFileName(file) }}</figcaption>
</div>
<!-- Upload progress bars -->
<div v-for="upload in uploads" :key="upload.id" class="col-4">
<div class="row h-100">
<div class="col-sm-12 my-auto p-3">
<div class="progress align-middle">
<div class="progress-bar" role="progressbar" v-bind:style="{ width: upload.progress + '%'}" :aria-valuenow="upload.progress" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Upload progress bars -->
<div v-for="upload in uploads" :key="upload.id" class="col-4">
<div class="row h-100">
<div class="col-sm-12 my-auto p-3">
<div class="progress align-middle">
<div class="progress-bar" role="progressbar" v-bind:style="{ width: upload.progress + '%'}" :aria-valuenow="upload.progress" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
......@@ -142,8 +144,8 @@ export default {
<style scoped>
.scrolling-container {
height: 135px;
overflow: scroll;
height: 18vh;
overflow: auto;
}
.upload-btn {
float: right;
......
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