wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-11 12:57:59 +00: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"> <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 {