new auto screen ux
This commit is contained in:
Peter Clement
parent
a18fd99bad
commit
9df2f8b634
|
|
@ -2,6 +2,7 @@ import { Screen } from "./utils/Screen"
|
|||
|
||||
export default {
|
||||
name: `Create from scratch`,
|
||||
id: `createFromScratch`,
|
||||
create: () => createScreen(),
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
]
|
||||
|
||||
let modal
|
||||
let navSelectionModal
|
||||
$: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
|
||||
|
||||
const navigate = ({ detail }) => {
|
||||
|
|
@ -85,9 +86,9 @@
|
|||
<div class="nav-items-container">
|
||||
<ComponentNavigationTree />
|
||||
</div>
|
||||
<Modal bind:this={modal}>
|
||||
<NewScreenModal />
|
||||
</Modal>
|
||||
<Modal bind:this={modal}
|
||||
><svelte:component this={NewScreenModal} {navSelectionModal} /></Modal
|
||||
>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab title="Layouts">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<script>
|
||||
import { ModalContent, Body, Detail } from "@budibase/bbui"
|
||||
|
||||
let selectedNav
|
||||
export let navSelectionModal
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Select navigation"
|
||||
cancelText="Back"
|
||||
onCancel={() => navSelectionModal.show()}
|
||||
size="M"
|
||||
disabled={!selectedNav}
|
||||
>
|
||||
<Body size="S"
|
||||
>Please select your preferred layout for the new application:</Body
|
||||
>
|
||||
|
||||
<div class="wrapper">
|
||||
<div
|
||||
on:click={() => (selectedNav = "sideNav")}
|
||||
class:unselected={selectedNav && selectedNav !== "sideNav"}
|
||||
>
|
||||
<div class="box">
|
||||
<div class="side-nav" />
|
||||
</div>
|
||||
<div><Detail>Side Nav</Detail></div>
|
||||
</div>
|
||||
<div
|
||||
on:click={() => (selectedNav = "topNav")}
|
||||
class:unselected={selectedNav && selectedNav !== "topNav"}
|
||||
>
|
||||
<div class="box">
|
||||
<div class="top-nav" />
|
||||
</div>
|
||||
<div><Detail>Top Nav</Detail></div>
|
||||
</div>
|
||||
<div
|
||||
on:click={() => (selectedNav = "noNav")}
|
||||
class:unselected={selectedNav && selectedNav !== "noNav"}
|
||||
>
|
||||
<div class="box" />
|
||||
<div><Detail>No Nav</Detail></div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.side-nav {
|
||||
float: left;
|
||||
background: #d3d3d3 0% 0% no-repeat padding-box;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: #d3d3d3 0% 0% no-repeat padding-box;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
}
|
||||
.box {
|
||||
display: inline-block;
|
||||
background: #eaeaea 0% 0% no-repeat padding-box;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 2px;
|
||||
opacity: 1;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
padding-top: 4%;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.unselected {
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +1,20 @@
|
|||
<script>
|
||||
import { store, allScreens, selectedAccessRole } from "builderStore"
|
||||
import { store, allScreens } from "builderStore"
|
||||
import { tables } from "stores/backend"
|
||||
import { roles } from "stores/backend"
|
||||
import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
|
||||
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
|
||||
import getTemplates from "builderStore/store/screenTemplates"
|
||||
import analytics, { Events } from "analytics"
|
||||
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
||||
|
||||
const CONTAINER = "@budibase/standard-components/container"
|
||||
|
||||
const blankScreen = "createFromScratch"
|
||||
let selectedScreens = []
|
||||
let navigationSelectionModal
|
||||
let name = ""
|
||||
let routeError
|
||||
let baseComponent = CONTAINER
|
||||
let templateIndex
|
||||
let draftScreen
|
||||
let createLink = true
|
||||
let roleId = $selectedAccessRole || "BASIC"
|
||||
|
||||
$: blankSelected = selectedScreens.includes(blankScreen)
|
||||
$: autoSelected = selectedScreens.length > 0 && !blankSelected
|
||||
|
||||
$: templates = getTemplates($store, $tables.list)
|
||||
$: route = !route && $allScreens.length === 0 ? "*" : route
|
||||
|
|
@ -42,6 +41,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
const save = async () => {
|
||||
if (!route) {
|
||||
routeError = "URL is required"
|
||||
|
|
@ -72,46 +72,99 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
const routeExists = (route, roleId) => {
|
||||
return $allScreens.some(
|
||||
screen =>
|
||||
screen.routing.route.toLowerCase() === route.toLowerCase() &&
|
||||
screen.routing.roleId === roleId
|
||||
)
|
||||
}
|
||||
|
||||
const routeChanged = event => {
|
||||
if (!event.detail.startsWith("/")) {
|
||||
route = "/" + event.detail
|
||||
*/
|
||||
const toggleScreenSelection = template => {
|
||||
if (selectedScreens.includes(template.id)) {
|
||||
selectedScreens = selectedScreens.filter(screen => screen !== template.id)
|
||||
} else {
|
||||
selectedScreens = [template.id, ...selectedScreens]
|
||||
}
|
||||
route = sanitizeUrl(route)
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
|
||||
<Select
|
||||
label="Choose a Template"
|
||||
bind:value={templateIndex}
|
||||
on:change={ev => templateChanged(ev.detail)}
|
||||
options={templates}
|
||||
placeholder={null}
|
||||
getOptionLabel={x => x.name}
|
||||
getOptionValue={(x, idx) => idx}
|
||||
/>
|
||||
<Input label="Name" bind:value={name} />
|
||||
<Input
|
||||
label="Url"
|
||||
error={routeError}
|
||||
bind:value={route}
|
||||
on:change={routeChanged}
|
||||
/>
|
||||
<Select
|
||||
label="Access"
|
||||
bind:value={roleId}
|
||||
options={$roles}
|
||||
getOptionLabel={x => x.name}
|
||||
getOptionValue={x => x._id}
|
||||
/>
|
||||
<Toggle text="Create link in navigation bar" bind:value={createLink} />
|
||||
<ModalContent
|
||||
title="Add screens"
|
||||
confirmText="Add Screens"
|
||||
cancelText="Cancel"
|
||||
onConfirm={() => navigationSelectionModal.show()}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
<Body size="XS"
|
||||
>Please select the screens you would like to add to your application.
|
||||
Autogenerated screens come with CRUD functionality.</Body
|
||||
>
|
||||
|
||||
<Layout noPadding>
|
||||
<Detail size="S">Blank screen</Detail>
|
||||
<div
|
||||
class="item"
|
||||
class:selected={selectedScreens.includes(blankScreen)}
|
||||
on:click={() => toggleScreenSelection({ id: blankScreen })}
|
||||
class:disabled={autoSelected}
|
||||
>
|
||||
<div class="content">
|
||||
<Body size="S">Blank</Body>
|
||||
</div>
|
||||
<div style="color: var(--spectrum-global-color-green-600); float: right">
|
||||
{#if selectedScreens.includes(blankScreen)}
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Detail size="S">Autogenerated Screens</Detail>
|
||||
|
||||
{#each templates.filter(x => x.id !== blankScreen) as template}
|
||||
<div
|
||||
class:disabled={blankSelected}
|
||||
class:selected={selectedScreens.includes(template.id)}
|
||||
on:click={() => toggleScreenSelection(template)}
|
||||
class="item"
|
||||
>
|
||||
<div class="content">
|
||||
{template.name}
|
||||
</div>
|
||||
<div
|
||||
style="color: var(--spectrum-global-color-green-600); float: right"
|
||||
>
|
||||
{#if selectedScreens.includes(template.id)}
|
||||
<Icon size="S" name="CheckmarkCircleOutline" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: 10px;
|
||||
letter-spacing: 0px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
.item {
|
||||
cursor: pointer;
|
||||
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
|
||||
padding: var(--spectrum-alias-item-padding-s);
|
||||
background: var(--background);
|
||||
transition: 0.3s all;
|
||||
border: solid var(--spectrum-alias-border-color);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.selected {
|
||||
background: var(--spectrum-alias-background-color-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue