CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-18 18:28:33 +12:00
Code Issues Projects Releases Wiki Activity

Add majority of new theme panel

Browse source
This commit is contained in:
Andrew Kingston 2022-05-06 14:52:38 +01:00
parent 28fcf18559
commit 40af4ec358
3 changed files with 115 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
View file

@ -17,7 +17,7 @@
import { onMount } from "svelte"
import { DefaultAppTheme } from "constants"
const updateNavigation = async (key, value) => {
const update = async (key, value) => {
try {
let navigation = $store.navigation
navigation[key] = value
@ -65,13 +65,13 @@
selected={$store.navigation.navigation === "Top"}
quiet={$store.navigation.navigation !== "Top"}
icon="PaddingTop"
on:click={() => updateNavigation("navigation", "Top")}
on:click={() => update("navigation", "Top")}
/>
<ActionButton
selected={$store.navigation.navigation === "Left"}
quiet={$store.navigation.navigation !== "Left"}
icon="PaddingLeft"
on:click={() => updateNavigation("navigation", "Left")}
on:click={() => update("navigation", "Left")}
/>
</ActionGroup>
</Layout>
@ -79,19 +79,19 @@
<Checkbox
text="Sticky header"
value={$store.navigation.sticky}
on:change={e => updateNavigation("sticky", e.detail)}
on:change={e => update("sticky", e.detail)}
/>
{/if}
<Layout noPadding gap="XS">
<Checkbox
text="Logo"
value={!$store.navigation.hideLogo}
on:change={e => updateNavigation("hideLogo", !e.detail)}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<Input
value={$store.navigation.logoUrl}
on:change={e => updateNavigation("logoUrl", e.detail)}
on:change={e => update("logoUrl", e.detail)}
placeholder="Add logo URL"
updateOnChange={false}
/>
@ -101,12 +101,12 @@
<Checkbox
text="Title"
value={!$store.navigation.hideTitle}
on:change={e => updateNavigation("hideTitle", !e.detail)}
on:change={e => update("hideTitle", !e.detail)}
/>
{#if !$store.navigation.hideTitle}
<Input
value={$store.navigation.title}
on:change={e => updateNavigation("title", e.detail)}
on:change={e => update("title", e.detail)}
placeholder="Add title"
updateOnChange={false}
/>

12
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeEditor.svelte
View file

@ -94,21 +94,9 @@
</div>
<div class="setting">
<Label size="L">Accent color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.customTheme?.primaryColor ||
DefaultAppTheme.primaryColor}
on:change={updateProperty("primaryColor")}
/>
</div>
<div class="setting">
<Label size="L">Accent color (hover)</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.customTheme?.primaryColorHover ||
DefaultAppTheme.primaryColorHover}
on:change={updateProperty("primaryColorHover")}
/>
</div>
</Layout>
<div slot="footer">

110
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
View file

@ -1,7 +1,48 @@
<script>
import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
import { Body, Layout } from "@budibase/bbui"
import ThemeEditor from "./_components/ThemeEditor.svelte"
import {
Body,
Layout,
Label,
ColorPicker,
Button,
notifications,
} from "@budibase/bbui"
import { store } from "builderStore"
import { get } from "svelte/store"
import { DefaultAppTheme } from "constants"
const ButtonBorderRadiusOptions = [
{
label: "Square",
value: "0",
},
{
label: "Soft edge",
value: "4px",
},
{
label: "Curved",
value: "8px",
},
{
label: "Round",
value: "16px",
},
]
$: customTheme = $store.customTheme || {}
const update = async (property, value) => {
try {
store.actions.customTheme.save({
...get(store).customTheme,
[property]: value,
})
} catch (error) {
notifications.error("Error updating custom theme")
}
}
</script>
<NavigationPanel title="Theme">
@ -9,6 +50,69 @@
<Body size="S">
Your theme is set across all the screens within your app
</Body>
<ThemeEditor />
<Layout noPadding gap="XS">
<Label>Theme</Label>
</Layout>
<Layout noPadding gap="XS">
<Label>Buttons</Label>
<div class="buttons">
{#each ButtonBorderRadiusOptions as option}
<div
class:active={customTheme.buttonBorderRadius === option.value}
style={`--radius: ${option.value}`}
>
<Button
secondary
on:click={() => update("buttonBorderRadius", option.value)}
>
{option.label}
</Button>
</div>
{/each}
</div>
</Layout>
<Layout noPadding gap="XS">
<Label>Accent color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
on:change={e => update("primaryColor", e.detail)}
/>
</Layout>
<Layout noPadding gap="XS">
<Label>Accent color (hover)</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={customTheme.primaryColorHover ||
DefaultAppTheme.primaryColorHover}
on:change={e => update("primaryColorHover", e.detail)}
/>
</Layout>
</Layout>
</NavigationPanel>
<style>
.buttons {
display: grid;
grid-template-columns: 100px 100px;
gap: var(--spacing-m);
}
.buttons > div {
display: contents;
}
.buttons > div :global(.spectrum-Button) {
border-radius: var(--radius) !important;
border-width: 1px;
border-color: var(--spectrum-global-color-gray-400);
font-weight: 600;
}
.buttons > div:hover :global(.spectrum-Button) {
background: var(--spectrum-global-color-gray-700);
border-color: var(--spectrum-global-color-gray-700);
}
.buttons > div.active :global(.spectrum-Button) {
background: var(--spectrum-global-color-gray-200);
color: var(--spectrum-global-color-gray-800);
border-color: var(--spectrum-global-color-gray-600);
}
</style>