CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 17:47:46 +13:00
Code Issues Projects Releases Wiki Activity

Refactor design panels into core panel component and update usages

Browse source
This commit is contained in:
Andrew Kingston 2022-05-11 13:09:21 +01:00
parent 5d5b107234
commit 155a60160d
14 changed files with 43 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/builder/src/components/design/Panel.svelte
View file

@ -14,7 +14,7 @@
let wide = false
</script>
<div class="navigation-panel" class:wide class:borderLeft class:borderRight>
<div class="panel" class:wide class:borderLeft class:borderRight>
<div class="header">
{#if showBackButton}
<Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
@ -44,7 +44,7 @@
</div>
<style>
.navigation-panel {
.panel {
width: 280px;
background: var(--background);
display: flex;
@ -53,13 +53,13 @@
align-items: stretch;
transition: width 130ms ease-out;
}
.navigation-panel.border-left {
.panel.borderLeft {
border-left: var(--border-light);
}
.navigation-panel.border-right {
.panel.borderRight {
border-right: var(--border-light);
}
.navigation-panel.wide {
.panel.wide {
width: 420px;
}
.header {

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import Panel from "components/design/Panel.svelte"
import ComponentTree from "./ComponentTree.svelte"
import instantiateStore from "./dragDropStore.js"
import { goto } from "@roxi/routify"
@ -60,11 +60,12 @@
})
</script>
<NavigationPanel
<Panel
title="Components"
showAddButton
onClickAddButton={() => $goto("../new")}
showExpandIcon
borderRight
>
<div class="nav-items-container" bind:this={scrollRef}>
<NavItem
@ -87,7 +88,7 @@
{dragDropStore}
/>
</div>
</NavigationPanel>
</Panel>
<style>
.nav-items-container {

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import Panel from "components/design/Panel.svelte"
import { store, selectedComponent, selectedScreen } from "builderStore"
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
import DesignSection from "./DesignSection.svelte"
@ -27,7 +27,7 @@
</script>
{#if $selectedComponent}
<SettingsPanel {title} icon={componentDefinition.icon}>
<Panel {title} icon={componentDefinition.icon} borderLeft>
<ComponentSettingsSection
{componentInstance}
{componentDefinition}
@ -42,5 +42,5 @@
{componentDefinition}
{bindings}
/>
</SettingsPanel>
</Panel>
{/if}

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

@ -1,7 +1,7 @@
<script>
import ComponentNavigationPanel from "./_components/navigation/ComponentNavigationPanel.svelte"
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
</script>
<ComponentNavigationPanel />
<ComponentListPanel />
<ComponentSettingsPanel />

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

@ -1,5 +1,5 @@
<script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import Panel from "components/design/Panel.svelte"
import { goto } from "@roxi/routify"
import {
Layout,
@ -152,10 +152,11 @@
})
</script>
<NavigationPanel
<Panel
title="Add component"
showBackButton
onClickBackButton={() => $goto("../slot")}
borderRight
>
<Layout paddingX="L" paddingY="XL" gap="S">
<ActionGroup compact justified>
@ -218,7 +219,7 @@
</Layout>
</Layout>
{/if}
</NavigationPanel>
</Panel>
<style>
.component-grid {

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui"
import { selectedComponent, selectedScreen, store } from "builderStore"
@ -11,11 +11,11 @@
$: position = componentDefinition?.hasChildren ? "inside" : "below"
</script>
<SettingsPanel {title} icon={componentDefinition?.icon}>
<Panel {title} icon={componentDefinition?.icon} borderLeft>
<Layout paddingX="L" paddingY="XL">
<Body size="S">
Components that you add will be placed {position}
{title}
</Body>
</Layout>
</SettingsPanel>
</Panel>

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
View file

@ -29,6 +29,3 @@
</NavItem>
{/each}
</Panel>
<!-- -->
<!-- color={RoleUtils.getRoleColour(screen.routing.roleId)}-->

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import Panel from "components/design/Panel.svelte"
</script>
<
<Panel title="Layout" borderLeft />

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
View file

@ -1,5 +1,7 @@
<script>
import LayoutNavigationPanel from "./_components/LayoutNavigationPanel.svelte"
import LayoutListPanel from "./_components/LayoutListPanel.svelte"
import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
</script>
<LayoutNavigationPanel />
<LayoutListPanel />
<LayoutSettingsPanel />

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import Panel from "components/design/Panel.svelte"
import {
Body,
Layout,
@ -27,7 +27,7 @@
}
</script>
<NavigationPanel title="Navigation">
<Panel title="Navigation" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">
Your navigation is configured for all the screens within your app
@ -115,4 +115,4 @@
/>
</Layout>
</Layout>
</NavigationPanel>
</Panel>

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

@ -1,6 +1,6 @@
<script>
import { Search, Layout, Select, Body } from "@budibase/bbui"
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import Panel from "components/design/Panel.svelte"
import { roles } from "stores/backend"
import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
@ -28,10 +28,11 @@
}
</script>
<NavigationPanel
<Panel
title="Screens"
showAddButton
onClickAddButton={showNewScreenModal}
borderRight
>
<Layout paddingX="L" paddingY="XL" gap="S">
<Search
@ -66,6 +67,6 @@
</Body>
</Layout>
{/if}
</NavigationPanel>
</Panel>
<ScreenWizard bind:showModal={showNewScreenModal} />

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

@ -1,5 +1,5 @@
<script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import Panel from "components/design/Panel.svelte"
import { get } from "svelte/store"
import { get as deepGet, setWith } from "lodash"
import {
@ -164,9 +164,10 @@
}
</script>
<SettingsPanel
<Panel
title={$selectedScreen?.routing.route}
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
borderLeft
>
<Layout gap="S" paddingX="L" paddingY="XL">
{#if $selectedScreen.layoutId}
@ -191,4 +192,4 @@
{/each}
<Button cta on:click={() => $goto("../components")}>View components</Button>
</Layout>
</SettingsPanel>
</Panel>

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
View file

@ -1,7 +1,7 @@
<script>
import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte"
import ScreenListPanel from "./_components/ScreenListPanel.svelte"
import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
</script>
<ScreenNavigationPanel />
<ScreenListPanel />
<ScreenSettingsPanel />

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
View file

@ -1,5 +1,5 @@
<script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import Panel from "components/design/Panel.svelte"
import {
Body,
Layout,
@ -46,7 +46,7 @@
}
</script>
<NavigationPanel title="Theme">
<Panel title="Theme" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S">
Your theme is set across all the screens within your app
@ -91,7 +91,7 @@
/>
</Layout>
</Layout>
</NavigationPanel>
</Panel>
<style>
.buttons {