CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-23 05:51:29 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #13761 from Budibase/fix/button-icons

Browse source 
Fix icon select popover and make somewhat presentable
This commit is contained in:
Andrew Kingston 2024-05-28 08:47:26 +01:00 committed by GitHub
commit 4eb12c498b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 93 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte
View file

@ -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,11 @@
flex: 0 0 20px; flex: 0 0 20px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
margin-bottom: 2px;
color: var(--spectrum-global-color-gray-700);
} }
.page-btn { .page-btn {
color: var(--blue); color: var(--spectrum-global-color-gray-700);
} }
.page-btn:hover { .page-btn:hover {
cursor: pointer; cursor: pointer;