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

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

@ -1,5 +1,5 @@
<script> <script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte" import Panel from "components/design/Panel.svelte"
import ComponentTree from "./ComponentTree.svelte" import ComponentTree from "./ComponentTree.svelte"
import instantiateStore from "./dragDropStore.js" import instantiateStore from "./dragDropStore.js"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
@ -60,11 +60,12 @@
}) })
</script> </script>
<NavigationPanel <Panel
title="Components" title="Components"
showAddButton showAddButton
onClickAddButton={() => $goto("../new")} onClickAddButton={() => $goto("../new")}
showExpandIcon showExpandIcon
borderRight
> >
<div class="nav-items-container" bind:this={scrollRef}> <div class="nav-items-container" bind:this={scrollRef}>
<NavItem <NavItem
@ -87,7 +88,7 @@
{dragDropStore} {dragDropStore}
/> />
</div> </div>
</NavigationPanel> </Panel>
<style> <style>
.nav-items-container { .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> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import Panel from "components/design/Panel.svelte"
import { store, selectedComponent, selectedScreen } from "builderStore" import { store, selectedComponent, selectedScreen } from "builderStore"
import ComponentSettingsSection from "./ComponentSettingsSection.svelte" import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
import DesignSection from "./DesignSection.svelte" import DesignSection from "./DesignSection.svelte"
@ -27,7 +27,7 @@
</script> </script>
{#if $selectedComponent} {#if $selectedComponent}
<SettingsPanel {title} icon={componentDefinition.icon}> <Panel {title} icon={componentDefinition.icon} borderLeft>
<ComponentSettingsSection <ComponentSettingsSection
{componentInstance} {componentInstance}
{componentDefinition} {componentDefinition}
@ -42,5 +42,5 @@
{componentDefinition} {componentDefinition}
{bindings} {bindings}
/> />
</SettingsPanel> </Panel>
{/if} {/if}

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

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

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

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

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

@ -1,5 +1,5 @@
<script> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui" import { Body, Layout } from "@budibase/bbui"
import { selectedComponent, selectedScreen, store } from "builderStore" import { selectedComponent, selectedScreen, store } from "builderStore"
@ -11,11 +11,11 @@
$: position = componentDefinition?.hasChildren ? "inside" : "below" $: position = componentDefinition?.hasChildren ? "inside" : "below"
</script> </script>
<SettingsPanel {title} icon={componentDefinition?.icon}> <Panel {title} icon={componentDefinition?.icon} borderLeft>
<Layout paddingX="L" paddingY="XL"> <Layout paddingX="L" paddingY="XL">
<Body size="S"> <Body size="S">
Components that you add will be placed {position} Components that you add will be placed {position}
{title} {title}
</Body> </Body>
</Layout> </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> </NavItem>
{/each} {/each}
</Panel> </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> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import Panel from "components/design/Panel.svelte"
</script> </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> <script>
import LayoutNavigationPanel from "./_components/LayoutNavigationPanel.svelte" import LayoutListPanel from "./_components/LayoutListPanel.svelte"
import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
</script> </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> <script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte" import Panel from "components/design/Panel.svelte"
import { import {
Body, Body,
Layout, Layout,
@ -27,7 +27,7 @@
} }
</script> </script>
<NavigationPanel title="Navigation"> <Panel title="Navigation" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Body size="S"> <Body size="S">
Your navigation is configured for all the screens within your app Your navigation is configured for all the screens within your app
@ -115,4 +115,4 @@
/> />
</Layout> </Layout>
</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> <script>
import { Search, Layout, Select, Body } from "@budibase/bbui" 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 { roles } from "stores/backend"
import { store, sortedScreens } from "builderStore" import { store, sortedScreens } from "builderStore"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
@ -28,10 +28,11 @@
} }
</script> </script>
<NavigationPanel <Panel
title="Screens" title="Screens"
showAddButton showAddButton
onClickAddButton={showNewScreenModal} onClickAddButton={showNewScreenModal}
borderRight
> >
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Search <Search
@ -66,6 +67,6 @@
</Body> </Body>
</Layout> </Layout>
{/if} {/if}
</NavigationPanel> </Panel>
<ScreenWizard bind:showModal={showNewScreenModal} /> <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> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import Panel from "components/design/Panel.svelte"
import { get } from "svelte/store" import { get } from "svelte/store"
import { get as deepGet, setWith } from "lodash" import { get as deepGet, setWith } from "lodash"
import { import {
@ -164,9 +164,10 @@
} }
</script> </script>
<SettingsPanel <Panel
title={$selectedScreen?.routing.route} title={$selectedScreen?.routing.route}
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"} icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
borderLeft
> >
<Layout gap="S" paddingX="L" paddingY="XL"> <Layout gap="S" paddingX="L" paddingY="XL">
{#if $selectedScreen.layoutId} {#if $selectedScreen.layoutId}
@ -191,4 +192,4 @@
{/each} {/each}
<Button cta on:click={() => $goto("../components")}>View components</Button> <Button cta on:click={() => $goto("../components")}>View components</Button>
</Layout> </Layout>
</SettingsPanel> </Panel>

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

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

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

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