Move theme editor into theme tab

4 years ago · 79227e36d5
4 changed files with 16 additions and 9 deletions
--- a/packages/builder/src/components/design/AppPanel/AppPanel.svelte
+++ b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
@ -1,8 +1,6 @@
 <script>
  import ComponentSelectionList from "./ComponentSelectionList.svelte"
  import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
-  import ThemeEditor from "./ThemeEditor.svelte"
-  import AppThemeSelect from "./AppThemeSelect.svelte"
  import AppPreview from "./AppPreview.svelte"
  import { store } from "builderStore"
 </script>
@ -13,11 +11,6 @@
    {#if $store.clientFeatures.devicePreview}
      <DevicePreviewSelect />
    {/if}
-    {#if $store.clientFeatures.customThemes}
-      <ThemeEditor />
-    {:else if $store.clientFeatures.spectrumThemes}
-      <AppThemeSelect />
-    {/if}
  </div>
  <div class="content">
    {#key $store.version}
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/_components/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/_components/AppThemeSelect.svelte
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/_components/ThemeEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/_components/ThemeEditor.svelte
@ -73,7 +73,7 @@
 </script>

 <div class="container">
-  <ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton>
+  <ActionButton icon="Brush" on:click={modal.show}>Edit theme</ActionButton>
 </div>
 <Modal bind:this={modal}>
  <ModalContent
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
@ -1 +1,15 @@
-Theme
+<script>
+  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import { Body, Layout } from "@budibase/bbui"
+  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
+  import ThemeEditor from "./_components/ThemeEditor.svelte"
+</script>
+
+<NavigationPanel title="Theme">
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Body>Your theme is set across all the screens within your app</Body>
+    <ThemeEditor />
+  </Layout>
+</NavigationPanel>
+
+<AppPanel />