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> |
<script> |
||||
import { getContext, setContext, onMount } from "svelte" |
import { getContext, setContext, onMount } from "svelte" |
||||
import { dataSourceStore, createContextStore } from "../store" |
import { dataSourceStore, createContextStore } from "stores" |
||||
import { ActionTypes } from "../constants" |
import { ActionTypes } from "constants" |
||||
import { generate } from "shortid" |
import { generate } from "shortid" |
||||
|
|
||||
export let data |
export let data |
||||
@ -1,6 +1,6 @@ |
|||||
<script> |
<script> |
||||
import Provider from "./Provider.svelte" |
import Provider from "./Provider.svelte" |
||||
import { stateStore } from "../store" |
import { stateStore } from "stores" |
||||
</script> |
</script> |
||||
|
|
||||
<Provider key="state" data={$stateStore}> |
<Provider key="state" data={$stateStore}> |
||||
@ -1,7 +1,7 @@ |
|||||
<script> |
<script> |
||||
import Provider from "./Provider.svelte" |
import Provider from "./Provider.svelte" |
||||
import { authStore } from "../store" |
import { authStore } from "stores" |
||||
import { ActionTypes, TableNames } from "../constants" |
import { ActionTypes, TableNames } from "constants" |
||||
|
|
||||
// Register this as a refreshable datasource so that user changes cause |
// Register this as a refreshable datasource so that user changes cause |
||||
// the user object to be refreshed |
// the user object to be refreshed |
||||
@ -1,5 +1,5 @@ |
|||||
<script> |
<script> |
||||
import { confirmationStore } from "../store" |
import { confirmationStore } from "stores" |
||||
import { Modal, ModalContent } from "@budibase/bbui" |
import { Modal, ModalContent } from "@budibase/bbui" |
||||
</script> |
</script> |
||||
|
|
||||
@ -1,5 +1,5 @@ |
|||||
<script> |
<script> |
||||
import { notificationStore } from "../store" |
import { notificationStore } from "stores" |
||||
import { Notification } from "@budibase/bbui" |
import { Notification } from "@budibase/bbui" |
||||
import { fly } from "svelte/transition" |
import { fly } from "svelte/transition" |
||||
</script> |
</script> |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue