diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 4be58f98c0..52b4b8516a 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -35,17 +35,19 @@ export let isUtils: boolean = true export let isCustomAttr: boolean = true export let floatAside: boolean = false + export let allowBack: boolean = true export let allowClose: boolean = true + export let embedded: boolean = false export let useMaxWidth: boolean | undefined = undefined export let isFullSize: boolean = false export let contentClasses: string | undefined = undefined export let content: HTMLElement | undefined | null = undefined export let withoutContentScroll: boolean = false export let customAside: ButtonItem[] | undefined = undefined - export let selectedAside: string | false = customAside ? customAside[0].id : false + export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside - export function getAside (): string | false { - return selectedAside + export function getAside (): string | boolean { + return panel.getAside() } export function setAside (id: string | boolean): void { panel.setAside(id) @@ -100,7 +102,9 @@ bind:withoutTitle on:open on:close + {allowBack} {allowClose} + {embedded} {floatAside} bind:useMaxWidth {isFullSize} @@ -182,7 +186,7 @@ {#key object._id} {/key} {/if} @@ -201,7 +205,7 @@ props={{ object, showCommenInput: !withoutInput, - shouldScroll: true, + shouldScroll: embedded, focusIndex: 1000, boundary: content }} @@ -227,7 +231,7 @@ props={{ object, showCommenInput: !withoutInput, - shouldScroll: true, + shouldScroll: embedded, focusIndex: 1000, boundary: content }} diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index 8ba4d55833..4f32cc3b00 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -89,12 +89,13 @@ flex-shrink: 0; justify-content: stretch; align-items: center; - padding: 0 1rem 0 1.25rem; min-width: 0; min-height: 3.25rem; background-color: var(--theme-comp-header-color); border-bottom: 1px solid var(--theme-divider-color); + &:not(.indent) { padding: 0 1rem 0 1.25rem; } + &.indent { padding: 0 1rem; } &__content { display: flex; align-items: center; @@ -119,7 +120,10 @@ &:hover, &:focus, &:active { color: var(--theme-caption-color); } } &.disabled { color: var(--theme-dark-color); } - &.not-active { color: var(--theme-caption-color); } + &.not-active { + color: var(--theme-caption-color); + user-select: text; + } } } } diff --git a/packages/ui/src/components/ButtonGroup.svelte b/packages/ui/src/components/ButtonGroup.svelte index 00333826f5..0997f92271 100644 --- a/packages/ui/src/components/ButtonGroup.svelte +++ b/packages/ui/src/components/ButtonGroup.svelte @@ -18,7 +18,7 @@ import Button from './Button.svelte' export let items: ButtonItem[] - export let selected: string | false = false + export let selected: string | boolean = false export let allowDeselected: boolean = true export let mode: 'filled-icon' | 'highlighted' | 'selected' = 'selected' export let props: any = {} diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte index 91e9c3666b..0ab119a37a 100644 --- a/packages/ui/src/components/Panel.svelte +++ b/packages/ui/src/components/Panel.svelte @@ -23,6 +23,7 @@ ButtonGroup, Scroller, panelSeparators, + IconBack, ButtonItem } from '../../' import IconClose from './icons/Close.svelte' @@ -39,13 +40,16 @@ export let isFullSize: boolean = false export let withoutTitle: boolean = false export let floatAside: boolean = false + export let allowBack: boolean = true export let allowClose: boolean = true + export let embedded: boolean = false export let useMaxWidth: boolean | undefined = undefined export let customAside: ButtonItem[] | undefined = undefined - export let selectedAside: string | false = customAside ? customAside[0].id : false + export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside - export function getAside (): string | false { - return selectedAside + export function getAside (): string | boolean { + if (customAside) return selectedAside + return asideShown } export function setAside (id: string | boolean): void { if (typeof id === 'string' && customAside) { @@ -53,7 +57,7 @@ if (i === -1) return handleSelectAside({ detail: id } as CustomEvent) } else { - asideShown = id as boolean + asideShown = id !== false hideAside = !asideShown if (id === false) selectedAside = false } @@ -62,11 +66,12 @@ const dispatch = createEventDispatcher() let asideFloat: boolean = false - let asideShown: boolean = true - let hideAside: boolean = false + let asideShown: boolean = selectedAside !== false + let hideAside: boolean = !asideShown let fullSize: boolean = false - let oldAside: string | false = selectedAside + let oldAside: string | boolean = selectedAside $: if (typeof selectedAside === 'string' && oldAside !== selectedAside) oldAside = selectedAside + $: setAside(selectedAside) let oldWidth = '' let hideTimer: any | undefined @@ -122,12 +127,39 @@
{ panelWidth = element.clientWidth checkPanel() }} > -
+
+ {#if allowBack} +
diff --git a/plugins/chunter-resources/src/components/CommentPanel.svelte b/plugins/chunter-resources/src/components/CommentPanel.svelte index 06a54ac302..a0dbdf562f 100644 --- a/plugins/chunter-resources/src/components/CommentPanel.svelte +++ b/plugins/chunter-resources/src/components/CommentPanel.svelte @@ -21,6 +21,7 @@ import { Class, Doc, Ref, getCurrentAccount } from '@hcengineering/core' export let _id: Ref | undefined + export let embedded: boolean = true const client = getClient() const hierarchy = client.getHierarchy() @@ -90,5 +91,5 @@ {#if loading} {:else if component && attachedDocId && attachedDocClass} - + {/if} diff --git a/plugins/contact-resources/src/components/ChannelPanel.svelte b/plugins/contact-resources/src/components/ChannelPanel.svelte index deb72fb035..06a1b4c275 100644 --- a/plugins/contact-resources/src/components/ChannelPanel.svelte +++ b/plugins/contact-resources/src/components/ChannelPanel.svelte @@ -21,6 +21,7 @@ export let _id: Ref export let _class: Ref> + export let embedded: boolean = false const client = getClient() @@ -42,6 +43,9 @@ {#await getPresenter(channel) then presenter} {#if presenter} - + {/if} {/await} diff --git a/plugins/notification-resources/src/components/Inbox.svelte b/plugins/notification-resources/src/components/Inbox.svelte index 5b39e894d2..cf9f0d5171 100644 --- a/plugins/notification-resources/src/components/Inbox.svelte +++ b/plugins/notification-resources/src/components/Inbox.svelte @@ -187,7 +187,7 @@ }} /> {:else if component && _id && _class} - select(undefined)} /> + select(undefined)} /> {/if}
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte index 7ef6f75d73..54938121eb 100644 --- a/plugins/recruit-resources/src/components/EditVacancy.svelte +++ b/plugins/recruit-resources/src/components/EditVacancy.svelte @@ -23,22 +23,14 @@ import { Vacancy } from '@hcengineering/recruit' import tracker from '@hcengineering/tracker' import view from '@hcengineering/view' - import { - Button, - Component, - EditBox, - IconMixin, - IconMoreH, - Label, - showPopup, - deviceOptionsStore as deviceInfo - } from '@hcengineering/ui' + import { Button, Component, EditBox, IconMixin, IconMoreH, Label, showPopup } from '@hcengineering/ui' import { ContextMenu, DocAttributeBar, DocNavLink } from '@hcengineering/view-resources' import { createEventDispatcher, onDestroy } from 'svelte' import recruit from '../plugin' import VacancyApplications from './VacancyApplications.svelte' export let _id: Ref + export let embedded: boolean = false let object: Required let rawName: string = '' @@ -136,6 +128,7 @@ isHeader={false} isSub={false} isAside={true} + {embedded} {object} on:open on:close={() => { @@ -160,7 +153,7 @@ placeholder={recruit.string.VacancyPlaceholder} kind={'large-style'} focusable - autoFocus={!$deviceInfo.isMobile} + autoFocus={!embedded} on:blur={save} /> diff --git a/plugins/setting-resources/src/components/IntegrationPanel.svelte b/plugins/setting-resources/src/components/IntegrationPanel.svelte index a1bbb04250..4db540495d 100644 --- a/plugins/setting-resources/src/components/IntegrationPanel.svelte +++ b/plugins/setting-resources/src/components/IntegrationPanel.svelte @@ -24,6 +24,7 @@ export let _id: Ref export let _class: Ref> + export let embedded: boolean = false let integration: Integration | undefined = undefined const query = createQuery() @@ -53,7 +54,7 @@ {#if integration} - +
{#if type} diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte index 7d13541b39..f6141f7eae 100644 --- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte +++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte @@ -55,6 +55,7 @@ export let _id: Ref export let _class: Ref> + export let embedded: boolean = false let lastId: Ref = _id const queryClient = createQuery() @@ -164,12 +165,14 @@ let content: HTMLElement - - +{#if !embedded} + + +{/if} {#if issue !== undefined} - - {#if issueId} + {#if !embedded}{/if} + {#if embedded && issueId}
{issueId}
- {/if} + {:else if issueId}
{issueId}
{/if}
export let _class: Ref> + export let embedded: boolean = false let lastId: Ref = _id const query = createQuery() @@ -142,6 +143,7 @@ isHeader={false} isAside={true} isSub={false} + {embedded} withoutActivity={false} bind:innerWidth on:open diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte index b4b66fa359..1c50eca251 100644 --- a/plugins/view-resources/src/components/EditDoc.svelte +++ b/plugins/view-resources/src/components/EditDoc.svelte @@ -39,6 +39,7 @@ export let _id: Ref export let _class: Ref> + export let embedded: boolean = false let realObjectClass: Ref> = _class let lastId: Ref = _id @@ -265,17 +266,20 @@ let content: HTMLElement - +{#if !embedded} + +{/if} {#if object !== undefined && finalTitle !== undefined} - - -
{finalTitle}
-
+ {#if !embedded}{/if} + {#if embedded && object} + +
{finalTitle}
+
+ {:else}
{finalTitle}
{/if}
@@ -312,7 +318,7 @@ {#if headerEditor !== undefined} {:else if dir === 'column'} diff --git a/tests/sanity/tests/model/recruiting/applications-details-page.ts b/tests/sanity/tests/model/recruiting/applications-details-page.ts index 844bde45ae..a90a253ae9 100644 --- a/tests/sanity/tests/model/recruiting/applications-details-page.ts +++ b/tests/sanity/tests/model/recruiting/applications-details-page.ts @@ -9,7 +9,7 @@ export class ApplicationsDetailsPage extends CommonRecruitingPage { constructor (page: Page) { super(page) this.page = page - this.textApplicationId = page.locator('div.popupPanel-title a.noUnderline > div.title') + this.textApplicationId = page.locator('div.popupPanel-title div.title.not-active') this.buttonState = page .locator('div[class*="collapsed-container"]') .nth(0)