ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor design panels into core panel component and update usages

master
Andrew Kingston 4 years ago
parent
5d5b107234
commit
155a60160d
14 changed files with 43 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      packages/builder/src/components/design/Panel.svelte
  2. 7
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
  3. 6
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
  4. 4
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
  5. 7
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
  6. 6
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
  7. 3
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
  8. 4
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
  9. 6
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
  10. 6
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
  11. 7
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
  12. 7
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
  13. 4
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
  14. 6
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte

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 {

Write Preview
Loading…
Cancel
Save