CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-02 18:44:54 +12:00
Code Issues Projects Releases Wiki Activity

Tidy up new screen workflow and integrate with new UI

Browse source
This commit is contained in:
Andrew Kingston 2022-04-25 14:57:12 +01:00
parent f463a8d661
commit 03249d9869
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"
name="ArrowLeft"
hoverable
on:click={() => $goto("../")}
on:click={() => $goto("../../portal/apps")}
/>
<Heading size="S">{$store.name || "App"}</Heading>
</div>

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

@ -1,6 +1,12 @@
<script>
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 getTemplates from "builderStore/store/screenTemplates"
import ICONS from "components/backend/DatasourceNavigator/icons"
@ -70,17 +76,18 @@
disabled={!selectedScreens.length}
size="L"
>
<Body size="S">
Select which data source you would like to use to create your screens
</Body>
<Layout noPadding gap="S">
{#each filteredSources as datasource}
<div class="data-source-wrap">
<div class="data-source-header">
<div class="datasource-icon">
<svelte:component
this={ICONS[datasource.source]}
height="24"
width="24"
/>
</div>
<svelte:component
this={ICONS[datasource.source]}
height="24"
width="24"
/>
<div class="data-source-name">{datasource.name}</div>
</div>
{#if Array.isArray(datasource.entities)}
@ -153,19 +160,21 @@
.data-source-wrap {
padding-bottom: var(--spectrum-alias-item-padding-s);
display: grid;
grid-gap: var(--spacing-xs);
grid-gap: var(--spacing-s);
}
.data-source-header {
display: flex;
align-items: center;
gap: var(--spacing-m);
padding-bottom: var(--spacing-xs);
}
.data-source-entry {
cursor: pointer;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
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;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
@ -179,11 +188,6 @@
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 {
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;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
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;
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
@ -123,6 +123,9 @@
.screen-type-wrap .screen-type-text {
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) {
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 onCancel
export let screenUrl
export let screenName
export let confirmText = "Continue"
let routeError
@ -44,6 +45,7 @@
const confirmScreenDetails = async () => {
await onConfirm({
screenUrl,
screenName,
})
}
</script>