Fix theme resetting navigation background and update layout UI

This commit is contained in:
Andrew Kingston 2022-05-13 11:09:20 +01:00
parent b14440065c
commit 68156fee3d
4 changed files with 25 additions and 30 deletions

View File

@ -1,31 +1,25 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Banner, Layout } from "@budibase/bbui"
import { Layout } from "@budibase/bbui"
import NavItem from "components/common/NavItem.svelte"
import { store } from "builderStore"
import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
</script>
<Panel title="Layouts" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Banner
type="warning"
showCloseButton={false}
extraButtonText="View details"
extraButtonAction={() => {}}
>
Custom layouts are being deprecated. They will be removed on [date].
</Banner>
<Layout paddingY="XL" paddingX="">
<div>
{#each $store.layouts as layout (layout._id)}
<NavItem
icon="Experience"
indentLevel={0}
selected={$store.selectedLayoutId === layout._id}
text={layout.name}
on:click={() => ($store.selectedLayoutId = layout._id)}
>
<LayoutDropdownMenu {layout} />
</NavItem>
{/each}
</div>
</Layout>
{#each $store.layouts as layout (layout._id)}
<NavItem
icon="Experience"
indentLevel={0}
selected={$store.selectedLayoutId === layout._id}
text={layout.name}
on:click={() => ($store.selectedLayoutId = layout._id)}
>
<LayoutDropdownMenu {layout} />
</NavItem>
{/each}
</Panel>

View File

@ -1,7 +1,7 @@
<script>
import Panel from "components/design/Panel.svelte"
import { store, selectedLayout } from "builderStore"
import { Layout, Body, Button, notifications } from "@budibase/bbui"
import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
import { Component } from "builderStore/store/screenTemplates/utils/Component"
const copyLayout = () => {
@ -37,6 +37,14 @@
<Panel title={$selectedLayout?.name} icon="Experience" borderLeft>
<Layout paddingX="L" paddingY="XL" gap="S">
<Banner
type="warning"
showCloseButton={false}
extraButtonText="View details"
extraButtonAction={() => {}}
>
Custom layouts are being deprecated. They will be removed on [date].
</Banner>
<Body size="S">
You can save the content of this layout by pressing the button below.
</Body>

View File

@ -16,13 +16,6 @@
try {
const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
await store.actions.theme.save(theme)
await store.actions.navigation.save({
...get(store).navigation,
navBackground:
theme === "spectrum--light"
? "var(--spectrum-global-color-gray-50)"
: "var(--spectrum-global-color-gray-100)",
})
} catch (error) {
notifications.error("Error updating theme")
}

View File

@ -276,7 +276,7 @@ const performAppCreate = async (ctx: any) => {
navigation: "Top",
title: name,
navWidth: "Large",
navBackground: "var(--spectrum-global-color-gray-50)",
navBackground: "var(--spectrum-global-color-gray-100)",
links: [
{
url: "/home",