Wire up windowControls, dropShadow toggles

main
Jake Dexheimer 7 years ago
parent ad48ac5046
commit 1df36b5603

@ -70,8 +70,12 @@ const DEFAULT_SETTINGS = {
if (this.state.loading === false) { if (this.state.loading === false) {
content = ( content = (
<div id="container" style={containerStyle}> <div id="container" style={containerStyle}>
{ true ? <WindowControls /> : null } { config.windowControls ? <WindowControls /> : null }
<CodeMirror className="CodeMirrorContainer" value={this.props.children} options={options} /> <CodeMirror
className={`CodeMirror__container ${config.dropShadow ? 'dropshadow' : ''}`}
value={this.props.children}
options={options}
/>
</div> </div>
) )
} }

@ -53,7 +53,12 @@ export default () => (
border: solid 2px #fff; border: solid 2px #fff;
} }
.CodeMirrorContainer .CodeMirror { .CodeMirror__container.dropshadow {
box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
border-radius: 5px;
}
.CodeMirror__container .CodeMirror {
height: auto; height: auto;
min-width: 680px; min-width: 680px;
padding: 40px 18px 24px; padding: 40px 18px 24px;

@ -32,7 +32,7 @@ class Settings extends React.Component {
<div className="settings-settings"> <div className="settings-settings">
<ThemeSelect onChange={this.props.onChange} /> <ThemeSelect onChange={this.props.onChange} />
<Toggle label="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/> <Toggle label="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/>
<Toggle label="Window controls" onChange={this.props.onChange.bind(null, 'windowControls')}/> <Toggle label="Window controls" enabled onChange={this.props.onChange.bind(null, 'windowControls')}/>
<Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/> <Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/>
<Slider label="Padding (horizontal)" initialValue={32} onChange={this.props.onChange.bind(null, 'paddingHorizontal')}/> <Slider label="Padding (horizontal)" initialValue={32} onChange={this.props.onChange.bind(null, 'paddingHorizontal')}/>
</div> </div>

@ -73,7 +73,7 @@ class Index extends React.Component {
onBGChange={color => this.setState({ background: color })} onBGChange={color => this.setState({ background: color })}
onThemeChange={theme => this.setState({ theme: theme.id })} onThemeChange={theme => this.setState({ theme: theme.id })}
onLanguageChange={language => this.setState({ language })} onLanguageChange={language => this.setState({ language })}
onSettingsChange={(key, value) => this.setState({ key: value })} onSettingsChange={(key, value) => this.setState({ [key]: value })}
bg={this.state.background} bg={this.state.background}
/> />
<CodeImage config={this.state}> <CodeImage config={this.state}>

Loading…
Cancel
Save