hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-26 04:23:58 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Allow to use maxWidth with Panel (#2411)

Browse Source 
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2022-12-01 23:45:56 +07:00 committed by GitHub
parent f25a7bcbe2
commit 31c7586ddf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/panel/src/components/Panel.svelte
View File

@ -36,6 +36,7 @@
export let isCustomAttr: boolean = true
export let floatAside = false
export let allowClose = true
export let useMaxWidth = false
</script>
<Panel
@ -47,6 +48,7 @@
on:close
{allowClose}
{floatAside}
{useMaxWidth}
>
<svelte:fragment slot="navigator">
{#if $$slots.navigator}
@ -127,19 +129,19 @@
<slot />
</div>
{:else}
<div class="popupPanel-body__main-content py-8 clear-mins">
<div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
<slot />
</div>
{/if}
{:else if $deviceInfo.isMobile}
<div class="popupPanel-body__mobile-content clear-mins">
<div class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
<Component is={activity.component.Activity} props={{ object, integrate: true }}>
<slot />
</Component>
</div>
{:else}
<Scroller>
<div class="popupPanel-body__main-content py-8 clear-mins">
<div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
<Component is={activity.component.Activity} props={{ object, integrate: true }}>
<slot />
</Component>

5
packages/text-editor/src/components/CollaboratorEditor.svelte
View File

@ -576,6 +576,11 @@
editor.chain().focus()
}}
/>
<slot name="tools" />
</div>
{:else}
<div class="formatPanel buttons-group xsmall-gap mb-4">
<slot name="tools" />
</div>
{/if}
</div>

1
packages/text-editor/src/components/ReferenceInput.svelte
View File

@ -296,6 +296,7 @@
</div>
<div class="buttons-group large-gap ml-4 mt-2">
{#each actions as a}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="icon-button" on:click={(evt) => handleAction(a, evt)}>
<Icon icon={a.icon} size={'medium'} />
</div>

1
packages/text-editor/src/components/StyledTextArea.svelte
View File

@ -39,6 +39,7 @@
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="antiComponent styled-box clear-mins"
on:click={() => {

8
packages/theme/styles/panel.scss
View File

@ -144,6 +144,10 @@
margin-right: auto;
width: calc(100% - 7.5rem);
max-width: 860px;
&.max {
max-width: 100%;
}
}
}
@ -156,6 +160,10 @@
padding: .75rem 1.25rem;
width: calc(100% - 5rem);
max-width: 900px;
&.max {
max-width: 100%;
}
}
&.mobile {
flex-shrink: 0;

5
packages/ui/src/components/Panel.svelte
View File

@ -31,6 +31,7 @@
export let withoutTitle: boolean = false
export let floatAside = false
export let allowClose = true
export let useMaxWidth = false
const dispatch = createEventDispatcher()
@ -118,7 +119,7 @@
}}
>
{#if $$slots.header && isHeader}
<div class="popupPanel-body__header mobile bottom-divider">
<div class="popupPanel-body__header mobile bottom-divider" class:max={useMaxWidth}>
<slot name="header" />
</div>
{/if}
@ -133,7 +134,7 @@
}}
>
{#if $$slots.header && isHeader}
<div class="popupPanel-body__header main bottom-divider">
<div class="popupPanel-body__header main bottom-divider" class:max={useMaxWidth}>
<slot name="header" />
</div>
{/if}