diff --git a/frontend/src/lib/components/IconButton.svelte b/frontend/src/lib/components/IconButton.svelte index f340cfc..c131a4d 100644 --- a/frontend/src/lib/components/IconButton.svelte +++ b/frontend/src/lib/components/IconButton.svelte @@ -8,6 +8,8 @@ export let disabled = false; export let type: string | undefined = undefined; export let id: string | undefined = undefined; + export let outline: boolean | undefined = undefined; + export let border = true; export let click: ((e: MouseEvent) => void) | undefined = undefined; export let href: string | undefined = undefined; @@ -23,6 +25,8 @@ {active} {disabled} {href} + {outline} + class={border ? undefined : "border-0"} aria-label={tooltip} on:click={click} bind:inner={button} diff --git a/frontend/src/routes/edit/profile/CustomPreference.svelte b/frontend/src/routes/edit/profile/CustomPreference.svelte index 6a36c3a..cd68110 100644 --- a/frontend/src/routes/edit/profile/CustomPreference.svelte +++ b/frontend/src/routes/edit/profile/CustomPreference.svelte @@ -7,51 +7,22 @@ DropdownMenu, DropdownToggle, Icon, - Input, InputGroup, Tooltip, } from "sveltestrap"; - import icons from "../../../icons"; + import IconPicker from "./IconPicker.svelte"; export let preference: CustomPreference; export let remove: () => void; - let iconButton: HTMLElement; let sizeButton: HTMLElement; const toggleMuted = () => (preference.muted = !preference.muted); const toggleFavourite = () => (preference.favourite = !preference.favourite); - - let searchBox = ""; - let filteredIcons: string[] = []; - $: filteredIcons = searchBox - ? icons - .filter((icon) => icon.startsWith(searchBox)) - .sort() - .slice(0, 15) - : []; - - Change icon - - - - -

- -

- - {#each filteredIcons as icon} - (preference.icon = icon)} - > {icon} - {:else} -

Start typing to filter

- {/each} -
-
+ Change text size diff --git a/frontend/src/routes/edit/profile/IconPicker.svelte b/frontend/src/routes/edit/profile/IconPicker.svelte new file mode 100644 index 0000000..9538233 --- /dev/null +++ b/frontend/src/routes/edit/profile/IconPicker.svelte @@ -0,0 +1,72 @@ + + + + Change icon + + + + +

+ +

+
    + {#each filteredIcons as iconOption} +
  • + (icon = iconOption)} + /> +
  • + {/each} +
+ {#if iconCount > MAX_VISIBLE_ITEMS || showAll} + + (showAll = !showAll)} + >{showAll ? "Stop showing all results" : `Show all results (${iconCount})`} + {/if} +
+
+ +