Truncate long file names, remove white border around image previews, and improve…

Truncate long file names, remove white border around image previews, and improve clip # badge to be more readable.

src/components/Clips.vue

@@ -333,10 +333,11 @@ export default {
     position: absolute;
     bottom: 5%;
     left: 5%;
-    padding: 8px;
     opacity: 0.75;
     background-color: #000000;
-    border-radius: 4px;
+    border-radius: 11px;
+    z-index: 1000;
+    border: 1px solid rgba(255, 255, 255, 0.85);
   }
   video {
     background-color: #000000;
@@ -359,4 +360,4 @@ export default {
     filter: none;
     color: #e3e3e3;
   }
-</style>
\ No newline at end of file
+</style>

src/components/Files.vue

@@ -34,7 +34,7 @@
         <figure class="file-figure">
           <!-- 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>
+          <figcaption class="figure-caption" :title="getBaseFileName(file)">{{ getBaseFileName(file) }}</figcaption>
         </figure>
       </div>
 
@@ -114,13 +114,8 @@ export default {
         return ''
       }
     },
-    getFileName(fileObject) {
-      let base = path.basename(fileObject.media)
-      if (base.length < 20) {
-        return base
-      } else {
-        return `${base.substr(0, 18)}...`
-      }
+    getBaseFileName(fileObject) {
+      return path.basename(fileObject.media)
     },
     ...mapActions(['loadFiles', 'createFile', 'deleteFile']),
     ...mapMutations((['setPreviewFile', 'setPreviewClip', 'setFiles']))
@@ -157,6 +152,11 @@ export default {
   }
   .figure-caption {
     font-size: 0.8em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
   }
   .file-thumbnail {
     cursor: pointer;

src/components/Preview.vue

@@ -17,7 +17,7 @@
         <video ref="video" v-if="!isImage && hasPreviewFile" v-show="media_loaded" @loadeddata="videoLoaded" @timeupdate="videoTimeUpdate" @pause="togglePause" @play="togglePause" loop preload="" poster="" class="preview-media">
           <source :type="previewFormat" :src="preview.file.media" @error="mediaError">
         </video>
-        <img v-if="isImage && hasPreviewFile" v-show="media_loaded" :src="preview.file.media" @load="imageLoaded" @error="mediaError" class="preview-media img-thumbnail" />
+        <img v-if="isImage && hasPreviewFile" v-show="media_loaded" :src="preview.file.media" @load="imageLoaded" @error="mediaError" class="preview-media" />
         <button type="button" class="preview-stage-resizer" title="Resize preview height" aria-label="Resize preview height"
                 @mousedown.prevent="startStageResize"
                 @touchstart.prevent="startStageResize"
@@ -677,6 +677,8 @@ export default {
   height: 100%;
   object-fit: contain;
   background-color: #000000;
+  border: none;
+  box-shadow: none;
 }
 .preview-stage-resizer {
   position: absolute;