WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-13 21:27:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

UBERF-5012: use flat message view if doc has only one notification (#4410)

Browse Source 
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina
2024-01-22 22:45:15 +07:00
committed by GitHub
parent 2c207fd13d
commit 77617e85ff
13 changed files with 196 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/notification-resources/src/components/DocNotifyContextCard.svelte
+68 -38
View File
@@ -58,6 +58,7 @@
value.attachedToClass,
notification.mixin.NotificationContextPresenter
)
$: isCompact = notifications.length === 1
</script>
{#if visibleNotification}
@@ -66,69 +67,88 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="card"
class:compact={isCompact}
on:click={() => {
dispatch('click', { context: value, notification: visibleNotification })
}}
>
<div class="header">
<!-- <CheckBox-->
<!-- circle-->
<!-- kind="primary"-->
<!-- on:value={(event) => {-->
<!-- dispatch('check', event.detail)-->
<!-- }}-->
<!-- />-->
<NotifyContextIcon {value} />
{#if presenterMixin?.labelPresenter}
<Component is={presenterMixin.labelPresenter} props={{ notification: visibleNotification, context: value }} />
{:else}
<div class="labels">
{#await getDocIdentifier(client, value.attachedTo, value.attachedToClass) then title}
{#if title}
{title}
{:else}
<Label label={hierarchy.getClass(value.attachedToClass).label} />
{/if}
{/await}
{#await getDocTitle(client, value.attachedTo, value.attachedToClass) then title}
<div class="title overflow-label" {title}>
{title ?? hierarchy.getClass(value.attachedToClass).label}
</div>
{/await}
</div>
{/if}
<div class="actions">
{#if isCompact}
<InboxNotificationPresenter value={visibleNotification} {viewlets} showNotify={false} withActions={false} />
<div class="actions compact">
<ActionIcon icon={IconMoreH} size="small" action={showMenu} />
</div>
<div class="notifyMarker">
<div class="notifyMarker compact">
<NotifyMarker count={unreadCount} />
</div>
</div>
{:else}
<div class="header">
<!-- <CheckBox-->
<!-- circle-->
<!-- kind="primary"-->
<!-- on:value={(event) => {-->
<!-- dispatch('check', event.detail)-->
<!-- }}-->
<!-- />-->
<NotifyContextIcon {value} />
<div class="notification">
<InboxNotificationPresenter value={visibleNotification} {viewlets} embedded skipLabel />
</div>
{#if presenterMixin?.labelPresenter}
<Component is={presenterMixin.labelPresenter} props={{ notification: visibleNotification, context: value }} />
{:else}
<div class="labels">
{#await getDocIdentifier(client, value.attachedTo, value.attachedToClass) then title}
{#if title}
{title}
{:else}
<Label label={hierarchy.getClass(value.attachedToClass).label} />
{/if}
{/await}
{#await getDocTitle(client, value.attachedTo, value.attachedToClass) then title}
<div class="title overflow-label" {title}>
{title ?? hierarchy.getClass(value.attachedToClass).label}
</div>
{/await}
</div>
{/if}
<div class="actions">
<ActionIcon icon={IconMoreH} size="small" action={showMenu} />
</div>
<div class="notifyMarker">
<NotifyMarker count={unreadCount} />
</div>
</div>
<div class="notification">
<InboxNotificationPresenter value={visibleNotification} {viewlets} embedded skipLabel />
</div>
{/if}
</div>
{/if}
<style lang="scss">
.card {
display: flex;
position: relative;
flex-direction: column;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0.5rem;
padding: 1rem;
padding: 0 1rem;
margin: 0.5rem 0;
&.compact {
padding: 0;
margin: 0;
}
.header {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
gap: 1.25rem;
margin-left: 0.25rem;
}
.title {
@@ -144,18 +164,28 @@
.notification {
margin-top: 1rem;
margin-left: 5.5rem;
margin-left: 4rem;
}
.notifyMarker {
position: absolute;
right: 1.875rem;
top: 0;
&.compact {
right: 2.875rem;
top: 0.5rem;
}
}
.actions {
position: absolute;
right: 0;
top: 0;
&.compact {
right: 1rem;
top: 0.5rem;
}
}
</style>