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

Merge pull request #535 from Budibase/Card-component 

New card component
This commit is contained in:
Joe 2020-08-13 11:21:49 +01:00 committed by GitHub
parent 22bc26238b d204b9433e
commit bf720c866d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 448 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -168,6 +168,9 @@
max-width: 200px; max-width: 200px;
text-overflow: ellipsis; text-overflow: ellipsis;
border: 1px solid var(--grey-4); border: 1px solid var(--grey-4);
overflow: hidden;
white-space: pre;
box-sizing: border-box;
} }
tbody tr { tbody tr {
@ -187,6 +190,7 @@
.popovers { .popovers {
display: flex; display: flex;
gap: var(--spacing-m);
} }
.no-data { .no-data {

4
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -94,10 +94,6 @@
margin: 0 0 0 5px; margin: 0 0 0 5px;
} }
:global(svg) {
transition: 0.2s;
}
.rotate :global(svg) { .rotate :global(svg) {
transform: rotate(-90deg); transform: rotate(-90deg);
} }

4
packages/builder/src/components/userInterface/PageLayout.svelte
View File

@ -81,10 +81,6 @@
color: var(--grey-7); color: var(--grey-7);
} }
:global(svg) {
transition: 0.2s;
}
.rotate :global(svg) { .rotate :global(svg) {
transform: rotate(-90deg); transform: rotate(-90deg);
} }

14
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -70,6 +70,20 @@ export const layout = [
{ label: "no wrap", value: "noWrap" }, { label: "no wrap", value: "noWrap" },
], ],
}, },
{
label: "Gap",
key: "gap",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
],
},
] ]
export const margin = [ export const margin = [

168
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -311,6 +311,174 @@ export default {
], ],
}, },
}, },
{
name: "Card",
description: "Card components",
icon: "ri-layout-bottom-line",
commonProps: {},
children: [
{
_component: "@budibase/standard-components/card",
name: "Vertical",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-column-line",
children: [],
properties: {
design: { ...all },
settings: [
{
label: "Image",
key: "imageUrl",
control: Input,
placeholder: "Image",
},
{
label: "Heading",
key: "heading",
control: Input,
placeholder: "Heading",
},
{
label: "Description",
key: "description",
control: Input,
placeholder: "Description",
},
{
label: "Link Text",
key: "linkText",
control: Input,
placeholder: "Link Text",
},
{
label: "Link Url",
key: "linkUrl",
control: Input,
placeholder: "Link URL",
},
{
label: "Link Color",
key: "color",
control: Input,
placeholder: "Link Color",
},
{
label: "Hover Color",
key: "linkHoverColor",
control: Input,
placeholder: "Hover Color",
},
{
label: "Image Height",
key: "imageHeight",
control: OptionSelect,
options: ["12rem", "16rem", "20rem", "24rem"],
placeholder: "Image Height",
},
{
label: "Card Width",
key: "cardWidth",
control: OptionSelect,
options: ["16rem", "20rem", "24rem"],
placeholder: "Card Width",
},
],
},
},
{
_component: "@budibase/standard-components/cardhorizontal",
name: "Horizontal",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-row-line",
children: [],
properties: {
design: { ...all },
settings: [
{
label: "Image",
key: "imageUrl",
control: Input,
placeholder: "Image",
},
{
label: "Heading",
key: "heading",
control: Input,
placeholder: "Heading",
},
{
label: "Description",
key: "description",
control: Input,
placeholder: "Description",
},
{
label: "Subtext",
key: "subtext",
control: Input,
placeholder: "Subtext",
},
{
label: "Link Text",
key: "linkText",
control: Input,
placeholder: "Link Text",
},
{
label: "Link Url",
key: "linkUrl",
control: Input,
placeholder: "Link URL",
},
{
label: "Link Color",
key: "color",
control: Input,
placeholder: "Link Color",
},
{
label: "Hover Color",
key: "linkHoverColor",
control: Input,
placeholder: "Hover Color",
},
{
label: "Card Width",
key: "cardWidth",
control: OptionSelect,
options: [
"24rem",
"28rem",
"32rem",
"40rem",
"48rem",
"60rem",
"100%",
],
placeholder: "Card Height",
},
{
label: "Image Width",
key: "imageWidth",
control: OptionSelect,
options: ["8rem", "12rem", "16rem"],
placeholder: "Image Width",
},
{
label: "Image Height",
key: "imageHeight",
control: OptionSelect,
options: ["8rem", "12rem", "16rem", "auto"],
placeholder: "Image Height",
},
],
},
},
],
},
{ {
_component: "@budibase/materialdesign-components/BasicCard", _component: "@budibase/materialdesign-components/BasicCard",
name: "Card", name: "Card",

75
packages/standard-components/components.json
View File

@ -268,6 +268,81 @@
"model": "models" "model": "models"
} }
}, },
"card": {
"name": "Card",
"props": {
"imageUrl": "string",
"heading": "string",
"description": "string",
"linkText": "string",
"linkUrl": "string",
"color": "string",
"linkHoverColor": "string",
"imageHeight": {
"type": "options",
"default": "20rem",
"options": [
"12rem",
"16rem",
"20rem",
"24rem"
]
},
"cardWidth": {
"type": "options",
"default": "20rem",
"options": [
"16rem",
"20rem",
"24rem"
]
}
}
},
"cardhorizontal": {
"name": "Horizontal Card",
"props": {
"imageUrl": "string",
"heading": "string",
"description": "string",
"subtext": "string",
"linkText": "string",
"linkUrl": "string",
"color": "string",
"linkHoverColor": "string",
"imageWidth": {
"type": "options",
"default": "8rem",
"options": [
"8rem",
"12rem",
"16rem"
]
},
"cardWidth": {
"type": "options",
"default": "32rem",
"options": [
"24rem",
"28rem",
"32rem",
"40rem",
"48rem",
"60rem",
"100%"
]
},
"imageHeight": {
"type": "options",
"default": "8rem",
"options": [
"8rem",
"12rem",
"16rem"
]
}
}
},
"datamap": { "datamap": {
"description": "shiny chart", "description": "shiny chart",
"data": true, "data": true,

80
packages/standard-components/src/Card.svelte Normal file
View File

@ -0,0 +1,80 @@
<script>
import { cssVars, createClasses } from "./cssVars"
export const className = ""
export let imageUrl = ""
export let heading = ""
export let description = ""
export let linkText = ""
export let linkUrl
export let color
export let linkHoverColor
export let imageHeight
export let cardWidth
$: cssVariables = {
color,
linkHoverColor,
imageHeight,
cardWidth,
}
$: showImage = !!imageUrl
</script>
<div use:cssVars={cssVariables} class="container">
{#if showImage}
<img class="image" src={imageUrl} alt="" />
{/if}
<div class="content">
<h2 class="heading">{heading}</h2>
<h4 class="text">{description}</h4>
<a href={linkUrl}>{linkText}</a>
</div>
</div>
<style>
.container {
width: var(--cardWidth);
overflow: hidden !important;
height: auto;
}
.image {
width: 100% !important;
max-width: 100%;
height: var(--imageHeight);
vertical-align: middle;
}
.content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.heading {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.text {
font-size: 1rem;
margin: 0;
font-weight: 400;
line-height: 1.5rem;
}
a {
margin: 0.5rem 0;
text-decoration: none;
color: var(--color);
font-weight: 600;
}
a:hover {
color: var(--linkHoverColor);
}
</style>

104
packages/standard-components/src/CardHorizontal.svelte Normal file
View File

@ -0,0 +1,104 @@
<script>
import { cssVars, createClasses } from "./cssVars"
export const className = ""
export let imageUrl = ""
export let heading = ""
export let description = ""
export let subtext = ""
export let linkText = ""
export let linkUrl
export let color
export let linkHoverColor
export let cardWidth
export let imageWidth
export let imageHeight
$: cssVariables = {
color,
linkHoverColor,
imageWidth,
cardWidth,
imageHeight,
}
$: showImage = !!imageUrl
</script>
<div use:cssVars={cssVariables} class="container">
{#if showImage}
<img class="image" src={imageUrl} alt="" />
{/if}
<div class="content">
<main>
<h2 class="heading">{heading}</h2>
<p class="text">{description}</p>
</main>
<footer>
<p class="subtext">{subtext}</p>
<a href={linkUrl}>{linkText}</a>
</footer>
</div>
</div>
<style>
.container {
height: 100%;
max-width: var(--cardWidth);
display: flex !important;
text-align: left;
}
.image {
width: var(--imageWidth);
height: var(--imageHeight);
vertical-align: middle;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 0.85rem 1.5rem;
}
.heading {
font-size: 1rem;
font-weight: 700;
margin: 0;
}
.text {
font-size: 0.85rem;
margin: 0.5rem 0 0 0;
font-weight: 400;
line-height: 1.25rem;
}
footer {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.subtext {
font-size: 0.85rem;
margin: 0;
font-weight: 400;
color: #757575;
}
a {
margin: 0.5rem 0 0 0;
text-decoration: none;
color: var(--color);
font-weight: 600;
font-size: 0.85rem;
margin: 0;
}
a:hover {
color: var(--linkHoverColor);
}
</style>

2
packages/standard-components/src/index.js
View File

@ -23,5 +23,7 @@ export { default as list } from "./List.svelte"
export { default as datasearch } from "./DataSearch.svelte" export { default as datasearch } from "./DataSearch.svelte"
export { default as embed } from "./Embed.svelte" export { default as embed } from "./Embed.svelte"
export { default as stackedlist } from "./StackedList.svelte" export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as cardhorizontal } from "./CardHorizontal.svelte"
export { default as recorddetail } from "./RecordDetail.svelte" export { default as recorddetail } from "./RecordDetail.svelte"
export * from "./Chart" export * from "./Chart"