Add initial layouts panel and add explicit panels for theme and navigation tabs

This commit is contained in:
Andrew Kingston 2022-05-11 13:06:41 +01:00
parent 343f28bbe1
commit 5d5b107234
5 changed files with 16 additions and 71 deletions

View File

@ -2,20 +2,26 @@
import { Icon, Heading } from "@budibase/bbui" import { Icon, Heading } from "@budibase/bbui"
export let title export let title
export let icon
export let showAddButton = false export let showAddButton = false
export let showBackButton = false export let showBackButton = false
export let showExpandIcon = false export let showExpandIcon = false
export let onClickAddButton export let onClickAddButton
export let onClickBackButton export let onClickBackButton
export let borderLeft = false
export let borderRight = false
let wide = false let wide = false
</script> </script>
<div class="navigation-panel" class:wide> <div class="navigation-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} />
{/if} {/if}
{#if icon}
<Icon name={icon} />
{/if}
<div class="title"> <div class="title">
<Heading size="XS">{title || ""}</Heading> <Heading size="XS">{title || ""}</Heading>
</div> </div>
@ -41,13 +47,18 @@
.navigation-panel { .navigation-panel {
width: 280px; width: 280px;
background: var(--background); background: var(--background);
border-right: var(--border-light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
transition: width 130ms ease-out; transition: width 130ms ease-out;
} }
.navigation-panel.border-left {
border-left: var(--border-light);
}
.navigation-panel.border-right {
border-right: var(--border-light);
}
.navigation-panel.wide { .navigation-panel.wide {
width: 420px; width: 420px;
} }

View File

@ -1,66 +0,0 @@
<script>
import { Icon, Heading } from "@budibase/bbui"
export let title
export let icon
</script>
<div class="settings-panel">
{#if title}
<div class="header">
{#if icon}
<Icon name={icon} />
{/if}
<div class="title" {title}>
<Heading size="XS">{title || ""}</Heading>
</div>
</div>
{/if}
<div class="body">
<slot />
</div>
</div>
<style>
.settings-panel {
width: 280px;
background: var(--background);
border-left: var(--border-light);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.header {
flex: 0 0 48px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 var(--spacing-l);
border-bottom: var(--border-light);
gap: var(--spacing-m);
}
.header :global(*) {
color: var(--spectrum-global-color-gray-700);
}
.title {
flex: 1 1 auto;
width: 0;
}
.title :global(h1) {
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.body {
flex: 1 1 auto;
overflow: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
</style>

View File

@ -1,12 +1,12 @@
<script> <script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte" import Panel from "components/design/Panel.svelte"
import { Banner, Layout } from "@budibase/bbui" import { Banner, Layout } from "@budibase/bbui"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import { store } from "builderStore" import { store } from "builderStore"
import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte" import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
</script> </script>
<NavigationPanel title="Layouts"> <Panel title="Layouts" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
<Banner <Banner
type="warning" type="warning"
@ -28,7 +28,7 @@
<LayoutDropdownMenu {layout} /> <LayoutDropdownMenu {layout} />
</NavItem> </NavItem>
{/each} {/each}
</NavigationPanel> </Panel>
<!-- --> <!-- -->
<!-- color={RoleUtils.getRoleColour(screen.routing.roleId)}--> <!-- color={RoleUtils.getRoleColour(screen.routing.roleId)}-->