filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

added more slider style props

Browse Source
This commit is contained in:
Aminejvm 2021-03-25 11:47:15 +01:00
parent bf35fe4e4b
commit 3258eb0223
3 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/core/FontFrame/Controls.js
View File

@ -329,6 +329,34 @@ const Controller = ({ value, options, onChange, selectSuffix = "", label, min, m
value={value}
onChange={onChange}
containerStyle={{ height: "auto", marginLeft: "18px" }}
sliderBarStyle={(theme) => css`
background-color: ${theme.fontPreviewDarkMode
? theme.system.gray70
: theme.system.gray30};
`}
activeBarStyle={(theme) => css`
background-color: ${theme.fontPreviewDarkMode
? theme.system.white
: theme.system.gray80};
`}
handleStyle={(theme) => css`
background-color: ${theme.fontPreviewDarkMode
? theme.system.white
: theme.system.gray80};
:hover {
box-shadow: 0 0 0 4px
${theme.fontPreviewDarkMode
? "rgba(255, 255, 255, 0.1)"
: "rgba(75, 74, 77, 0.1)"};
}
:active {
box-shadow: 0 0 0 8px
${theme.fontPreviewDarkMode
? "rgba(255, 255, 255, 0.2)"
: "rgba(75, 74, 77, 0.2)"};
}
`}
/>
</div>
</div>

6
components/system/components/Slider.js
View File

@ -188,13 +188,13 @@ export class Slider extends React.Component {
<div style={{ position: "relative" }}>
<div css={STYLES_BAR_CONTAINER}>
<div
css={STYLES_SLIDER_BAR}
css={[STYLES_SLIDER_BAR, this.props.sliderBarStyle]}
ref={(c) => {
this._bar = c;
}}
/>
<div
css={STYLES_ACTIVE_SLIDER_BAR}
css={[STYLES_ACTIVE_SLIDER_BAR, this.props.activeBarStyle]}
style={{
width: `${this.state.value}px`,
}}
@ -215,7 +215,7 @@ export class Slider extends React.Component {
}}
>
<strong>
<div css={STYLES_SLIDER_HANDLE} />
<div css={[STYLES_SLIDER_HANDLE, this.props.handleStyle]} />
</strong>
{this.props.bubble ? <div css={STYLES_BUBBLE}>{this.props.value}</div> : null}
</div>

66
pages/_/system/sliders.js
View File

@ -21,19 +21,13 @@ export default class SystemPageSliders extends React.Component {
render() {
return (
<SystemPage
title="SDS: Sliders"
description="..."
url="https://slate.host/_/system/sliders"
>
<SystemPage title="SDS: Sliders" description="..." url="https://slate.host/_/system/sliders">
<System.H1>
Sliders <ViewSourceLink file="system/sliders.js" />
</System.H1>
<br />
<br />
<System.P>
The Slider component is used to select from a range of numeric values.
</System.P>
<System.P>The Slider component is used to select from a range of numeric values.</System.P>
<br />
<br />
<br />
@ -74,12 +68,10 @@ import { Slider } from "slate-react-system";`}
/>
<br />
<System.P>
Declare the Slider component, specifying a{" "}
<System.CodeText>min</System.CodeText>,{" "}
<System.CodeText>max</System.CodeText>, and{" "}
<System.CodeText>step</System.CodeText>. Declaring{" "}
<System.CodeText>discrete</System.CodeText> true will yield a slider
that snaps to each step.
Declare the Slider component, specifying a <System.CodeText>min</System.CodeText>,{" "}
<System.CodeText>max</System.CodeText>, and <System.CodeText>step</System.CodeText>.
Declaring <System.CodeText>discrete</System.CodeText> true will yield a slider that snaps
to each step.
</System.P>
<br />
<br />
@ -149,11 +141,10 @@ import { Slider } from "slate-react-system";`}
/>
<br />
<System.P>
You can declare the Slider component with{" "}
<System.CodeText>inputBox</System.CodeText> or{" "}
<System.CodeText>bubble</System.CodeText> to include a display of the
value. Values can be entered in the input box and the input box can be
styled with <System.CodeText>inputStyle</System.CodeText>.
You can declare the Slider component with <System.CodeText>inputBox</System.CodeText> or{" "}
<System.CodeText>bubble</System.CodeText> to include a display of the value. Values can be
entered in the input box and the input box can be styled with{" "}
<System.CodeText>inputStyle</System.CodeText>.
</System.P>
<br />
<br />
@ -213,22 +204,14 @@ import { Slider } from "slate-react-system";`}
rows: [
{
id: 1,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
onChange
</span>
),
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
value
</span>
),
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "number",
c: "null",
d:
@ -312,8 +295,7 @@ import { Slider } from "slate-react-system";`}
a: "inputStyle",
b: "Object",
c: "null",
d:
"Style applied to the input box (useful for specifying width, etc).",
d: "Style applied to the input box (useful for specifying width, etc).",
},
{
id: 14,
@ -323,6 +305,28 @@ import { Slider } from "slate-react-system";`}
d:
"Style applied to the container holding the slider and input box (useful for specifying margin or height, etc).",
},
,
{
id: 15,
a: "sliderBarStyle",
b: "Object",
c: "null",
d: "Style applied to the base slider bar (useful for specifying color etc).",
},
{
id: 16,
a: "activeBarStyle",
b: "Object",
c: "null",
d: "Style applied to the active slider bar (useful for specifying color etc).",
},
{
id: 17,
a: "handleStyle",
b: "Object",
c: "null",
d: "Style applied to the slider handle (useful for specifying color etc).",
},
],
}}
/>