Reuse Component Panel
This commit is contained in:
parent
6886a312c5
commit
e5f818a0ce
3 changed files with 9 additions and 171 deletions
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue