Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-25 07:49:37 +02:00
Code Issues Releases Activity

Add emoji picker to category dropdown; implement toggle functionality and handle emoji selection

Browse source
This commit is contained in:
Sean Morley 2024-12-14 11:30:34 -05:00
parent 0376709325
commit c0fd91ef8d
3 changed files with 50 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

@ -40,6 +40,7 @@
"type": "module",
"dependencies": {
"@lukulent/svelte-umami": "^0.0.3",
"emoji-picker-element": "^1.26.0",
"qrcode": "^1.5.4",
"svelte-i18n": "^4.0.1",
"svelte-maplibre": "^0.9.8"

8
frontend/pnpm-lock.yaml generated
View file

@ -11,6 +11,9 @@ importers:
'@lukulent/svelte-umami':
specifier: ^0.0.3
version: 0.0.3(svelte@4.2.19)
emoji-picker-element:
specifier: ^1.26.0
version: 1.26.0
qrcode:
specifier: ^1.5.4
version: 1.5.4
@ -985,6 +988,9 @@ packages:
electron-to-chromium@1.4.810:
resolution: {integrity: sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ==}
emoji-picker-element@1.26.0:
resolution: {integrity: sha512-IcffFc+LNymYScmMuxOJooZulOCOACGc1Xvj+s7XeKqpc+0EoZfWrV9o4rBjEiuM7XjsgcEjD+m5DHg0aIfnnA==}
emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@ -2885,6 +2891,8 @@ snapshots:
electron-to-chromium@1.4.810: {}
emoji-picker-element@1.26.0: {}
emoji-regex@8.0.0: {}
emoji-regex@9.2.2: {}

58
frontend/src/lib/components/CategoryDropdown.svelte
View file

@ -14,7 +14,12 @@
num_adventures: 0
};
let isOpen = false;
let isOpen: boolean = false;
let isEmojiPickerVisible: boolean = false;
function toggleEmojiPicker() {
isEmojiPickerVisible = !isEmojiPickerVisible;
}
function toggleDropdown() {
isOpen = !isOpen;
@ -31,6 +36,10 @@
selectCategory(new_category);
}
function handleEmojiSelect(event: CustomEvent) {
new_category.icon = event.detail.unicode;
}
// Close dropdown when clicking outside
let dropdownRef: HTMLDivElement;
@ -46,6 +55,9 @@
document.removeEventListener('click', handleClickOutside);
};
});
onMount(async () => {
await import('emoji-picker-element');
});
</script>
<div class="mt-2 relative" bind:this={dropdownRef}>
@ -59,23 +71,35 @@
<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex items-center gap-2">
<input
type="text"
placeholder={$t('categories.category_name')}
class="input input-bordered w-full max-w-xs"
bind:value={new_category.display_name}
/>
<input
type="text"
placeholder={$t('categories.icon')}
class="input input-bordered w-full max-w-xs"
bind:value={new_category.icon}
/>
<button on:click={custom_category} type="button" class="btn btn-primary"
>{$t('adventures.add')}</button
>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<input
type="text"
placeholder={$t('categories.category_name')}
class="input input-bordered w-full max-w-xs"
bind:value={new_category.display_name}
/>
<input
type="text"
placeholder={$t('categories.icon')}
class="input input-bordered w-full max-w-xs"
bind:value={new_category.icon}
/>
<button on:click={toggleEmojiPicker} type="button" class="btn btn-secondary">
{isEmojiPickerVisible ? 'Hide' : 'Show'} Emoji Picker
</button>
<button on:click={custom_category} type="button" class="btn btn-primary">
{$t('adventures.add')}
</button>
</div>
{#if isEmojiPickerVisible}
<div class="mt-2">
<emoji-picker on:emoji-click={handleEmojiSelect}></emoji-picker>
</div>
{/if}
</div>
<div class="flex flex-wrap gap-2 mt-2">
<!-- Sort the categories dynamically before rendering -->
{#each categories