fix(ui): handle long text properly in models/files managers

bimdata · Jun 4, 2021 · a037b55 · a037b55
1 parent 94bf08f
commit a037b55
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 45 deletions.
diff --git a/src/components/generic/text-box/TextBox.scss b/src/components/generic/text-box/TextBox.scss
@@ -44,6 +44,14 @@
       }
     }
 
+    &--tertiary-lightest {
+      background-color: $color-tertiary-lightest;
+      color: $color-primary;
+      &::before {
+        border-color: $color-tertiary-lightest transparent transparent;
+      }
+    }
+
     &--top {
       top: -8px;
       left: 50%;

diff --git a/src/components/generic/text-box/TextBox.vue b/src/components/generic/text-box/TextBox.vue
@@ -53,7 +53,10 @@ export default {
     tooltipColor: {
       type: String,
       default: "primary",
-      validator: value => ["primary", "secondary", "tertiary"].includes(value)
+      validator: value =>
+        ["primary", "secondary", "tertiary", "tertiary-lightest"].includes(
+          value
+        )
     }
   },
   setup(props) {
@@ -72,38 +75,32 @@ export default {
         const c = props.cutSymbol.length;
         const max = props.maxLength;
         if (max && max < l && max > c) {
-          let cutIndex, head, tail;
+          let cutIndex,
+            head = "",
+            tail = "";
           switch (props.cutOn) {
             case "start":
               cutIndex = l - (max - c);
               tail = props.text.slice(cutIndex);
-              displayedText.value = `${props.cutSymbol}${tail}`;
               break;
             case "middle":
               cutIndex = (max - c) / 2;
               head = props.text.slice(0, Math.ceil(cutIndex));
               tail = props.text.slice(l - Math.floor(cutIndex));
-              displayedText.value = `${head}${props.cutSymbol}${tail}`;
               break;
             case "end":
               cutIndex = max - c;
               head = props.text.slice(0, cutIndex);
-              displayedText.value = `${head}${props.cutSymbol}`;
               break;
           }
+          displayedText.value = `${head}${props.cutSymbol}${tail}`;
         } else {
           displayedText.value = props.text;
         }
       },
       { immediate: true }
     );
 
-    watch(
-      () => props.tooltipPosition,
-      () => {},
-      { immediate: true }
-    );
-
     return {
       displayedText,
       showTooltip

diff --git a/src/components/specific/files/file-tree/FileTree.scss b/src/components/specific/files/file-tree/FileTree.scss
@@ -12,13 +12,6 @@
         color: $color-primary;
         cursor: pointer;
 
-        &__name,
-        &__icon-arrow,
-        &__icon-folder {
-          position: relative;
-          z-index: 1;
-        }
-
         &__background {
           position: absolute;
           z-index: 0;
@@ -30,9 +23,25 @@
           transition: opacity 0.2s ease-out;
         }
 
+        &__name,
+        &__icon-arrow,
+        &__icon-folder {
+          position: relative;
+          z-index: 1;
+        }
+
+        &__icon-arrow {
+          min-width: 13px;
+        }
+        &__icon-folder {
+          min-width: 18px;
+        }
         &__name {
           @include noselect;
           align-self: flex-end;
+          &:hover {
+            z-index: 2;
+          }
         }
       }
 

diff --git a/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue b/src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue
@@ -22,9 +22,11 @@
         :name="showChildren ? 'folderOpen' : 'folder'"
         size="s"
       />
-      <span class="file-tree-node__node__name">
-        {{ file.name }}
-      </span>
+      <TextBox
+        class="file-tree-node__node__name"
+        :text="file.name"
+        :maxLength="32"
+      />
     </div>
     <transition name="fade">
       <div class="file-tree-node__children" v-show="showChildren">
@@ -39,10 +41,12 @@ import { inject, ref, watch } from "vue";
 import { getDescendants } from "@/utils/file-structure";
 // Components
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
   components: {
-    BIMDataIcon
+    BIMDataIcon,
+    TextBox
   },
   props: {
     file: {

diff --git a/src/components/specific/files/files-manager/FilesManager.scss b/src/components/specific/files/files-manager/FilesManager.scss
@@ -2,6 +2,10 @@
   position: relative;
 
   &:deep() {
+    .bimdata-card__submenu {
+      z-index: 5;
+    }
+
     .bimdata-card__content {
       height: calc(100% - 35px - 26px);
 

diff --git a/...ponents/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.scss b/...ponents/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.scss
@@ -0,0 +1,12 @@
+.files-manager-breadcrumb {
+  &__path {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-unit/2;
+  }
+
+  &__file {
+    margin-left: $spacing-unit/2;
+    font-weight: bold;
+  }
+}
diff --git a/...mponents/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue b/...mponents/specific/files/files-manager/files-manager-breadcrumb/FilesManagerBreadcrumb.vue
@@ -1,14 +1,33 @@
 <template>
   <div class="files-manager-breadcrumb">
-    <span v-if="path.length > 0">{{ path.join(" > ") + " > " }}</span>
-    <span style="font-weight: bold">{{ file.name }}</span>
+    <span class="files-manager-breadcrumb__path">
+      <template v-for="folder of path" :key="folder.id">
+        <TextBox
+          :text="folder.name"
+          :maxLength="24"
+          tooltipColor="tertiary-lightest"
+        />
+        <span>></span>
+      </template>
+    </span>
+    <TextBox
+      class="files-manager-breadcrumb__file"
+      :text="file.name"
+      :maxLength="24"
+      tooltipColor="tertiary-lightest"
+    />
   </div>
 </template>
 
 <script>
 import { inject, ref, watch } from "vue";
+// Components
+import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
+  components: {
+    TextBox
+  },
   props: {
     file: {
       type: Object,
@@ -23,9 +42,10 @@ export default {
     watch(
       () => props.file,
       () => {
-        path.value = handler()
-          .ancestors(props.file)
-          .map(f => f.name);
+        // path.value = handler()
+        //   .ancestors(props.file)
+        //   .map(f => f.name);
+        path.value = handler().ancestors(props.file);
       },
       { immediate: true }
     );
@@ -36,3 +56,5 @@ export default {
   }
 };
 </script>
+
+<style scoped lang="scss" src="./FilesManagerBreadcrumb.scss"></style>
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -48,7 +48,7 @@
         />
         <FileIcon v-else-if="file.type === 'Ifc'" name="ifc" size="20" />
         <FileIcon v-else :name="fileExtension(file.name)" size="20" />
-        <span>{{ file.name }}</span>
+        <TextBox :text="file.name" :maxLength="64" />
       </div>
     </transition>
   </div>
@@ -64,14 +64,16 @@ import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/B
 import BIMDataInput from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataInput.js";
 import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
 import FileIcon from "@/components/generic/file-icon/FileIcon";
+import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataIcon,
     BIMDataInput,
     BIMDataSpinner,
-    FileIcon
+    FileIcon,
+    TextBox
   },
   props: {
     project: {

diff --git a/src/components/specific/files/folder-selector/FolderSelector.scss b/src/components/specific/files/folder-selector/FolderSelector.scss
@@ -16,12 +16,14 @@
     gap: $spacing-unit;
 
     &__path {
+      display: block;
       line-height: 1rem;
       font-size: 0.8rem;
       color: $color-tertiary-dark;
     }
 
     &__name {
+      display: block;
       font-weight: bold;
     }
 

diff --git a/src/components/specific/files/folder-selector/FolderSelector.vue b/src/components/specific/files/folder-selector/FolderSelector.vue
@@ -12,12 +12,17 @@
         <BIMDataIcon name="arrow" size="xs" />
       </BIMDataButton>
       <div>
-        <div class="folder-selector__head__path">
-          {{ folderPath.map(f => f.name).join(" > ") }}
-        </div>
-        <div class="folder-selector__head__name">
-          {{ currentFolder.name }}
-        </div>
+        <TextBox
+          class="folder-selector__head__path"
+          :text="folderPath.map(f => f.name).join(' > ')"
+          :maxLength="42"
+          cutOn="start"
+        />
+        <TextBox
+          class="folder-selector__head__name"
+          :text="currentFolder.name"
+          :maxLength="32"
+        />
       </div>
       <BIMDataButton
         class="folder-selector__head__btn-close"
@@ -41,9 +46,11 @@
         @dblclick="enterFolder(folder)"
       >
         <BIMDataIcon name="folder" size="xs" />
-        <span class="folder-selector__body__item__name">
-          {{ folder.name }}
-        </span>
+        <TextBox
+          class="folder-selector__body__item__name"
+          :text="folder.name"
+          :maxLength="32"
+        />
         <BIMDataIcon
           name="chevron"
           size="xxs"
@@ -67,7 +74,11 @@
         :style="{ visibility: selectedFolder ? 'visible' : 'hidden' }"
       >
         {{ $t("FolderSelector.selectedFolder") }}:
-        <strong>{{ selectedFolder ? selectedFolder.name : "" }}</strong>
+        <TextBox
+          style="font-weight: bold"
+          :text="selectedFolder ? selectedFolder.name : ''"
+          :maxLength="24"
+        />
       </div>
       <BIMDataButton
         class="folder-selector__footer__btn-submit"
@@ -94,11 +105,13 @@ import { computed, ref, watch } from "vue";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
   components: {
     BIMDataButton,
-    BIMDataIcon
+    BIMDataIcon,
+    TextBox
   },
   props: {
     fileStructure: {

diff --git a/src/components/specific/models/models-table/ModelsTable.vue b/src/components/specific/models/models-table/ModelsTable.vue
@@ -18,7 +18,7 @@
       />
     </template>
     <template #cell-version="{ row: { version } }">
-      {{ version ? version : "" }}
+      {{ version ? version : "-" }}
     </template>
     <template #cell-creator="{ row: { creator } }">
       {{ creator ? `${creator.firstname} ${creator.lastname[0]}.` : "?" }}

diff --git a/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-table/model-name-cell/ModelNameCell.vue
@@ -37,9 +37,7 @@
 
       <div v-else class="model-name-cell__content">
         <img src="/static/ifc-logo.svg" />
-        <span class="model-name-cell__content__text">
-          {{ model.name }}
-        </span>
+        <TextBox :text="model.name" :maxLength="64" />
       </div>
     </transition>
   </div>
@@ -53,13 +51,15 @@ import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
 import BIMDataInput from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataInput.js";
 import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
+import TextBox from "@/components/generic/text-box/TextBox";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataIcon,
     BIMDataInput,
-    BIMDataSpinner
+    BIMDataSpinner,
+    TextBox
   },
   props: {
     project: {