diff --git a/changelog/unreleased/enhancement-set-expiration-date-in-three-dots-menu b/changelog/unreleased/enhancement-set-expiration-date-in-three-dots-menu new file mode 100644 index 00000000000..35fc2a6e520 --- /dev/null +++ b/changelog/unreleased/enhancement-set-expiration-date-in-three-dots-menu @@ -0,0 +1,5 @@ +Enhancement: Moving share's "set expiration date" function +Moving "set expiration date" function to a three dots menu to help reduce visual load on simple shares in sharing pane + +https://github.com/owncloud/web/issues/9493 +https://github.com/owncloud/web/pull/9584 diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue index 48f087f766a..6a0b9f0997d 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue @@ -6,12 +6,12 @@ :max-date="dateMax" :locale="language.current" :is-required="enforced" - class="files-recipient-expiration-datepicker" + class="files-recipient-expiration-datepicker oc-width-1-1" data-testid="recipient-datepicker" > @@ -163,7 +161,4 @@ export default defineComponent({ .recipient-edit-expiration-btn-remove { vertical-align: middle; } -.files-collaborators-expiration-button { - max-width: 160px; -} diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue index e3fe4963125..592d9ba6ebd 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue @@ -34,31 +34,67 @@ -
+
- - - - +
+
+ + +
+ + + + +
  • + +
  • +
    +
    +
    + + + +
    @@ -92,6 +128,12 @@ import { import { defineComponent, inject, ref, unref, watch } from 'vue' import { Resource } from 'web-client' import { useShares } from 'web-app-files/src/composables' +import { + displayPositionedDropdown, + formatDateFromDateTime, + formatRelativeDateFromDateTime +} from 'web-pkg' +import { DateTime } from 'luxon' // just a dummy function to trick gettext tools const $gettext = (str) => { @@ -138,6 +180,16 @@ export default defineComponent({ savingDelayed.value = true }, 700) }) + + const contextMenuButtonRef = ref(undefined) + + const showContextMenuOnBtnClick = ({ dropdown, event }) => { + if (dropdown?.tippy === undefined) { + return + } + displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef)) + } + return { resource: inject('resource'), hasResharing: useCapabilityFilesSharingResharing(store), @@ -147,7 +199,9 @@ export default defineComponent({ clientService, saving, savingDelayed, - ...useShares() + ...useShares(), + showContextMenuOnBtnClick, + contextMenuButtonRef } }, @@ -184,6 +238,28 @@ export default defineComponent({ resourceIsSpace() { return this.resource.type === 'space' + }, + formattedExpirationDate() { + return this.expirationDate === null + ? null + : formatDateFromDateTime( + DateTime.fromISO(this.expirationDate).endOf('day'), + this.$language.current + ) + }, + expirationDateRelative() { + return this.expirationDate === null + ? null + : formatRelativeDateFromDateTime( + DateTime.fromISO(this.expirationDate).endOf('day'), + this.$language.current + ) + }, + screenreaderShareExpiration() { + return this.$gettext('Share expires %{ expiryDateRelative } (%{ expiryDate })', { + expiryDateRelative: this.expirationDateRelative, + expiryDate: this.expirationDate + }) } }, mounted() { @@ -392,6 +468,7 @@ export default defineComponent({ .role-selection-dropdown { max-width: 150px; } + #new-collaborators-form-create-button { padding-left: 30px; padding-right: 30px; diff --git a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js index 05b7f68971d..402d6ee178b 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js +++ b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js @@ -51,9 +51,8 @@ module.exports = { }, expandExpirationDatePicker: function (collaborator) { if (!collaborator) { - this.waitForElementVisible('@expirationDatePickerTrigger').click( - '@expirationDatePickerTrigger' - ) + this.waitForElementVisible('@threeDotsTrigger').click('@threeDotsTrigger') + this.waitForElementVisible('@setExpirationDateButton').click('@setExpirationDateButton') return client.page.FilesPageElement.expirationDatePicker() } const informationSelector = util.format( @@ -311,6 +310,12 @@ module.exports = { '//p[contains(@class, "files-collaborators-collaborator-name") and text()="%s"]/../..//span[contains(@class, "files-collaborators-collaborator-expires")]', locateStrategy: 'xpath' }, + threeDotsTrigger: { + selector: 'button#show-more-share-options-btn' + }, + setExpirationDateButton: { + selector: '.files-recipient-expiration-datepicker' + }, expirationDatePickerTrigger: { selector: '//button[contains(@class, "files-collaborators-expiration-button")]', locateStrategy: 'xpath'