web/satellite added middle truncation logic for filenames in file browser

Added middle truncation and extended filename on hover according to figma designs

Change-Id: I5559abc6e6d959491603c0d2d20ddfbfdc298eee

web/satellite/src/components/browser/FileBrowser.vue

@@ -92,7 +92,7 @@
                     </div>
 
                     <div>
-                        <table class="table table-hover no-selection">
+                        <table class="table table-fixed table-hover no-selection">
                             <file-browser-header />
 
                             <tbody>
@@ -824,6 +824,10 @@ tbody {
     user-select: none;
 }
 
+.table-fixed {
+    table-layout: fixed;
+}
+
 .table-heading {
     color: #768394;
     border-top: 0;

web/satellite/src/components/browser/FileBrowserHeader.vue

@@ -5,7 +5,7 @@
     <thead>
         <tr>
             <th
-                class="table-heading"
+                class="table-heading w-50"
                 scope="col"
                 @mouseover="mouseOverName"
                 @mouseleave="mouseLeave"
@@ -46,7 +46,7 @@
                 </span>
             </th>
             <th
-                class="table-heading"
+                class="table-heading w-25"
                 scope="col"
                 @mouseover="mouseOverSize"
                 @mouseleave="mouseLeave"

web/satellite/src/components/browser/FileEntry.vue

@@ -7,7 +7,7 @@
         :class="{ 'selected-row': isFileSelected }"
         @click.stop="selectFile"
     >
-        <td class="w-50" data-ls-disabled>
+        <td data-ls-disabled>
             <span v-if="fileTypeIsFolder" class="folder-name">
                 <svg
                     class="ml-2 mr-1"
@@ -46,7 +46,7 @@
                     width="1.5em"
                     height="1.5em"
                     viewBox="0 0 16 16"
-                    class="bi bi-file-earmark ml-1 mr-1 mb-1"
+                    class="bi bi-file-earmark mx-1 flex-shrink-0"
                     fill="#768394"
                     xmlns="http://www.w3.org/2000/svg"
                 >
@@ -55,11 +55,10 @@
                     />
                     <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z" />
                 </svg>
-
-                {{ filename }}
+                <middle-truncate :text="filename" />
             </span>
         </td>
-        <td class="w-25">
+        <td>
             <span v-if="fileTypeIsFile" aria-roledescription="file-size">{{
                 size
             }}</span>
@@ -370,9 +369,14 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import type { BrowserFile } from "@/types/browser";
 import prettyBytes from "pretty-bytes";
+import MiddleTruncate from "./MiddleTruncate.vue";
 
 // @vue/component
-@Component
+@Component({
+    components: {
+        MiddleTruncate,
+    }
+})
 export default class FileEntry extends Vue {
     public deleteConfirmation = false;
 
@@ -385,9 +389,7 @@ export default class FileEntry extends Vue {
      * Return the name of file/folder formatted.
      */
     public get filename(): string {
-        return this.file.Key.length > 25
-            ? this.file.Key.slice(0, 25) + "..."
-            : this.file.Key;
+        return this.file.Key
     }
 
     /**
@@ -768,9 +770,12 @@ a {
 }
 
 .file-name {
+    position: relative;
     margin-left: 5px;
     cursor: pointer;
     color: #000;
+    display: flex;
+    align-items: center;
 }
 
 .file-name:hover {

web/satellite/src/components/browser/MiddleTruncate.vue

@@ -0,0 +1,53 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="truncation-container">
+        <div class="first-part-text">{{ textFirstPart }}</div>
+        <div class="last-part-text">{{ textLastPart }}</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+// @vue/component
+@Component
+export default class MiddleTruncate extends Vue {
+    @Prop()
+    private readonly text: string;
+
+    public get textFirstPart(): string {
+        return this.text.substring(0, this.text.length - 5);
+    }
+
+    public get textLastPart(): string {
+        return this.text.substring(this.text.length - 5);
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.truncation-container {
+    display: inline-flex;
+    max-width: 30ch;
+    min-width: 0;
+
+    &:hover {
+        max-width: unset;
+        min-width: auto;
+        background-color: #efefee;
+    }
+}
+
+.first-part-text {
+    flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.last-part-text {
+    flex-shrink: 0;
+}
+</style>