9493 expiration date three dot menu (#9584)

* unfinished * finished styling etc * added changelog * removed debugging statements * removed redundant variables * quality control * removed ide renaming quirk * fixed acceptance tests + renamed drop * fixed final comments
owncloud · Aug 24, 2023 · 36f579f · 36f579f
1 parent 1c0de29
commit 36f579f
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 32 deletions.
diff --git a/changelog/unreleased/enhancement-set-expiration-date-in-three-dots-menu 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/...s/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/...s/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"
     >
       <template #default="{ togglePopover }">
         <oc-button
-          class="files-collaborators-expiration-button"
+          class="files-collaborators-expiration-button oc-p-s action-menu-item"
           data-testid="recipient-datepicker-btn"
           appearance="raw"
           gap-size="none"
@@ -20,19 +20,17 @@
           "
           @click="togglePopover"
         >
+          <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
           <span
             v-if="!dateCurrent"
             key="no-expiration-date-label"
-            class="oc-text-truncate"
             v-text="$gettext('Set expiration date')"
           />
           <span
             v-else
             key="set-expiration-date-label"
-            class="oc-text-truncate"
-            v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
+            v-text="$gettextInterpolate($gettext('Expires %{expires}'), { expires: dateExpire })"
           />
-          <oc-icon v-if="!dateCurrent" name="arrow-down-s" />
         </oc-button>
       </template>
     </oc-datepicker>
@@ -163,7 +161,4 @@ export default defineComponent({
 .recipient-edit-expiration-btn-remove {
   vertical-align: middle;
 }
-.files-collaborators-expiration-button {
-  max-width: 160px;
-}
 </style>
diff --git a/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -34,31 +34,67 @@
         <span />
       </template>
     </oc-select>
-    <div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l oc-mt-s">
+    <div class="oc-flex oc-flex-between oc-mb-l oc-mt-s">
       <role-dropdown
         :allow-share-permission="hasResharing || resourceIsSpace"
         mode="create"
         class="role-selection-dropdown"
         @option-change="collaboratorRoleChanged"
       />
-      <expiration-datepicker
-        v-if="!saving"
-        :share-types="selectedCollaborators.map((c) => c.value.shareType)"
-        @option-change="collaboratorExpiryChanged"
-      />
-      <oc-button
-        id="new-collaborators-form-create-button"
-        key="new-collaborator-save-button"
-        data-testid="new-collaborators-form-create-button"
-        :disabled="!$_isValid || saving"
-        :variation="saving ? 'passive' : 'primary'"
-        :appearance="saving ? 'outline' : 'filled'"
-        submit="submit"
-        :show-spinner="savingDelayed"
-        @click="share"
-      >
-        <span v-text="$gettext(saveButtonLabel)" />
-      </oc-button>
+      <div class="oc-flex">
+        <div v-if="expirationDate" class="oc-flex oc-flex-middle">
+          <oc-icon
+            v-oc-tooltip="formattedExpirationDate"
+            class="files-collaborators-collaborator-expiration"
+            data-testid="recipient-info-expiration-date"
+            :aria-label="formattedExpirationDate"
+            name="calendar-event"
+            fill-type="line"
+          />
+          <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
+        </div>
+        <oc-button
+          class="oc-mx-s"
+          id="show-more-share-options-btn"
+          :aria-label="$gettext('Show more actions')"
+          appearance="raw"
+        >
+          <oc-icon name="more-2" />
+          <oc-drop
+            ref="showMoreShareOptionsDropRef"
+            :drop-id="'show-more-share-options-drop'"
+            :toggle="'#show-more-share-options-btn'"
+            mode="click"
+            padding-size="small"
+          >
+            <oc-list
+              class="collaborator-edit-dropdown-options-list"
+              :aria-label="'shareEditOptions'"
+            >
+              <li class="oc-rounded oc-menu-item-hover">
+                <expiration-datepicker
+                  v-if="!saving"
+                  :share-types="selectedCollaborators.map((c) => c.value.shareType)"
+                  @option-change="collaboratorExpiryChanged"
+                />
+              </li>
+            </oc-list>
+          </oc-drop>
+        </oc-button>
+        <oc-button
+          id="new-collaborators-form-create-button"
+          key="new-collaborator-save-button"
+          data-testid="new-collaborators-form-create-button"
+          :disabled="!$_isValid || saving"
+          :variation="saving ? 'passive' : 'primary'"
+          :appearance="saving ? 'outline' : 'filled'"
+          submit="submit"
+          :show-spinner="savingDelayed"
+          @click="share"
+        >
+          <span v-text="$gettext(saveButtonLabel)" />
+        </oc-button>
+      </div>
     </div>
     <oc-hidden-announcer level="assertive" :announcement="announcement" />
   </div>
@@ -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>('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
@@ -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'