1
0
Fork 0
mirror of synced 2024-06-14 00:14:39 +12:00

Add theme slider and completed theme panel to new design UI

This commit is contained in:
Andrew Kingston 2022-05-09 09:39:44 +01:00
parent 475fc3e127
commit 8fbad1b6dd
9 changed files with 133 additions and 27 deletions

View file

@ -66,6 +66,7 @@
"@spectrum-css/radio": "^3.0.2",
"@spectrum-css/search": "^3.0.2",
"@spectrum-css/sidenav": "^3.0.2",
"@spectrum-css/slider": "3.0.1",
"@spectrum-css/statuslight": "^3.0.2",
"@spectrum-css/stepper": "^3.0.3",
"@spectrum-css/switch": "^1.0.2",

View file

@ -0,0 +1,71 @@
<script>
import "@spectrum-css/slider/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let value = false
export let id = null
export let disabled = false
export let min = 0
export let max = 100
export let step = 1
const dispatch = createEventDispatcher()
const onChange = event => {
dispatch("change", event.target.value)
}
</script>
<div>
<input
type="range"
{min}
{max}
{step}
{value}
{disabled}
{id}
on:change={onChange}
/>
</div>
<style>
div {
display: grid;
place-items: center;
}
input {
width: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none;
background: transparent;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
}
input:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
border: 2px solid var(--spectrum-global-color-gray-700);
height: 12px;
width: 12px;
border-radius: 50%;
background: var(--background);
cursor: pointer;
transition: background 130ms ease-out;
}
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: var(--spectrum-global-color-gray-300);
border-radius: 2px;
}
</style>

View file

@ -11,3 +11,4 @@ export { default as CoreDatePicker } from "./DatePicker.svelte"
export { default as CoreDropzone } from "./Dropzone.svelte"
export { default as CoreStepper } from "./Stepper.svelte"
export { default as CoreRichTextField } from "./RichTextField.svelte"
export { default as CoreSlider } from "./Slider.svelte"

View file

@ -0,0 +1,24 @@
<script>
import Field from "./Field.svelte"
import Slider from "./Core/Slider.svelte"
import { createEventDispatcher } from "svelte"
export let value = null
export let label = null
export let labelPosition = "above"
export let min = 0
export let max = 100
export let step = 1
export let disabled = false
export let error = null
const dispatch = createEventDispatcher()
const onChange = e => {
value = e.detail
dispatch("change", e.detail)
}
</script>
<Field {label} {labelPosition} {error}>
<Slider {disabled} {value} {min} {max} {step} on:change={onChange} />
</Field>

View file

@ -66,6 +66,7 @@ export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
export { default as RichTextField } from "./Form/RichTextField.svelte"
export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
export { default as Slider } from "./Form/Slider.svelte"
// Renderers
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

View file

@ -206,6 +206,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.2.tgz#9d70f408d588ee79c69857751010333671f32713"
integrity sha512-YpIdH/F0jEICYmoduGrnkTmxwJq1kfKxEp0wOs+ZkQOsvKMv1an7nyhsfOKCQqcGNfYzJ9mJAk7/u5+vsxHa8g==
"@spectrum-css/slider@3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.0.1.tgz#5281e6f47eb5a4fd3d1816c138bf66d01d7f2e49"
integrity sha512-DI2dtMRnQuDM1miVzl3SGyR1khUEKnwdXfO5EHDFwkC3yav43F5QogkfjmjFmWWobMVovdJlAuiaaJ/IHejD0Q==
"@spectrum-css/statuslight@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"

View file

@ -1,29 +1,21 @@
<script>
import { notifications, Select } from "@budibase/bbui"
import { notifications, Slider, Icon } from "@budibase/bbui"
import { store } from "builderStore"
import { get } from "svelte/store"
const themeOptions = [
{
label: "Lightest",
value: "spectrum--lightest",
},
{
label: "Light",
value: "spectrum--light",
},
{
label: "Dark",
value: "spectrum--dark",
},
{
label: "Darkest",
value: "spectrum--darkest",
},
const ThemeOptions = [
"spectrum--darkest",
"spectrum--dark",
"spectrum--light",
"spectrum--lightest",
]
const onChangeTheme = async theme => {
$: themeIndex = ThemeOptions.indexOf($store.theme) ?? 2
$: console.log("index", themeIndex)
const onChangeTheme = async e => {
try {
const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
await store.actions.theme.save(theme)
await store.actions.customTheme.save({
...get(store).customTheme,
@ -38,17 +30,27 @@
}
</script>
<div>
<Select
value={$store.theme}
options={themeOptions}
placeholder={null}
on:change={e => onChangeTheme(e.detail)}
<div class="container">
<Icon name="Moon" />
<Slider
min={0}
max={3}
step={1}
value={themeIndex}
on:change={onChangeTheme}
/>
<Icon name="Light" />
</div>
<style>
div {
width: 100px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
div :global(.spectrum-Form-item) {
flex: 1 1 auto;
}
</style>

View file

@ -78,7 +78,6 @@
<Layout noPadding gap="S">
<div class="setting">
<Label size="L">Theme</Label>
<AppThemeSelect />
</div>
<div class="setting">
<Label size="L">Button roundness</Label>

View file

@ -11,6 +11,7 @@
import { store } from "builderStore"
import { get } from "svelte/store"
import { DefaultAppTheme } from "constants"
import AppThemeSelect from "./_components/AppThemeSelect.svelte"
const ButtonBorderRadiusOptions = [
{
@ -52,6 +53,7 @@
</Body>
<Layout noPadding gap="XS">
<Label>Theme</Label>
<AppThemeSelect />
</Layout>
<Layout noPadding gap="XS">
<Label>Buttons</Label>