Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-10-09 04:44:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make headers of Preferences > Accounts consistent with General

Browse source
This commit is contained in:
Ben Gotow 2019-09-24 08:27:06 -05:00
parent 4e5c02eee6
commit 740d7e8655
2 changed files with 34 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
app/internal_packages/preferences/lib/tabs/preferences-account-details.tsx
View file

@ -26,14 +26,15 @@ class AutoaddressControl extends Component<AutoaddressControlProps> {
<div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 3 }}> <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 3 }}>
{localized('When composing, automatically')} {localized('When composing, automatically')}
<select <select
style={{ marginTop: 0 }} style={{ marginTop: 0, marginLeft: 8 }}
value={autoaddress.type} value={autoaddress.type}
onChange={e => onChange({ ...autoaddress, type: e.target.value as 'cc' | 'bcc' })} onChange={e => onChange({ ...autoaddress, type: e.target.value as 'cc' | 'bcc' })}
onBlur={onSaveChanges} onBlur={onSaveChanges}
> >
<option value="cc">{localized('Cc')}</option> <option value="cc">{localized('Cc')}</option>
<option value="bcc">{localized('Bcc')}</option> <option value="bcc">{localized('Bcc')}</option>
</select>: </select>
:
</div> </div>
<input <input
type="text" type="text"
@ -169,27 +170,6 @@ class PreferencesAccountDetails extends Component<
// Renderers // Renderers
_renderDefaultAliasSelector(account) {
const aliases = account.aliases;
const defaultAlias = account.defaultAlias || 'None';
if (aliases.length > 0) {
return (
<div className="default-alias-selector">
<div>{localized('Default for new messages:')}</div>
<select value={defaultAlias} onChange={this._onDefaultAliasSelected}>
<option value="None">{`${account.name} <${account.emailAddress}>`}</option>
{aliases.map((alias, idx) => (
<option key={`alias-${idx}`} value={alias}>
{alias}
</option>
))}
</select>
</div>
);
}
return null;
}
_renderErrorDetail(message, buttonText, buttonAction) { _renderErrorDetail(message, buttonText, buttonAction) {
return ( return (
<div className="account-error-detail"> <div className="account-error-detail">
@ -230,40 +210,33 @@ class PreferencesAccountDetails extends Component<
render() { render() {
const { account } = this.state; const { account } = this.state;
const aliasPlaceholder = this._makeAlias(`alias@${account.emailAddress.split('@')[1]}`); const aliasPlaceholder = this._makeAlias(`alias@${account.emailAddress.split('@')[1]}`);
const aliases = account.aliases;
const defaultAlias = account.defaultAlias || 'None';
return ( return (
<div className="account-details"> <div className="account-details">
{this._renderSyncErrorDetails()} {this._renderSyncErrorDetails()}
<h3>{localized('Account Label')}</h3> <h6>{localized('Account Label')}</h6>
<input <input
type="text" type="text"
value={account.label} value={account.label}
onBlur={this._saveChanges} onBlur={this._saveChanges}
onChange={e => this._setState({ label: e.target.value })} onChange={e => this._setState({ label: e.target.value })}
/> />
<h3>{localized('Account Settings')}</h3> <h6>{localized('Sender Name')}</h6>
<div className="btn" onClick={this._onReconnect}>
{account.provider === 'imap'
? localized('Update Connection Settings...')
: localized('Re-authenticate...')}
</div>
<div className="btn" style={{ margin: 6 }} onClick={this._onResetCache}>
{localized('Rebuild Cache...')}
</div>
<h3>{localized('Sender Name')}</h3>
<input <input
type="text" type="text"
value={account.name} value={account.name}
onBlur={this._saveChanges} onBlur={this._saveChanges}
onChange={e => this._setState({ name: e.target.value })} onChange={e => this._setState({ name: e.target.value })}
/> />
<h3>{localized('Automatic CC / BCC')}</h3> <h6>{localized('Automatic CC / BCC')}</h6>
<AutoaddressControl <AutoaddressControl
autoaddress={account.autoaddress} autoaddress={account.autoaddress}
onChange={this._onAccountAutoaddressUpdated} onChange={this._onAccountAutoaddressUpdated}
onSaveChanges={this._saveChanges} onSaveChanges={this._saveChanges}
/> />
<h3>{localized('Aliases')}</h3> <h6>{localized('Aliases')}</h6>
<div className="platform-note"> <div className="platform-note">
{localized( {localized(
'You may need to configure aliases with your mail provider (Outlook, Gmail) before using them.' 'You may need to configure aliases with your mail provider (Outlook, Gmail) before using them.'
@ -277,7 +250,30 @@ class PreferencesAccountDetails extends Component<
onItemEdited={this._onAccountAliasUpdated} onItemEdited={this._onAccountAliasUpdated}
onDeleteItem={this._onAccountAliasRemoved} onDeleteItem={this._onAccountAliasRemoved}
/> />
{this._renderDefaultAliasSelector(account)} {aliases.length > 0 ? (
<div className="default-alias-selector">
<div>{localized('Default for new messages:')}</div>
<select value={defaultAlias} onChange={this._onDefaultAliasSelected}>
<option value="None">{`${account.name} <${account.emailAddress}>`}</option>
{aliases.map((alias, idx) => (
<option key={`alias-${idx}`} value={alias}>
{alias}
</option>
))}
</select>
</div>
) : (
undefined
)}
<h6>{localized('Account Settings')}</h6>
<div className="btn" onClick={this._onReconnect}>
{account.provider === 'imap'
? localized('Update Connection Settings...')
: localized('Re-authenticate...')}
</div>
<div className="btn" style={{ margin: 6 }} onClick={this._onResetCache}>
{localized('Rebuild Cache...')}
</div>
</div> </div>
); );
} }

3
app/internal_packages/preferences/styles/preferences-accounts.less
View file

@ -99,8 +99,7 @@
} }
} }
& > h3 { & > h6 {
font-size: 1.2em;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }