CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-27 02:20:35 +12:00
Code Issues Projects Releases Wiki Activity

converts ModalContent to semi-use spectrum

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-08 15:46:34 +02:00
parent cf2e00146d
commit eb0ffcc5b6
3 changed files with 51 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/bbui/package.json
View file

@ -45,6 +45,7 @@
"dependencies": {
"@spectrum-css/button": "^3.0.1",
"@spectrum-css/dialog": "^3.0.1",
"@spectrum-css/divider": "^1.0.1",
"@spectrum-css/modal": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9",
"markdown-it": "^12.0.4",

102
packages/bbui/src/Modal/ModalContent.svelte
View file

@ -1,9 +1,10 @@
<script>
import { createEventDispatcher, getContext } from "svelte"
import "@spectrum-css/divider/dist/index-vars.css"
import { getContext } from "svelte"
import Button from "../Button/Button.svelte"
import Icon from "../Icons/Icon.svelte"
import Context from "../context"
const dispatch = createEventDispatcher()
export let title = undefined
export let cancelText = "Cancel"
@ -27,75 +28,48 @@
}
</script>
<div class="modal-content">
{#if title}
<header>
<h5>{title}</h5>
<div class="header-content">
<slot name="header" />
<div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid">
<h1 class="spectrum-Dialog-heading">{title}</h1>
<hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
<section class="spectrum-Dialog-content">
<slot />
</section>
{#if showCancelButton || showConfirmButton}
<div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
<footer class="footer-content">
<slot name="footer" />
</footer>
<div class="buttons">
{#if showCancelButton}
<Button secondary on:click={hide}>{cancelText}</Button>
{/if}
{#if showConfirmButton}
<Button
primary
{...$$restProps}
disabled={confirmDisabled}
on:click={confirm}>
{confirmText}
</Button>
{/if}
</div>
</div>
</header>
{/if}
<slot />
{#if showCancelButton || showConfirmButton}
<footer>
<div class="footer-content">
<slot name="footer" />
{/if}
{#if showCloseIcon}
<div class="close-icon" on:click={hide}>
<Icon name="closeline" />
</div>
<div class="buttons">
{#if showCancelButton}
<Button secondary on:click={hide}>{cancelText}</Button>
{/if}
{#if showConfirmButton}
<Button
primary
{...$$restProps}
disabled={confirmDisabled}
on:click={confirm}>
{confirmText}
</Button>
{/if}
</div>
</footer>
{/if}
{#if showCloseIcon}
<div class="close-icon" on:click={hide}>
<Icon name="closeline" />
</div>
{/if}
{/if}
</div>
</div>
<style>
.modal-content {
display: grid;
position: relative;
gap: var(--spacing-xl);
color: var(--ink);
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: 40px;
}
header h5 {
margin: 0;
font-weight: 500;
}
.header-content {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
top: 15px;
right: 15px;
color: var(--ink);
font-size: var(--font-size-m);
}

12
packages/bbui/yarn.lock
View file

@ -420,6 +420,13 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.1.tgz#33aae036282159f6aa998848b8c0828640a9620a"
integrity sha512-hUFbRR6RGT63MNuP7wP+k9KU+uRuICsduMihskh700e+jiQ+Gsv53fBFDlB843FoZYlIXzFQXgtjMUC5a4Qibw==
"@spectrum-css/divider@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.1.tgz#9d2b8d0b6bc05f08249608297e0e179f6510458c"
integrity sha512-IjANehC0qwPIrJ4w9zJGMlhtTXW5n7X3yI7ZhjVMgehXE2dbm50QXLOrEOkq5rjTO0T4lQW6OnHSsE3F8Pnv4w==
dependencies:
"@spectrum-css/vars" "^3.0.1"
"@spectrum-css/modal@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d"
@ -430,6 +437,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"
integrity sha512-X86xd0PG4QobmUyXA90BFGnyygaI8kW64dA4ysf4z0cOvUWjNbAAl3a/DB/WRyrnp63Zqv83T/cgNbetagTbWg==
"@spectrum-css/vars@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
"@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
version "1.0.0-next.5"
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"