Skip to content

Instantly share code, notes, and snippets.

@ThomasDeutsch
Forked from ryanlucas/SketchSystems.spec
Created August 9, 2018 19:54
Show Gist options
  • Save ThomasDeutsch/fd97ac91dc88c8833b41a908851f6897 to your computer and use it in GitHub Desktop.
Save ThomasDeutsch/fd97ac91dc88c8833b41a908851f6897 to your computer and use it in GitHub Desktop.
# Style Buttons: A Parallel State Demo
# Style Buttons: A Parallel State Demo
# 2018 August 06
# By Ryan Lucas (Twitter: @ryanlucas)
Font Style Selector&
Bold
Bold Off
bold clicked -> Bold On
Bold On
bold clicked -> Bold Off
Italic
Italic Off
italic clicked -> Italic On
Italic On
italic clicked -> Italic Off
Underline
Underline Off
underline clicked -> Underline On
Underline On
underline clicked -> Underline Off
function render(model){
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
model.emit(this.props.action + " clicked");
}
render() {
const activeStates = JSON.stringify(model.active_states.map(s => s.name));
const toggle = activeStates.toLowerCase().includes(this.props.action + " on");
return <button onClick={this.handleClick}
style={{background: toggle ? "linear-gradient(#d6d6d6, #d2d2d2)" : "linear-gradient(#f7f7f7, #ededed)", border: "none", padding: "8px", margin: "1px", width: "48px", color: "#313131", outline: "none", fontFamily: "Times, Times New Roman, serif", fontWeight: "Bold", boxShadow: toggle ? "inset 0 0 8px rgba(0,0,0,0.1)" : "none", textDecoration: this.props.action === "underline" ? "underline" : "none", fontStyle: this.props.action === "italic" ? "italic" : "normal", fontSize: "18px" }}>
{this.props.name}
</button>
}
}
return <div style={{display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center"}}>
<Button name="B" action="bold" />
<Button name="I" action="italic" />
<Button name="U" action="underline" />
</div>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment