CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-15 10:01:34 +12:00
Code Issues Projects Releases Wiki Activity

linting

Browse source
This commit is contained in:
Gerard Burns 2023-08-21 08:33:53 +01:00
parent 67d5eef293
commit d0f9694d24
4 changed files with 105 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/builder/src/builderStore/store/frontend.js
View file

@ -1000,10 +1000,10 @@ export const getFrontendStore = () => {
const parent = findComponentParent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(x => x._id === componentId) const index = parent?._children.findIndex(x => x._id === componentId)
if (componentId === 'screen') { if (componentId === "screen") {
return null return null
} }
if (componentId === 'navigation') { if (componentId === "navigation") {
return "screen" return "screen"
} }
if (parent._id === screen.props._id && index === 0) { if (parent._id === screen.props._id && index === 0) {
@ -1037,8 +1037,8 @@ export const getFrontendStore = () => {
const parent = findComponentParent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(x => x._id === componentId) const index = parent?._children.findIndex(x => x._id === componentId)
if (state.selectedComponentId === 'screen') { if (state.selectedComponentId === "screen") {
return 'navigation' return "navigation"
} }
// If we have children, select first child // If we have children, select first child

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View file

@ -1,7 +1,12 @@
<script> <script>
import { get } from "svelte/store" import { get } from "svelte/store"
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy } from "svelte"
import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore" import {
store,
selectedComponent,
selectedScreen,
currentAsset,
} from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { import {
ProgressCircle, ProgressCircle,

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
View file

@ -107,7 +107,7 @@
id={`component-${component._id}`} id={`component-${component._id}`}
> >
<NavItem <NavItem
compact compact
scrollable scrollable
draggable draggable
on:dragend={dndStore.actions.reset} on:dragend={dndStore.actions.reset}

190
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import LinksEditor from './LinksEditor.svelte' import LinksEditor from "./LinksEditor.svelte"
import { get } from "svelte/store" import { get } from "svelte/store"
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { import {
@ -7,7 +7,6 @@
Toggle, Toggle,
Body, Body,
Icon, Icon,
Button,
ColorPicker, ColorPicker,
Input, Input,
Label, Label,
@ -58,112 +57,111 @@
</div> </div>
</div> </div>
{#if $selectedScreen.showNavigation} {#if $selectedScreen.showNavigation}
<div class="divider" /> <div class="divider" />
<div class="customizeSection"> <div class="customizeSection">
<div class="subheading"> <div class="subheading">
<Detail>Customize</Detail> <Detail>Customize</Detail>
</div>
<div class="info">
<div class="infoHeader">
<Icon name="InfoOutline" />
<Body size="S">These settings apply to all screens</Body>
</div> </div>
</div> <div class="info">
<div class="configureLinks"> <div class="infoHeader">
<LinksEditor /> <Icon name="InfoOutline" />
</div> <Body size="S">These settings apply to all screens</Body>
<div class="controls"> </div>
<div class="label">
<Label size="M">Position</Label>
</div> </div>
<ActionGroup quiet> <div class="configureLinks">
<ActionButton <LinksEditor />
selected={$store.navigation.navigation === "Top"} </div>
quiet={$store.navigation.navigation !== "Top"} <div class="controls">
icon="PaddingTop"
on:click={() => update("navigation", "Top")}
/>
<ActionButton
selected={$store.navigation.navigation === "Left"}
quiet={$store.navigation.navigation !== "Left"}
icon="PaddingLeft"
on:click={() => update("navigation", "Left")}
/>
</ActionGroup>
{#if $store.navigation.navigation === "Top"}
<div class="label"> <div class="label">
<Label size="M">Sticky header</Label> <Label size="M">Position</Label>
</div>
<ActionGroup quiet>
<ActionButton
selected={$store.navigation.navigation === "Top"}
quiet={$store.navigation.navigation !== "Top"}
icon="PaddingTop"
on:click={() => update("navigation", "Top")}
/>
<ActionButton
selected={$store.navigation.navigation === "Left"}
quiet={$store.navigation.navigation !== "Left"}
icon="PaddingLeft"
on:click={() => update("navigation", "Left")}
/>
</ActionGroup>
{#if $store.navigation.navigation === "Top"}
<div class="label">
<Label size="M">Sticky header</Label>
</div>
<Checkbox
value={$store.navigation.sticky}
on:change={e => update("sticky", e.detail)}
/>
<div class="label">
<Label size="M">Width</Label>
</div>
<Select
options={["Max", "Large", "Medium", "Small"]}
plaveholder={null}
value={$store.navigation.navWidth}
on:change={e => update("navWidth", e.detail)}
/>
{/if}
<div class="label">
<Label size="M">Show logo</Label>
</div> </div>
<Checkbox <Checkbox
value={$store.navigation.sticky} value={!$store.navigation.hideLogo}
on:change={e => update("sticky", e.detail)} on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<div class="label">
<Label size="M">Logo URL</Label>
</div>
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label size="M">Show title</Label>
</div>
<Checkbox
value={!$store.navigation.hideTitle}
on:change={e => update("hideTitle", !e.detail)}
/>
{#if !$store.navigation.hideTitle}
<div class="label">
<Label size="M">Title</Label>
</div>
<Input
value={$store.navigation.title}
on:change={e => update("title", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label>Background</Label>
</div>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navBackground ||
DefaultAppTheme.navBackground}
on:change={e => update("navBackground", e.detail)}
/> />
<div class="label"> <div class="label">
<Label size="M">Width</Label> <Label>Text</Label>
</div> </div>
<Select <ColorPicker
options={["Max", "Large", "Medium", "Small"]} spectrumTheme={$store.theme}
plaveholder={null} value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
value={$store.navigation.navWidth} on:change={e => update("navTextColor", e.detail)}
on:change={e => update("navWidth", e.detail)}
/> />
{/if}
<div class="label">
<Label size="M">Show logo</Label>
</div> </div>
<Checkbox
value={!$store.navigation.hideLogo}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<div class="label">
<Label size="M">Logo URL</Label>
</div>
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label size="M">Show title</Label>
</div>
<Checkbox
value={!$store.navigation.hideTitle}
on:change={e => update("hideTitle", !e.detail)}
/>
{#if !$store.navigation.hideTitle}
<div class="label">
<Label size="M">Title</Label>
</div>
<Input
value={$store.navigation.title}
on:change={e => update("title", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label>Background</Label>
</div>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
on:change={e => update("navBackground", e.detail)}
/>
<div class="label">
<Label>Text</Label>
</div>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
on:change={e => update("navTextColor", e.detail)}
/>
</div> </div>
</div>
{/if} {/if}
</Panel> </Panel>