Improve Add Screen Modal (#9759)
* Improve Add Screen Modal * lint --------- Co-authored-by: Rory Powell <rory.codes@gmail.com>
This commit is contained in:
Gerard Burns
GitHub
parent
96dfa32c0b
commit
4c70b7fd9b
|
|
@ -1,11 +1,13 @@
|
|||
<script>
|
||||
import { tables } from "stores/backend"
|
||||
import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
|
||||
import blankScreenPreview from "./blankScreenPreview.png"
|
||||
import listScreenPreview from "./listScreenPreview.png"
|
||||
|
||||
export let onConfirm
|
||||
export let onCancel
|
||||
|
||||
let autoCreateModeKey = "autoCreate"
|
||||
let listScreenModeKey = "autoCreate"
|
||||
let blankScreenModeKey = "blankScreen"
|
||||
|
||||
let selectedScreenMode
|
||||
|
|
@ -23,61 +25,77 @@
|
|||
onConfirm={confirmScreenSelection}
|
||||
{onCancel}
|
||||
disabled={!selectedScreenMode}
|
||||
size="L"
|
||||
size="M"
|
||||
>
|
||||
<Layout noPadding gap="S">
|
||||
<div
|
||||
class="screen-type item"
|
||||
class="screen-type item blankView"
|
||||
class:selected={selectedScreenMode == blankScreenModeKey}
|
||||
on:click={() => {
|
||||
selectedScreenMode = blankScreenModeKey
|
||||
}}
|
||||
>
|
||||
<div class="content screen-type-wrap">
|
||||
<Icon name="WebPage" />
|
||||
<img
|
||||
alt="blank screen preview"
|
||||
class="preview"
|
||||
src={blankScreenPreview}
|
||||
/>
|
||||
<div class="screen-type-text">
|
||||
<Heading size="XS">Blank screen</Heading>
|
||||
<Body size="S">Add a blank screen</Body>
|
||||
<Body size="S">Add an empty blank screen</Body>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="color: var(--spectrum-global-color-green-600); float: right"
|
||||
>
|
||||
{#if selectedScreenMode == blankScreenModeKey}
|
||||
<div class="checkmark-spacing">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class={`checkmark-spacing ${
|
||||
selectedScreenMode == blankScreenModeKey ? "visible" : ""
|
||||
}`}
|
||||
>
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listViewTitle">
|
||||
<Heading size="XS">Quickly create a screen from your data</Heading>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="screen-type item"
|
||||
class:selected={selectedScreenMode == autoCreateModeKey}
|
||||
class:selected={selectedScreenMode == listScreenModeKey}
|
||||
on:click={() => {
|
||||
selectedScreenMode = autoCreateModeKey
|
||||
selectedScreenMode = listScreenModeKey
|
||||
}}
|
||||
class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
|
||||
.length}
|
||||
>
|
||||
<div class="content screen-type-wrap">
|
||||
<Icon name="WebPages" />
|
||||
<img
|
||||
alt="list screen preview"
|
||||
class="preview"
|
||||
src={listScreenPreview}
|
||||
/>
|
||||
<div class="screen-type-text">
|
||||
<Heading size="XS">Autogenerated screens</Heading>
|
||||
<Heading size="XS">List view</Heading>
|
||||
<Body size="S">
|
||||
Add autogenerated screens with CRUD functionality to get a working
|
||||
app quickly! (Requires a datasource)
|
||||
Create, edit and view your data in a list view screen with side
|
||||
panel
|
||||
</Body>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="color: var(--spectrum-global-color-green-600); float: right"
|
||||
>
|
||||
{#if selectedScreenMode == autoCreateModeKey}
|
||||
<div class="checkmark-spacing">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class={`checkmark-spacing ${
|
||||
selectedScreenMode == listScreenModeKey ? "visible" : ""
|
||||
}`}
|
||||
>
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -85,9 +103,6 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.screen-type.item {
|
||||
padding: var(--spectrum-alias-item-padding-xl);
|
||||
}
|
||||
.screen-type-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -99,6 +114,7 @@
|
|||
}
|
||||
.checkmark-spacing {
|
||||
margin-right: var(--spacing-m);
|
||||
opacity: 0;
|
||||
}
|
||||
.content {
|
||||
letter-spacing: 0px;
|
||||
|
|
@ -106,7 +122,6 @@
|
|||
.item {
|
||||
cursor: pointer;
|
||||
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
||||
padding: var(--spectrum-alias-item-padding-s);
|
||||
background: var(--spectrum-alias-background-color-secondary);
|
||||
transition: 0.3s all;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
|
|
@ -132,4 +147,19 @@
|
|||
.screen-type-wrap :global(.spectrum-Heading) {
|
||||
padding-bottom: var(--spectrum-alias-item-padding-s);
|
||||
}
|
||||
.preview {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.listViewTitle {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.blankView {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Loading…
Reference in a new issue