Fix positioning and sizing of icon select and attempt to make somewhat presentable
This commit is contained in:
parent
1004b052ba
commit
ef7db8b5a7
1 changed files with 92 additions and 82 deletions
|
@ -14,16 +14,13 @@
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let maxIconsPerPage = 30
|
export let maxIconsPerPage = 10
|
||||||
|
|
||||||
let searchTerm = ""
|
let searchTerm = ""
|
||||||
let selectedLetter = "A"
|
let selectedLetter = "A"
|
||||||
|
|
||||||
let currentPage = 1
|
let currentPage = 1
|
||||||
let filteredIcons = findIconByTerm(selectedLetter)
|
let filteredIcons = findIconByTerm(selectedLetter)
|
||||||
|
|
||||||
$: dispatch("change", value)
|
|
||||||
|
|
||||||
const alphabet = [
|
const alphabet = [
|
||||||
"A",
|
"A",
|
||||||
"B",
|
"B",
|
||||||
|
@ -107,12 +104,15 @@
|
||||||
loading = false
|
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
|
$: pageEndIdx = maxIconsPerPage * currentPage
|
||||||
$: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
|
$: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
|
||||||
|
|
||||||
$: pagerText = `Page ${currentPage} of ${totalPages}`
|
$: pagerText = `Page ${currentPage} of ${totalPages}`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -123,49 +123,52 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
|
<Popover
|
||||||
|
bind:this={dropdown}
|
||||||
|
on:open={setSelectedUI}
|
||||||
|
anchor={buttonAnchor}
|
||||||
|
resizable={false}
|
||||||
|
>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="search-area">
|
<div class="alphabet-area">
|
||||||
<div class="alphabet-area">
|
{#each alphabet as letter, idx}
|
||||||
{#each alphabet as letter, idx}
|
<span
|
||||||
<span
|
class="letter"
|
||||||
class="letter"
|
class:letter-selected={letter === selectedLetter}
|
||||||
class:letter-selected={letter === selectedLetter}
|
on:click={() => switchLetter(letter)}
|
||||||
on:click={() => switchLetter(letter)}
|
>
|
||||||
>
|
{letter}
|
||||||
{letter}
|
</span>
|
||||||
</span>
|
{#if idx !== alphabet.length - 1}<span>-</span>{/if}
|
||||||
{#if idx !== alphabet.length - 1}<span>-</span>{/if}
|
{/each}
|
||||||
{/each}
|
</div>
|
||||||
</div>
|
<div class="search-input">
|
||||||
<div class="search-input">
|
<Input
|
||||||
<div class="input-wrapper" style={`width: ${value ? "425" : "510"}px`}>
|
bind:value={searchTerm}
|
||||||
<Input
|
on:keyup={event => {
|
||||||
bind:value={searchTerm}
|
if (event.key === "Enter") {
|
||||||
on:keyup={event => {
|
searchForIcon()
|
||||||
if (event.key === "Enter") {
|
}
|
||||||
searchForIcon()
|
}}
|
||||||
}
|
thin
|
||||||
}}
|
placeholder="Search icons"
|
||||||
thin
|
/>
|
||||||
placeholder="Search Icon"
|
<Button secondary on:click={searchForIcon}>Search</Button>
|
||||||
/>
|
{#if value}
|
||||||
</div>
|
<Button primary on:click={() => select(null)}>Clear</Button>
|
||||||
<Button secondary on:click={searchForIcon}>Search</Button>
|
{/if}
|
||||||
{#if value}
|
</div>
|
||||||
<Button primary on:click={() => (value = null)}>Clear</Button>
|
<div class="page-area">
|
||||||
{/if}
|
<div class="pager">
|
||||||
</div>
|
<i
|
||||||
<div class="page-area">
|
on:click={() => pageClick(false)}
|
||||||
<div class="pager">
|
class="page-btn ri-arrow-left-line ri-sm"
|
||||||
<span on:click={() => pageClick(false)}>
|
/>
|
||||||
<i class="page-btn ri-arrow-left-line ri-sm" />
|
<span>{pagerText}</span>
|
||||||
</span>
|
<i
|
||||||
<span>{pagerText}</span>
|
on:click={() => pageClick(true)}
|
||||||
<span on:click={() => pageClick(true)}>
|
class="page-btn ri-arrow-right-line ri-sm"
|
||||||
<i class="page-btn ri-arrow-right-line ri-sm" />
|
/>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if pagedIcons.length > 0}
|
{#if pagedIcons.length > 0}
|
||||||
|
@ -175,7 +178,7 @@
|
||||||
<div
|
<div
|
||||||
class="icon-container"
|
class="icon-container"
|
||||||
class:selected={value === `ri-${icon}-fill`}
|
class:selected={value === `ri-${icon}-fill`}
|
||||||
on:click={() => (value = `ri-${icon}-fill`)}
|
on:click={() => select(`ri-${icon}-fill`)}
|
||||||
>
|
>
|
||||||
<div class="icon-preview">
|
<div class="icon-preview">
|
||||||
<i class={`ri-${icon}-fill ri-xl`} />
|
<i class={`ri-${icon}-fill ri-xl`} />
|
||||||
|
@ -185,7 +188,7 @@
|
||||||
<div
|
<div
|
||||||
class="icon-container"
|
class="icon-container"
|
||||||
class:selected={value === `ri-${icon}-line`}
|
class:selected={value === `ri-${icon}-line`}
|
||||||
on:click={() => (value = `ri-${icon}-line`)}
|
on:click={() => select(`ri-${icon}-line`)}
|
||||||
>
|
>
|
||||||
<div class="icon-preview">
|
<div class="icon-preview">
|
||||||
<i class={`ri-${icon}-line ri-xl`} />
|
<i class={`ri-${icon}-line ri-xl`} />
|
||||||
|
@ -196,11 +199,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="no-icons">
|
<div class="no-icons">No icons found</div>
|
||||||
<h5>
|
|
||||||
{`There is no icons for this ${searchTerm ? "search" : "page"}`}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
@ -208,11 +207,13 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 610px;
|
width: 610px;
|
||||||
height: 350px;
|
height: 380px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 10px 0px 10px 15px;
|
gap: var(--spacing-l);
|
||||||
overflow-x: hidden;
|
align-items: stretch;
|
||||||
|
padding: var(--spacing-l);
|
||||||
|
background: var(--spectrum-global-color-gray-100);
|
||||||
}
|
}
|
||||||
.search-area {
|
.search-area {
|
||||||
flex: 0 0 80px;
|
flex: 0 0 80px;
|
||||||
|
@ -223,22 +224,18 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
grid-gap: 5px;
|
grid-gap: 8px;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
}
|
||||||
.no-icons {
|
.no-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
}
|
}
|
||||||
.alphabet-area {
|
.alphabet-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
padding-bottom: 10px;
|
|
||||||
padding-right: 15px;
|
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
.loading-container {
|
.loading-container {
|
||||||
|
@ -248,43 +245,55 @@
|
||||||
}
|
}
|
||||||
.search-input {
|
.search-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
|
||||||
width: 100%;
|
|
||||||
padding-right: 15px;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
.input-wrapper {
|
.search-input :global(> :first-child) {
|
||||||
width: 510px;
|
flex: 1 1 auto;
|
||||||
margin-right: 5px;
|
|
||||||
}
|
}
|
||||||
.page-area {
|
.page-area {
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.pager {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-m);
|
||||||
|
}
|
||||||
|
.page-area i {
|
||||||
|
font-size: 16px;
|
||||||
|
transition: color 130ms ease-out;
|
||||||
|
}
|
||||||
|
.page-area i:hover {
|
||||||
|
color: var(--spectrum-global-color-blue-600);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.letter {
|
.letter {
|
||||||
color: var(--blue);
|
color: var(--spectrum-global-color-gray-700);
|
||||||
|
transition: color 130ms ease-out;
|
||||||
}
|
}
|
||||||
.letter:hover {
|
.letter:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
.letter-selected {
|
.letter-selected,
|
||||||
text-decoration: underline;
|
.letter:hover {
|
||||||
|
color: var(--spectrum-global-color-blue-600);
|
||||||
}
|
}
|
||||||
.icon-container {
|
.icon-container {
|
||||||
height: 100px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border: var(--border-dark);
|
border: 1px solid var(--spectrum-global-color-gray-400);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 130ms ease-out;
|
||||||
}
|
}
|
||||||
.icon-container:hover {
|
.icon-container:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--grey-2);
|
background: var(--spectrum-global-color-gray-200);
|
||||||
}
|
}
|
||||||
.selected {
|
.icon-container.selected {
|
||||||
background: var(--grey-3);
|
background: var(--spectrum-global-color-gray-300);
|
||||||
}
|
}
|
||||||
.icon-preview {
|
.icon-preview {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -296,9 +305,10 @@
|
||||||
flex: 0 0 20px;
|
flex: 0 0 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
.page-btn {
|
.page-btn {
|
||||||
color: var(--blue);
|
color: var(--spectrum-global-color-gray-700);
|
||||||
}
|
}
|
||||||
.page-btn:hover {
|
.page-btn:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
Loading…
Reference in a new issue