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

Add spectrum card component

This commit is contained in:
Andrew Kingston 2021-06-30 16:33:35 +01:00
parent 2beaa2b28a
commit 45d235ca92
9 changed files with 157 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
View File

@ -14,6 +14,7 @@
export let placeholder export let placeholder
export let label export let label
export let disabled = false export let disabled = false
export let options
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let bindingDrawer let bindingDrawer
@ -31,12 +32,13 @@
</script> </script>
<div class="control"> <div class="control">
<Input <Combobox
{label} {label}
{disabled} {disabled}
value={readableValue} value={readableValue}
on:change={event => onChange(event.detail)} on:change={event => onChange(event.detail)}
{placeholder} {placeholder}
{options}
/> />
{#if !disabled} {#if !disabled}
<div class="icon" on:click={bindingDrawer.show}> <div class="icon" on:click={bindingDrawer.show}>
@ -60,37 +62,36 @@
</Drawer> </Drawer>
<style> <style>
.control { .control {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.icon { .icon {
right: 1px; right: 31px;
bottom: 1px; bottom: 1px;
position: absolute; position: absolute;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
box-sizing: border-box; box-sizing: border-box;
border-left: 1px solid var(--spectrum-alias-border-color); border-left: 1px solid var(--spectrum-alias-border-color);
border-top-right-radius: var(--spectrum-alias-border-radius-regular); border-right: 1px solid var(--spectrum-alias-border-color);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular); width: 31px;
width: 31px; color: var(--spectrum-alias-text-color);
color: var(--spectrum-alias-text-color); background-color: var(--spectrum-global-color-gray-75);
background-color: var(--spectrum-global-color-gray-75); transition: background-color
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms), var(--spectrum-global-animation-duration-100, 130ms),
box-shadow var(--spectrum-global-animation-duration-100, 130ms), box-shadow var(--spectrum-global-animation-duration-100, 130ms),
border-color var(--spectrum-global-animation-duration-100, 130ms); border-color var(--spectrum-global-animation-duration-100, 130ms);
height: calc(var(--spectrum-alias-item-height-m) - 2px); height: calc(var(--spectrum-alias-item-height-m) - 2px);
} }
.icon:hover { .icon:hover {
cursor: pointer; cursor: pointer;
color: var(--spectrum-alias-text-color-hover); color: var(--spectrum-alias-text-color-hover);
background-color: var(--spectrum-global-color-gray-50); background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover); border-color: var(--spectrum-alias-border-color-hover);
} }
</style> </style>

9
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -5,7 +5,6 @@
"table", "table",
"repeater", "repeater",
"button", "button",
"spectrumcard",
{ {
"name": "Form", "name": "Form",
"icon": "Form", "icon": "Form",
@ -24,6 +23,14 @@
"daterangepicker" "daterangepicker"
] ]
}, },
{
"name": "Card",
"icon": "Card",
"children": [
"spectrumcard",
"cardstat"
]
},
{ {
"name": "Chart", "name": "Chart",
"icon": "GraphBarVertical", "icon": "GraphBarVertical",

2
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -26,6 +26,7 @@
import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte" import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte" import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
import ColorPicker from "./PropertyControls/ColorPicker.svelte" import ColorPicker from "./PropertyControls/ColorPicker.svelte"
import URLSelect from "./PropertyControls/URLSelect.svelte"
export let componentDefinition export let componentDefinition
export let componentInstance export let componentInstance
@ -61,6 +62,7 @@
section: SectionSelect, section: SectionSelect,
navigation: NavigationEditor, navigation: NavigationEditor,
filter: FilterEditor, filter: FilterEditor,
url: URLSelect,
"field/string": StringFieldSelect, "field/string": StringFieldSelect,
"field/number": NumberFieldSelect, "field/number": NumberFieldSelect,
"field/options": OptionsFieldSelect, "field/options": OptionsFieldSelect,

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
View File

@ -47,7 +47,7 @@
} }
</script> </script>
<ActionButton on:click={drawer.show}>Define Filters</ActionButton> <ActionButton on:click={drawer.show}>Define filters</ActionButton>
<Drawer bind:this={drawer} title="Filtering"> <Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">

12
packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
View File

@ -0,0 +1,12 @@
<script>
import { store } from "builderStore"
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
export let value
$: urlOptions = $store.screens
.map(screen => screen.routing?.route)
.filter(x => x != null)
</script>
<DrawerBindableCombobox {value} on:change options={urlOptions} />

17
packages/standard-components/manifest.json
View File

@ -878,7 +878,7 @@
"key": "text" "key": "text"
}, },
{ {
"type": "text", "type": "url",
"label": "URL", "label": "URL",
"key": "url", "key": "url",
"placeholder": "/screen" "placeholder": "/screen"
@ -2085,7 +2085,7 @@
] ]
}, },
"spectrumcard": { "spectrumcard": {
"name": "Card (Spectrum)", "name": "Card",
"icon": "Card", "icon": "Card",
"styles": ["size"], "styles": ["size"],
"settings": [ "settings": [
@ -2101,18 +2101,23 @@
}, },
{ {
"type": "text", "type": "text",
"key": "footer", "key": "description",
"label": "Footer" "label": "Description"
}, },
{ {
"type": "text", "type": "text",
"key": "imageURL", "key": "imageURL",
"label": "Image URL" "label": "Image URL"
}, },
{
"type": "url",
"key": "linkURL",
"label": "Link URL"
},
{ {
"type": "boolean", "type": "boolean",
"key": "quiet", "key": "horizontal",
"label": "Quiet" "label": "Horizontal"
} }
] ]
} }

9
packages/standard-components/src/CardStat.svelte
View File

@ -20,14 +20,13 @@
.container { .container {
min-width: 260px; min-width: 260px;
width: max-content; width: max-content;
border: 1px solid var(--grey-3); border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 0.3rem; border-radius: 0.3rem;
color: var(--blue);
} }
.title { .title {
font-size: 0.85rem; font-size: 0.85rem;
color: #9e9e9e; color: var(--spectrum-global-color-gray-600);
font-weight: 600; font-weight: 600;
margin: 1rem 1.5rem 0.5rem 1.5rem; margin: 1rem 1.5rem 0.5rem 1.5rem;
white-space: pre-wrap; white-space: pre-wrap;
@ -37,14 +36,14 @@
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
margin: 0 1.5rem 1.5rem 1.5rem; margin: 0 1.5rem 1.5rem 1.5rem;
color: inherit; color: var(--spectrum-global-color-blue-600);
white-space: pre-wrap; white-space: pre-wrap;
} }
.label { .label {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 400; font-weight: 400;
color: #9e9e9e; color: var(--spectrum-global-color-gray-600);
margin: 1rem 1.5rem; margin: 1rem 1.5rem;
white-space: pre-wrap; white-space: pre-wrap;
} }

4
packages/standard-components/src/Link.svelte
View File

@ -67,6 +67,10 @@
color: var(--spectrum-alias-text-color); color: var(--spectrum-alias-text-color);
display: inline-block; display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
transition: color 130ms ease-in-out;
}
a:hover {
color: var(--spectrum-global-color-blue-600);
} }
.placeholder { .placeholder {
font-style: italic; font-style: italic;

102
packages/standard-components/src/SpectrumCard.svelte
View File

@ -4,20 +4,23 @@
export let title export let title
export let subtitle export let subtitle
export let footer export let description
export let imageURL export let imageURL
export let quiet export let linkURL
export let horizontal
const { styleable } = getContext("sdk") const { styleable, linkable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
$: external = linkURL && !linkURL.startsWith("/")
</script> </script>
<div <div
use:styleable={$component.styles} use:styleable={$component.styles}
class="spectrum-Card" class="spectrum-Card"
class:spectrum-Card--quiet={quiet}
tabindex="0" tabindex="0"
role="figure" role="figure"
class:horizontal
> >
{#if imageURL} {#if imageURL}
<div <div
@ -25,30 +28,91 @@
style="background-image: url({imageURL})" style="background-image: url({imageURL})"
/> />
{/if} {/if}
<div class="spectrum-Card-body"> <div class="spectrum-Card-container">
<div class="spectrum-Card-header"> <div class="spectrum-Card-body">
<div <div class="spectrum-Card-header">
class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
>
{title || "Card Title"}
</div>
</div>
{#if subtitle}
<div class="spectrum-Card-content">
<div <div
class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS" class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
> >
{subtitle} {#if linkURL}
{#if external}
<a href={linkURL}>{title || "Card Title"}</a>
{:else}
<a use:linkable href={linkURL}>{title || "Card Title"}</a>
{/if}
{:else}
{title || "Card Title"}
{/if}
</div> </div>
</div> </div>
{#if subtitle}
<div class="spectrum-Card-content">
<div
class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS"
>
{subtitle}
</div>
</div>
{/if}
</div>
{#if description}
<div class="spectrum-Card-footer">
{description}
</div>
{/if} {/if}
</div> </div>
{#if footer}
<div class="spectrum-Card-footer">{footer}</div>
{/if}
</div> </div>
<style> <style>
.spectrum-Card { .spectrum-Card {
width: 240px;
border-color: var(--spectrum-global-color-gray-300) !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.spectrum-Card.horizontal {
flex-direction: row;
width: 420px;
}
.spectrum-Card-title :global(a) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.spectrum-Card-subtitle {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.spectrum-Card-footer {
word-wrap: anywhere;
}
a {
transition: color 130ms ease-in-out;
color: var(--spectrum-alias-text-color);
}
a:hover {
color: var(--spectrum-global-color-blue-600);
}
.horizontal .spectrum-Card-coverPhoto {
flex: 0 0 160px;
height: auto;
border-bottom-left-radius: calc(
var(--spectrum-alias-border-radius-regular) - 1px
);
border-top-right-radius: 0;
}
.horizontal .spectrum-Card-container {
width: 0;
flex: 1 1 auto;
}
.spectrum-Card-footer {
border-top: none;
padding-top: 0;
margin-top: -8px;
} }
</style> </style>