diff --git a/changelog/unreleased/enhancement-changes-to-links-in-sidebar b/changelog/unreleased/enhancement-changes-to-links-in-sidebar new file mode 100644 index 00000000000..84528e726ca --- /dev/null +++ b/changelog/unreleased/enhancement-changes-to-links-in-sidebar @@ -0,0 +1,8 @@ +Enhancement: Changes in sidebar, fix tooltips + +We've added a `runningOnEos` setting which, if on, displays two entries in the sidebar: the EOS +path and a direct link to the file. These paths along with the sidebar tooltips can now handle very +long text without overflowing. + +https://github.com/owncloud/web/issues/6849 +https://github.com/owncloud/web/pull/6959 diff --git a/docs/getting-started.md b/docs/getting-started.md index 23431235c5f..5cef8c56639 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -56,6 +56,7 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id} - `options.feedbackLink.description` Provide any description you want to see as tooltip and as accessible description. Defaults to `Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.` - `options.sharingRecipientsPerPage` Sets the amount of users shown as recipients in the dropdown when sharing resources. Default amount is 200. - `options.sidebar.shares.showAllOnLoad` Sets the list of (link) shares list in the sidebar to be initially expanded (default is a collapsed state, only showing the first three shares). +- `options.runningOnEos` Set this option to `true` if running on an [EOS storage backend](https://eos-web.web.cern.ch/eos-web/) to enable its specific features. Defaults to `false`. ### Sentry diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue index ade5a33632d..431d8038418 100644 --- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue +++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue @@ -23,7 +23,7 @@ - - - - + + + + + +
+
+

{{ ownerDisplayName }} @@ -63,11 +63,11 @@

+
+
+ +
+

+ + + + +

+
+ +
+

+ + + + +

+

@@ -96,6 +152,8 @@ import { createLocationSpaces, isAuthenticatedRoute, isLocationSpacesActive } fr import { ShareTypes } from '../../../helpers/share' import { useRoute, useRouter } from 'web-pkg/src/composables' import { getIndicators } from '../../../helpers/statusIndicators' +import copyToClipboard from 'copy-to-clipboard' +import { encodePath } from 'web-pkg/src/utils' export default defineComponent({ name: 'FileDetails', @@ -131,7 +189,10 @@ export default defineComponent({ sharedByDisplayName: '', sharedTime: 0, sharedItem: null, - shareIndicators: [] + shareIndicators: [], + copiedDirect: false, + copiedEos: false, + timeout: null }), computed: { ...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading']), @@ -140,7 +201,9 @@ export default defineComponent({ file() { return this.displayedItem.value }, - + runningOnEos() { + return !!this.configuration?.options?.runningOnEos + }, hasContent() { return ( this.hasTimestamp || @@ -157,10 +220,10 @@ export default defineComponent({ return this.$gettext('Overview of the information about the selected file') }, shareDateLabel() { - return this.$gettext('Shared:') + return this.$gettext('Shared') }, sharedViaLabel() { - return this.$gettext('Shared via:') + return this.$gettext('Shared via') }, sharedViaTooltip() { return this.$gettextInterpolate( @@ -197,16 +260,16 @@ export default defineComponent({ return this.$gettext('This file has been shared.') }, sharedByLabel() { - return this.$gettext('Shared by:') + return this.$gettext('Shared by') }, hasTimestamp() { return this.file.mdate?.length > 0 }, - timestampTitle() { - return this.$gettext('Last modified:') + timestampLabel() { + return this.$gettext('Last modified') }, - ownerTitle() { - return this.$gettext('Owner:') + ownerLabel() { + return this.$gettext('Owner') }, ownerDisplayName() { return ( @@ -218,11 +281,26 @@ export default defineComponent({ ownerAdditionalInfo() { return this.file.owner?.[0].additionalInfo }, + directLink() { + return `${this.configuration.server}files/spaces/personal/home${encodePath(this.file.path)}` + }, + directLinkLabel() { + return this.$gettext('Direct link') + }, + copyDirectLinkLabel() { + return this.$gettext('Copy direct link') + }, + eosPathLabel() { + return this.$gettext('EOS Path') + }, + copyEosPathLabel() { + return this.$gettext('Copy EOS path') + }, showSize() { return this.getResourceSize(this.file.size) !== '?' }, - sizeTitle() { - return this.$gettext('Size:') + sizeLabel() { + return this.$gettext('Size') }, showVersions() { if (this.file.type === 'folder') { @@ -230,8 +308,8 @@ export default defineComponent({ } return this.versions.length > 0 && isAuthenticatedRoute(this.$route) }, - versionsTitle() { - return this.$gettext('Versions:') + versionsLabel() { + return this.$gettext('Versions') }, seeVersionsLabel() { return this.$gettext('See all versions') @@ -349,6 +427,31 @@ export default defineComponent({ } await Promise.all(calls.map((p) => p.catch((e) => e))) this.loading = false + }, + copyEosPathToClipboard() { + copyToClipboard(this.file.path) + this.copiedEos = true + this.clipboardSuccessHandler() + this.showMessage({ + title: this.$gettext('EOS path copied'), + desc: this.$gettext('The EOS path has been copied to your clipboard.') + }) + }, + copyDirectLinkToClipboard() { + copyToClipboard(this.directLink) + this.copiedDirect = true + this.clipboardSuccessHandler() + this.showMessage({ + title: this.$gettext('Direct link copied'), + desc: this.$gettext('The direct link has been copied to your clipboard.') + }) + }, + clipboardSuccessHandler() { + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + this.copiedDirect = false + this.copiedEos = false + }, 550) } } }) @@ -359,10 +462,20 @@ export default defineComponent({ tr { height: 1.5rem; + + td { + max-width: 0; + width: 100%; + + div { + min-width: 0; + } + } } th { font-weight: 600; + white-space: nowrap; } } diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.js index 235a1bf41ff..7c05ec3e897 100644 --- a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.js +++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.js @@ -146,6 +146,13 @@ function createWrapper(testResource, testVersions = [], testPreview, publicRoute getters: { user: function () { return { id: 'marie' } + }, + configuration: function () { + return { + options: { + runningOnEos: true + } + } } }, modules: { diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap index 4490e4d9067..680b712e66d 100644 --- a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap +++ b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap @@ -12,18 +12,18 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag - + - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Shared via:Shared via
Owner:Owner

Einstein @@ -33,10 +33,32 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag

Size:Size 740 B
EOS Path +
+

/Shares/123.png

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home/Shares/123.png

+ + + +
+
@@ -54,21 +76,21 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag - + - + - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Shared via:Shared via /Shares/123.png
Shared by:Shared by Marie Curie
Owner:Owner

Einstein @@ -78,10 +100,32 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag

Size:Size 740 B
EOS Path +
+

/Shares/123.png

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home/Shares/123.png

+ + + +
+
@@ -94,13 +138,13 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Marie @@ -110,10 +154,32 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag

Size:Size 740 B
EOS Path +
+

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home

+ + + +
+
@@ -128,18 +194,18 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag - + - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Shared via:Shared via
Owner:Owner

Einstein @@ -149,10 +215,32 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag

Size:Size 740 B
EOS Path +
+

/Shares/123.png

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home/Shares/123.png

+ + + +
+
@@ -167,13 +255,13 @@ exports[`Details SideBar Panel displays a resource of type file on a public page - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Einstein @@ -183,10 +271,32 @@ exports[`Details SideBar Panel displays a resource of type file on a public page

Size:Size 740 B
EOS Path +
+

/Shares/123.png

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home/Shares/123.png

+ + + +
+
@@ -201,13 +311,13 @@ exports[`Details SideBar Panel displays a resource of type file on a public page - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Einstein @@ -217,10 +327,32 @@ exports[`Details SideBar Panel displays a resource of type file on a public page

Size:Size 740 B
EOS Path +
+

/Shares/123.png

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home/Shares/123.png

+ + + +
+
@@ -233,13 +365,13 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Marie @@ -249,10 +381,32 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p

Size:Size 740 B
EOS Path +
+

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home

+ + + +
+
@@ -265,13 +419,13 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Einstein @@ -281,10 +435,32 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p

Size:Size 740 B
EOS Path +
+

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home

+ + + +
+
@@ -297,13 +473,13 @@ exports[`Details SideBar Panel displays a resource of type folder on a public pa - + - + - + + + + + + + + +
Last modified:Last modified ABSOLUTE_TIME
Owner:Owner

Einstein @@ -313,10 +489,32 @@ exports[`Details SideBar Panel displays a resource of type folder on a public pa

Size:Size 740 B
EOS Path +
+

+ + + +
+
Direct link +
+

undefinedfiles/spaces/personal/home

+ + + +
+
diff --git a/packages/web-runtime/src/store/config.js b/packages/web-runtime/src/store/config.js index 036ae090bad..fcc9a44d183 100644 --- a/packages/web-runtime/src/store/config.js +++ b/packages/web-runtime/src/store/config.js @@ -48,7 +48,8 @@ const state = { } }, previewFileExtensions: [], - sharingRecipientsPerPage: 200 + sharingRecipientsPerPage: 200, + runningOnEos: false } }