Make inbox messages more compact (#4378)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina 2024-01-18 12:52:59 +04:00 committed by GitHub
parent f40548f0c1
commit cf8ff1be31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 116 additions and 118 deletions

View File

@ -37,6 +37,7 @@
export let shouldScroll: boolean = false
export let embedded: boolean = false
export let withActions: boolean = true
export let withFlatActions: boolean = true
export let excludedActions: string[] = []
export let actions: Action[] = []
export let onClick: (() => void) | undefined = undefined
@ -70,6 +71,7 @@
{withActions}
{actions}
{excludedActions}
{withFlatActions}
viewlet={undefined}
{onClick}
>

View File

@ -31,6 +31,7 @@
export let skipLabel = false
export let actions: Action[] = []
export let excludedActions: string[] = []
export let withFlatActions: boolean = true
export let onClick: (() => void) | undefined = undefined
export let onReply: (() => void) | undefined = undefined
@ -56,6 +57,7 @@
hideReplies,
actions,
excludedActions,
withFlatActions,
onClick,
onReply
}}

View File

@ -46,8 +46,10 @@
export let shouldScroll: boolean = false
export let embedded: boolean = false
export let withActions: boolean = true
export let withFlatActions: boolean = true
export let showEmbedded = false
export let hideReplies = false
export let skipLabel = false
export let onClick: (() => void) | undefined = undefined
export let onReply: (() => void) | undefined = undefined
@ -150,8 +152,9 @@
</div>
{/if}
{#if !skipLabel}
<slot name="header" />
{/if}
<span class="text-sm">{getDisplayTime(message.createdOn ?? 0)}</span>
</div>
@ -175,6 +178,7 @@
class:opened={isActionMenuOpened || message.isPinned}
>
{#if withActions}
{#if withFlatActions}
<AddReactionAction object={message} />
<PinMessageAction object={message} />
<SaveMessageAction object={message} />
@ -186,6 +190,7 @@
on:close={handleActionMenuClosed}
on:open={handleActionMenuOpened}
/>
{/if}
{#if withActionMenu}
<ActionIcon icon={IconMoreH} size="small" action={showMenu} />
{/if}

View File

@ -46,6 +46,8 @@
export let showEmbedded = false
export let hideReplies = false
export let actions: Action[] = []
export let skipLabel = false
export let withFlatActions: boolean = true
export let excludedActions: string[] = []
export let onClick: (() => void) | undefined = undefined
export let onReply: (() => void) | undefined = undefined
@ -157,6 +159,8 @@
{showEmbedded}
{hideReplies}
{actions}
{skipLabel}
{withFlatActions}
{onClick}
{onReply}
>

View File

@ -41,6 +41,7 @@
export let skipLabel = false
export let actions: Action[] = []
export let excludedActions: string[] = []
export let withFlatActions: boolean = true
export let onClick: (() => void) | undefined = undefined
export let onReply: (() => void) | undefined = undefined
@ -164,6 +165,7 @@
actions={additionalActions}
{showEmbedded}
{hideReplies}
{withFlatActions}
{onClick}
{onReply}
>

View File

@ -25,6 +25,7 @@
export let withActions: boolean = true
export let showEmbedded = false
export let skipLabel = false
export let withFlatActions: boolean = true
export let onClick: (() => void) | undefined = undefined
export let onReply: (() => void) | undefined = undefined
</script>
@ -39,6 +40,7 @@
{showEmbedded}
{embedded}
{skipLabel}
{withFlatActions}
{onClick}
{onReply}
/>

View File

@ -23,7 +23,7 @@
} from '@hcengineering/notification'
import { ActivityMessagePresenter, combineActivityMessages } from '@hcengineering/activity-resources'
import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
import { location, Action, CheckBox, getLocation, navigate, Component } from '@hcengineering/ui'
import { location, Action, getLocation, navigate, Component } from '@hcengineering/ui'
import { getActions } from '@hcengineering/view-resources'
import { getResource } from '@hcengineering/platform'
import chunter from '@hcengineering/chunter'
@ -35,7 +35,6 @@
export let skipLabel = false
export let viewlets: ActivityNotificationViewlet[] = []
export let onClick: (() => void) | undefined = undefined
export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
const client = getClient()
const messagesQuery = createQuery()
@ -120,20 +119,6 @@
</script>
{#if displayMessage !== undefined}
<div class="notification gap-2 ml-2">
{#if !embedded}
<div class="mt-6">
<CheckBox
circle
kind="primary"
on:value={(event) => {
if (onCheck) {
onCheck(event.detail)
}
}}
/>
</div>
{/if}
{#if viewlet}
<Component is={viewlet.presenter} props={{ message: displayMessage, notification: value, embedded, onClick }} />
{:else}
@ -146,17 +131,11 @@
{embedded}
{skipLabel}
{actions}
withFlatActions={false}
onReply={() => {
handleReply(displayMessage)
}}
{onClick}
/>
{/if}
</div>
{/if}
<style lang="scss">
.notification {
display: flex;
}
</style>

View File

@ -29,15 +29,14 @@
import { ActionIcon, CheckBox, IconMoreH, Label, showPopup } from '@hcengineering/ui'
import { getDocLinkTitle, Menu } from '@hcengineering/view-resources'
import { ActivityDocLink } from '@hcengineering/activity-resources'
import activity from '@hcengineering/activity'
import view from '@hcengineering/view'
import { InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
export let value: CommonInboxNotification
export let embedded = false
export let skipLabel = false
export let onClick: (() => void) | undefined = undefined
export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
const objectQuery = createQuery()
const client = getClient()
@ -92,18 +91,6 @@
}
</script>
<div class="flex-presenter gap-2 ml-2">
{#if !embedded}
<CheckBox
circle
kind="primary"
on:value={(event) => {
if (onCheck) {
onCheck(event.detail)
}
}}
/>
{/if}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="root clear-mins flex-grow" on:click={onClick}>
@ -131,9 +118,8 @@
<Label label={core.string.System} />
</div>
{/if}
{#if value.header}
{#if !skipLabel && value.header}
<span class="text-sm lower"><Label label={value.header} /></span>
{/if}
{#if object}
{#await getDocLinkTitle(client, object._id, object._class, object) then linkTitle}
@ -144,6 +130,7 @@
/>
{/await}
{/if}
{/if}
<span class="text-sm">{getDisplayTime(value.createdOn ?? 0)}</span>
</div>
@ -161,7 +148,6 @@
</div>
{/if}
</div>
</div>
<style lang="scss">
.root {

View File

@ -41,10 +41,19 @@
<Scroller>
{#each notifications as notification (notification._id)}
<div animate:flip={{ duration: 500 }}>
<div class="notification gap-2 ml-2">
<!-- <div class="mt-6">-->
<!-- <CheckBox-->
<!-- circle-->
<!-- kind="primary"-->
<!-- on:value={(event) => {-->
<!-- handleCheck(notification, event.detail)-->
<!-- }}-->
<!-- />-->
<!-- </div>-->
<InboxNotificationPresenter
value={notification}
{viewlets}
onCheck={(isChecked) => handleCheck(notification, isChecked)}
onClick={() => {
dispatch('click', {
context: $notifyContextsStore.find(({ _id }) => _id === notification.docNotifyContext),
@ -53,5 +62,12 @@
}}
/>
</div>
</div>
{/each}
</Scroller>
<style lang="scss">
.notification {
display: flex;
}
</style>