restructure settings menu into Window, Editor, & Misc (#898)

main
Michael Fix 5 years ago committed by GitHub
parent 87ded86e5d
commit 9121359be6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -30,7 +30,7 @@ const MenuButton = React.memo(({ name, select, selected, noArrows }) => {
} }
.menu-button:last-child { .menu-button:last-child {
${selected === 'Window' ? '' : 'border-bottom: none;'}; ${selected === 'Misc' ? 'border-bottom: none;' : ''};
} }
.arrow-icon { .arrow-icon {

@ -29,9 +29,6 @@ function WindowSettings({
dropShadowBlurRadius, dropShadowBlurRadius,
dropShadowOffsetY, dropShadowOffsetY,
windowControls, windowControls,
lineNumbers,
firstLineNumber,
hiddenCharacters,
widthAdjustment, widthAdjustment,
watermark, watermark,
onWidthChanging, onWidthChanging,
@ -79,28 +76,6 @@ function WindowSettings({
enabled={windowControls} enabled={windowControls}
onChange={onChange.bind(null, 'windowControls')} onChange={onChange.bind(null, 'windowControls')}
/> />
<Toggle
label="Line numbers"
enabled={lineNumbers}
onChange={onChange.bind(null, 'lineNumbers')}
/>
{lineNumbers && (
<div className="row settings-row first-line-number-row">
<Input
label="First line number"
type="number"
value={firstLineNumber}
min={0}
onChange={e => onChange('firstLineNumber', Number(e.target.value))}
width="50%"
/>
</div>
)}
<Toggle
label="Hidden characters"
enabled={hiddenCharacters}
onChange={onChange.bind(null, 'hiddenCharacters')}
/>
<Toggle <Toggle
label="Auto-adjust width" label="Auto-adjust width"
enabled={widthAdjustment} enabled={widthAdjustment}
@ -121,22 +96,21 @@ function WindowSettings({
.settings-content :global(.settings-row:focus-within) { .settings-content :global(.settings-row:focus-within) {
outline: -webkit-focus-ring-color auto 4px; outline: -webkit-focus-ring-color auto 4px;
} }
.first-line-number-row {
padding: 8px 12px 8px 8px;
}
`} `}
</style> </style>
</div> </div>
) )
} }
function TypeSettings({ function EditorSettings({
onChange, onChange,
onUpload, onUpload,
font, font,
size, size,
lineHeight, lineHeight,
lineNumbers,
firstLineNumber,
hiddenCharacters,
onWidthChanging, onWidthChanging,
onWidthChanged onWidthChanged
}) { }) {
@ -165,6 +139,35 @@ function TypeSettings({
unit="%" unit="%"
onChange={onChange.bind(null, 'lineHeight')} onChange={onChange.bind(null, 'lineHeight')}
/> />
<Toggle
label="Line numbers"
enabled={lineNumbers}
onChange={onChange.bind(null, 'lineNumbers')}
/>
{lineNumbers && (
<div className="row settings-row first-line-number-row">
<Input
label="First line number"
type="number"
value={firstLineNumber}
min={0}
onChange={e => onChange('firstLineNumber', Number(e.target.value))}
width="50%"
/>
</div>
)}
<Toggle
label="Hidden characters"
enabled={hiddenCharacters}
onChange={onChange.bind(null, 'hiddenCharacters')}
/>
<style jsx>
{`
.first-line-number-row {
padding: 8px 12px 8px 8px;
}
`}
</style>
</div> </div>
) )
} }
@ -350,16 +353,13 @@ class Settings extends React.PureComponent {
dropShadowBlurRadius={this.props.dropShadowBlurRadius} dropShadowBlurRadius={this.props.dropShadowBlurRadius}
dropShadowOffsetY={this.props.dropShadowOffsetY} dropShadowOffsetY={this.props.dropShadowOffsetY}
windowControls={this.props.windowControls} windowControls={this.props.windowControls}
lineNumbers={this.props.lineNumbers}
firstLineNumber={this.props.firstLineNumber}
hiddenCharacters={this.props.hiddenCharacters}
widthAdjustment={this.props.widthAdjustment} widthAdjustment={this.props.widthAdjustment}
watermark={this.props.watermark} watermark={this.props.watermark}
/> />
) )
case 'Type': case 'Editor':
return ( return (
<TypeSettings <EditorSettings
onChange={this.handleChange} onChange={this.handleChange}
onUpload={this.handleFontUpload} onUpload={this.handleFontUpload}
onWidthChanging={this.handleWidthChanging} onWidthChanging={this.handleWidthChanging}
@ -367,6 +367,9 @@ class Settings extends React.PureComponent {
font={this.props.fontFamily} font={this.props.fontFamily}
size={this.props.fontSize} size={this.props.fontSize}
lineHeight={this.props.lineHeight} lineHeight={this.props.lineHeight}
lineNumbers={this.props.lineNumbers}
firstLineNumber={this.props.firstLineNumber}
hiddenCharacters={this.props.hiddenCharacters}
/> />
) )
case 'Misc': { case 'Misc': {
@ -434,7 +437,7 @@ class Settings extends React.PureComponent {
<div className="settings-bottom"> <div className="settings-bottom">
<div className="settings-menu" ref={this.menuRef} tabIndex={-1}> <div className="settings-menu" ref={this.menuRef} tabIndex={-1}>
<MenuButton name="Window" select={this.selectMenu} selected={selectedMenu} /> <MenuButton name="Window" select={this.selectMenu} selected={selectedMenu} />
<MenuButton name="Type" select={this.selectMenu} selected={selectedMenu} /> <MenuButton name="Editor" select={this.selectMenu} selected={selectedMenu} />
<MenuButton name="Misc" select={this.selectMenu} selected={selectedMenu} /> <MenuButton name="Misc" select={this.selectMenu} selected={selectedMenu} />
</div> </div>
{this.renderContent()} {this.renderContent()}

Loading…
Cancel
Save