wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 19:58:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Inbox attriubute bar (#2907)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2023-04-06 10:54:27 +06:00 committed by GitHub
parent b3afed6443
commit b766ddf6de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,9 +88,11 @@
min-width: 0;
min-height: 3rem;
background-color: var(--board-card-bg-color);
border: 1px solid var(--divider-color);
border-bottom: none;
border-radius: .5rem .5rem 0 0;
&:not(.embedded) {
border: 1px solid var(--divider-color);
border-bottom: none;
border-radius: .5rem .5rem 0 0;
}
}
&__content {
flex-grow: 1;

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

@ -86,70 +86,73 @@
checkPanel()
}}
>
{#if !embedded}
<div class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}">
<div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
{#if allowClose}
<div
class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}"
class:embedded
>
<div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
{#if allowClose && !embedded}
<Button
icon={IconClose}
kind={'transparent'}
size={'medium'}
on:click={() => {
dispatch('close')
}}
/>
{/if}
{#if !embedded}
{#if $$slots.navigator}<slot name="navigator" />{/if}
{/if}
<div class="popupPanel-title__content">
{#if !twoRows && !withoutTitle}<slot name="title" />{/if}
</div>
<div class="buttons-group xsmall-gap">
<slot name="utils" />
{#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
<div class="buttons-divider" />
{/if}
{#if $$slots.aside && isAside}
<Button
icon={IconClose}
icon={IconDetails}
kind={'transparent'}
size={'medium'}
selected={asideShown}
on:click={() => {
dispatch('close')
asideShown = !asideShown
}}
/>
{/if}
{#if useMaxWidth !== undefined}
<Button
icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
kind={'transparent'}
size={'medium'}
selected={useMaxWidth}
on:click={() => {
useMaxWidth = !useMaxWidth
dispatch('maxWidth', useMaxWidth)
}}
/>
{/if}
{#if isFullSize}
<Button
icon={fullSize ? IconScale : IconScaleFull}
kind={'transparent'}
size={'medium'}
selected={fullSize}
on:click={() => {
fullSize = !fullSize
dispatch('fullsize')
}}
/>
{/if}
{#if $$slots.navigator}<slot name="navigator" />{/if}
<div class="popupPanel-title__content">
{#if !twoRows && !withoutTitle}<slot name="title" />{/if}
</div>
<div class="buttons-group xsmall-gap">
<slot name="utils" />
{#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
<div class="buttons-divider" />
{/if}
{#if $$slots.aside && isAside}
<Button
icon={IconDetails}
kind={'transparent'}
size={'medium'}
selected={asideShown}
on:click={() => {
asideShown = !asideShown
}}
/>
{/if}
{#if useMaxWidth !== undefined}
<Button
icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
kind={'transparent'}
size={'medium'}
selected={useMaxWidth}
on:click={() => {
useMaxWidth = !useMaxWidth
dispatch('maxWidth', useMaxWidth)
}}
/>
{/if}
{#if isFullSize}
<Button
icon={fullSize ? IconScale : IconScaleFull}
kind={'transparent'}
size={'medium'}
selected={fullSize}
on:click={() => {
fullSize = !fullSize
dispatch('fullsize')
}}
/>
{/if}
</div>
</div>
{#if twoRows && !withoutTitle}
<div class="popupPanel-title row-bottom"><slot name="title" /></div>
{/if}
</div>
{/if}
{#if twoRows && !withoutTitle}
<div class="popupPanel-title row-bottom"><slot name="title" /></div>
{/if}
</div>
<div class="popupPanel-body {$deviceInfo.isMobile ? 'mobile' : 'main'}" class:asideShown class:embedded>
{#if $deviceInfo.isMobile}
<Scroller horizontal padding={'.5rem .75rem'}>

46
plugins/notification-resources/src/components/Inbox.svelte
View File

@ -22,6 +22,8 @@
import view from '@hcengineering/view'
import NotificationView from './NotificationView.svelte'
export let visibileNav: boolean
const client = getClient()
const hierarchy = client.getHierarchy()
const query = createQuery()
@ -73,25 +75,39 @@
</script>
<div class="flex h-full">
<div class="antiPanel-component border-right filled indent aside">
<div class="antiNav-header bottom-divider">
<span class="fs-title overflow-label">
<Label label={notification.string.Inbox} />
</span>
{#if visibileNav}
<div class="antiPanel-component border-right filled indent aside">
<div class="header">
<span class="fs-title overflow-label">
<Label label={notification.string.Inbox} />
</span>
</div>
<div class="top-divider">
<Scroller>
{#if loading}
<Loading />
{:else}
{#each docs as doc}
<NotificationView value={doc} selected={doc.attachedTo === _id} {viewlets} on:click={selectHandler} />
{/each}
{/if}
</Scroller>
</div>
</div>
<Scroller>
{#if loading}
<Loading />
{:else}
{#each docs as doc}
<NotificationView value={doc} selected={doc.attachedTo === _id} {viewlets} on:click={selectHandler} />
{/each}
{/if}
</Scroller>
</div>
{/if}
{#if loading}
<Loading />
{:else if component && _id && _class}
<Component is={component} props={{ embedded: true, _id, _class }} />
{/if}
</div>
<style lang="scss">
.header {
min-height: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1.5rem;
}
</style>