mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-09 09:20:54 +00:00
Highlight own reactions (#6418)
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
parent
a6feac023c
commit
a7e3c41b92
@ -15,7 +15,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher } from 'svelte'
|
||||||
import { Reaction } from '@hcengineering/activity'
|
import { Reaction } from '@hcengineering/activity'
|
||||||
import { Account, Doc, Ref } from '@hcengineering/core'
|
import { Account, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
|
||||||
import { EmojiPopup, IconAdd, showPopup, tooltip } from '@hcengineering/ui'
|
import { EmojiPopup, IconAdd, showPopup, tooltip } from '@hcengineering/ui'
|
||||||
import { getClient } from '@hcengineering/presentation'
|
import { getClient } from '@hcengineering/presentation'
|
||||||
|
|
||||||
@ -28,18 +28,20 @@
|
|||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
const client = getClient()
|
const client = getClient()
|
||||||
|
const me = getCurrentAccount()
|
||||||
|
|
||||||
let reactionsAccounts = new Map<string, Ref<Account>[]>()
|
let reactionsAccounts = new Map<string, Ref<Account>[]>()
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
reactionsAccounts.clear()
|
reactionsAccounts.clear()
|
||||||
reactions.forEach((r) => {
|
reactions.forEach((r) => {
|
||||||
let accounts = reactionsAccounts.get(r.emoji)
|
const accounts = reactionsAccounts.get(r.emoji) ?? []
|
||||||
accounts = accounts ? [...accounts, r.createBy] : [r.createBy]
|
reactionsAccounts.set(r.emoji, [...accounts, r.createBy])
|
||||||
reactionsAccounts.set(r.emoji, accounts)
|
|
||||||
})
|
})
|
||||||
reactionsAccounts = reactionsAccounts
|
reactionsAccounts = reactionsAccounts
|
||||||
}
|
}
|
||||||
function getClickHandler (emoji: string) {
|
|
||||||
|
function getClickHandler (emoji: string): ((e: CustomEvent) => void) | undefined {
|
||||||
if (readonly) return
|
if (readonly) return
|
||||||
return (e: CustomEvent) => {
|
return (e: CustomEvent) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@ -48,12 +50,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function openEmojiPalette (ev: Event) {
|
function openEmojiPalette (ev: Event): void {
|
||||||
if (readonly) return
|
if (readonly) return
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
ev.stopPropagation()
|
ev.stopPropagation()
|
||||||
showPopup(EmojiPopup, {}, ev.target as HTMLElement, (emoji: string) => {
|
showPopup(EmojiPopup, {}, ev.target as HTMLElement, async (emoji: string) => {
|
||||||
updateDocReactions(client, reactions, object, emoji)
|
await updateDocReactions(client, reactions, object, emoji)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -64,12 +66,13 @@
|
|||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div
|
<div
|
||||||
class="item border-radius-1"
|
class="item border-radius-1"
|
||||||
|
class:highlight={accounts.includes(me._id)}
|
||||||
class:cursor-pointer={!readonly}
|
class:cursor-pointer={!readonly}
|
||||||
use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
|
use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
|
||||||
on:click={getClickHandler(emoji)}
|
on:click={getClickHandler(emoji)}
|
||||||
>
|
>
|
||||||
<div class="flex-row-center">
|
<div class="flex-row-center">
|
||||||
<div>{emoji}</div>
|
{emoji}
|
||||||
<div class="caption-color counter">{accounts.length}</div>
|
<div class="caption-color counter">{accounts.length}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -108,8 +111,18 @@
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
background: var(--global-ui-highlight-BackgroundColor);
|
||||||
|
border: 1px solid var(--global-accent-BackgroundColor);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--global-ui-highlight-BackgroundColor);
|
background: var(--global-ui-highlight-BackgroundColor);
|
||||||
|
border: 1px solid var(--global-popover-ShadowColor);
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
border: 1px solid var(--global-accent-BackgroundColor);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.withoutBackground {
|
&.withoutBackground {
|
||||||
|
Loading…
Reference in New Issue
Block a user