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

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">

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,14 +78,14 @@
} }
</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>
<div class="uk-modal-body uk-form-horizontal">
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Name</label> <label class="uk-form-label">Name</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
@ -121,17 +122,7 @@
</select> </select>
</div> </div>
</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>
<style> </ConfirmDialog>
h1 {
font-size: 1.2em;
}
</style>