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

bugfix: modal getting stuck on open (but hidden) 

Recreate: Add Datatable component (from) index... try adding new screen... screen dialog does not show
This commit is contained in:
Michael Shanks 2020-03-05 16:14:36 +00:00
parent 3015512ae0
commit 3a319fbc7c
2 changed files with 49 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/common/ConfirmDialog.svelte
View File

@ -12,14 +12,16 @@
export let onCancel = () => {} export let onCancel = () => {}
export const show = () => { export const show = () => {
UIkit.modal(theModal).show() uiKitModal.hide()
uiKitModal.show()
} }
export const hide = () => { export const hide = () => {
UIkit.modal(theModal).hide() uiKitModal.hide()
} }
let theModal let theModal
$: uiKitModal = theModal && UIkit.modal(theModal)
const cancel = () => { const cancel = () => {
hide() hide()
@ -32,7 +34,7 @@
} }
</script> </script>
<div id="my-id" uk-modal bind:this={theModal}> <div id={title} uk-modal bind:this={theModal}>
<div class="uk-modal-dialog"> <div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close /> <button class="uk-modal-close-default" type="button" uk-close />
<div class="uk-modal-header"> <div class="uk-modal-header">

97
packages/builder/src/userInterface/NewScreen.svelte
View File

@ -5,6 +5,7 @@
import Button from "../common/Button.svelte" import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte" import ActionButton from "../common/ActionButton.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte" import ButtonGroup from "../common/ButtonGroup.svelte"
import ConfirmDialog from "../common/ConfirmDialog.svelte"
import { pipe } from "../common/core" import { pipe } from "../common/core"
import UIkit from "uikit" import UIkit from "uikit"
import { isRootComponent } from "./pagesParsing/searchComponents" import { isRootComponent } from "./pagesParsing/searchComponents"
@ -14,10 +15,10 @@
import { assign } from "lodash" import { assign } from "lodash"
export const show = () => { export const show = () => {
UIkit.modal(componentSelectorModal).show() dialog.show()
} }
let componentSelectorModal let dialog
let layoutComponents let layoutComponents
let layoutComponent let layoutComponent
let screens let screens
@ -50,11 +51,11 @@
if (!isValid) return if (!isValid) return
store.createScreen(name, route, layoutComponent.name) store.createScreen(name, route, layoutComponent.name)
UIkit.modal(componentSelectorModal).hide() dialog.hide()
} }
const cancel = () => { const cancel = () => {
UIkit.modal(componentSelectorModal).hide() dialog.hide()
} }
const screenNameExists = name => { const screenNameExists = name => {
@ -77,61 +78,51 @@
} }
</script> </script>
<div bind:this={componentSelectorModal} id="new-component-modal" uk-modal> <ConfirmDialog
<div class="uk-modal-dialog" uk-overflow-auto> bind:this={dialog}
title="New Screen"
onCancel={cancel}
onOk={save}
okText="Create Screen">
<div class="uk-modal-header"> <div class="uk-form-horizontal">
<h1>New Screen</h1> <div class="uk-margin">
<label class="uk-form-label">Name</label>
<div class="uk-form-controls">
<input
class="uk-input uk-form-small"
class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
bind:value={name} />
</div>
</div> </div>
<div class="uk-modal-body uk-form-horizontal"> <div class="uk-margin">
<div class="uk-margin"> <label class="uk-form-label">Route (Url)</label>
<label class="uk-form-label">Name</label> <div class="uk-form-controls">
<div class="uk-form-controls"> <input
<input class="uk-input uk-form-small"
class="uk-input uk-form-small" class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))} bind:value={route}
bind:value={name} /> on:change={routeChanged} />
</div>
</div> </div>
</div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Route (Url)</label> <label class="uk-form-label">Layout Component</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input <select
class="uk-input uk-form-small" class="uk-select uk-form-small"
class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))} bind:value={layoutComponent}
bind:value={route} class:uk-form-danger={saveAttempted && !layoutComponent}>
on:change={routeChanged} /> {#each layoutComponents as comp}
</div> <option value={comp}>
{comp.componentName} - {comp.libName}
</option>
{/each}
</select>
</div> </div>
<div class="uk-margin">
<label class="uk-form-label">Layout Component</label>
<div class="uk-form-controls">
<select
class="uk-select uk-form-small"
bind:value={layoutComponent}
class:uk-form-danger={saveAttempted && !layoutComponent}>
{#each layoutComponents as comp}
<option value={comp}>
{comp.componentName} - {comp.libName}
</option>
{/each}
</select>
</div>
</div>
<ButtonGroup style="float: right;">
<ActionButton primary on:click={save}>Create Screen</ActionButton>
<ActionButton alert on:click={cancel}>Cancel</ActionButton>
</ButtonGroup>
</div> </div>
</div> </div>
</div>
<style> </ConfirmDialog>
h1 {
font-size: 1.2em;
}
</style>