mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
committed by
GitHub
GitHub
19 changed files with 337 additions and 11 deletions
@ -0,0 +1,34 @@ |
|||
<script> |
|||
import CardHeader from "./CardHeader.svelte" |
|||
import CardBody from "./CardBody.svelte" |
|||
import CardImage from "./CardImage.svelte" |
|||
import CardFooter from "./CardFooter.svelte" |
|||
import { H2, H6, Body2 } from "../Typography" |
|||
import { Button } from "../Button" |
|||
import { IconButton } from "../IconButton" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
export let width = "350px" |
|||
export let height = "auto" |
|||
export let variant = "standard" |
|||
|
|||
export let _bb |
|||
let card |
|||
|
|||
const cb = new ClassBuilder("card", ["standard"]) |
|||
|
|||
$: modifiers = { variant } |
|||
$: props = { modifiers } |
|||
$: cardClass = cb.build({ props }) |
|||
|
|||
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width |
|||
$: safeHeight = |
|||
height !== "auto" && !/px$/.test(height) ? `${width}px` : height |
|||
|
|||
$: card && _bb.attachChildren(card) |
|||
</script> |
|||
|
|||
<div |
|||
bind:this={card} |
|||
style={`width: ${safeWidth}; height: ${safeHeight}`} |
|||
class={cardClass} /> |
|||
@ -0,0 +1,10 @@ |
|||
<script> |
|||
export let _bb |
|||
export let onClick = () => {} |
|||
|
|||
let cardBody |
|||
|
|||
$: cardBody && _bb.attachChildren(cardBody) |
|||
</script> |
|||
|
|||
<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} /> |
|||
@ -0,0 +1,31 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
let cardFooter |
|||
export let _bb |
|||
export let padding = "5px" |
|||
|
|||
onMount(() => { |
|||
_bb.setContext( |
|||
"BBMD:icon-button:context", |
|||
"mdc-card__action mdc-card__action--icon" |
|||
) |
|||
_bb.setContext( |
|||
"BBMD:button:context", |
|||
"mdc-card__action mdc-card__action--button" |
|||
) |
|||
}) |
|||
|
|||
$: cardFooter && _bb.attachChildren(cardFooter) |
|||
</script> |
|||
|
|||
<div |
|||
bind:this={cardFooter} |
|||
style={`padding: ${padding}`} |
|||
class="mdc-card__actions bbmd-card__actions" /> |
|||
|
|||
<style> |
|||
.bbmd-card__actions { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<script> |
|||
import { H6, Sub2 } from "../Typography" |
|||
import Icon from "../Common/Icon.svelte" |
|||
export let _bb |
|||
export let title = "" |
|||
export let subtitle = "" |
|||
export let icon = "" |
|||
|
|||
$: useIcon = !!icon |
|||
$: useSubtitle = !!subtitle |
|||
</script> |
|||
|
|||
<div class="card-header"> |
|||
{#if useIcon} |
|||
<div class="card-header__icon"> |
|||
<Icon {icon} /> |
|||
</div> |
|||
{/if} |
|||
<div class="card-header__title"> |
|||
<H6 text={title} /> |
|||
{#if useSubtitle} |
|||
<Sub2 text={subtitle} /> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.card-header { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.card-header__icon { |
|||
flex: 0; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.card-header__title { |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<script> |
|||
import { H6, Sub2 } from "../Typography" |
|||
export let _bb |
|||
export let displayHorizontal = false //aligns image on row with title and subtitle text |
|||
export let url = "" |
|||
export let title = "" |
|||
export let subtitle = "" |
|||
|
|||
$: useTitle = !!title |
|||
$: useSubTitle = !!subtitle |
|||
</script> |
|||
|
|||
{#if !displayHorizontal} |
|||
<div |
|||
class="my-card__media mdc-card__media mdc-card__media--16-9" |
|||
style={`background-image: url(${url})`}> |
|||
<div class="mdc-card__media-content bbmd-card-media__content"> |
|||
{#if useTitle} |
|||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|||
{#if useSubTitle} |
|||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|||
{/if} |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{:else} |
|||
<div class="bbmd-card--horizontal"> |
|||
<div |
|||
class="mdc-card__media mdc-card__media mdc-card__media--square |
|||
bbmd-card--horizontal-image" |
|||
style={`background-image: url(${url})`} /> |
|||
<div class="bbmd-card--horizontal-text"> |
|||
{#if useTitle} |
|||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|||
{#if useSubTitle} |
|||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|||
{/if} |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.bbmd-card--horizontal { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
} |
|||
|
|||
.bbmd-card--horizontal-image { |
|||
flex: 0 0 110px; |
|||
} |
|||
|
|||
.bbmd-card--horizontal-text { |
|||
flex: 1; |
|||
padding: 10px 5px; |
|||
} |
|||
|
|||
.bbmd-card-media__content { |
|||
top: 125px; |
|||
color: white; |
|||
} |
|||
</style> |
|||
@ -0,0 +1 @@ |
|||
@import "@material/card/mdc-card.scss" |
|||
@ -0,0 +1,7 @@ |
|||
import "./_styles.scss" |
|||
export { default as Card } from "./Card.svelte" |
|||
export { default as CardBody } from "./CardBody.svelte" |
|||
export { default as CardFooter } from "./CardFooter.svelte" |
|||
export { default as CardHeader } from "./CardHeader.svelte" |
|||
export { default as CardImage } from "./CardImage.svelte" |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--body2">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--body2"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h6 class="mdc-typography--headline6">{text}</h6> |
|||
<h6 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline6"> |
|||
{text} |
|||
</h6> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--subtitle2">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--subtitle2"> |
|||
{text} |
|||
</span> |
|||
|
|||
Loading…
Reference in new issue