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 fillWidth
export let left = "314px"
export let width = "calc(100% - 576px)"
export let width = "calc(100% - 626px)"
let visible = false

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

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

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

@ -75,12 +75,10 @@
</script>
<div class="property-control" class:highlighted={highlighted && nullishValue}>
{#if type !== "boolean" && label}
<div class="label">
<Label>{label}</Label>
</div>
{#if label}
<Label size="M">{label}</Label>
{/if}
<div id={`${key}-prop-control`} class="control">
<div id={`${key}-prop-control`} class="control" class:wide={!label}>
<svelte:component
this={control}
{componentInstance}
@ -90,7 +88,6 @@
onChange={handleChange}
bindings={allBindings}
name={key}
text={label}
{nested}
{key}
{type}
@ -105,28 +102,32 @@
<style>
.property-control {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
display: grid;
grid-template-columns: 90px 1fr;
align-items: center;
transition: background 130ms ease-out, border-color 130ms ease-out;
border-left: 4px solid transparent;
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 {
background: var(--spectrum-global-color-gray-300);
border-color: var(--spectrum-global-color-blue-400);
}
.label {
padding-bottom: var(--spectrum-global-dimension-size-65);
}
.control {
position: relative;
}
.control.wide {
grid-column: 1 / -1;
}
.text {
margin-top: var(--spectrum-global-dimension-size-65);
margin-top: 4px;
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
grid-column: 1 / -1;
}
</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}
{#key $selectedComponent._id}
<Panel {title} icon={componentDefinition?.icon} borderLeft>
<Panel {title} icon={componentDefinition?.icon} borderLeft wide>
<span slot="panel-header-content">
<div class="settings-tabs">
{#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>
import Panel from "components/design/Panel.svelte"
import { goto } from "@roxi/routify"
import {
Layout,
ActionGroup,
ActionButton,
Search,
Icon,
Body,
notifications,
} from "@budibase/bbui"
import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
import structure from "./componentStructure.json"
import { store, selectedComponent, selectedScreen } from "builderStore"
import { onMount } from "svelte"
import { fly } from "svelte/transition"
import { findComponentPath } from "builderStore/componentUtils"
let section = "components"
let searchString
let searchRef
let selectedIndex
@ -37,7 +28,6 @@
allowedComponents,
searchString
)
$: blocks = enrichedStructure.find(x => x.name === "Blocks").children
$: orderMap = createComponentOrderMap(componentList)
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
}
@ -137,11 +132,6 @@
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
let filteredStructure = []
structure.forEach(category => {
@ -224,6 +214,7 @@
showCloseButton
onClickCloseButton={() => $goto("../")}
borderLeft
wide
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
@ -232,64 +223,31 @@
on:change={e => (searchString = e.detail)}
bind:inputRef={searchRef}
/>
{#if !searchString}
<ActionGroup compact justified>
<ActionButton
fullWidth
selected={section === "components"}
on:click={() => (section = "components")}>Components</ActionButton
>
<ActionButton
fullWidth
selected={section === "blocks"}
on:click={() => (section = "blocks")}>Blocks</ActionButton
>
</ActionGroup>
{/if}
{#if searchString || section === "components"}
{#if filteredStructure.length}
{#each filteredStructure as category}
<Layout noPadding gap="XS">
<div class="category-label">{category.name}</div>
{#each category.children as component}
<div
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}
{#if filteredStructure.length}
{#each filteredStructure as category}
<Layout noPadding gap="XS">
<div class="category-label">{category.name}</div>
{#each category.children as component}
<div
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">Blocks are collections of pre-built components</Body>
<Layout noPadding gap="XS">
{#each blocks as block}
<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>
<Body size="S">
There aren't any components matching the current filter
</Body>
{/if}
</Layout>
</Panel>

38
packages/client/manifest.json
View File

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