[full-ci] Missing finedesign in Shares Panel #2 (#7402)

Redesign shares panel
owncloud · Aug 8, 2022 · 70bd46d · 70bd46d
1 parent b7da812
commit 70bd46d
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 167 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-shared-with-list b/changelog/unreleased/enhancement-redesign-shared-with-list
@@ -7,5 +7,6 @@ https://github.com/owncloud/web/pull/7252
 https://github.com/owncloud/web/pull/7310
 https://github.com/owncloud/web/pull/7315
 https://github.com/owncloud/web/pull/7372
+https://github.com/owncloud/web/pull/7402
 https://github.com/owncloud/web/issues/7110
 https://github.com/owncloud/web/issues/7340
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -3,39 +3,34 @@
     :data-testid="`collaborator-${isUser || isSpace ? 'user' : 'group'}-item-${
       share.collaborator.name
     }`"
-    class="files-collaborators-collaborator oc-flex oc-flex-middle oc-py-xs oc-flex-between"
+    class="files-collaborators-collaborator oc-py-xs"
   >
-    <div class="oc-width-1-1 oc-flex oc-flex-middle" style="gap: 10px">
-      <avatar-image
-        v-if="isUser || isSpace"
-        :userid="share.collaborator.name"
-        :user-name="share.collaborator.displayName"
-        :width="36"
-        class="files-collaborators-collaborator-indicator"
-      />
-      <oc-avatar-item
-        v-else
-        :width="36"
-        icon-size="medium"
-        :icon="shareTypeIcon"
-        :name="shareTypeKey"
-        class="files-collaborators-collaborator-indicator"
-      />
-      <div
-        class="
-          oc-width-1-1 oc-flex oc-flex-between oc-flex-middle
-          files-collaborators-collaborator-details
-        "
-      >
+    <div class="oc-width-1-1 oc-flex oc-flex-middle files-collaborators-collaborator-details">
+      <div class="oc-width-2-3 oc-flex oc-flex-middle">
         <div>
-          <div>
-            <span v-oc-tooltip="shareDisplayNameTooltip" class="oc-text-truncate oc-m-rm">
-              <span
-                aria-hidden="true"
-                class="files-collaborators-collaborator-name"
-                v-text="shareDisplayName"
-              />
-            </span>
+          <avatar-image
+            v-if="isUser || isSpace"
+            :userid="share.collaborator.name"
+            :user-name="share.collaborator.displayName"
+            :width="36"
+            class="files-collaborators-collaborator-indicator"
+          />
+          <oc-avatar-item
+            v-else
+            :width="36"
+            icon-size="medium"
+            :icon="shareTypeIcon"
+            :name="shareTypeKey"
+            class="files-collaborators-collaborator-indicator"
+          />
+        </div>
+        <div class="oc-pl-s oc-text-truncate">
+          <div v-oc-tooltip="shareDisplayNameTooltip" class="oc-text-truncate">
+            <span
+              aria-hidden="true"
+              class="files-collaborators-collaborator-name"
+              v-text="shareDisplayName"
+            />
             <span class="oc-invisible-sr" v-text="screenreaderShareDisplayName" />
           </div>
           <div>
@@ -59,59 +54,48 @@
             </div>
           </div>
         </div>
-        <div class="oc-flex oc-flex-between oc-flex-middle">
-          <span v-if="hasExpirationDate">
-            <oc-icon
-              v-oc-tooltip="expirationDate"
-              class="files-collaborators-collaborator-expiration"
-              data-testid="recipient-info-expiration-date"
-              :aria-label="expirationDate"
-              name="calendar"
-              fill-type="line"
-            />
-            <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
-          </span>
-          <div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
-            <router-link
-              v-oc-tooltip="$gettext('Navigate to parent folder')"
-              class="parent-folder oc-text-truncate"
-              :to="sharedParentRoute"
-            >
-              <span class="text" v-text="$gettext('via')" />
-              <oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
-              <span class="text oc-text-truncate" v-text="sharedParentDir" />
-            </router-link>
-          </div>
-          <edit-dropdown
-            :id="`edit-drop-down-${editDropDownToggleId}`"
-            class="files-collaborators-collaborator-edit"
-            data-testid="collaborator-edit"
-            :expiration-date="share.expires ? share.expires : null"
-            :share-category="shareCategory"
-            :can-edit-or-delete="canEditOrDelete"
-            @expirationDateChanged="shareExpirationChanged"
-            @removeShare="removeShare"
-            @showAccessDetails="showAccessDetails"
-          />
-          <oc-drop
-            ref="accessDetails"
-            class="share-access-details-drop"
-            mode="manual"
-            :target="`#edit-drop-down-${editDropDownToggleId}`"
+      </div>
+      <div class="oc-flex flex-en oc-flex-middle oc-width-1-3" style="justify-content: end">
+        <div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
+          <router-link
+            v-oc-tooltip="$gettext('Navigate to parent folder')"
+            class="parent-folder oc-text-truncate"
+            :to="sharedParentRoute"
           >
-            <h5 v-translate class="oc-text-bold oc-m-rm">Access details</h5>
-            <dl class="oc-mt-s">
-              <dt v-if="shareAdditionalInfo" v-translate class="oc-text-muted oc-mb-s">Addition</dt>
-              <dd
-                v-if="shareAdditionalInfo"
-                class="files-collaborators-collaborator-additional-info"
-                v-text="shareAdditionalInfo"
-              />
-              <dt v-translate class="oc-text-muted">Type</dt>
-              <dd class="files-collaborators-collaborator-share-type" v-text="shareTypeText" />
-            </dl>
-          </oc-drop>
+            <span class="text" v-text="$gettext('via')" />
+            <oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
+            <span class="text oc-text-truncate" v-text="sharedParentDir" />
+          </router-link>
         </div>
+        <span v-if="hasExpirationDate">
+          <oc-icon
+            v-oc-tooltip="expirationDate"
+            class="files-collaborators-collaborator-expiration"
+            data-testid="recipient-info-expiration-date"
+            :aria-label="expirationDate"
+            name="calendar"
+            fill-type="line"
+          />
+          <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
+        </span>
+        <edit-dropdown
+          :id="`edit-drop-down-${editDropDownToggleId}`"
+          class="files-collaborators-collaborator-edit"
+          data-testid="collaborator-edit"
+          :expiration-date="share.expires ? share.expires : null"
+          :share-category="shareCategory"
+          :can-edit-or-delete="canEditOrDelete"
+          @expirationDateChanged="shareExpirationChanged"
+          @removeShare="removeShare"
+          @showAccessDetails="showAccessDetails"
+        />
+        <oc-info-drop
+          ref="accessDetailsDrop"
+          class="share-access-details-drop"
+          v-bind="isSpace ? accessDetailsPropsSpace : accessDetailsProps"
+          mode="manual"
+          :target="`#edit-drop-down-${editDropDownToggleId}`"
+        />
       </div>
     </div>
   </div>
@@ -282,6 +266,68 @@ export default defineComponent({
     },
     editDropDownToggleId() {
       return uuid.v4()
+    },
+    shareDate() {
+      return DateTime.fromSeconds(parseInt(this.share.stime))
+        .setLocale(this.$language.current)
+        .toLocaleString(DateTime.DATETIME_FULL)
+    },
+    shareOwnerDisplayName() {
+      return this.share.owner.displayName
+    },
+    shareOwnerAdditionalInfo() {
+      return this.share.owner.additionalInfo
+    },
+    accessDetailsPropsSpace() {
+      const list = []
+
+      list.push({ text: this.$gettext('Name'), headline: true }, { text: this.shareDisplayName })
+
+      if (this.shareAdditionalInfo) {
+        list.push(
+          { text: this.$gettext('Additional info'), headline: true },
+          { text: this.shareAdditionalInfo }
+        )
+      }
+
+      list.push({ text: this.$gettext('Type'), headline: true }, { text: this.shareTypeText })
+
+      return {
+        title: this.$gettext('Access details'),
+        list
+      }
+    },
+    accessDetailsProps() {
+      const list = []
+
+      list.push({ text: this.$gettext('Name'), headline: true }, { text: this.shareDisplayName })
+
+      if (this.shareAdditionalInfo) {
+        list.push(
+          { text: this.$gettext('Additional info'), headline: true },
+          { text: this.shareAdditionalInfo }
+        )
+      }
+
+      list.push({ text: this.$gettext('Type'), headline: true }, { text: this.shareTypeText })
+      list.push(
+        { text: this.$gettext('Access expires'), headline: true },
+        { text: this.hasExpirationDate ? this.expirationDate : this.$gettext('no') }
+      )
+      list.push({ text: this.$gettext('Shared on'), headline: true }, { text: this.shareDate })
+      list.push(
+        { text: this.$gettext('Invited by'), headline: true },
+        {
+          text: this.shareOwnerAdditionalInfo
+            ? `${this.shareOwnerDisplayName} (${this.shareOwnerAdditionalInfo})`
+            : this.shareOwnerDisplayName
+        }
+      )
+
+      return {
+        title: this.$gettext('Access details'),
+        list
+      }
     }
   },
   methods: {
@@ -293,8 +339,7 @@ export default defineComponent({
     },
 
     showAccessDetails() {
-      console.log('SHOW EVENT EMITTED')
-      this.$refs.accessDetails.show()
+      this.$refs.accessDetailsDrop.$refs.drop.show()
     },
 
     shareRoleChanged({ role, permissions }) {

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -21,7 +21,7 @@
     <template v-if="hasSharees">
       <ul
         id="files-collaborators-list"
-        class="oc-list oc-overflow-hidden"
+        class="oc-list oc-list-divider oc-overflow-hidden"
         :class="{ 'oc-mb-l': showSpaceMembers, 'oc-m-rm': !showSpaceMembers }"
         :aria-label="$gettext('Share receivers')"
       >
@@ -427,13 +427,4 @@ export default {
 .avatars-wrapper {
   height: 40px;
 }
-.oc-list > :nth-child(n + 2) .files-collaborators-collaborator-details {
-  border-top: 1px solid var(--oc-color-border);
-  margin-top: var(--oc-space-small);
-  padding-top: var(--oc-space-small);
-}
-.oc-list > :nth-child(n + 2) .files-collaborators-collaborator-indicator {
-  margin-top: var(--oc-space-small);
-  padding-top: var(--oc-space-small);
-}
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue b/packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue
@@ -5,9 +5,9 @@
       <space-members
         v-if="showSpaceMembers"
         ref="peopleShares"
-        class="oc-background-highlight oc-p-m oc-mb-m"
+        class="oc-background-highlight oc-p-m oc-mb-s"
       />
-      <file-shares v-else ref="peopleShares" class="oc-background-highlight oc-p-m oc-mb-m" />
+      <file-shares v-else ref="peopleShares" class="oc-background-highlight oc-p-m oc-mb-s" />
       <file-links v-if="showLinks" ref="linkShares" class="oc-background-highlight oc-p-m" />
     </template>
   </div>

diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -2,7 +2,7 @@
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <div class="oc-flex">
       <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Members</h3>
-      <oc-contextual-helper class="oc-pl-xs" v-if="helpersEnabled" v-bind="spaceAddMemberHelp" />
+      <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="spaceAddMemberHelp" />
     </div>
     <invite-collaborator-form
       v-if="currentUserCanShare"

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -223,7 +223,7 @@ export default defineComponent({
   &__file_info,
   &__space_info {
     background-color: var(--oc-color-background-default);
-    padding: 0 10px;
+    padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
   }
 }
 

diff --git a/...es/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap b/...es/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
@@ -23,7 +23,7 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
     <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile"><span>Shared with me</span>
       <oc-icon-stub name="arrow-down-s" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
     </oc-button-stub>
-    <div id="oc-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded">
+    <div id="oc-drop-4" class="oc-drop oc-box-shadow-medium oc-rounded">
       <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
         <ul class="oc-list oc-my-rm oc-mx-rm">
           <li>

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
@@ -206,7 +206,7 @@ function createWrapper(
       }
     }),
     localVue,
-    stubs: stubs,
+    stubs: { ...stubs, 'oc-resource-icon': true },
     directives: {
       OcTooltip
     },

diff --git a/...eb-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap b/...eb-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.js.snap
@@ -95,7 +95,7 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
@@ -325,7 +325,7 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
@@ -361,7 +361,7 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
@@ -397,7 +397,7 @@ exports[`Details SideBar Panel displays a resource of type folder on a private p
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
@@ -453,7 +453,7 @@ exports[`Details SideBar Panel displays a resource of type folder on a public pa
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">
@@ -489,7 +489,7 @@ exports[`Details SideBar Panel displays a resource of type folder on a public pa
 <div id="oc-file-details-sidebar">
   <div>
     <div class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb">
-      <oc-resource-icon resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon>
+      <oc-resource-icon-stub resource="[object Object]" size="xxxlarge" class="details-icon"></oc-resource-icon-stub>
     </div>
     <!---->
     <table aria-label="Overview of the information about the selected file" class="details-table">

diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js
@@ -95,6 +95,11 @@ function createWrapper({
     displayName: 'Brian Murphy',
     additionalInfo: '[email protected]'
   },
+  owner = {
+    name: 'marie',
+    displayName: 'Marie Curie',
+    additionalInfo: '[email protected]'
+  },
   role = peopleRoleViewerFolder,
   modifiable = true,
   sharedParentRoute = null
@@ -119,6 +124,7 @@ function createWrapper({
       share: {
         id: 'asdf',
         collaborator,
+        owner,
         shareType,
         role
       },