Update all backend table popovers to use spectrum and fix multiple bugs
This commit is contained in:
parent
9482112d6b
commit
d268064164
8 changed files with 30 additions and 64 deletions
|
@ -5,14 +5,14 @@ export default function clickOutside(element, callbackFunction) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.addEventListener("click", onClick, true)
|
document.body.addEventListener("mousedown", onClick, true)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
update(newCallbackFunction) {
|
update(newCallbackFunction) {
|
||||||
callbackFunction = newCallbackFunction
|
callbackFunction = newCallbackFunction
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
document.body.removeEventListener("click", onClick, true)
|
document.body.removeEventListener("mousedown", onClick, true)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
import "@spectrum-css/menu/dist/index-vars.css"
|
import "@spectrum-css/menu/dist/index-vars.css"
|
||||||
import { fly } from "svelte/transition"
|
import { fly } from "svelte/transition"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
|
import clickOutside from "../../Actions/click_outside"
|
||||||
|
|
||||||
export let id = null
|
export let id = null
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
@ -20,7 +21,7 @@
|
||||||
export let readonly = false
|
export let readonly = false
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
const onClick = () => {
|
const onClick = e => {
|
||||||
dispatch("click")
|
dispatch("click")
|
||||||
if (readonly) {
|
if (readonly) {
|
||||||
return
|
return
|
||||||
|
@ -36,7 +37,7 @@
|
||||||
class:is-invalid={!!error}
|
class:is-invalid={!!error}
|
||||||
class:is-open={open}
|
class:is-open={open}
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
on:click={onClick}>
|
on:mousedown={onClick}>
|
||||||
<span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
|
<span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
|
||||||
{fieldText}
|
{fieldText}
|
||||||
</span>
|
</span>
|
||||||
|
@ -57,8 +58,8 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
{#if open}
|
{#if open}
|
||||||
<div class="overlay" on:mousedown|self={() => (open = false)} />
|
|
||||||
<div
|
<div
|
||||||
|
use:clickOutside={() => (open = false)}
|
||||||
transition:fly={{ y: -20, duration: 200 }}
|
transition:fly={{ y: -20, duration: 200 }}
|
||||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
|
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
|
@ -104,14 +105,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
.spectrum-Popover {
|
.spectrum-Popover {
|
||||||
max-height: 240px;
|
max-height: 240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -5,8 +5,9 @@
|
||||||
import { fade, fly } from "svelte/transition"
|
import { fade, fly } from "svelte/transition"
|
||||||
import Portal from "svelte-portal"
|
import Portal from "svelte-portal"
|
||||||
import Context from "../context"
|
import Context from "../context"
|
||||||
const dispatch = createEventDispatcher()
|
import clickOutside from "../Actions/click_outside"
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
let visible = false
|
let visible = false
|
||||||
$: dispatch(visible ? "show" : "hide")
|
$: dispatch(visible ? "show" : "hide")
|
||||||
|
|
||||||
|
@ -45,13 +46,11 @@
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<Portal target=".modal-container">
|
<Portal target=".modal-container">
|
||||||
<div
|
<div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }}>
|
||||||
class="spectrum-Underlay is-open"
|
<div class="modal-wrapper">
|
||||||
transition:fade={{ duration: 200 }}
|
<div class="modal-inner-wrapper">
|
||||||
on:mousedown|self={hide}>
|
|
||||||
<div class="modal-wrapper" on:mousedown|self={hide}>
|
|
||||||
<div class="modal-inner-wrapper" on:mousedown|self={hide}>
|
|
||||||
<div
|
<div
|
||||||
|
use:clickOutside={hide}
|
||||||
use:focusFirstInput
|
use:focusFirstInput
|
||||||
class="spectrum-Modal is-open"
|
class="spectrum-Modal is-open"
|
||||||
transition:fly={{ y: 30, duration: 200 }}>
|
transition:fly={{ y: 30, duration: 200 }}>
|
||||||
|
|
|
@ -30,7 +30,6 @@
|
||||||
<Portal>
|
<Portal>
|
||||||
<div
|
<div
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class:open
|
|
||||||
use:positionDropdown={{ anchor, align }}
|
use:positionDropdown={{ anchor, align }}
|
||||||
use:clickOutside={hide}
|
use:clickOutside={hide}
|
||||||
on:keydown={handleEscape}
|
on:keydown={handleEscape}
|
||||||
|
@ -39,30 +38,3 @@
|
||||||
</div>
|
</div>
|
||||||
</Portal>
|
</Portal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
.menu-container {
|
|
||||||
position: fixed;
|
|
||||||
margin-top: var(--spacing-xs);
|
|
||||||
padding: var(--spacing-xl);
|
|
||||||
outline: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
opacity: 0;
|
|
||||||
min-width: 400px;
|
|
||||||
z-index: 2;
|
|
||||||
color: var(--ink);
|
|
||||||
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-color: var(--background);
|
|
||||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<Input label="View Name" thin bind:value={name} />
|
<Input label="View Name" thin bind:value={name} />
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<Button secondary on:click={onClosed}>Cancel</Button>
|
<Button secondary on:click={onClosed}>Cancel</Button>
|
||||||
<Button primary on:click={saveView}>Save View</Button>
|
<Button cta on:click={saveView}>Save View</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -48,6 +48,7 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--spacing-xl);
|
grid-gap: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|
|
@ -30,14 +30,15 @@
|
||||||
|
|
||||||
<div class="popover">
|
<div class="popover">
|
||||||
<h5>Export Data</h5>
|
<h5>Export Data</h5>
|
||||||
<Select label="Format" secondary thin bind:value={exportFormat}>
|
<Select
|
||||||
{#each FORMATS as format}
|
label="Format"
|
||||||
<option value={format.key}>{format.name}</option>
|
bind:value={exportFormat}
|
||||||
{/each}
|
options={FORMATS}
|
||||||
</Select>
|
getOptionLabel={x => x.name}
|
||||||
|
getOptionValue={x => x.key} />
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<Button secondary on:click={onClosed}>Cancel</Button>
|
<Button secondary on:click={onClosed}>Cancel</Button>
|
||||||
<Button primary on:click={exportView}>Export</Button>
|
<Button cta on:click={exportView}>Export</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -45,6 +46,7 @@
|
||||||
.popover {
|
.popover {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--spacing-xl);
|
grid-gap: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { roles, permissions as permissionsStore } from "stores/backend"
|
import { roles, permissions as permissionsStore } from "stores/backend"
|
||||||
import { notifications } from "@budibase/bbui"
|
import { notifications } from "@budibase/bbui"
|
||||||
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
|
import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
|
||||||
|
import { capitalise } from "../../../../helpers"
|
||||||
|
|
||||||
export let resourceId
|
export let resourceId
|
||||||
export let permissions
|
export let permissions
|
||||||
|
@ -34,16 +35,13 @@
|
||||||
<Label extraSmall grey>Level</Label>
|
<Label extraSmall grey>Level</Label>
|
||||||
<Label extraSmall grey>Role</Label>
|
<Label extraSmall grey>Role</Label>
|
||||||
{#each Object.keys(permissions) as level}
|
{#each Object.keys(permissions) as level}
|
||||||
<Input secondary thin value={level} disabled={true} />
|
<Input value={capitalise(level)} disabled />
|
||||||
<Select
|
<Select
|
||||||
secondary
|
|
||||||
thin
|
|
||||||
value={permissions[level]}
|
value={permissions[level]}
|
||||||
on:change={e => changePermission(level, e.target.value)}>
|
on:change={e => changePermission(level, e.detail)}
|
||||||
{#each $roles as role}
|
options={$roles}
|
||||||
<option value={role._id}>{role.name}</option>
|
getOptionLabel={x => x.name}
|
||||||
{/each}
|
getOptionValue={x => x._id} />
|
||||||
</Select>
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -58,6 +56,7 @@
|
||||||
.popover {
|
.popover {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
|
|
|
@ -30,7 +30,7 @@ body {
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hoverable:hover {
|
.hoverable:hover {
|
||||||
|
|
Loading…
Reference in a new issue