mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 11:42:30 +03:00
Make inbox messages more compact (#4378)
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
parent
f40548f0c1
commit
cf8ff1be31
@ -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}
|
||||
>
|
||||
|
@ -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
|
||||
}}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user