MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reuse Component Panel

This commit is contained in:
Gerard Burns 2023-08-16 12:14:35 +01:00
parent 6886a312c5
commit e5f818a0ce
3 changed files with 9 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/builder/src/components/design/Pane.svelte
View File

@ -1,21 +0,0 @@
<script>
import { getContext } from "svelte"
export let title
const createPaneStore = getContext("createPaneStore")
$: paneStore = createPaneStore(title)
</script>
{#if $paneStore}
<div class="pane">
<slot />
</div>
{/if}
<style>
.pane {
padding: 13px;
}
</style>

112
packages/builder/src/components/design/RightPanel.svelte
View File

@ -1,112 +0,0 @@
<script>
import { setContext } from "svelte"
import { writable, get } from "svelte/store"
import { Icon, Body, Button } from "@budibase/bbui"
export let icon
export let title
let panes = {}
let selectedPaneIdStore = writable(null)
const createPaneStore = pane => {
const id = crypto.randomUUID()
return {
subscribe: callback => {
panes[id] = pane
if (get(selectedPaneIdStore) === null) {
selectedPaneIdStore.set(id)
}
const unsubscribeSelectedPaneIdStore = selectedPaneIdStore.subscribe(
selectedPaneId => callback(selectedPaneId === id)
)
return () => {
delete panes[id]
panes = panes
unsubscribeSelectedPaneIdStore()
if (get(selectedPaneIdStore) === id) {
const ids = Object.keys(panes)
if (ids.length > 0) {
selectedPaneIdStore.set(ids[0])
} else {
selectedPaneIdStore.set(null)
}
}
}
},
}
}
setContext("createPaneStore", createPaneStore)
</script>
<div class="panel">
<div class="header">
<div class="icon">
<Icon name={icon} />
</div>
<Body>{title}</Body>
</div>
<div class="controls">
{#each Object.entries(panes) as [id, pane]}
<div class="button" class:active={$selectedPaneIdStore === id}>
<Button on:click={() => selectedPaneIdStore.set(id)}>{pane}</Button>
</div>
{/each}
</div>
<div class="divider" />
<slot />
</div>
<style>
.panel {
width: 310px;
background: var(--background);
}
.header {
display: flex;
padding: 16px 14px;
align-items: center;
}
.icon {
color: var(--grey-6);
margin-right: 8px;
}
.controls {
padding: 0 14px 16px;
display: flex;
}
.button:first-child {
margin-right: 8px;
}
.button :global(button) {
border-radius: 4px;
border: none;
background-color: var(--grey-1);
color: var(--ink);
}
.button :global(button):hover {
background-color: var(--grey-2);
}
.button.active :global(button) {
background-color: var(--grey-2);
}
.divider {
border-top: 1px solid var(--grey-3);
}
</style>

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

@ -1,5 +1,6 @@
<script> <script>
import { get } from "svelte/store" import { get } from "svelte/store"
import Panel from "components/design/Panel.svelte"
import { import {
Detail, Detail,
Toggle, Toggle,
@ -25,6 +26,7 @@
e.detail e.detail
) )
} }
const update = async (key, value) => { const update = async (key, value) => {
try { try {
let navigation = $store.navigation let navigation = $store.navigation
@ -36,16 +38,12 @@
} }
</script> </script>
<div class="panel"> <Panel
<div class="header"> title="Navigation"
<div class="icon"> icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
<Icon borderLeft
name={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"} wide
/> >
</div>
<Body>Navigation</Body>
</div>
<div class="divider" />
<div class="generalSection"> <div class="generalSection">
<div class="subheading"> <div class="subheading">
<Detail>General</Detail> <Detail>General</Detail>
@ -161,16 +159,9 @@
/> />
</div> </div>
</div> </div>
</div> </Panel>
<style> <style>
.panel {
overflow: hidden;
width: 310px;
background: var(--background);
border-left: 2px solid var(--grey-2);
}
.generalSection { .generalSection {
padding: 13px 13px 25px; padding: 13px 13px 25px;
} }
@ -178,17 +169,6 @@
.customizeSection { .customizeSection {
padding: 13px 13px 25px; padding: 13px 13px 25px;
} }
.header {
display: flex;
padding: 16px 14px;
align-items: center;
}
.header :global(p) {
font-size: 12px;
}
.subheading { .subheading {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -197,15 +177,6 @@
color: var(--grey-6); color: var(--grey-6);
} }
.icon {
color: var(--grey-6);
margin-right: 8px;
}
.icon :global(svg) {
height: 16px;
}
.toggle { .toggle {
display: flex; display: flex;
align-items: center; align-items: center;