Truncate file names while preserving file extensions

changelog/unreleased/enhancement-truncate-file-names

@@ -0,0 +1,6 @@
+Enhancement: Truncate file names while preserving file extensions
+
+File names that exceed the horizontal space of a file list now get truncated while preserving their extensions. This way, the user can quickly identify the type of a file.
+
+https://github.com/owncloud/owncloud-design-system/issues/1758
+https://github.com/owncloud/owncloud-design-system/pull/1782

src/components/atoms/OcResourceName/OcResourceName.vue

@@ -1,15 +1,18 @@
 <template>
   <span
     v-oc-tooltip="tooltip"
-    class="oc-resource-name oc-text-truncate"
+    class="oc-resource-name"
     :data-test-resource-path="fullPath"
     :data-test-resource-name="fullName"
     :data-test-resource-type="type"
   >
-    <span v-if="displayPath" class="oc-resource-path" v-text="displayPath" /><span
-      class="oc-resource-basename"
-      v-text="displayName"
-    /><span v-if="extension" class="oc-resource-extension" v-text="displayExtension" />
+    <span class="oc-text-truncate">
+      <span v-if="displayPath" class="oc-resource-path" v-text="displayPath" /><span
+        class="oc-resource-basename"
+        v-text="displayName"
+      />
+    </span>
+    <span v-if="extension" class="oc-resource-extension" v-text="displayExtension" />
   </span>
 </template>
 
@@ -109,7 +112,8 @@ export default {
 <style lang="scss">
 .oc-resource {
   &-name {
-    display: block;
+    display: flex;
+    min-width: 0;
   }
 
   &-basename,
@@ -128,6 +132,7 @@ export default {
 <docs>
 ```js
 <oc-resource-name full-path="documents/notes.txt" name="notes.txt" extension="txt" type="file" />
+<oc-resource-name full-path="documents/notes.txt" name="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" extension="txt" type="file" />
 <oc-resource-name full-path="images/nature/forest.jpg" :is-path-displayed="true" name="forest.jpg" extension="jpg" type="file" />
 <oc-resource-name full-path="super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root-super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root/asdf.txt" :is-path-displayed="true" name="asdf.txt" extension="txt" type="file" />
 <oc-resource-name full-path="some-folder" name="regular-folder" extension="" type="folder" />

src/components/atoms/OcResourceName/__snapshots__/OcResourceName.spec.js.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OcResourceName displays full path 1`] = `<span data-test-resource-path="images/nature/forest.jpg" data-test-resource-name="…/nature/forest.jpg" data-test-resource-type="file" class="oc-resource-name oc-text-truncate"><span class="oc-resource-path">…/nature/</span><span class="oc-resource-basename">forest</span><span class="oc-resource-extension">.jpg</span></span>`;
+exports[`OcResourceName displays full path 1`] = `<span data-test-resource-path="images/nature/forest.jpg" data-test-resource-name="…/nature/forest.jpg" data-test-resource-type="file" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-path">…/nature/</span><span class="oc-resource-basename">forest</span></span> <span class="oc-resource-extension">.jpg</span></span>`;
 
-exports[`OcResourceName displays only direct parent 1`] = `<span data-test-resource-path="Documents/notes.txt" data-test-resource-name="Documents/notes.txt" data-test-resource-type="file" class="oc-resource-name oc-text-truncate"><span class="oc-resource-path">Documents/</span><span class="oc-resource-basename">notes</span><span class="oc-resource-extension">.txt</span></span>`;
+exports[`OcResourceName displays only direct parent 1`] = `<span data-test-resource-path="Documents/notes.txt" data-test-resource-name="Documents/notes.txt" data-test-resource-type="file" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-path">Documents/</span><span class="oc-resource-basename">notes</span></span> <span class="oc-resource-extension">.txt</span></span>`;
 
 exports[`OcResourceName doesn't add extension to hidden folder 1`] = `
-<span data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" class="oc-resource-name oc-text-truncate"><!----><span class="oc-resource-basename">.hidden</span>
+<span data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><!----><span class="oc-resource-basename">.hidden</span></span>
 <!----></span>
 `;
 
-exports[`OcResourceName hides the path if not enabled 1`] = `<span data-test-resource-path="images/nature/forest.jpg" data-test-resource-name="forest.jpg" data-test-resource-type="file" class="oc-resource-name oc-text-truncate"><!----><span class="oc-resource-basename">forest</span><span class="oc-resource-extension">.jpg</span></span>`;
+exports[`OcResourceName hides the path if not enabled 1`] = `<span data-test-resource-path="images/nature/forest.jpg" data-test-resource-name="forest.jpg" data-test-resource-type="file" class="oc-resource-name"><span class="oc-text-truncate"><!----><span class="oc-resource-basename">forest</span></span> <span class="oc-resource-extension">.jpg</span></span>`;
 
 exports[`OcResourceName renders folder names with dots completely in the basename 1`] = `
-<span data-test-resource-path="folder.with.dots" data-test-resource-name="folder.with.dots" data-test-resource-type="folder" class="oc-resource-name oc-text-truncate"><!----><span class="oc-resource-basename">folder.with.dots</span>
+<span data-test-resource-path="folder.with.dots" data-test-resource-name="folder.with.dots" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><!----><span class="oc-resource-basename">folder.with.dots</span></span>
 <!----></span>
 `;

src/components/organisms/OcResource/OcResource.vue

@@ -182,6 +182,7 @@ export default {
         return {
           appearance: "raw",
           gapSize: "none",
+          justifyContent: "left",
         }
       }