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

converts popover to spectrum

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-09 11:22:49 +02:00
parent 52697ddc2d
commit 0eb904062c
4 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/package.json
View File

@ -48,6 +48,7 @@
"@spectrum-css/dialog": "^3.0.1", "@spectrum-css/dialog": "^3.0.1",
"@spectrum-css/divider": "^1.0.1", "@spectrum-css/divider": "^1.0.1",
"@spectrum-css/modal": "^3.0.1", "@spectrum-css/modal": "^3.0.1",
"@spectrum-css/popover": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9", "@spectrum-css/underlay": "^2.0.9",
"markdown-it": "^12.0.4", "markdown-it": "^12.0.4",
"quill": "^1.3.7", "quill": "^1.3.7",

31
packages/bbui/src/DropdownMenu/DropdownMenu.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import "@spectrum-css/popover/dist/index-vars.css"
import Portal from "svelte-portal" import Portal from "svelte-portal"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import buildStyle from "../utils/buildStyle" import buildStyle from "../utils/buildStyle"
@ -38,40 +39,12 @@
<Portal> <Portal>
<div <div
tabindex="0" tabindex="0"
class:open
use:positionDropdown={{ anchor, align }} use:positionDropdown={{ anchor, align }}
use:clickOutside={hide} use:clickOutside={hide}
style={menuStyle} style={menuStyle}
on:keydown={handleEscape} on:keydown={handleEscape}
class="menu-container"> class="spectrum-Popover is-open" role="presentation">
<slot /> <slot />
</div> </div>
</Portal> </Portal>
{/if} {/if}
<style>
.menu-container {
position: fixed;
margin-top: var(--spacing-xs);
outline: none;
box-sizing: border-box;
opacity: 0;
min-width: 200px;
z-index: 2;
color: var(--ink);
font-weight: 400;
height: fit-content !important;
border: var(--border-dark);
border-radius: var(--border-radius-m);
transform: scale(0);
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
overflow-y: auto;
background: var(--background);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}
.open {
transform: scale(1);
opacity: 1;
}
</style>

2
packages/bbui/src/Popover/Popover.svelte
View File

@ -34,7 +34,7 @@
use:positionDropdown={{ anchor, align }} use:positionDropdown={{ anchor, align }}
use:clickOutside={hide} use:clickOutside={hide}
on:keydown={handleEscape} on:keydown={handleEscape}
class="menu-container"> class="spectrum-Popover is-open">
<slot /> <slot />
</div> </div>
</Portal> </Portal>

5
packages/bbui/yarn.lock
View File

@ -437,6 +437,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d" resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d"
integrity sha512-F7D99F3cjDGT9DM9sogx/p49jrNYT7a1J6TUoqV73wUf+0gP+dTsskBOo9jB8VbUE+POQPjiDLB+SWLp6iBB+w== integrity sha512-F7D99F3cjDGT9DM9sogx/p49jrNYT7a1J6TUoqV73wUf+0gP+dTsskBOo9jB8VbUE+POQPjiDLB+SWLp6iBB+w==
"@spectrum-css/popover@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
"@spectrum-css/underlay@^2.0.9": "@spectrum-css/underlay@^2.0.9":
version "2.0.9" version "2.0.9"
resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8" resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"