forked from tsai/budibase
Martin McKeaveney
7 years ago
committed by
GitHub
GitHub
13 changed files with 230 additions and 10 deletions
@ -0,0 +1,18 @@ |
|||
<!doctype html> |
|||
<html> |
|||
<head> |
|||
<meta charset='utf8'> |
|||
<meta name='viewport' content='width=device-width'> |
|||
|
|||
<title>Svelte app</title> |
|||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" |
|||
rel="stylesheet"> |
|||
<link rel='icon' type='image/png' href='/favicon.png'> |
|||
<link rel='stylesheet' href='/build/bundle.css'> |
|||
|
|||
</head> |
|||
|
|||
<body> |
|||
<script src='/build/bundle.js'></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,60 @@ |
|||
<script> |
|||
import { setContext, getContext } from "svelte" |
|||
import Icon from "../Icon.svelte" |
|||
import ripple from "../Ripple.js" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
const cb = new ClassBuilder("button", ["primary", "medium"]) |
|||
|
|||
export let variant = "raised" |
|||
export let colour = "primary" |
|||
export let size = "medium" |
|||
|
|||
export let href = "" |
|||
export let icon = "" |
|||
export let trailingIcon = false |
|||
export let fullBleed = false |
|||
|
|||
export let text = "" |
|||
export let disabled = false |
|||
|
|||
$: if (icon) { |
|||
setContext("BBMD:icon:context", "button") |
|||
} |
|||
|
|||
$: renderLeadingIcon = !!icon && !trailingIcon |
|||
$: renderTrailingIcon = !!icon && trailingIcon |
|||
|
|||
let blockClasses = cb.blocks({ |
|||
modifiers: !href ? [variant] : null, |
|||
customs: { size, colour }, |
|||
}) |
|||
</script> |
|||
|
|||
<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird --> |
|||
{#if href} |
|||
<a class={blockClasses} {href} on:click> |
|||
<span class={cb.elements('label')}>{text}</span> |
|||
</a> |
|||
{:else} |
|||
<button |
|||
use:ripple={{ colour }} |
|||
class={blockClasses} |
|||
class:fullBleed |
|||
{disabled} |
|||
on:click> |
|||
{#if renderLeadingIcon} |
|||
<Icon {icon} /> |
|||
{/if} |
|||
<span class={cb.elements('label')}>{text}</span> |
|||
{#if renderTrailingIcon} |
|||
<Icon {icon} /> |
|||
{/if} |
|||
</button> |
|||
{/if} |
|||
|
|||
<style> |
|||
.fullBleed { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
@import "@material/button/mdc-button.scss"; |
|||
@import "@material/ripple/mdc-ripple.scss"; |
|||
@import "./mixins.scss"; |
|||
|
|||
@include bbmd-button-styles(); |
|||
@ -0,0 +1,39 @@ |
|||
@import "@material/feature-targeting/functions"; |
|||
@import "@material/feature-targeting/mixins"; |
|||
|
|||
@mixin bbmd-button-styles($query: mdc-feature-all()) { |
|||
$feat-structure: mdc-feature-create-target($query, structure); |
|||
|
|||
.bbmd-mdc-button--size-large { |
|||
@include button-sizing($feat-structure, 21px, 40px, 15px); |
|||
} |
|||
|
|||
.bbmd-mdc-button--size-small { |
|||
@include button-sizing($feat-structure, 9px, 32px, 13px); |
|||
} |
|||
|
|||
.bbmd-mdc-button--colour-secondary { |
|||
//no feature target as relying on theme variable custom property |
|||
@include mdc-button-ink-color(secondary); |
|||
|
|||
&.mdc-button--raised, |
|||
&.mdc-button--unelevated { |
|||
@include mdc-button-container-fill-color(secondary); |
|||
@include mdc-button-ink-color(on-secondary); |
|||
} |
|||
|
|||
&.mdc-button--outlined { |
|||
@include mdc-button-outline-color(secondary); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@mixin button-sizing($feat, $padding, $height, $fontSize) { |
|||
@include mdc-feature-targets($feat) { |
|||
padding: 0px $padding; |
|||
height: $height; |
|||
} |
|||
> .mdc-button__label { |
|||
font-size: $fontSize; |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
import "./_index.scss"; |
|||
export { default as button } from "./Button.svelte"; |
|||
@ -0,0 +1,38 @@ |
|||
export default class ClassBuilder { |
|||
constructor(block, customDefaults) { |
|||
this.block = `mdc-${block}`; |
|||
this.customDefaults = customDefaults; //will be ignored when building custom classes
|
|||
} |
|||
|
|||
// classParams: {modifiers:[] (mdc), custom:[] (bbmd), extra:[] (any)}
|
|||
blocks(classParams) { |
|||
let base = this.block; |
|||
if (classParams == undefined) return base; |
|||
return this.buildClass(base, classParams); |
|||
} |
|||
|
|||
//elementName: string, classParams: {}
|
|||
elements(elementName, classParams) { |
|||
let base = `${this.block}__${elementName}`; |
|||
if (classParams == undefined) return base; |
|||
return this.buildClass(base, classParams); |
|||
} |
|||
|
|||
buildClass(base, classParams) { |
|||
let cls = base; |
|||
const { modifiers, customs, extras } = classParams; |
|||
if (!!modifiers) cls += modifiers.map(m => ` ${base}--${m}`).join(" "); |
|||
if (!!customs) |
|||
cls += Object.entries(customs) |
|||
.map(([property, value]) => { |
|||
//disregard falsy and values set by customDefaults constructor param
|
|||
if (!!value && !this.customDefaults.includes(value)) { |
|||
//custom scss name convention = bbmd-[block | element]--[property]-[value]
|
|||
return ` bbmd-${base}--${property}-${value}`; |
|||
} |
|||
}) |
|||
.join(""); |
|||
if (!!extras) cls += ` ${extras.join(" ")}`; |
|||
return cls.trim(); |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<script> |
|||
import { getContext } from "svelte"; |
|||
|
|||
export let icon = ""; |
|||
|
|||
let iconContext = getContext("BBMD:icon:context"); |
|||
let cls = |
|||
iconContext == "button" |
|||
? "material-icons mdc-button__icon" |
|||
: "material-icons"; |
|||
</script> |
|||
|
|||
<i class={cls}>{icon}</i> |
|||
@ -0,0 +1,28 @@ |
|||
import { MDCRipple } from "@material/ripple"; |
|||
|
|||
export default function ripple( |
|||
node, |
|||
props = { colour: "primary", unbounded: false } |
|||
) { |
|||
node.classList.add("mdc-ripple-surface"); |
|||
const component = new MDCRipple(node); |
|||
component.unbounded = props.unbounded; |
|||
|
|||
if (props.colour === "secondary") { |
|||
node.classList.remove("mdc-ripple-surface--primary"); |
|||
node.classList.add("mdc-ripple-surface--accent"); |
|||
} else { |
|||
node.classList.add("mdc-ripple-surface--primary"); |
|||
node.classList.remove("mdc-ripple-surface--accent"); |
|||
} |
|||
|
|||
return { |
|||
destroy() { |
|||
component.destroy(); |
|||
node.classList.remove("mdc-ripple-surface"); |
|||
node.classList.remove("mdc-ripple-surface--primary"); |
|||
node.classList.remove("mdc-ripple-surface--accent"); |
|||
component = null; |
|||
} |
|||
}; |
|||
} |
|||
@ -1,2 +1,4 @@ |
|||
export { default as h1 } from "./H1.svelte" |
|||
export { default as button } from "./Button.svelte" |
|||
export { default as h1 } from "./H1.svelte"; |
|||
export { default as icon } from "./Icon.svelte"; |
|||
export { button } from "./Button"; |
|||
|
|||
|
|||
Loading…
Reference in new issue