Show path / parent folder to distinguish files

changelog/unreleased/enhancement-parent-folder-distinguish-files

@@ -0,0 +1,7 @@
+Enhancement: Show path / parent folder to distinguish files
+
+We've added an option to show the path / parent folder under the resource name
+in order to distinguish files better
+
+https://github.com/owncloud/web/issues/5953
+https://github.com/owncloud/owncloud-design-system/pull/1860

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

@@ -8,56 +8,6 @@ const extension = "jpg"
 const type = "file"
 
 describe("OcResourceName", () => {
-  it("displays full path", () => {
-    const wrapper = shallowMount(Name, {
-      propsData: {
-        fullPath,
-        isPathDisplayed: true,
-        name,
-        extension,
-        type,
-      },
-    })
-
-    expect(wrapper.find(".oc-resource-path").text()).toMatch("…/nature/")
-    expect(wrapper.find(".oc-resource-basename").text()).toMatch("forest")
-    expect(wrapper.find(".oc-resource-extension").text()).toMatch(".jpg")
-    expect(wrapper).toMatchSnapshot()
-  })
-
-  it("displays only direct parent", () => {
-    const wrapper = shallowMount(Name, {
-      propsData: {
-        fullPath: "Documents/notes.txt",
-        isPathDisplayed: true,
-        name: "notes.txt",
-        extension: "txt",
-        type: "file",
-      },
-    })
-
-    expect(wrapper.find(".oc-resource-path").text()).toMatch("Documents/")
-    expect(wrapper.find(".oc-resource-basename").text()).toMatch("notes")
-    expect(wrapper.find(".oc-resource-extension").text()).toMatch(".txt")
-    expect(wrapper).toMatchSnapshot()
-  })
-
-  it("hides the path if not enabled", () => {
-    const wrapper = shallowMount(Name, {
-      propsData: {
-        fullPath,
-        name,
-        extension,
-        type,
-      },
-    })
-
-    expect(wrapper.find(".oc-resource-path").exists()).toBeFalsy()
-    expect(wrapper.find(".oc-resource-basename").text()).toMatch("forest")
-    expect(wrapper.find(".oc-resource-extension").text()).toMatch(".jpg")
-    expect(wrapper).toMatchSnapshot()
-  })
-
   it("doesn't add extension to hidden folder", () => {
     const wrapper = shallowMount(Name, {
       propsData: {

src/components/atoms/OcResourceName/OcResourceName.vue

@@ -7,10 +7,7 @@
     :data-test-resource-type="type"
   >
     <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 class="oc-resource-basename" v-text="displayName" />
     </span>
     <span v-if="extension" class="oc-resource-extension" v-text="displayExtension" />
   </span>

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

@@ -1,17 +1,11 @@
 // 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"><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"><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"><span class="oc-text-truncate"><!----><span class="oc-resource-basename">.hidden</span></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"><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"><span class="oc-text-truncate"><!----><span class="oc-resource-basename">folder.with.dots</span></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/molecules/OcStatusIndicators/OcStatusIndicators.vue

@@ -14,14 +14,20 @@
         :data-test-indicator-type="indicator.type"
         @click="indicator.handler(resource, indicator.target)"
       >
-        <oc-icon :name="indicator.icon" :fill-type="indicator.fillType" variation="passive" />
+        <oc-icon
+          :name="indicator.icon"
+          size="small"
+          :fill-type="indicator.fillType"
+          variation="passive"
+        />
       </oc-button>
       <oc-icon
         v-else
         :id="indicator.id"
         :key="indicator.id"
         v-oc-tooltip="indicator.label"
         tabindex="-1"
+        size="small"
         class="oc-status-indicators-indicator"
         :name="indicator.icon"
         :fill-type="indicator.fillType"

src/components/organisms/OcResource/OcResource.vue

@@ -43,8 +43,22 @@
         :full-path="resource.path"
         :is-path-displayed="isPathDisplayed"
       />
-      <div v-if="resource.indicators.length > 0" class="oc-resource-indicators">
-        <oc-status-indicators :resource="resource" :indicators="resource.indicators" />
+      <div class="oc-resource-indicators">
+        <component
+          :is="parentFolderComponentType"
+          :to="parentFolderLinkPath"
+          :style="parentFolderStyle"
+          v-if="isPathDisplayed"
+          class="parent-folder"
+        >
+          <oc-icon name="folder-2" size="small" fill-type="line" />
+          <span class="text" v-text="parentFolder" />
+        </component>
+        <oc-status-indicators
+          v-if="resource.indicators.length"
+          :resource="resource"
+          :indicators="resource.indicators"
+        />
       </div>
     </div>
   </div>
@@ -56,6 +70,7 @@ import OcStatusIndicators from "../../molecules/OcStatusIndicators/OcStatusIndic
 import OcIcon from "../../atoms/OcIcon/OcIcon.vue"
 import OcResourceName from "../../atoms/OcResourceName/OcResourceName.vue"
 import uniqueId from "../../../utils/uniqueId"
+import * as path from "path"
 
 /**
  * Displays a resource together with the resource type icon or thumbnail
@@ -135,8 +150,37 @@ export default {
       default: true,
     },
   },
-
   computed: {
+    parentFolderComponentType() {
+      return this.targetRoute !== null ? "router-link" : "span"
+    },
+
+    parentFolder() {
+      const folder = path.basename(path.dirname(this.resource.path)).replace(".", "")
+      return folder !== "" ? folder : this.$gettext("All Files and Folders")
+    },
+
+    parentFolderStyle() {
+      const hasLinkTarget = this.targetRoute !== null
+      return {
+        cursor: hasLinkTarget ? "pointer" : "default",
+      }
+    },
+
+    parentFolderLinkPath() {
+      if (this.targetRoute === null) {
+        return {}
+      }
+      return {
+        name: this.targetRoute.name,
+        query: this.targetRoute.query,
+        params: {
+          item: path.dirname(this.resource.path),
+          ...this.targetRoute.params,
+        },
+      }
+    },
+
     isFolder() {
       return this.resource.type === "folder"
     },
@@ -251,6 +295,28 @@ export default {
 
   &-indicators {
     display: flex;
+
+    .parent-folder {
+      display: flex;
+      align-items: center;
+
+      padding: 0 2px 0 2px;
+      margin: 0 8px 0 -2px;
+
+      .oc-icon {
+        padding-right: 3px;
+      }
+
+      .text {
+        font-size: 0.8125rem;
+        color: var(--oc-color-text-muted);
+      }
+
+      &:hover {
+        background-color: var(--oc-color-input-bg);
+        border-radius: 2px;
+      }
+    }
   }
 }
 </style>