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

Tidy up new screen workflow and integrate with new UI

This commit is contained in:
Andrew Kingston 2022-04-25 14:57:12 +01:00
parent 3d9e868334
commit e6f68943ba
4 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View File

@ -195,7 +195,7 @@
size="M" size="M"
name="ArrowLeft" name="ArrowLeft"
hoverable hoverable
on:click={() => $goto("../")} on:click={() => $goto("../../portal/apps")}
/> />
<Heading size="S">{$store.name || "App"}</Heading> <Heading size="S">{$store.name || "App"}</Heading>
</div> </div>

24
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
View File

@ -1,6 +1,12 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import { ModalContent, Layout, notifications, Icon } from "@budibase/bbui" import {
ModalContent,
Layout,
notifications,
Icon,
Body,
} from "@budibase/bbui"
import { tables, datasources } from "stores/backend" import { tables, datasources } from "stores/backend"
import getTemplates from "builderStore/store/screenTemplates" import getTemplates from "builderStore/store/screenTemplates"
import ICONS from "components/backend/DatasourceNavigator/icons" import ICONS from "components/backend/DatasourceNavigator/icons"
@ -70,17 +76,18 @@
disabled={!selectedScreens.length} disabled={!selectedScreens.length}
size="L" size="L"
> >
<Body size="S">
Select which data source you would like to use to create your screens
</Body>
<Layout noPadding gap="S"> <Layout noPadding gap="S">
{#each filteredSources as datasource} {#each filteredSources as datasource}
<div class="data-source-wrap"> <div class="data-source-wrap">
<div class="data-source-header"> <div class="data-source-header">
<div class="datasource-icon">
<svelte:component <svelte:component
this={ICONS[datasource.source]} this={ICONS[datasource.source]}
height="24" height="24"
width="24" width="24"
/> />
</div>
<div class="data-source-name">{datasource.name}</div> <div class="data-source-name">{datasource.name}</div>
</div> </div>
{#if Array.isArray(datasource.entities)} {#if Array.isArray(datasource.entities)}
@ -153,19 +160,21 @@
.data-source-wrap { .data-source-wrap {
padding-bottom: var(--spectrum-alias-item-padding-s); padding-bottom: var(--spectrum-alias-item-padding-s);
display: grid; display: grid;
grid-gap: var(--spacing-xs); grid-gap: var(--spacing-s);
} }
.data-source-header { .data-source-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-m);
padding-bottom: var(--spacing-xs);
} }
.data-source-entry { .data-source-entry {
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); padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-primary); 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);
border-radius: 4px; border-radius: 4px;
@ -179,11 +188,6 @@
background: var(--spectrum-alias-background-color-tertiary); background: var(--spectrum-alias-background-color-tertiary);
} }
.data-source-name {
padding: var(--spectrum-alias-item-padding-s);
min-height: var(--spectrum-icon-size-s);
}
.data-source-entry .data-source-check { .data-source-entry .data-source-check {
margin-left: auto; margin-left: auto;
} }

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

@ -107,7 +107,7 @@
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); padding: var(--spectrum-alias-item-padding-s);
background: var(--spectrum-alias-background-color-primary); 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);
border-radius: 4px; border-radius: 4px;
@ -123,6 +123,9 @@
.screen-type-wrap .screen-type-text { .screen-type-wrap .screen-type-text {
padding-left: var(--spectrum-alias-item-padding-xl); padding-left: var(--spectrum-alias-item-padding-xl);
} }
.screen-type-wrap .screen-type-text :global(h1) {
padding-bottom: var(--spacing-xs);
}
.screen-type-wrap :global(.spectrum-Icon) { .screen-type-wrap :global(.spectrum-Icon) {
min-width: var(--spectrum-icon-size-m); min-width: var(--spectrum-icon-size-m);
} }

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
View File

@ -7,6 +7,7 @@
export let onConfirm export let onConfirm
export let onCancel export let onCancel
export let screenUrl export let screenUrl
export let screenName
export let confirmText = "Continue" export let confirmText = "Continue"
let routeError let routeError
@ -44,6 +45,7 @@
const confirmScreenDetails = async () => { const confirmScreenDetails = async () => {
await onConfirm({ await onConfirm({
screenUrl, screenUrl,
screenName,
}) })
} }
</script> </script>