From ef7db8b5a71a25b140797258224858b70f94762c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 23 May 2024 16:36:19 +0100 Subject: [PATCH] Fix positioning and sizing of icon select and attempt to make somewhat presentable --- .../controls/IconSelect/IconSelect.svelte | 174 +++++++++--------- 1 file changed, 92 insertions(+), 82 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte index a28f5cfb3b..9369e6a5e1 100644 --- a/packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte @@ -14,16 +14,13 @@ const dispatch = createEventDispatcher() export let value = "" - export let maxIconsPerPage = 30 + export let maxIconsPerPage = 10 let searchTerm = "" let selectedLetter = "A" - let currentPage = 1 let filteredIcons = findIconByTerm(selectedLetter) - $: dispatch("change", value) - const alphabet = [ "A", "B", @@ -107,12 +104,15 @@ loading = false } - $: displayValue = value ? value.substring(3) : "Pick icon" + const select = icon => { + value = icon + dispatch("change", icon) + } - $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage) + $: displayValue = value ? value.substring(3) : "Pick icon" + $: totalPages = Math.max(1, Math.ceil(filteredIcons.length / maxIconsPerPage)) $: pageEndIdx = maxIconsPerPage * currentPage $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx) - $: pagerText = `Page ${currentPage} of ${totalPages}` @@ -123,49 +123,52 @@ - +
-
-
- {#each alphabet as letter, idx} - switchLetter(letter)} - > - {letter} - - {#if idx !== alphabet.length - 1}-{/if} - {/each} -
-
-
- { - if (event.key === "Enter") { - searchForIcon() - } - }} - thin - placeholder="Search Icon" - /> -
- - {#if value} - - {/if} -
-
-
- pageClick(false)}> - - - {pagerText} - pageClick(true)}> - - -
+
+ {#each alphabet as letter, idx} + switchLetter(letter)} + > + {letter} + + {#if idx !== alphabet.length - 1}-{/if} + {/each} +
+
+ { + if (event.key === "Enter") { + searchForIcon() + } + }} + thin + placeholder="Search icons" + /> + + {#if value} + + {/if} +
+
+
+ pageClick(false)} + class="page-btn ri-arrow-left-line ri-sm" + /> + {pagerText} + pageClick(true)} + class="page-btn ri-arrow-right-line ri-sm" + />
{#if pagedIcons.length > 0} @@ -175,7 +178,7 @@
(value = `ri-${icon}-fill`)} + on:click={() => select(`ri-${icon}-fill`)} >
@@ -185,7 +188,7 @@
(value = `ri-${icon}-line`)} + on:click={() => select(`ri-${icon}-line`)} >
@@ -196,11 +199,7 @@ {/if}
{:else} -
-
- {`There is no icons for this ${searchTerm ? "search" : "page"}`} -
-
+
No icons found
{/if}
@@ -208,11 +207,13 @@