linting
This commit is contained in:
parent
67d5eef293
commit
d0f9694d24
4 changed files with 105 additions and 102 deletions
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue