MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update component settings to be left aligned and update long component settings labels to be shorter

This commit is contained in:
Andrew Kingston 2023-03-08 19:22:19 +00:00
parent d5f7a27d07
commit db7f267887
6 changed files with 71 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -7,7 +7,7 @@
export let title export let title
export let fillWidth export let fillWidth
export let left = "314px" export let left = "314px"
export let width = "calc(100% - 576px)" export let width = "calc(100% - 626px)"
let visible = false let visible = false

14
packages/builder/src/components/design/Panel.svelte
View File

@ -3,7 +3,6 @@
export let title export let title
export let icon export let icon
export let expandable = false
export let showAddButton = false export let showAddButton = false
export let showBackButton = false export let showBackButton = false
export let showCloseButton = false export let showCloseButton = false
@ -12,8 +11,8 @@
export let onClickCloseButton export let onClickCloseButton
export let borderLeft = false export let borderLeft = false
export let borderRight = false export let borderRight = false
export let wide = false
let wide = false
$: customHeaderContent = $$slots["panel-header-content"] $: customHeaderContent = $$slots["panel-header-content"]
</script> </script>
@ -28,13 +27,6 @@
<div class="title"> <div class="title">
<Heading size="XXS">{title || ""}</Heading> <Heading size="XXS">{title || ""}</Heading>
</div> </div>
{#if expandable}
<Icon
name={wide ? "Minimize" : "Maximize"}
hoverable
on:click={() => (wide = !wide)}
/>
{/if}
{#if showAddButton} {#if showAddButton}
<div class="add-button" on:click={onClickAddButton}> <div class="add-button" on:click={onClickAddButton}>
<Icon name="Add" /> <Icon name="Add" />
@ -74,8 +66,8 @@
border-right: var(--border-light); border-right: var(--border-light);
} }
.panel.wide { .panel.wide {
width: 420px; width: 310px;
flex: 0 0 420px; flex: 0 0 310px;
} }
.header { .header {
flex: 0 0 48px; flex: 0 0 48px;

31
packages/builder/src/components/design/settings/controls/PropertyControl.svelte
View File

@ -75,12 +75,10 @@
</script> </script>
<div class="property-control" class:highlighted={highlighted && nullishValue}> <div class="property-control" class:highlighted={highlighted && nullishValue}>
{#if type !== "boolean" && label} {#if label}
<div class="label"> <Label size="M">{label}</Label>
<Label>{label}</Label>
</div>
{/if} {/if}
<div id={`${key}-prop-control`} class="control"> <div id={`${key}-prop-control`} class="control" class:wide={!label}>
<svelte:component <svelte:component
this={control} this={control}
{componentInstance} {componentInstance}
@ -90,7 +88,6 @@
onChange={handleChange} onChange={handleChange}
bindings={allBindings} bindings={allBindings}
name={key} name={key}
text={label}
{nested} {nested}
{key} {key}
{type} {type}
@ -105,28 +102,32 @@
<style> <style>
.property-control { .property-control {
position: relative; position: relative;
display: flex; display: grid;
flex-direction: column; grid-template-columns: 90px 1fr;
justify-content: flex-start; align-items: center;
align-items: stretch;
transition: background 130ms ease-out, border-color 130ms ease-out; transition: background 130ms ease-out, border-color 130ms ease-out;
border-left: 4px solid transparent; border-left: 4px solid transparent;
margin: -6px calc(-1 * var(--spacing-xl)); margin: -6px calc(-1 * var(--spacing-xl));
padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px); padding: 2px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
gap: 8px;
}
.property-control :global(.spectrum-FieldLabel) {
white-space: normal;
} }
.property-control.highlighted { .property-control.highlighted {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
border-color: var(--spectrum-global-color-blue-400); border-color: var(--spectrum-global-color-blue-400);
} }
.label {
padding-bottom: var(--spectrum-global-dimension-size-65);
}
.control { .control {
position: relative; position: relative;
} }
.control.wide {
grid-column: 1 / -1;
}
.text { .text {
margin-top: var(--spectrum-global-dimension-size-65); margin-top: 4px;
font-size: var(--spectrum-global-dimension-font-size-75); font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6); color: var(--grey-6);
grid-column: 1 / -1;
} }
</style> </style>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
View File

@ -37,7 +37,7 @@
{#if $selectedComponent} {#if $selectedComponent}
{#key $selectedComponent._id} {#key $selectedComponent._id}
<Panel {title} icon={componentDefinition?.icon} borderLeft> <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
<span slot="panel-header-content"> <span slot="panel-header-content">
<div class="settings-tabs"> <div class="settings-tabs">
{#each tabs as tab} {#each tabs as tab}

104
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
View File

@ -1,22 +1,13 @@
<script> <script>
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
Layout,
ActionGroup,
ActionButton,
Search,
Icon,
Body,
notifications,
} from "@budibase/bbui"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
import { store, selectedComponent, selectedScreen } from "builderStore" import { store, selectedComponent, selectedScreen } from "builderStore"
import { onMount } from "svelte" import { onMount } from "svelte"
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
import { findComponentPath } from "builderStore/componentUtils" import { findComponentPath } from "builderStore/componentUtils"
let section = "components"
let searchString let searchString
let searchRef let searchRef
let selectedIndex let selectedIndex
@ -37,7 +28,6 @@
allowedComponents, allowedComponents,
searchString searchString
) )
$: blocks = enrichedStructure.find(x => x.name === "Blocks").children
$: orderMap = createComponentOrderMap(componentList) $: orderMap = createComponentOrderMap(componentList)
const getAllowedComponents = (allComponents, screen, component) => { const getAllowedComponents = (allComponents, screen, component) => {
@ -127,6 +117,11 @@
} }
}) })
// Swap blocks and plugins
let tmp = enrichedStructure[1]
enrichedStructure[1] = enrichedStructure[0]
enrichedStructure[0] = tmp
return enrichedStructure return enrichedStructure
} }
@ -137,11 +132,6 @@
return [] return []
} }
// Remove blocks if there is no search string
if (!search) {
structure = structure.filter(category => category.name !== "Blocks")
}
// Return only items which match the search string // Return only items which match the search string
let filteredStructure = [] let filteredStructure = []
structure.forEach(category => { structure.forEach(category => {
@ -224,6 +214,7 @@
showCloseButton showCloseButton
onClickCloseButton={() => $goto("../")} onClickCloseButton={() => $goto("../")}
borderLeft borderLeft
wide
> >
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Search <Search
@ -232,64 +223,31 @@
on:change={e => (searchString = e.detail)} on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef} bind:inputRef={searchRef}
/> />
{#if !searchString} {#if filteredStructure.length}
<ActionGroup compact justified> {#each filteredStructure as category}
<ActionButton <Layout noPadding gap="XS">
fullWidth <div class="category-label">{category.name}</div>
selected={section === "components"} {#each category.children as component}
on:click={() => (section = "components")}>Components</ActionButton <div
> draggable="true"
<ActionButton on:dragstart={() => onDragStart(component.component)}
fullWidth on:dragend={onDragEnd}
selected={section === "blocks"} class="component"
on:click={() => (section = "blocks")}>Blocks</ActionButton class:selected={selectedIndex === orderMap[component.component]}
> on:click={() => addComponent(component.component)}
</ActionGroup> on:mouseover={() => (selectedIndex = null)}
{/if} on:focus
{#if searchString || section === "components"} >
{#if filteredStructure.length} <Icon name={component.icon} />
{#each filteredStructure as category} <Body size="XS">{component.name}</Body>
<Layout noPadding gap="XS"> </div>
<div class="category-label">{category.name}</div> {/each}
{#each category.children as component} </Layout>
<div {/each}
draggable="true"
on:dragstart={() => onDragStart(component.component)}
on:dragend={onDragEnd}
class="component"
class:selected={selectedIndex ===
orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
on:focus
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
</div>
{/each}
</Layout>
{/each}
{:else}
<Body size="S">
There aren't any components matching the current filter
</Body>
{/if}
{:else} {:else}
<Body size="S">Blocks are collections of pre-built components</Body> <Body size="S">
<Layout noPadding gap="XS"> There aren't any components matching the current filter
{#each blocks as block} </Body>
<div
draggable="true"
class="component"
on:click={() => addComponent(block.component)}
on:dragstart={() => onDragStart(block.component)}
on:dragend={onDragEnd}
>
<Icon name={block.icon} />
<Body size="XS">{block.name}</Body>
</div>
{/each}
</Layout>
{/if} {/if}
</Layout> </Layout>
</Panel> </Panel>

38
packages/client/manifest.json
View File

@ -967,12 +967,12 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Show delete icon", "label": "Allow delete",
"key": "closable" "key": "closable"
}, },
{ {
"type": "event", "type": "event",
"label": "On click delete icon", "label": "On click delete",
"key": "onClick", "key": "onClick",
"dependsOn": "closable" "dependsOn": "closable"
} }
@ -3269,7 +3269,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Allow manual entry", "label": "Manual entry",
"key": "allowManualEntry", "key": "allowManualEntry",
"defaultValue": false "defaultValue": false
}, },
@ -3328,7 +3328,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Enable creating markers", "label": "Enable adding",
"key": "creationEnabled", "key": "creationEnabled",
"defaultValue": false "defaultValue": false
}, },
@ -3374,13 +3374,13 @@
}, },
{ {
"type": "text", "type": "text",
"label": "Default Location (when empty)", "label": "Default Location",
"key": "defaultLocation", "key": "defaultLocation",
"placeholder": "51.5072,-0.1276" "placeholder": "51.5072,-0.1276"
}, },
{ {
"type": "number", "type": "number",
"label": "Default Location Zoom Level (0-100)", "label": "Default Zoom (0-100)",
"key": "zoomLevel", "key": "zoomLevel",
"placeholder": 50, "placeholder": 50,
"max": 100, "max": 100,
@ -3786,7 +3786,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Allow row selection", "label": "Row selection",
"key": "allowSelectRows", "key": "allowSelectRows",
"defaultValue": false, "defaultValue": false,
"info": "Row selection is only compatible with internal or SQL tables" "info": "Row selection is only compatible with internal or SQL tables"
@ -3895,7 +3895,7 @@
{ {
"type": "boolean", "type": "boolean",
"key": "linkPeek", "key": "linkPeek",
"label": "Open link in modal" "label": "Open in modal"
}, },
{ {
"type": "boolean", "type": "boolean",
@ -3904,7 +3904,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Use button for click action", "label": "Show button",
"key": "showButton" "key": "showButton"
}, },
{ {
@ -4468,7 +4468,7 @@
}, },
{ {
"type": "columns", "type": "columns",
"label": "Table Columns", "label": "Columns",
"key": "tableColumns", "key": "tableColumns",
"dependsOn": "dataSource", "dependsOn": "dataSource",
"placeholder": "All columns", "placeholder": "All columns",
@ -4529,7 +4529,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Allow row selection", "label": "Row selection",
"key": "allowSelectRows", "key": "allowSelectRows",
"info": "Row selection is only compatible with internal or SQL tables" "info": "Row selection is only compatible with internal or SQL tables"
}, },
@ -4593,7 +4593,7 @@
{ {
"type": "boolean", "type": "boolean",
"key": "showTitleButton", "key": "showTitleButton",
"label": "Show button above table", "label": "Show button",
"defaultValue": false "defaultValue": false
}, },
{ {
@ -4659,7 +4659,7 @@
}, },
{ {
"type": "searchfield", "type": "searchfield",
"label": "Search Columns", "label": "Search Cols.",
"key": "searchColumns", "key": "searchColumns",
"placeholder": "Choose search columns", "placeholder": "Choose search columns",
"info": "Only the first 5 search columns will be used" "info": "Only the first 5 search columns will be used"
@ -4735,7 +4735,7 @@
{ {
"type": "boolean", "type": "boolean",
"key": "cardPeek", "key": "cardPeek",
"label": "Open link in modal" "label": "Open in modal"
}, },
{ {
"type": "url", "type": "url",
@ -4750,7 +4750,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Use button for click action", "label": "Add button",
"key": "showCardButton" "key": "showCardButton"
}, },
{ {
@ -4775,11 +4775,11 @@
{ {
"type": "boolean", "type": "boolean",
"key": "showTitleButton", "key": "showTitleButton",
"label": "Show link button" "label": "Show button"
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Open link in modal", "label": "Open in modal",
"key": "titleButtonPeek" "key": "titleButtonPeek"
}, },
{ {
@ -4800,7 +4800,7 @@
"settings": [ "settings": [
{ {
"type": "field", "type": "field",
"label": "ID column for linking (appended to URL)", "label": "ID column",
"key": "linkColumn", "key": "linkColumn",
"placeholder": "Default" "placeholder": "Default"
} }
@ -5178,7 +5178,7 @@
}, },
{ {
"type": "boolean", "type": "boolean",
"label": "Show delete button", "label": "Allow delete",
"key": "showDeleteButton", "key": "showDeleteButton",
"defaultValue": false, "defaultValue": false,
"dependsOn": { "dependsOn": {