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

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

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

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

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

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

@ -47,7 +47,7 @@
}
</script>
<ActionButton on:click={drawer.show}>Define Filters</ActionButton>
<ActionButton on:click={drawer.show}>Define filters</ActionButton>
<Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<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"
},
{
"type": "text",
"type": "url",
"label": "URL",
"key": "url",
"placeholder": "/screen"
@ -2085,7 +2085,7 @@
]
},
"spectrumcard": {
"name": "Card (Spectrum)",
"name": "Card",
"icon": "Card",
"styles": ["size"],
"settings": [
@ -2101,18 +2101,23 @@
},
{
"type": "text",
"key": "footer",
"label": "Footer"
"key": "description",
"label": "Description"
},
{
"type": "text",
"key": "imageURL",
"label": "Image URL"
},
{
"type": "url",
"key": "linkURL",
"label": "Link URL"
},
{
"type": "boolean",
"key": "quiet",
"label": "Quiet"
"key": "horizontal",
"label": "Horizontal"
}
]
}

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

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

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

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

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

@ -4,20 +4,23 @@
export let title
export let subtitle
export let footer
export let description
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")
$: external = linkURL && !linkURL.startsWith("/")
</script>
<div
use:styleable={$component.styles}
class="spectrum-Card"
class:spectrum-Card--quiet={quiet}
tabindex="0"
role="figure"
class:horizontal
>
{#if imageURL}
<div
@ -25,30 +28,91 @@
style="background-image: url({imageURL})"
/>
{/if}
<div class="spectrum-Card-body">
<div class="spectrum-Card-header">
<div
class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
>
{title || "Card Title"}
</div>
</div>
{#if subtitle}
<div class="spectrum-Card-content">
<div class="spectrum-Card-container">
<div class="spectrum-Card-body">
<div class="spectrum-Card-header">
<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>
{#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}
</div>
{#if footer}
<div class="spectrum-Card-footer">{footer}</div>
{/if}
</div>
<style>
.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>