CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-14 10:45:51 +12:00
Code Issues Projects Releases Wiki Activity

Improve Add Screen Modal (#9759)

Browse source 
* Improve Add Screen Modal

* lint

---------

Co-authored-by: Rory Powell <rory.codes@gmail.com>
This commit is contained in:
Gerard Burns 2023-02-23 12:06:55 +00:00 committed by GitHub
parent 96dfa32c0b
commit 4c70b7fd9b
3 changed files with 55 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
View file

@ -1,11 +1,13 @@
<script> <script>
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui" import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
import blankScreenPreview from "./blankScreenPreview.png"
import listScreenPreview from "./listScreenPreview.png"
export let onConfirm export let onConfirm
export let onCancel export let onCancel
let autoCreateModeKey = "autoCreate" let listScreenModeKey = "autoCreate"
let blankScreenModeKey = "blankScreen" let blankScreenModeKey = "blankScreen"
let selectedScreenMode let selectedScreenMode
@ -23,61 +25,77 @@
onConfirm={confirmScreenSelection} onConfirm={confirmScreenSelection}
{onCancel} {onCancel}
disabled={!selectedScreenMode} disabled={!selectedScreenMode}
size="L" size="M"
> >
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<div <div
class="screen-type item" class="screen-type item blankView"
class:selected={selectedScreenMode == blankScreenModeKey} class:selected={selectedScreenMode == blankScreenModeKey}
on:click={() => { on:click={() => {
selectedScreenMode = blankScreenModeKey selectedScreenMode = blankScreenModeKey
}} }}
> >
<div class="content screen-type-wrap"> <div class="content screen-type-wrap">
<Icon name="WebPage" /> <img
alt="blank screen preview"
class="preview"
src={blankScreenPreview}
/>
<div class="screen-type-text"> <div class="screen-type-text">
<Heading size="XS">Blank screen</Heading> <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> </div>
<div <div
style="color: var(--spectrum-global-color-green-600); float: right" style="color: var(--spectrum-global-color-green-600); float: right"
> >
{#if selectedScreenMode == blankScreenModeKey} <div
<div class="checkmark-spacing"> class={`checkmark-spacing ${
selectedScreenMode == blankScreenModeKey ? "visible" : ""
}`}
>
<Icon size="S" name="CheckmarkCircle" /> <Icon size="S" name="CheckmarkCircle" />
</div> </div>
{/if}
</div> </div>
</div> </div>
<div class="listViewTitle">
<Heading size="XS">Quickly create a screen from your data</Heading>
</div>
<div <div
class="screen-type item" class="screen-type item"
class:selected={selectedScreenMode == autoCreateModeKey} class:selected={selectedScreenMode == listScreenModeKey}
on:click={() => { on:click={() => {
selectedScreenMode = autoCreateModeKey selectedScreenMode = listScreenModeKey
}} }}
class:disabled={!$tables.list.filter(table => table._id !== "ta_users") class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
.length} .length}
> >
<div class="content screen-type-wrap"> <div class="content screen-type-wrap">
<Icon name="WebPages" /> <img
alt="list screen preview"
class="preview"
src={listScreenPreview}
/>
<div class="screen-type-text"> <div class="screen-type-text">
<Heading size="XS">Autogenerated screens</Heading> <Heading size="XS">List view</Heading>
<Body size="S"> <Body size="S">
Add autogenerated screens with CRUD functionality to get a working Create, edit and view your data in a list view screen with side
app quickly! (Requires a datasource) panel
</Body> </Body>
</div> </div>
</div> </div>
<div <div
style="color: var(--spectrum-global-color-green-600); float: right" style="color: var(--spectrum-global-color-green-600); float: right"
> >
{#if selectedScreenMode == autoCreateModeKey} <div
<div class="checkmark-spacing"> class={`checkmark-spacing ${
selectedScreenMode == listScreenModeKey ? "visible" : ""
}`}
>
<Icon size="S" name="CheckmarkCircle" /> <Icon size="S" name="CheckmarkCircle" />
</div> </div>
{/if}
</div> </div>
</div> </div>
</Layout> </Layout>
@ -85,9 +103,6 @@
</div> </div>
<style> <style>
.screen-type.item {
padding: var(--spectrum-alias-item-padding-xl);
}
.screen-type-wrap { .screen-type-wrap {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -99,6 +114,7 @@
} }
.checkmark-spacing { .checkmark-spacing {
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
opacity: 0;
} }
.content { .content {
letter-spacing: 0px; letter-spacing: 0px;
@ -106,7 +122,6 @@
.item { .item {
cursor: pointer; cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall); grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-secondary); background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all; transition: 0.3s all;
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
@ -132,4 +147,19 @@
.screen-type-wrap :global(.spectrum-Heading) { .screen-type-wrap :global(.spectrum-Heading) {
padding-bottom: var(--spectrum-alias-item-padding-s); padding-bottom: var(--spectrum-alias-item-padding-s);
} }
.preview {
width: 140px;
}
.listViewTitle {
margin-top: 35px;
}
.blankView {
margin-top: 10px;
}
.visible {
opacity: 1;
}
</style> </style>

BIN
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 KiB