From 5d50bb86660df7c71f481ad2aee68a98f3d036bf Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 30 Dec 2021 14:49:43 +0100 Subject: [PATCH 01/12] WIP --- src/components/organisms/OcResource/OcResource.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index 54e1a077e..1f8fdbe5e 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -79,7 +79,7 @@ export default { isPathDisplayed: { type: Boolean, required: false, - default: false, + default: true, }, /** * Asserts whether the resource thumbnail should be displayed From d18e909fb29b1bad1cd4bcbfd422a008dfe3193f Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Wed, 5 Jan 2022 10:47:54 +0100 Subject: [PATCH 02/12] WIP --- src/components/organisms/OcResource/OcResource.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index 1f8fdbe5e..6a30b54db 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -34,6 +34,7 @@ :full-path="resource.path" :is-path-displayed="isPathDisplayed" /> +
+ + + + {{ resource.path }} + +
@@ -135,7 +142,9 @@ export default { default: true, }, }, - + mounted() { + console.log(this.resource) + }, computed: { isFolder() { return this.resource.type === "folder" From 8bcd7f81ae1e95c3c255357404e8ca21b7119d40 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 6 Jan 2022 20:55:07 +0100 Subject: [PATCH 03/12] add parentfolder to ocresource --- .../atoms/OcResourceName/OcResourceName.vue | 2 +- .../OcStatusIndicators/OcStatusIndicators.vue | 3 +- .../organisms/OcResource/OcResource.vue | 28 ++++++++++++++----- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/OcResourceName/OcResourceName.vue b/src/components/atoms/OcResourceName/OcResourceName.vue index f7c7dcc7d..ad4647ade 100644 --- a/src/components/atoms/OcResourceName/OcResourceName.vue +++ b/src/components/atoms/OcResourceName/OcResourceName.vue @@ -7,7 +7,7 @@ :data-test-resource-type="type" > - diff --git a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue index e4832b353..c8280c758 100644 --- a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue +++ b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue @@ -14,7 +14,7 @@ :data-test-indicator-type="indicator.type" @click="indicator.handler(resource, indicator.target)" > - + -
- - - - {{ resource.path }} - +
+ + + - +
@@ -63,6 +61,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 @@ -146,6 +145,10 @@ export default { console.log(this.resource) }, computed: { + parentFolder() { + return path.basename(path.dirname(this.resource.path)); + }, + isFolder() { return this.resource.type === "folder" }, @@ -260,6 +263,17 @@ export default { &-indicators { display: flex; + + .parent-folder { + display: flex; + align-items: center; + padding-right: 10px; + + .text { + font-size: 15px; + color: var(--oc-color-text-muted); + } + } } } From d2736c9bd91f84002a591c7d1a78bee7447c170e Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 6 Jan 2022 21:00:22 +0100 Subject: [PATCH 04/12] add changelog --- .../unreleased/enhancement-parent-folder-distinguish-files | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog/unreleased/enhancement-parent-folder-distinguish-files 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 From f66bbecff3b1b41985b87f4f9d9eaa1660f9ffca Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 7 Jan 2022 11:23:31 +0100 Subject: [PATCH 05/12] add link target to parent folder --- .../atoms/OcResourceName/OcResourceName.vue | 5 +- .../OcStatusIndicators/OcStatusIndicators.vue | 7 ++- .../organisms/OcResource/OcResource.vue | 52 ++++++++++++++----- 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/src/components/atoms/OcResourceName/OcResourceName.vue b/src/components/atoms/OcResourceName/OcResourceName.vue index ad4647ade..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/molecules/OcStatusIndicators/OcStatusIndicators.vue b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue index c8280c758..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)" > - + -
- - - - - + + + + +
@@ -61,7 +64,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'; +import * as path from "path" /** * Displays a resource together with the resource type icon or thumbnail @@ -141,12 +144,22 @@ export default { default: true, }, }, - mounted() { - console.log(this.resource) - }, computed: { parentFolder() { - return path.basename(path.dirname(this.resource.path)); + const folder = path.basename(path.dirname(this.resource.path)) + if (folder !== "") return folder + return this.$gettext("All Files and Folders") + }, + + parentFolderLinkPath() { + return { + name: this.targetRoute.name, + query: this.targetRoute.query, + params: { + item: path.dirname(this.resource.path), + ...this.targetRoute.params, + }, + } }, isFolder() { @@ -267,12 +280,25 @@ export default { .parent-folder { display: flex; align-items: center; - padding-right: 10px; + margin-right: 10px; + cursor: pointer; + + padding: 0 2px 0 2px; + margin: 0 8px 0 -2px; + + .oc-icon { + padding-right: 3px; + } .text { - font-size: 15px; + font-size: 13px; color: var(--oc-color-text-muted); } + + &:hover { + background-color: var(--oc-color-input-bg); + border-radius: 2px; + } } } } From 3d2adf9d474fb0f6d87b0ae1e79124953e6d2dcb Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 7 Jan 2022 13:14:47 +0100 Subject: [PATCH 06/12] add router link, add sidebar icons --- src/assets/icons/side-bar-right-fill.svg | 6 ++++++ src/assets/icons/side-bar-right-line.svg | 6 ++++++ .../organisms/OcResource/OcResource.vue | 20 ++++++++++++++++--- 3 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/side-bar-right-fill.svg create mode 100644 src/assets/icons/side-bar-right-line.svg 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/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index ac9d6ca8c..1b3abd8ee 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -44,7 +44,11 @@ :is-path-displayed="isPathDisplayed" />
- + @@ -146,12 +150,23 @@ export default { }, computed: { parentFolder() { - const folder = path.basename(path.dirname(this.resource.path)) + const folder = path.basename(path.dirname(this.resource.path)).replace(".", "") if (folder !== "") return folder return this.$gettext("All Files and Folders") }, + parentFolderStyle() { + const hasLinkTarget = this.targetRoute !== null; + return { + cursor: hasLinkTarget ? "pointer" : "default", + } + }, + parentFolderLinkPath() { + console.log(this.resource.path) + if (this.targetRoute === null) { + return {} + } return { name: this.targetRoute.name, query: this.targetRoute.query, @@ -281,7 +296,6 @@ export default { display: flex; align-items: center; margin-right: 10px; - cursor: pointer; padding: 0 2px 0 2px; margin: 0 8px 0 -2px; From d5d992a27940aefb0609842a310aa80b4612cab2 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 7 Jan 2022 13:24:22 +0100 Subject: [PATCH 07/12] fix linter --- src/components/organisms/OcResource/OcResource.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index 1b3abd8ee..14165a776 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -48,7 +48,8 @@ v-if="isPathDisplayed" :to="parentFolderLinkPath" :style="parentFolderStyle" - class="parent-folder"> + class="parent-folder" + > @@ -156,7 +157,7 @@ export default { }, parentFolderStyle() { - const hasLinkTarget = this.targetRoute !== null; + const hasLinkTarget = this.targetRoute !== null return { cursor: hasLinkTarget ? "pointer" : "default", } From 403231e514f9691c5e8af805a310c73078bdfec3 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 7 Jan 2022 13:39:29 +0100 Subject: [PATCH 08/12] fix unittests --- .../OcResourceName/OcResourceName.spec.js | 50 ------------------- .../__snapshots__/OcResourceName.spec.js.snap | 10 +--- 2 files changed, 2 insertions(+), 58 deletions(-) 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/__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 `; From fb4af1922bafd4b0521878829aa2567b5ff2f2ba Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Fri, 7 Jan 2022 16:48:25 +0100 Subject: [PATCH 09/12] PR issues --- src/components/organisms/OcResource/OcResource.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index 14165a776..cc1d77c20 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -54,7 +54,7 @@ @@ -164,7 +164,6 @@ export default { }, parentFolderLinkPath() { - console.log(this.resource.path) if (this.targetRoute === null) { return {} } From 5d0c687e0d32e81d53501fc3308ab01b03fc9ef0 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Sat, 8 Jan 2022 11:39:34 +0100 Subject: [PATCH 10/12] differ parentfolder componenttype --- src/components/organisms/OcResource/OcResource.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index cc1d77c20..a6afb3e46 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -44,15 +44,16 @@ :is-path-displayed="isPathDisplayed" />
- - + Date: Mon, 10 Jan 2022 12:01:57 +0100 Subject: [PATCH 11/12] simplify return & remove unused margin --- src/components/organisms/OcResource/OcResource.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index a6afb3e46..7b490abbc 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -157,8 +157,7 @@ export default { parentFolder() { const folder = path.basename(path.dirname(this.resource.path)).replace(".", "") - if (folder !== "") return folder - return this.$gettext("All Files and Folders") + return folder !== "" ? folder : this.$gettext("All Files and Folders") }, parentFolderStyle() { @@ -300,7 +299,6 @@ export default { .parent-folder { display: flex; align-items: center; - margin-right: 10px; padding: 0 2px 0 2px; margin: 0 8px 0 -2px; From 11f4a7605f8d108bc23b589ffb194edf9fc9de9c Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Mon, 10 Jan 2022 14:41:42 +0100 Subject: [PATCH 12/12] change font size px to rem --- src/components/organisms/OcResource/OcResource.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index 7b490abbc..a5d73aeb2 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -94,7 +94,7 @@ export default { isPathDisplayed: { type: Boolean, required: false, - default: true, + default: false, }, /** * Asserts whether the resource thumbnail should be displayed @@ -308,7 +308,7 @@ export default { } .text { - font-size: 13px; + font-size: 0.8125rem; color: var(--oc-color-text-muted); }