Fix 'show' button in space sidebar details

owncloud · May 9, 2022 · bb55ffb · bb55ffb
1 parent 8cc8178
commit bb55ffb
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 101 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-link-sharing b/changelog/unreleased/enhancement-redesign-link-sharing
@@ -4,3 +4,4 @@ We have redesigned the public link list in the right sidebar. Links now can be e
 
 https://github.com/owncloud/web/pull/6749
 https://github.com/owncloud/web/pull/6885
+https://github.com/owncloud/web/pull/6920
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -12,91 +12,68 @@
         class="space-default-image oc-px-m oc-py-m"
       />
     </div>
-    <div
-      v-if="hasMemberShares || hasLinkShares"
-      class="oc-flex oc-flex-middle oc-mb-m oc-text-small"
-    >
-      <div v-if="hasMemberShares" class="oc-flex oc-flex-middle">
-        <oc-button
-          appearance="raw"
-          :aria-label="$gettext('Open the member panel')"
-          @click="expandMemberPanel"
-        >
-          <oc-icon name="group" class="oc-mr-s" />
-        </oc-button>
-      </div>
-      <div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
-        <oc-button
-          appearance="raw"
-          :aria-label="$gettext('Open the link panel')"
-          @click="expandLinkPanel"
-        >
-          <oc-icon name="link" class="oc-mr-s" />
-        </oc-button>
-      </div>
-      <div>
-        <span v-if="hasMemberShares">
-          <span v-text="memberShareLabel" />
-          <oc-button
-            appearance="raw"
-            :aria-label="$gettext('Open the member panel')"
-            size="small"
-            @click="expandMemberPanel"
-          >
-            <span class="oc-text-small" v-text="$gettext('Show')"></span>
-          </oc-button>
-        </span>
-        <span v-if="hasMemberShares && hasLinkShares">·</span>
-        <span v-if="hasLinkShares">
-          <span v-text="linkShareLabel" />
-          <oc-button
-            appearance="raw"
-            :aria-label="$gettext('Open the link panel')"
-            size="small"
-            @click="expandLinkPanel"
-          >
-            <span class="oc-text-small" v-text="$gettext('Show')"></span>
-          </oc-button>
-        </span>
-      </div>
-    </div>
-    <div>
-      <table class="details-table" :aria-label="detailsTableLabel">
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
-          <td v-text="lastModifyDate" />
-        </tr>
-        <tr v-if="space.description">
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
-          <td v-text="space.description" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
-          <td>
-            <span v-text="ownerUsernames" />
-          </td>
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
-          <td>
-            <space-quota :space-quota="space.spaceQuota" />
-          </td>
-        </tr>
-      </table>
+    <div v-if="hasShares" class="oc-flex oc-flex-middle oc-mb-m oc-text-small" style="gap: 15px">
+      <oc-button
+        v-if="hasMemberShares"
+        appearance="raw"
+        :aria-label="openSharesPanelMembersHint"
+        @click="expandSharesPanel"
+      >
+        <oc-icon name="group" />
+      </oc-button>
+      <oc-button
+        v-if="hasLinkShares"
+        appearance="raw"
+        :aria-label="openSharesPanelLinkHint"
+        @click="expandSharesPanel"
+      >
+        <oc-icon name="link" />
+      </oc-button>
+      <p v-text="shareLabel" />
+      <oc-button
+        appearance="raw"
+        :aria-label="openSharesPanelHint"
+        size="small"
+        @click="expandSharesPanel"
+      >
+        <span class="oc-text-small" v-text="$gettext('Show')" />
+      </oc-button>
     </div>
+    <table class="details-table" :aria-label="detailsTableLabel">
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Last activity')" />
+        <td v-text="lastModifyDate" />
+      </tr>
+      <tr v-if="space.description">
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Subtitle')" />
+        <td v-text="space.description" />
+      </tr>
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
+        <td>
+          <span v-text="ownerUsernames" />
+        </td>
+      </tr>
+      <tr>
+        <th scope="col" class="oc-pr-s" v-text="$gettext('Quota')" />
+        <td>
+          <space-quota :space-quota="space.spaceQuota" />
+        </td>
+      </tr>
+    </table>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api'
-import Mixins from '../../../mixins'
-import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
 import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
-import { spaceRoleManager } from '../../../helpers/share'
-import SpaceQuota from '../../SpaceQuota.vue'
 import { loadPreview } from '../../../helpers/resource'
+import { spaceRoleManager } from '../../../helpers/share'
 import { ImageDimension } from '../../../constants'
+import SpaceQuota from '../../SpaceQuota.vue'
 
 export default defineComponent({
   name: 'SpaceDetails',
@@ -138,10 +115,64 @@ export default defineComponent({
       'currentFileOutgoingLinks'
     ]),
     ...mapGetters(['user', 'getToken']),
-
     space() {
       return this.displayedItem.value
     },
+    hasShares() {
+      return this.hasMemberShares || this.hasLinkShares
+    },
+    shareLabel() {
+      if (this.hasMemberShares && !this.hasLinkShares) {
+        return this.memberShareLabel
+      }
+      if (!this.hasMemberShares && this.hasLinkShares) {
+        return this.linkShareLabel
+      }
+      if (this.memberShareCount === 2 && this.linkShareCount === 1) {
+        return this.$gettextInterpolate(
+          'This space has %{memberShareCount} member and %{linkShareCount} link.',
+          {
+            memberShareCount: this.memberShareCount - 1,
+            linkShareCount: this.linkShareCount
+          }
+        )
+      }
+      if (this.memberShareCount === 2 && this.linkShareCount > 1) {
+        return this.$gettextInterpolate(
+          'This space has %{memberShareCount} member and %{linkShareCount} links.',
+          {
+            memberShareCount: this.memberShareCount - 1,
+            linkShareCount: this.linkShareCount
+          }
+        )
+      }
+      if (this.memberShareCount > 2 && this.linkShareCount === 1) {
+        return this.$gettextInterpolate(
+          'This space has %{memberShareCount} members and %{linkShareCount} link.',
+          {
+            memberShareCount: this.memberShareCount,
+            linkShareCount: this.linkShareCount
+          }
+        )
+      } else {
+        return this.$gettextInterpolate(
+          'This space has %{memberShareCount} members and %{linkShareCount} links.',
+          {
+            memberShareCount: this.memberShareCount,
+            linkShareCount: this.linkShareCount
+          }
+        )
+      }
+    },
+    openSharesPanelHint() {
+      return this.$gettext('Open share panel')
+    },
+    openSharesPanelLinkHint() {
+      return this.$gettext('Open link list in share panel')
+    },
+    openSharesPanelMembersHint() {
+      return this.$gettext('Open member list in share panel')
+    },
     detailsTableLabel() {
       return this.$gettext('Overview of the information about the selected space')
     },
@@ -218,13 +249,8 @@ export default defineComponent({
       setSidebarPanel: 'setActivePanel',
       closeSidebar: 'close'
     }),
-
-    expandMemberPanel() {
+    expandSharesPanel() {
       this.setSidebarPanel('space-share-item')
-    },
-
-    expandLinkPanel() {
-      this.setSidebarPanel('links-item')
     }
   }
 })

diff --git a/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap b/...b-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
@@ -6,24 +6,22 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
     <oc-icon-stub name="layout-grid" size="xxlarge" class="space-default-image oc-px-m oc-py-m"></oc-icon-stub>
   </div>
   <!---->
-  <div>
-    <table aria-label="Overview of the information about the selected space" class="details-table">
-      <tr>
-        <th scope="col" class="oc-pr-s">Last activity</th>
-        <td>Invalid DateTime</td>
-      </tr>
-      <!---->
-      <tr>
-        <th scope="col" class="oc-pr-s">Manager</th>
-        <td><span>alice</span></td>
-      </tr>
-      <tr>
-        <th scope="col" class="oc-pr-s">Quota</th>
-        <td>
-          <space-quota-stub spacequota="[object Object]"></space-quota-stub>
-        </td>
-      </tr>
-    </table>
-  </div>
+  <table aria-label="Overview of the information about the selected space" class="details-table">
+    <tr>
+      <th scope="col" class="oc-pr-s">Last activity</th>
+      <td>Invalid DateTime</td>
+    </tr>
+    <!---->
+    <tr>
+      <th scope="col" class="oc-pr-s">Manager</th>
+      <td><span>alice</span></td>
+    </tr>
+    <tr>
+      <th scope="col" class="oc-pr-s">Quota</th>
+      <td>
+        <space-quota-stub spacequota="[object Object]"></space-quota-stub>
+      </td>
+    </tr>
+  </table>
 </div>
 `;