diff --git a/changelog/unreleased/enhancement-parent-folder-distinguish-files b/changelog/unreleased/enhancement-parent-folder-distinguish-files
new file mode 100644
index 000000000..ec2655368
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/assets/icons/side-bar-right-fill.svg b/src/assets/icons/side-bar-right-fill.svg
new file mode 100644
index 000000000..799ea1699
--- /dev/null
+++ b/src/assets/icons/side-bar-right-fill.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/icons/side-bar-right-line.svg b/src/assets/icons/side-bar-right-line.svg
new file mode 100644
index 000000000..5b10d8691
--- /dev/null
+++ b/src/assets/icons/side-bar-right-line.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/atoms/OcResourceName/OcResourceName.spec.js b/src/components/atoms/OcResourceName/OcResourceName.spec.js
index fcef59eaf..c80b23fd5 100644
--- a/src/components/atoms/OcResourceName/OcResourceName.spec.js
+++ b/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: {
diff --git a/src/components/atoms/OcResourceName/OcResourceName.vue b/src/components/atoms/OcResourceName/OcResourceName.vue
index f7c7dcc7d..c91208b86 100644
--- a/src/components/atoms/OcResourceName/OcResourceName.vue
+++ b/src/components/atoms/OcResourceName/OcResourceName.vue
@@ -7,10 +7,7 @@
:data-test-resource-type="type"
>
-
+
diff --git a/src/components/atoms/OcResourceName/__snapshots__/OcResourceName.spec.js.snap b/src/components/atoms/OcResourceName/__snapshots__/OcResourceName.spec.js.snap
index f5fac6905..f73f1bb3d 100644
--- a/src/components/atoms/OcResourceName/__snapshots__/OcResourceName.spec.js.snap
+++ b/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`] = `…/nature/forest .jpg`;
-
-exports[`OcResourceName displays only direct parent 1`] = `Documents/notes .txt`;
-
exports[`OcResourceName doesn't add extension to hidden folder 1`] = `
-.hidden
+.hidden
`;
-exports[`OcResourceName hides the path if not enabled 1`] = `forest .jpg`;
-
exports[`OcResourceName renders folder names with dots completely in the basename 1`] = `
-folder.with.dots
+folder.with.dots
`;
diff --git a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue
index e4832b353..a031ce123 100644
--- a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue
+++ b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue
@@ -14,7 +14,12 @@
:data-test-indicator-type="indicator.type"
@click="indicator.handler(resource, indicator.target)"
>
-
+
-
@@ -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;
+ }
+ }
}
}