MD Dialog Complete and Margins for Typography
This commit is contained in:
Conor Mack
parent
cc2e6ce1bb
commit
202b4f0996
|
|
@ -17,6 +17,7 @@
|
|||
"@material/button": "^4.0.0",
|
||||
"@material/checkbox": "^4.0.0",
|
||||
"@material/data-table": "4.0.0",
|
||||
"@material/dialog": "4.0.0",
|
||||
"@material/form-field": "^4.0.0",
|
||||
"@material/icon-button": "4.0.0",
|
||||
"@material/list": "4.0.0",
|
||||
|
|
|
|||
|
|
@ -33,15 +33,16 @@
|
|||
|
||||
if (!href) modifiers = { variant }
|
||||
|
||||
let props = { modifiers, customs, extras }
|
||||
$: props = { modifiers, customs, extras }
|
||||
|
||||
let blockClasses = cb.build({ props })
|
||||
$: blockClasses = cb.build({ props })
|
||||
const labelClass = cb.elem("label")
|
||||
|
||||
const clicked = () => _bb.call(onClick)
|
||||
|
||||
$: renderLeadingIcon = !!icon && !trailingIcon
|
||||
$: renderTrailingIcon = !!icon && trailingIcon
|
||||
$: console.log(blockClasses)
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import { MDCDialog } from "@material/dialog"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
let dialog
|
||||
let dialogSurface
|
||||
let instance
|
||||
|
||||
export let _bb
|
||||
// TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side
|
||||
export let open = true
|
||||
|
||||
onMount(() => {
|
||||
instance = new MDCDialog(dialog)
|
||||
return () => {
|
||||
instance && instance.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
$: dialogSurface && _bb.attachChildren(dialogSurface)
|
||||
|
||||
$: {
|
||||
if (open) {
|
||||
instance && instance.open()
|
||||
} else {
|
||||
instance && instance.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={dialog} class="mdc-dialog">
|
||||
<div class="mdc-dialog__container">
|
||||
<div
|
||||
bind:this={dialogSurface}
|
||||
class="mdc-dialog__surface"
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="my-dialog-title"
|
||||
aria-describedby="my-dialog-content" />
|
||||
</div>
|
||||
<div class="mdc-dialog__scrim" on:click={() => (open = false)} />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
export let _bb
|
||||
let dialogActions
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:button:context", "mdc-dialog__button")
|
||||
})
|
||||
|
||||
$: dialogActions && _bb.attachChildren(dialogActions)
|
||||
</script>
|
||||
|
||||
<footer bind:this={dialogActions} class="mdc-dialog__actions" />
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script>
|
||||
let dialogContent
|
||||
export let _bb
|
||||
|
||||
$: dialogContent && _bb.attachChildren(dialogContent)
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="mdc-dialog__content"
|
||||
bind:this={dialogContent}
|
||||
id="my-dialog-content" />
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
export let title = ""
|
||||
</script>
|
||||
|
||||
<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2>
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import "@material/dialog/mdc-dialog.scss"
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import "./_style.scss"
|
||||
export { default as Dialog } from "./Dialog.svelte"
|
||||
export { default as DialogActions } from "./DialogActions.svelte"
|
||||
export { default as DialogContent } from "./DialogContent.svelte"
|
||||
export { default as DialogHeader } from "./DialogHeader.svelte"
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
DatePicker,
|
||||
IconButton,
|
||||
Card,
|
||||
Dialog,
|
||||
} = props
|
||||
|
||||
let currentComponent
|
||||
|
|
@ -31,7 +32,6 @@
|
|||
props: {
|
||||
_component: "testcomponents/rootComponent",
|
||||
_children: [
|
||||
Button,
|
||||
BodyBoundToStore,
|
||||
Textfield,
|
||||
Select,
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
Radiobuttongroup,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
Card,
|
||||
Dialog,
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -265,4 +265,46 @@ export const props = {
|
|||
},
|
||||
],
|
||||
},
|
||||
Dialog: {
|
||||
_component: "@budibase/materialdesign-components/Dialog",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogHeader",
|
||||
title: "Important Message",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogContent",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/H3",
|
||||
text: "An announcement from your service provider",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Body2",
|
||||
text:
|
||||
"All non-essential services will be shut down as of tomorrow. Please acknowledge that you have seen this message by confirming below.",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogActions",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Confirm",
|
||||
variant: "unelevated",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Cancel",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span class="mdc-typography--body1">{text}</span>
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--body1">
|
||||
{text}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span class="mdc-typography--caption">{text}</span>
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--caption">
|
||||
{text}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h1 class="mdc-typography--headline1">{text}</h1>
|
||||
<h1
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline1">
|
||||
{text}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h2 class="mdc-typography--headline2">{text}</h2>
|
||||
<h2
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline2">
|
||||
{text}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h3 class="mdc-typography--headline3">{text}</h3>
|
||||
<h3
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline3">
|
||||
{text}
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h4 class="mdc-typography--headline4">{text}</h4>
|
||||
<h4
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline4">
|
||||
{text}
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h5 class="mdc-typography--headline5">{text}</h5>
|
||||
<h5
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline5">
|
||||
{text}
|
||||
</h5>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span class="mdc-typography--overline">{text}</span>
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--overline">
|
||||
{text}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span class="mdc-typography--subtitle1">{text}</span>
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--subtitle1">
|
||||
{text}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -26,5 +26,5 @@ export { CardHeader } from "./Card"
|
|||
export { CardImage } from "./Card"
|
||||
export { CardBody } from "./Card"
|
||||
export { CardFooter } from "./Card"
|
||||
|
||||
export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue