CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 06:26:02 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into BUDI-8284/readonly-settings-columns-in-views

Browse source
This commit is contained in:
Adria Navarro 2024-05-28 11:48:40 +02:00 committed by GitHub
commit 251c50266b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 105 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lerna.json
View file

@ -1,5 +1,5 @@
{ {
"version": "2.27.3", "version": "2.27.4",
"npmClient": "yarn", "npmClient": "yarn",
"packages": [ "packages": [
"packages/*", "packages/*",
@ -22,4 +22,4 @@
"loadEnvFiles": false "loadEnvFiles": false
} }
} }
} }

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;

1
packages/client/src/components/app/GridBlock.svelte
View file

@ -105,6 +105,7 @@
size: "M", size: "M",
text: settings.text, text: settings.text,
type: settings.type, type: settings.type,
icon: settings.icon,
onClick: async row => { onClick: async row => {
// Create a fake, ephemeral context to run the buttons actions with // Create a fake, ephemeral context to run the buttons actions with
const id = get(component).id const id = get(component).id

29
packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
View file

@ -43,19 +43,6 @@
}) })
</script> </script>
<!-- Hidden copy of buttons to measure -->
<div class="measure" bind:this={measureContainer}>
<GridCell width="auto">
<div class="buttons">
{#each buttons as button}
<Button size="S">
{button.text || "Button"}
</Button>
{/each}
</div>
</GridCell>
</div>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="button-column" class="button-column"
@ -72,6 +59,7 @@
class="row" class="row"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
bind:this={measureContainer}
> >
<GridCell <GridCell
width="auto" width="auto"
@ -91,6 +79,9 @@
overBackground={button.type === "overBackground"} overBackground={button.type === "overBackground"}
on:click={() => handleClick(button, row)} on:click={() => handleClick(button, row)}
> >
{#if button.icon}
<i class="{button.icon} S" />
{/if}
{button.text || "Button"} {button.text || "Button"}
</Button> </Button>
{/each} {/each}
@ -130,16 +121,14 @@
gap: var(--cell-padding); gap: var(--cell-padding);
height: inherit; height: inherit;
} }
.buttons :global(.spectrum-Button-Label) {
display: flex;
align-items: center;
gap: 4px;
}
/* Add left cell border */ /* Add left cell border */
.button-column :global(.cell) { .button-column :global(.cell) {
border-left: var(--cell-border); border-left: var(--cell-border);
} }
/* Hidden copy of buttons to measure width against */
.measure {
position: absolute;
opacity: 0;
pointer-events: none;
}
</style> </style>