Replacing the Panel and fixed SelectPopup (#5821)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte

@@ -36,7 +36,7 @@
         return { id: i, text: title }
       }
     })
-    showPopup(SelectPopup, { value: items }, event.currentTarget)
+    showPopup(SelectPopup, { value: items, componentLink: true }, event.currentTarget)
   }
 </script>
 

packages/ui/src/components/SelectPopup.svelte

@@ -36,7 +36,8 @@
   export let onSelect: ((value: SelectPopupValueType['id'], event?: Event) => void) | undefined = undefined
   export let showShadow: boolean = true
   export let embedded: boolean = false
-  export let loading = false
+  export let componentLink: boolean = false
+  export let loading: boolean = false
 
   let popupElement: HTMLDivElement | undefined = undefined
   let search: string = ''
@@ -147,7 +148,7 @@
             }}
             disabled={loading}
           >
-            <div class="flex-row-center flex-grow pointer-events-none">
+            <div class="flex-row-center flex-grow" class:pointer-events-none={!componentLink}>
               {#if item.component}
                 <div class="flex-grow clear-mins"><svelte:component this={item.component} {...item.props} /></div>
               {:else}

plugins/drive-resources/src/components/DriveHeader.svelte

@@ -1,53 +0,0 @@
-<!--
-// Copyright © 2024 Hardcore Engineering Inc.
-//
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-<script lang="ts">
-  import { type Drive } from '@hcengineering/drive'
-  import { Button, IconDetails, IconMoreH } from '@hcengineering/ui'
-  import { showMenu } from '@hcengineering/view-resources'
-
-  import DrivePresenter from './DrivePresenter.svelte'
-
-  export let object: Drive
-  export let asideShown: boolean = false
-</script>
-
-<div class="popupPanel-title">
-  <div class="popupPanel-title__content">
-    <div class="title">
-      <DrivePresenter value={object} shouldShowAvatar={false} disabled noUnderline />
-    </div>
-  </div>
-  <div class="flex-row-center ml-3 no-print">
-    <Button
-      icon={IconMoreH}
-      iconProps={{ size: 'medium' }}
-      kind={'icon'}
-      on:click={(ev) => {
-        showMenu(ev, { object })
-      }}
-    />
-    <div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
-    <Button
-      focusIndex={10008}
-      icon={IconDetails}
-      iconProps={{ size: 'medium', filled: asideShown }}
-      kind={'icon'}
-      selected={asideShown}
-      on:click={() => {
-        asideShown = !asideShown
-      }}
-    />
-  </div>
-</div>

plugins/drive-resources/src/components/DrivePanel.svelte

@@ -16,10 +16,10 @@
   import { type Ref } from '@hcengineering/core'
   import drive, { type Drive } from '@hcengineering/drive'
   import { createQuery } from '@hcengineering/presentation'
-  import { Separator } from '@hcengineering/ui'
-  import { DocAttributeBar } from '@hcengineering/view-resources'
+  import { Panel, Scroller, Button, IconMoreH } from '@hcengineering/ui'
+  import { DocAttributeBar, showMenu } from '@hcengineering/view-resources'
 
-  import DriveHeader from './DriveHeader.svelte'
+  import DrivePresenter from './DrivePresenter.svelte'
   import FolderBrowser from './FolderBrowser.svelte'
 
   export let _id: Ref<Drive>
@@ -32,7 +32,6 @@
   }
 
   let object: Drive | undefined = undefined
-  let asideShown = false
 
   const query = createQuery()
   $: query.query(drive.class.Drive, { _id }, (res) => {
@@ -41,23 +40,30 @@
 </script>
 
 {#if object}
-  <div class="popupPanel panel {kind}" class:embedded>
-    <DriveHeader {object} bind:asideShown />
-
-    <div class="popupPanel-body">
-      <div class="popupPanel-body__main">
-        <FolderBrowser space={object._id} parent={drive.ids.Root} />
+  <Panel {embedded} allowClose={false} {kind} selectedAside={false}>
+    <svelte:fragment slot="title">
+      <div class="title">
+        <DrivePresenter value={object} shouldShowAvatar={false} disabled noUnderline />
       </div>
+    </svelte:fragment>
+    <svelte:fragment slot="utils">
+      <Button
+        icon={IconMoreH}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
+        on:click={(ev) => {
+          showMenu(ev, { object })
+        }}
+      />
+      <div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
+    </svelte:fragment>
+    <svelte:fragment slot="aside">
+      <Scroller>
+        <DocAttributeBar {object} {readonly} ignoreKeys={[]} />
+        <div class="space-divider bottom" />
+      </Scroller>
+    </svelte:fragment>
 
-      {#if asideShown}
-        <Separator name="aside" float={false} index={0} />
-        <div class="popupPanel-body__aside no-print" class:shown={asideShown}>
-          <Separator name={'panel-aside'} float={true} index={0} />
-          <div class="antiPanel-wrap__content">
-            <DocAttributeBar {object} {readonly} ignoreKeys={[]} />
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
+    <FolderBrowser space={object._id} parent={drive.ids.Root} />
+  </Panel>
 {/if}

plugins/drive-resources/src/components/FolderHeader.svelte

@@ -16,13 +16,11 @@
   import { toIdMap, type Doc, type Ref } from '@hcengineering/core'
   import drive, { type Folder } from '@hcengineering/drive'
   import { getClient } from '@hcengineering/presentation'
-  import { Button, IconDetails, IconMoreH } from '@hcengineering/ui'
-  import { DocsNavigator, showMenu } from '@hcengineering/view-resources'
+  import { DocsNavigator } from '@hcengineering/view-resources'
 
   import FolderPresenter from './FolderPresenter.svelte'
 
   export let object: Folder
-  export let asideShown: boolean = false
 
   const client = getClient()
 
@@ -50,32 +48,7 @@
   }
 </script>
 
-<div class="popupPanel-title">
-  <div class="popupPanel-title__content">
-    <DocsNavigator elements={parents} />
-    <div class="title">
-      <FolderPresenter value={object} shouldShowAvatar={false} disabled noUnderline />
-    </div>
-  </div>
-  <div class="flex-row-center ml-3 no-print">
-    <Button
-      icon={IconMoreH}
-      iconProps={{ size: 'medium' }}
-      kind={'icon'}
-      on:click={(ev) => {
-        showMenu(ev, { object })
-      }}
-    />
-    <div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
-    <Button
-      focusIndex={10008}
-      icon={IconDetails}
-      iconProps={{ size: 'medium', filled: asideShown }}
-      kind={'icon'}
-      selected={asideShown}
-      on:click={() => {
-        asideShown = !asideShown
-      }}
-    />
-  </div>
+<DocsNavigator elements={parents} />
+<div class="title">
+  <FolderPresenter value={object} shouldShowAvatar={false} disabled noUnderline />
 </div>

plugins/drive-resources/src/components/FolderPanel.svelte

@@ -16,8 +16,8 @@
   import { type Ref } from '@hcengineering/core'
   import drive, { type Folder } from '@hcengineering/drive'
   import { createQuery } from '@hcengineering/presentation'
-  import { Separator } from '@hcengineering/ui'
-  import { DocAttributeBar } from '@hcengineering/view-resources'
+  import { Panel, Button, Scroller, IconMoreH } from '@hcengineering/ui'
+  import { DocAttributeBar, showMenu } from '@hcengineering/view-resources'
 
   import FolderHeader from './FolderHeader.svelte'
   import FolderBrowser from './FolderBrowser.svelte'
@@ -32,7 +32,6 @@
   }
 
   let object: Folder | undefined = undefined
-  let asideShown = false
 
   const query = createQuery()
   $: query.query(drive.class.Folder, { _id }, (res) => {
@@ -41,23 +40,28 @@
 </script>
 
 {#if object}
-  <div class="popupPanel panel {kind}" class:embedded>
-    <FolderHeader {object} bind:asideShown />
+  <Panel {embedded} allowClose={false} {kind} selectedAside={false}>
+    <svelte:fragment slot="title">
+      <FolderHeader {object} />
+    </svelte:fragment>
+    <svelte:fragment slot="utils">
+      <Button
+        icon={IconMoreH}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
+        on:click={(ev) => {
+          showMenu(ev, { object })
+        }}
+      />
+      <div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
+    </svelte:fragment>
+    <svelte:fragment slot="aside">
+      <Scroller>
+        <DocAttributeBar {object} {readonly} ignoreKeys={[]} />
+        <div class="space-divider bottom" />
+      </Scroller>
+    </svelte:fragment>
 
-    <div class="popupPanel-body">
-      <div class="popupPanel-body__main">
-        <FolderBrowser space={object.space} parent={object._id} {readonly} />
-      </div>
-
-      {#if asideShown}
-        <Separator name="aside" float={false} index={0} />
-        <div class="popupPanel-body__aside no-print" class:shown={asideShown}>
-          <Separator name={'panel-aside'} float={true} index={0} />
-          <div class="antiPanel-wrap__content">
-            <DocAttributeBar {object} {readonly} ignoreKeys={[]} />
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
+    <FolderBrowser space={object.space} parent={object._id} {readonly} />
+  </Panel>
 {/if}