Adding theme settings to main builder settings, this felt like a natural place to find it rather than needing to create an app.

This commit is contained in:
mike12345567 2021-01-04 16:13:18 +00:00
parent 207415a932
commit 36127ad6e6
4 changed files with 94 additions and 76 deletions

View File

@ -1,20 +1,12 @@
<script> <script>
import { themeStore } from "builderStore" import { themeStore } from "builderStore"
import { Label, DropdownMenu, Toggle, Button, Slider } from "@budibase/bbui" import { Label, Toggle, Button, Slider } from "@budibase/bbui"
let anchor
let popover
let showAdvanced = false let showAdvanced = false
</script> </script>
<div class="topnavitemright" on:click={popover.show} bind:this={anchor}> <div class="content">
<i class="ri-paint-fill" />
</div>
<div class="dropdown">
<DropdownMenu bind:this={popover} {anchor} align="right">
<div class="content">
<div> <div>
<Label extraSmall grey>Theme</Label>
<Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} /> <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
</div> </div>
{#if $themeStore.darkMode && !showAdvanced} {#if $themeStore.darkMode && !showAdvanced}
@ -45,38 +37,10 @@
<Button text on:click={themeStore.reset}>Reset</Button> <Button text on:click={themeStore.reset}>Reset</Button>
</div> </div>
{/if} {/if}
</div>
</DropdownMenu>
</div> </div>
<style> <style>
.dropdown {
z-index: 2;
}
i {
font-size: 18px;
color: var(--grey-7);
}
.topnavitemright {
cursor: pointer;
color: var(--grey-7);
margin: 0 12px 0 0;
font-weight: 500;
font-size: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
}
.topnavitemright:hover i {
color: var(--ink);
}
.content { .content {
padding: var(--spacing-xl);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -84,11 +48,6 @@
gap: var(--spacing-l); gap: var(--spacing-l);
} }
h5 {
margin: 0;
font-weight: 500;
}
.button { .button {
align-self: flex-start; align-self: flex-start;
} }

View File

@ -0,0 +1,56 @@
<script>
import { Label, DropdownMenu } from "@budibase/bbui"
import ThemeEditor from "./ThemeEditor.svelte"
let anchor
let popover
</script>
<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
<i class="ri-paint-fill" />
</div>
<div class="dropdown">
<DropdownMenu bind:this={popover} {anchor} align="right">
<div class="content">
<Label extraSmall grey>Theme</Label>
<ThemeEditor />
</div>
</DropdownMenu>
</div>
<style>
.dropdown {
z-index: 2;
}
i {
font-size: 18px;
color: var(--grey-7);
}
.topnavitemright {
cursor: pointer;
color: var(--grey-7);
margin: 0 12px 0 0;
font-weight: 500;
font-size: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
}
.topnavitemright:hover i {
color: var(--ink);
}
h5 {
margin: 0;
font-weight: 500;
}
.content {
padding: var(--spacing-xl);
}
</style>

View File

@ -2,6 +2,7 @@
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import { hostingStore } from "builderStore" import { hostingStore } from "builderStore"
import { Input, ModalContent, Toggle } from "@budibase/bbui" import { Input, ModalContent, Toggle } from "@budibase/bbui"
import ThemeEditor from "components/settings/ThemeEditor.svelte"
import analytics from "analytics" import analytics from "analytics"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -32,6 +33,8 @@
confirmText="Save" confirmText="Save"
onConfirm={save} onConfirm={save}
showConfirmButton={selfhosted}> showConfirmButton={selfhosted}>
<h5>Theme</h5>
<ThemeEditor />
<h5>Hosting</h5> <h5>Hosting</h5>
<p> <p>
This section contains settings that relate to the deployment and hosting of This section contains settings that relate to the deployment and hosting of

View File

@ -2,7 +2,7 @@
import { store, automationStore, backendUiStore } from "builderStore" import { store, automationStore, backendUiStore } from "builderStore"
import { Button } from "@budibase/bbui" import { Button } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte" import SettingsLink from "components/settings/Link.svelte"
import ThemeEditor from "components/settings/ThemeEditor.svelte" import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte" import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
import { get } from "builderStore/api" import { get } from "builderStore/api"
import { isActive, goto, layout } from "@sveltech/routify" import { isActive, goto, layout } from "@sveltech/routify"
@ -67,7 +67,7 @@
{/each} {/each}
</div> </div>
<div class="toprightnav"> <div class="toprightnav">
<ThemeEditor /> <ThemeEditorDropdown />
<FeedbackNavLink /> <FeedbackNavLink />
<div class="topnavitemright"> <div class="topnavitemright">
<a <a