feat: redesign share sidebar panel

packages/design-system/src/components/OcContextualHelper/OcContextualHelper.vue

@@ -4,7 +4,7 @@
       :id="buttonId"
       :aria-label="$gettext('Show more information')"
       appearance="raw"
-      class="align-middle"
+      class="flex items-center"
       no-hover
     >
       <oc-icon name="question" fill-type="line" size="small" />

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -606,7 +606,6 @@ export default { components: { VueSelect } }
       padding: 0;
 
       > * {
-        padding: 0px 2px;
         margin: 2px 2px 2px 1px;
         color: var(--oc-role-on-surface);
       }

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -30,7 +30,7 @@
       </oc-list>
       <oc-list
         v-if="canRemove"
-        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2 mt-2 border-t"
+        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove mt-2 pt-2 border-t"
       >
         <li>
           <context-menu-item :option="removeShareOption" />

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -2,9 +2,22 @@
   <div
     id="new-collaborators-form"
     data-testid="new-collaborators-form"
-    class="[&_.vs\_\_actions]:!flex-nowrap"
+    class="[&_.vs\_\_actions]:!flex-nowrap mb-8"
   >
-    <div :class="['flex', 'w-full', { 'grid grid-cols-2': isRunningOnEos }]">
+    <div :class="[{ 'flex w-full grid grid-cols-2': isRunningOnEos }]">
+      <div class="flex justify-between mb-1">
+        <div class="flex items-center">
+          <label :aria-hidden="true" for="files-share-account-type-input" class="inline-block">
+            {{ label }}
+          </label>
+          <oc-contextual-helper
+            v-if="contextualHelper?.isEnabled"
+            v-bind="contextualHelper?.data"
+            class="pl-1"
+          />
+        </div>
+        <copy-private-link :resource="resource" />
+      </div>
       <oc-select
         v-if="isRunningOnEos"
         id="files-share-account-type-input"
@@ -24,16 +37,18 @@
         id="files-share-invite-input"
         ref="ocSharingAutocomplete"
         class="w-full"
+        :placeholder="selectedCollaboratorsPlaceholder"
         :model-value="selectedCollaborators"
         :options="autocompleteResults"
         :loading="searchInProgress"
         :multiple="true"
         :filter="filterRecipients"
-        :label="selectedCollaboratorsLabel"
         :dropdown-should-open="
           ({ open, search }: DropDownShouldOpenOptions) =>
             open && search.length >= minSearchLength && !searchInProgress
         "
+        label=""
+        :label-hidden="true"
         @search:input="onSearch"
         @update:model-value="resetFocusOnInvite"
         @open="onOpen"
@@ -110,7 +125,7 @@
         />
         <oc-button
           id="show-more-share-options-btn"
-          class="ml-1 raw-hover-surface p-1"
+          class="ml-1 p-1"
           :aria-label="$gettext('Show more actions')"
           appearance="raw"
         >
@@ -183,7 +198,18 @@ import {
   useUserStore
 } from '@opencloud-eu/web-pkg'
 
-import { computed, defineComponent, inject, ref, unref, watch, onMounted, nextTick, Ref } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  ref,
+  unref,
+  watch,
+  onMounted,
+  nextTick,
+  Ref,
+  PropType
+} from 'vue'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { DateTime } from 'luxon'
 import { OcDrop } from '@opencloud-eu/design-system/components'
@@ -192,6 +218,8 @@ import { useGettext } from 'vue3-gettext'
 import { isProjectSpaceResource } from '@opencloud-eu/web-client'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 import ExpirationDateIndicator from '../../ExpirationDateIndicator.vue'
+import { ContextualHelper } from '@opencloud-eu/design-system/helpers'
+import CopyPrivateLink from '../../../../Shares/CopyPrivateLink.vue'
 
 // just a dummy function to trick gettext tools
 const $gettext = (str: string) => {
@@ -210,6 +238,7 @@ export type ShareRoleType = { id: string; label: string; longLabel: string }
 export default defineComponent({
   name: 'InviteCollaboratorForm',
   components: {
+    CopyPrivateLink,
     ExpirationDateIndicator,
     AutocompleteItem,
     RoleDropdown,
@@ -222,10 +251,24 @@ export default defineComponent({
       required: false,
       default: () => $gettext('Share')
     },
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
     inviteLabel: {
       type: String,
       required: false,
       default: ''
+    },
+    contextualHelper: {
+      type: Object as PropType<ContextualHelper>,
+      required: false,
+      default: null
+    },
+    resource: {
+      type: Object as PropType<SpaceResource | Resource>,
+      required: true
     }
   },
 
@@ -548,7 +591,7 @@ export default defineComponent({
       return this.selectedCollaborators.length > 0
     },
 
-    selectedCollaboratorsLabel() {
+    selectedCollaboratorsPlaceholder() {
       return this.inviteLabel || this.$gettext('Search')
     }
   },

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -3,7 +3,7 @@
     :data-testid="`collaborator-${isAnyUserShareType ? 'user' : 'group'}-item-${
       share.sharedWith.displayName
     }`"
-    class="py-1"
+    class="p-2 bg-role-surface-container rounded-xl"
   >
     <div class="w-full grid grid-cols-2 items-center files-collaborators-collaborator-details">
       <div class="flex items-center">

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -14,6 +14,7 @@
         :aria-label="
           mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')
         "
+        no-hover
       >
         <oc-icon v-if="showIcon" :name="selectedRole.icon" class="mr-2" />
         <span class="truncate" v-text="inviteLabel" />

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -1,16 +1,22 @@
 <template>
   <div id="oc-files-file-link" class="relative rounded-sm">
-    <div class="flex items-center">
-      <h3 class="font-semibold text-base m-0" v-text="$gettext('Public links')" />
-      <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="viaLinkHelp" />
+    <div class="flex justify-between items-center">
+      <div class="flex items-center">
+        <h3 class="font-semibold text-base m-0" v-text="$gettext('Public links')" />
+        <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="viaLinkHelp" />
+      </div>
+      <oc-button
+        v-if="canCreateLinks"
+        id="files-file-link-add"
+        appearance="raw"
+        data-testid="files-link-add-btn"
+        @click="addNewLink"
+      >
+        <span v-text="$gettext('Add link')" />
+      </oc-button>
     </div>
-    <p v-if="!directLinks.length" class="files-links-empty mt-4" v-text="noLinksLabel" />
-    <ul
-      v-else
-      id="files-links-list"
-      class="oc-list oc-list-divider mt-4"
-      :aria-label="$gettext('Public links')"
-    >
+    <p v-if="!directLinks.length" class="files-links-empty" v-text="noLinksLabel" />
+    <ul v-else id="files-links-list" class="oc-list" :aria-label="$gettext('Public links')">
       <li v-for="link in displayLinks" :key="link.id">
         <list-item
           :can-rename="true"
@@ -33,17 +39,8 @@
       </oc-button>
     </div>
     <div class="mt-4">
-      <oc-button
-        v-if="canCreateLinks"
-        id="files-file-link-add"
-        appearance="raw"
-        data-testid="files-link-add-btn"
-        @click="addNewLink"
-      >
-        <span v-text="$gettext('Add link')"
-      /></oc-button>
       <p
-        v-else
+        v-if="!canCreateLinks"
         data-testid="files-links-no-share-permissions-message"
         class="mt-4"
         v-text="$gettext('You do not have permission to create public links.')"
@@ -62,7 +59,11 @@
           '[grid-template-rows:0fr]': indirectLinkListCollapsed
         }"
       >
-        <ul class="oc-list oc-list-divider overflow-hidden" :aria-label="$gettext('Public links')">
+        <ul
+          id="files-links-list"
+          class="oc-list overflow-hidden"
+          :aria-label="$gettext('Public links')"
+        >
           <li v-for="link in indirectLinks" :key="link.id">
             <list-item
               :is-folder-share="resource.isFolder"
@@ -294,3 +295,12 @@ const deleteLinkConfirmation = ({ link }: { link: LinkShare }) => {
   })
 }
 </script>
+<style scoped>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer utilities {
+  #files-links-list li {
+    @apply pt-2;
+  }
+}
+</style>

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -1,28 +1,27 @@
 <template>
-  <div id="oc-files-sharing-sidebar" class="relative rounded-sm">
-    <div class="flex justify-between items-center">
-      <div class="flex">
-        <h3 class="font-semibold text-base m-0" v-text="$gettext('Share with people')" />
-        <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="inviteCollaboratorHelp" />
-      </div>
-      <copy-private-link :resource="resource" />
-    </div>
+  <div id="oc-files-sharing-sidebar" class="relative">
     <invite-collaborator-form
       v-if="canShare({ resource, space })"
       key="new-collaborator"
+      :label="$gettext('Share with people')"
+      :contextual-helper="{
+        isEnabled: helpersEnabled,
+        data: inviteCollaboratorHelp
+      }"
+      :resource="resource"
       class="mt-2"
     />
     <p v-else key="no-share-permissions-message" v-text="noSharePermsMessage" />
     <template v-if="hasSharees">
-      <div id="files-collaborators-headline" class="flex items-center justify-between h-10 mt-2">
+      <div id="files-collaborators-headline" class="flex items-center justify-between mt-2">
         <h4 class="font-semibold my-0" v-text="sharedWithLabel" />
       </div>
       <custom-component-target
         :extension-point="fileSideBarSharesPanelSharedWithTopExtensionPoint"
       />
       <ul
         id="files-collaborators-list"
-        class="oc-list oc-list-divider"
+        class="oc-list"
         :class="{ 'mb-4': showSpaceMembers, 'm-0': !showSpaceMembers }"
         :aria-label="$gettext('Share receivers')"
       >
@@ -110,7 +109,6 @@ import {
   CollaboratorShare
 } from '@opencloud-eu/web-client'
 import { getSharedAncestorRoute } from '@opencloud-eu/web-pkg'
-import CopyPrivateLink from '../../Shares/CopyPrivateLink.vue'
 import {
   fileSideBarSharesPanelSharedWithTopExtensionPoint,
   fileSideBarSharesPanelSharedWithBottomExtensionPoint
@@ -119,7 +117,6 @@ import {
 export default defineComponent({
   name: 'FileShares',
   components: {
-    CopyPrivateLink,
     InviteCollaboratorForm,
     CollaboratorListItem,
     CustomComponentTarget
@@ -372,3 +369,13 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer utilities {
+  #files-collaborators-list > li {
+    @apply pt-2;
+  }
+}
+</style>

packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full flex items-center justify-between">
+  <div class="w-full flex items-center justify-between p-2 rounded-xl bg-role-surface-container">
     <div class="flex items-center">
       <oc-avatar-item :width="36" icon-size="medium" icon="link" name="link" />
       <div class="grid pl-2">

packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue

@@ -2,9 +2,9 @@
   <div>
     <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading list of shares')" />
     <template v-else>
-      <space-members v-if="showSpaceMembers" class="bg-role-surface-container p-4 mb-2" />
-      <file-shares v-else class="bg-role-surface-container p-4 mb-2" />
-      <file-links v-if="showLinks" class="bg-role-surface-container p-4" />
+      <space-members v-if="showSpaceMembers" class="px-2 py-2" />
+      <file-shares v-else class="px-2 py-2" />
+      <file-links v-if="showLinks" class="px-2 py-2" />
     </template>
   </div>
 </template>