This repository has been archived by the owner on Nov 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2a438eb
commit 6749fb6
Showing
6 changed files
with
179 additions
and
48 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
services/frontend/src/lib/components/message/EmojiPicker.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from "svelte"; | ||
| import EmojiCategory from "./EmojiPicker/EmojiCategory.svelte"; | ||
| import groups from 'emojibase-data/meta/groups.json' | ||
| const dispatch = createEventDispatcher() | ||
| let container: HTMLElement | ||
| function scrollToGroup(group: string) { | ||
| container.querySelector(`[data-group="${group}"]`)?.scrollIntoView({ behavior: 'smooth' }) | ||
| } | ||
| </script> | ||
|
|
||
| <div class="flex flex-row gap-4 w-full max-h-75 overflow-y-auto relative rounded" bind:this={container}> | ||
| <div class="flex flex-col items-center gap-6 bg-surface2 h-full max-h-75 px-2 py-4 sticky top-0 overflow-y-auto"> | ||
| {#each Object.keys(groups.groups) as group} | ||
| <button type="button" on:click={() => scrollToGroup(group)} class="flex items-center justify-center w-full h-full"> | ||
| <span class="inline-block i-bxs:smile text-xl" /> | ||
| </button> | ||
| {/each} | ||
| </div> | ||
| <div class="flex-col gap-8 w-full max-w-75"> | ||
| {#each Object.keys(groups.groups) as group} | ||
| <EmojiCategory hiearchy={group} on:emoji={(emoji) => dispatch('emoji', emoji.detail)}/> | ||
| {/each} | ||
| </div> | ||
| </div> |
27 changes: 27 additions & 0 deletions
27
services/frontend/src/lib/components/message/EmojiPicker/EmojiCategory.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import emojis from 'emojibase-data/en/data.json' | ||
| import groups from 'emojibase-data/meta/groups.json' | ||
| const dispatch = createEventDispatcher() | ||
| export let hiearchy: string = '0' | ||
| let open = true | ||
| </script> | ||
|
|
||
| <details bind:open={open} data-group={hiearchy}> | ||
| <summary class="marker:content-none flex flex-row gap-1 items-center text-subtext0 hover:text-text duration-300 transition-colors"> | ||
| <span class="i-bxs:smile inline-block" /> | ||
| <span>Category</span> | ||
| <span class="i-bx:chevron-down inline-block {open ? '' : 'rotate-180'}"/> | ||
| </summary> | ||
|
|
||
| <div class="flex flex-row items-center flex-wrap gap-2 pt-2"> | ||
| {#each emojis.filter((e) => e.subgroup !== undefined && groups.hierarchy[hiearchy]?.includes(e.subgroup)).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) as emoji} | ||
| <button type="button" on:click={() => dispatch('emoji', emoji.emoji)}> | ||
| <img src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/svg/{emoji.hexcode.toLowerCase()}.svg" class="block w-8 h-8 overflow-hidden" alt={emoji.emoji}> | ||
| </button> | ||
| {/each} | ||
| </div> | ||
| </details> |
59 changes: 59 additions & 0 deletions
59
services/frontend/src/lib/components/popper/SveltePopper.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <script lang="ts"> | ||
| import { computePosition } from '@floating-ui/dom' | ||
| import { onMount, tick } from 'svelte'; | ||
| export let open = false | ||
| let component: HTMLElement | undefined | ||
| let tooltip: HTMLElement | undefined | ||
| onMount(updatePosition) | ||
| $: { | ||
| open | ||
| tick().then(() => { | ||
| updatePosition() | ||
| }) | ||
| } | ||
| function updatePosition() { | ||
| if (!component || !tooltip) return | ||
| computePosition(component, tooltip, { | ||
| placement: 'top', | ||
| strategy: 'absolute', | ||
| }).then((position) => { | ||
| if (!tooltip) return | ||
| tooltip.style.left = `min(${position.x}px, calc(100% - 1rem - ${tooltip.clientWidth}px)` | ||
| tooltip.style.top = `calc(${position.y}px - 1rem)` | ||
| }) | ||
| } | ||
| function click(event: MouseEvent) { | ||
| if (component && component.contains(event.target as Node)) return | ||
| if (tooltip && tooltip.contains(event.target as Node)) return | ||
| open = false | ||
| } | ||
| </script> | ||
|
|
||
| <svelte:body on:click={click}/> | ||
|
|
||
| <div bind:this={component} on:click={() => open = !open} on:keypress={() => open = !open} role="button" tabindex="0"> | ||
| <slot open={open} /> | ||
| </div> | ||
| {#if open} | ||
| <div bind:this={tooltip} class="tooltip"> | ||
| <slot name="tooltip" /> | ||
| </div> | ||
| {/if} | ||
|
|
||
| <style> | ||
| .tooltip { | ||
| @apply w-max absolute left-0 top-0 bg-surface1 rounded; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters