mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
committed by
GitHub
GitHub
132 changed files with 1915 additions and 1028 deletions
@ -0,0 +1,140 @@ |
|||
<script> |
|||
import { get } from "svelte/store" |
|||
import { |
|||
ActionButton, |
|||
Modal, |
|||
ModalContent, |
|||
Layout, |
|||
ColorPicker, |
|||
Label, |
|||
Select, |
|||
Button, |
|||
} from "@budibase/bbui" |
|||
import { store } from "builderStore" |
|||
import AppThemeSelect from "./AppThemeSelect.svelte" |
|||
|
|||
let modal |
|||
|
|||
const defaultTheme = { |
|||
primaryColor: "var(--spectrum-global-color-blue-600)", |
|||
primaryColorHover: "var(--spectrum-global-color-blue-500)", |
|||
buttonBorderRadius: "16px", |
|||
navBackground: "var(--spectrum-global-color-gray-100)", |
|||
navTextColor: "var(--spectrum-global-color-gray-800)", |
|||
} |
|||
|
|||
const buttonBorderRadiusOptions = [ |
|||
{ |
|||
label: "None", |
|||
value: "0", |
|||
}, |
|||
{ |
|||
label: "Small", |
|||
value: "4px", |
|||
}, |
|||
{ |
|||
label: "Medium", |
|||
value: "8px", |
|||
}, |
|||
{ |
|||
label: "Large", |
|||
value: "16px", |
|||
}, |
|||
] |
|||
|
|||
const updateProperty = property => { |
|||
return e => { |
|||
store.actions.customTheme.save({ |
|||
...get(store).customTheme, |
|||
[property]: e.detail, |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const resetTheme = () => { |
|||
store.actions.customTheme.save(null) |
|||
} |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
<ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton> |
|||
</div> |
|||
<Modal bind:this={modal}> |
|||
<ModalContent |
|||
showConfirmButton={false} |
|||
cancelText="Close" |
|||
showCloseIcon={false} |
|||
title="Theme settings" |
|||
> |
|||
<Layout noPadding gap="S"> |
|||
<div class="setting"> |
|||
<Label size="L">Theme</Label> |
|||
<AppThemeSelect /> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Button roundness</Label> |
|||
<div class="select-wrapper"> |
|||
<Select |
|||
placeholder={null} |
|||
value={$store.customTheme?.buttonBorderRadius || |
|||
defaultTheme.buttonBorderRadius} |
|||
on:change={updateProperty("buttonBorderRadius")} |
|||
options={buttonBorderRadiusOptions} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Primary color</Label> |
|||
<ColorPicker |
|||
spectrumTheme={$store.theme} |
|||
value={$store.customTheme?.primaryColor || defaultTheme.primaryColor} |
|||
on:change={updateProperty("primaryColor")} |
|||
/> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Primary color (hover)</Label> |
|||
<ColorPicker |
|||
spectrumTheme={$store.theme} |
|||
value={$store.customTheme?.primaryColorHover || |
|||
defaultTheme.primaryColorHover} |
|||
on:change={updateProperty("primaryColorHover")} |
|||
/> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Navigation bar background color</Label> |
|||
<ColorPicker |
|||
spectrumTheme={$store.theme} |
|||
value={$store.customTheme?.navBackground || |
|||
defaultTheme.navBackground} |
|||
on:change={updateProperty("navBackground")} |
|||
/> |
|||
</div> |
|||
<div class="setting"> |
|||
<Label size="L">Navigation bar text color</Label> |
|||
<ColorPicker |
|||
spectrumTheme={$store.theme} |
|||
value={$store.customTheme?.navTextColor || defaultTheme.navTextColor} |
|||
on:change={updateProperty("navTextColor")} |
|||
/> |
|||
</div> |
|||
</Layout> |
|||
<div slot="footer"> |
|||
<Button secondary quiet on:click={resetTheme}>Reset</Button> |
|||
</div> |
|||
</ModalContent> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.container { |
|||
padding-right: 8px; |
|||
} |
|||
.setting { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.select-wrapper { |
|||
width: 100px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<script> |
|||
import { themeStore } from "stores" |
|||
</script> |
|||
|
|||
<div style={$themeStore.customThemeCss}> |
|||
<slot /> |
|||
</div> |
|||
|
|||
<style> |
|||
div { |
|||
display: contents; |
|||
} |
|||
|
|||
/* Themes */ |
|||
div { |
|||
/* Buttons */ |
|||
--spectrum-semantic-cta-color-background-default: var(--primaryColor); |
|||
--spectrum-semantic-cta-color-background-hover: var(--primaryColorHover); |
|||
--spectrum-button-primary-m-border-radius: var(--buttonBorderRadius); |
|||
|
|||
/* Loading spinners */ |
|||
--spectrum-progresscircle-medium-track-fill-color: var(--primaryColor); |
|||
|
|||
/* Form fields */ |
|||
--spectrum-alias-border-color-mouse-focus: var(--primaryColor); |
|||
--spectrum-alias-border-color-focus: var(--primaryColor); |
|||
--spectrum-radio-m-emphasized-circle-border-color-selected: var( |
|||
--primaryColor |
|||
); |
|||
--spectrum-radio-m-emphasized-circle-border-color-selected-hover: var( |
|||
--primaryColorHover |
|||
); |
|||
--spectrum-checkbox-m-emphasized-box-border-color-selected: var( |
|||
--primaryColor |
|||
); |
|||
--spectrum-checkbox-m-emphasized-box-border-color-selected-hover: var( |
|||
--primaryColorHover |
|||
); |
|||
|
|||
/* Icons */ |
|||
--spectrum-alias-icon-color-selected: var(--primaryColor); |
|||
--spectrum-alias-icon-color-selected-hover: var(--primaryColorHover); |
|||
|
|||
/* Links */ |
|||
--spectrum-link-primary-m-text-color: var(--primaryColor); |
|||
--spectrum-link-primary-m-text-color-hover: var(--primaryColorHover); |
|||
} |
|||
|
|||
/* Theme flatpickr */ |
|||
:global(.flatpickr-day.selected) { |
|||
background: var(--primaryColor); |
|||
border-color: var(--primaryColor); |
|||
} |
|||
:global(.flatpickr-day.selected:hover) { |
|||
background: var(--primaryColorHover); |
|||
border-color: var(--primaryColorHover); |
|||
} |
|||
|
|||
/* Custom scrollbars */ |
|||
:global(::-webkit-scrollbar) { |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
:global(::-webkit-scrollbar-track) { |
|||
background: var(--spectrum-alias-background-color-default); |
|||
} |
|||
:global(::-webkit-scrollbar-thumb) { |
|||
background-color: var(--spectrum-global-color-gray-400); |
|||
border-radius: 4px; |
|||
} |
|||
:global(::-webkit-scrollbar-corner) { |
|||
background: var(--spectrum-alias-background-color-default); |
|||
} |
|||
:global(*) { |
|||
scrollbar-width: thin; |
|||
scrollbar-color: var(--spectrum-global-color-gray-400) |
|||
var(--spectrum-alias-background-color-default); |
|||
} |
|||
</style> |
|||
@ -1,7 +1,7 @@ |
|||
<script> |
|||
import { getContext, setContext, onMount } from "svelte" |
|||
import { dataSourceStore, createContextStore } from "../store" |
|||
import { ActionTypes } from "../constants" |
|||
import { dataSourceStore, createContextStore } from "stores" |
|||
import { ActionTypes } from "constants" |
|||
import { generate } from "shortid" |
|||
|
|||
export let data |
|||
@ -1,6 +1,6 @@ |
|||
<script> |
|||
import Provider from "./Provider.svelte" |
|||
import { stateStore } from "../store" |
|||
import { stateStore } from "stores" |
|||
</script> |
|||
|
|||
<Provider key="state" data={$stateStore}> |
|||
@ -1,7 +1,7 @@ |
|||
<script> |
|||
import Provider from "./Provider.svelte" |
|||
import { authStore } from "../store" |
|||
import { ActionTypes, TableNames } from "../constants" |
|||
import { authStore } from "stores" |
|||
import { ActionTypes, TableNames } from "constants" |
|||
|
|||
// Register this as a refreshable datasource so that user changes cause |
|||
// the user object to be refreshed |
|||
@ -1,5 +1,5 @@ |
|||
<script> |
|||
import { confirmationStore } from "../store" |
|||
import { confirmationStore } from "stores" |
|||
import { Modal, ModalContent } from "@budibase/bbui" |
|||
</script> |
|||
|
|||
@ -1,5 +1,5 @@ |
|||
<script> |
|||
import { notificationStore } from "../store" |
|||
import { notificationStore } from "stores" |
|||
import { Notification } from "@budibase/bbui" |
|||
import { fly } from "svelte/transition" |
|||
</script> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue