Make Preferences > General two columns, slightly better?

This commit is contained in:
Ben Gotow 2019-09-23 16:10:18 -05:00
parent 9ce848c053
commit 48a768dce8
4 changed files with 56 additions and 40 deletions

View file

@ -21,7 +21,7 @@ module.exports = grunt => {
const winResourcesTarget = path.resolve(buildPath, '..');
if (platform === 'win32') {
fs.copySync(winResourcesSource, winResourcesTarget);
fs.copySync(
fs.copyFileSync(
path.join(winResourcesSource, 'mailspring.VisualElementsManifest.xml'),
path.join(path.resolve(buildPath, '..', '..'), 'mailspring.VisualElementsManifest.xml')
);

View file

@ -76,7 +76,9 @@ class ConfigSchemaItem extends React.Component<ConfigSchemaItemProps> {
} else if (this.props.configSchema.enum) {
return (
<div className="item">
<label htmlFor={this.props.keyPath}>{this.props.configSchema.title}:</label>
<label htmlFor={this.props.keyPath} style={{ paddingRight: 8 }}>
{this.props.configSchema.title}:
</label>
<select onChange={this._onChangeValue} value={this.props.config.get(this.props.keyPath)}>
{_.zip(this.props.configSchema.enum, this.props.configSchema.enumLabels).map(
([value, label]) => (

View file

@ -57,46 +57,60 @@ class PreferencesGeneral extends React.Component<{
render() {
return (
<div className="container-general" style={{ maxWidth: 600 }}>
<WorkspaceSection config={this.props.config} configSchema={this.props.configSchema} />
<div className="container-general" style={{ maxWidth: 800 }}>
<div style={{ display: 'flex' }}>
<div style={{ width: '50%', paddingRight: 15 }}>
<WorkspaceSection config={this.props.config} configSchema={this.props.configSchema} />
<LanguageSection config={this.props.config} configSchema={this.props.configSchema} />
</div>
<div style={{ width: '50%', paddingLeft: 15 }}>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.reading}
keyName={localized('Reading')}
keyPath="core.reading"
config={this.props.config}
/>
</div>
</div>
<div style={{ display: 'flex', paddingTop: 30 }}>
<div style={{ width: '50%', paddingRight: 15 }}>
<SendingSection config={this.props.config} configSchema={this.props.configSchema} />
</div>
<LanguageSection config={this.props.config} configSchema={this.props.configSchema} />
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.notifications}
keyName={localized('Notifications')}
keyPath="core.notifications"
config={this.props.config}
/>
<div className="platform-note platform-linux-only">
{localized(
'Mailspring desktop notifications on Linux require Zenity. You may need to install it with your package manager.'
)}
<div style={{ width: '50%', paddingLeft: 15 }}>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.composing}
keyName={localized('Composing')}
keyPath="core.composing"
config={this.props.config}
/>
</div>
</div>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.reading}
keyName={localized('Reading')}
keyPath="core.reading"
config={this.props.config}
/>
<div style={{ display: 'flex', paddingTop: 30 }}>
<div style={{ width: '50%', paddingRight: 15 }}>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.notifications}
keyName={localized('Notifications')}
keyPath="core.notifications"
config={this.props.config}
/>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.composing}
keyName={localized('Composing')}
keyPath="core.composing"
config={this.props.config}
/>
<SendingSection config={this.props.config} configSchema={this.props.configSchema} />
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.attachments}
keyName={localized('Attachments')}
keyPath="core.attachments"
config={this.props.config}
/>
<div className="platform-note platform-linux-only">
{localized(
'Mailspring desktop notifications on Linux require Zenity. You may need to install it with your package manager.'
)}
</div>
</div>
<div style={{ width: '50%', paddingLeft: 15 }}>
<ConfigSchemaItem
configSchema={this.props.configSchema.properties.attachments}
keyName={localized('Attachments')}
keyPath="core.attachments"
config={this.props.config}
/>
</div>
</div>
<div className="local-data">
<h6>{localized('Local Data')}</h6>

View file

@ -15,7 +15,7 @@
top: -1px;
}
select {
margin: 4px 0 0 8px;
margin: 4px 0 0 0;
}
height: 100%;
@ -120,7 +120,7 @@
}
.container-general {
width: 40%;
width: 80%;
min-width: 430px;
margin: 0 auto;