hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 03:14:40 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Highlight own reactions (#6418)

Browse Source 
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina 2024-08-28 14:57:06 +04:00 committed by GitHub
parent a6feac023c
commit a7e3c41b92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
plugins/activity-resources/src/components/reactions/Reactions.svelte
View File

@ -15,7 +15,7 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
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 { getClient } from '@hcengineering/presentation'
@ -28,18 +28,20 @@
const dispatch = createEventDispatcher()
const client = getClient()
const me = getCurrentAccount()
let reactionsAccounts = new Map<string, Ref<Account>[]>()
$: {
reactionsAccounts.clear()
reactions.forEach((r) => {
let accounts = reactionsAccounts.get(r.emoji)
accounts = accounts ? [...accounts, r.createBy] : [r.createBy]
reactionsAccounts.set(r.emoji, accounts)
const accounts = reactionsAccounts.get(r.emoji) ?? []
reactionsAccounts.set(r.emoji, [...accounts, r.createBy])
})
reactionsAccounts = reactionsAccounts
}
function getClickHandler (emoji: string) {
function getClickHandler (emoji: string): ((e: CustomEvent) => void) | undefined {
if (readonly) return
return (e: CustomEvent) => {
e.stopPropagation()
@ -48,12 +50,12 @@
}
}
function openEmojiPalette (ev: Event) {
function openEmojiPalette (ev: Event): void {
if (readonly) return
ev.preventDefault()
ev.stopPropagation()
showPopup(EmojiPopup, {}, ev.target as HTMLElement, (emoji: string) => {
updateDocReactions(client, reactions, object, emoji)
showPopup(EmojiPopup, {}, ev.target as HTMLElement, async (emoji: string) => {
await updateDocReactions(client, reactions, object, emoji)
})
}
</script>
@ -64,12 +66,13 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="item border-radius-1"
class:highlight={accounts.includes(me._id)}
class:cursor-pointer={!readonly}
use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
on:click={getClickHandler(emoji)}
>
<div class="flex-row-center">
<div>{emoji}</div>
{emoji}
<div class="caption-color counter">{accounts.length}</div>
</div>
</div>
@ -108,8 +111,18 @@
border: none;
cursor: pointer;
&.highlight {
background: var(--global-ui-highlight-BackgroundColor);
border: 1px solid var(--global-accent-BackgroundColor);
}
&:hover {
background: var(--global-ui-highlight-BackgroundColor);
border: 1px solid var(--global-popover-ShadowColor);
&.highlight {
border: 1px solid var(--global-accent-BackgroundColor);
}
}
&.withoutBackground {