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 1c93d9bd91
commit c3b39d5953
4 changed files with 25 additions and 30 deletions

View File

@ -1,22 +1,14 @@
<script> <script>
import Panel from "components/design/Panel.svelte" 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 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>
<Panel title="Layouts" borderRight> <Panel title="Layouts" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingY="XL" paddingX="">
<Banner <div>
type="warning"
showCloseButton={false}
extraButtonText="View details"
extraButtonAction={() => {}}
>
Custom layouts are being deprecated. They will be removed on [date].
</Banner>
</Layout>
{#each $store.layouts as layout (layout._id)} {#each $store.layouts as layout (layout._id)}
<NavItem <NavItem
icon="Experience" icon="Experience"
@ -28,4 +20,6 @@
<LayoutDropdownMenu {layout} /> <LayoutDropdownMenu {layout} />
</NavItem> </NavItem>
{/each} {/each}
</div>
</Layout>
</Panel> </Panel>

View File

@ -1,7 +1,7 @@
<script> <script>
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { store, selectedLayout } from "builderStore" 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" import { Component } from "builderStore/store/screenTemplates/utils/Component"
const copyLayout = () => { const copyLayout = () => {
@ -37,6 +37,14 @@
<Panel title={$selectedLayout?.name} icon="Experience" borderLeft> <Panel title={$selectedLayout?.name} icon="Experience" borderLeft>
<Layout paddingX="L" paddingY="XL" gap="S"> <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"> <Body size="S">
You can save the content of this layout by pressing the button below. You can save the content of this layout by pressing the button below.
</Body> </Body>

View File

@ -16,13 +16,6 @@
try { try {
const theme = ThemeOptions[e.detail] ?? ThemeOptions[2] const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
await store.actions.theme.save(theme) 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) { } catch (error) {
notifications.error("Error updating theme") notifications.error("Error updating theme")
} }

View File

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