diff --git a/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte b/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte
index 08377f5d78..f139f158b7 100644
--- a/packages/presentation/src/components/breadcrumbs/Breadcrumbs.svelte
+++ b/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>
diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 64a031498f..1a60130ca1 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/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}
diff --git a/plugins/drive-resources/src/components/DriveHeader.svelte b/plugins/drive-resources/src/components/DriveHeader.svelte
deleted file mode 100644
index 203266a000..0000000000
--- a/plugins/drive-resources/src/components/DriveHeader.svelte
+++ /dev/null
@@ -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>
diff --git a/plugins/drive-resources/src/components/DrivePanel.svelte b/plugins/drive-resources/src/components/DrivePanel.svelte
index 3ee16e12be..f96ca8ace0 100644
--- a/plugins/drive-resources/src/components/DrivePanel.svelte
+++ b/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}
diff --git a/plugins/drive-resources/src/components/FolderHeader.svelte b/plugins/drive-resources/src/components/FolderHeader.svelte
index 14136e8381..c3d44bfe3e 100644
--- a/plugins/drive-resources/src/components/FolderHeader.svelte
+++ b/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>
diff --git a/plugins/drive-resources/src/components/FolderPanel.svelte b/plugins/drive-resources/src/components/FolderPanel.svelte
index 79182d1e38..45cb80e2b8 100644
--- a/plugins/drive-resources/src/components/FolderPanel.svelte
+++ b/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}