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'