mirror of https://github.com/Budibase/budibase.git
2 changed files with 0 additions and 118 deletions
@ -1,117 +0,0 @@ |
|||
<script> |
|||
import { get } from "svelte/store" |
|||
import { |
|||
ActionButton, |
|||
Modal, |
|||
ModalContent, |
|||
Layout, |
|||
ColorPicker, |
|||
Label, |
|||
Select, |
|||
Button, |
|||
notifications, |
|||
} from "@budibase/bbui" |
|||
import { store } from "builderStore" |
|||
import AppThemeSelect from "./AppThemeSelect.svelte" |
|||
import { DefaultAppTheme } from "constants" |
|||
|
|||
let modal |
|||
|
|||
const buttonBorderRadiusOptions = [ |
|||
{ |
|||
label: "None", |
|||
value: "0", |
|||
}, |
|||
{ |
|||
label: "Small", |
|||
value: "4px", |
|||
}, |
|||
{ |
|||
label: "Medium", |
|||
value: "8px", |
|||
}, |
|||
{ |
|||
label: "Large", |
|||
value: "16px", |
|||
}, |
|||
] |
|||
|
|||
const updateProperty = property => { |
|||
return async e => { |
|||
try { |
|||
store.actions.customTheme.save({ |
|||
...get(store).customTheme, |
|||
[property]: e.detail, |
|||
}) |
|||
} catch (error) { |
|||
notifications.error("Error updating custom theme") |
|||
} |
|||
} |
|||
} |
|||
|
|||
const resetTheme = () => { |
|||
try { |
|||
const theme = get(store).theme |
|||
store.actions.customTheme.save({ |
|||
...defaultTheme, |
|||
navBackground: |
|||
theme === "spectrum--light" |
|||
? "var(--spectrum-global-color-gray-50)" |
|||
: "var(--spectrum-global-color-gray-100)", |
|||
}) |
|||
} catch (error) { |
|||
notifications.error("Error saving custom theme") |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
<ActionButton icon="Brush" on:click={modal.show}>Edit theme</ActionButton> |
|||
</div> |
|||
<Modal bind:this={modal}> |
|||
<ModalContent |
|||
showConfirmButton={false} |
|||
cancelText="View changes" |
|||
showCloseIcon={false} |
|||
title="Theme settings" |
|||
> |
|||
<Layout noPadding gap="S"> |
|||
<div class="setting"> |
|||
<Label size="L">Theme</Label> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Button roundness</Label> |
|||
<div class="select-wrapper"> |
|||
<Select |
|||
placeholder={null} |
|||
value={$store.customTheme?.buttonBorderRadius || |
|||
DefaultAppTheme.buttonBorderRadius} |
|||
on:change={updateProperty("buttonBorderRadius")} |
|||
options={buttonBorderRadiusOptions} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Accent color</Label> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Accent color (hover)</Label> |
|||
</div> |
|||
</Layout> |
|||
<div slot="footer"> |
|||
<Button secondary quiet on:click={resetTheme}>Reset</Button> |
|||
</div> |
|||
</ModalContent> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.setting { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.select-wrapper { |
|||
width: 100px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue