Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-02-22 15:15:12 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make Preferences > Shortcuts two columns on large screens

Browse source
This commit is contained in:
Ben Gotow 2020-02-16 20:48:20 -06:00
parent c400a9a4b1
commit 79c437d01f
5 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/internal_packages/preferences/lib/preferences-tabs-bar.tsx
View file

@ -76,9 +76,9 @@ class PreferencesTabsBar extends React.Component<PreferencesTabBarProps> {
return (
<div className="container-preference-tabs">
<Flexbox direction="row" className="preferences-tabs">
<div style={{ flex: 1 }} />
<div style={{ flex: 0.5 }} />
{this.renderTabs()}
<div style={{ flex: 1 }} />
<div style={{ flex: 0.5 }} />
</Flexbox>
</div>
);

24
app/internal_packages/preferences/lib/tabs/keymaps/displayed-keybindings.ts
View file

@ -30,6 +30,18 @@ export default [
['core:remove-and-next', localized('Remove and show next')],
],
},
{
title: localized('Selection'),
items: [
['core:select-item', localized('Select conversation')],
['multiselect-list:select-all', localized('Select all conversations')],
['multiselect-list:deselect-all', localized('Deselect all conversations')],
['thread-list:select-read', localized('Select all read conversations')],
['thread-list:select-unread', localized('Select all unread conversations')],
['thread-list:select-starred', localized('Select all starred conversations')],
['thread-list:select-unstarred', localized('Select all unstarred conversations')],
],
},
{
title: localized('Composer'),
items: [
@ -61,18 +73,6 @@ export default [
['core:find-in-thread', localized('Find in thread')],
],
},
{
title: localized('Selection'),
items: [
['core:select-item', localized('Select conversation')],
['multiselect-list:select-all', localized('Select all conversations')],
['multiselect-list:deselect-all', localized('Deselect all conversations')],
['thread-list:select-read', localized('Select all read conversations')],
['thread-list:select-unread', localized('Select all unread conversations')],
['thread-list:select-starred', localized('Select all starred conversations')],
['thread-list:select-unstarred', localized('Select all unstarred conversations')],
],
},
{
title: localized('Jumping'),
items: [

2
app/internal_packages/preferences/lib/tabs/preferences-general.tsx
View file

@ -57,7 +57,7 @@ class PreferencesGeneral extends React.Component<{
render() {
return (
<div className="container-general" style={{ maxWidth: 800 }}>
<div className="container-general">
<div style={{ display: 'flex' }}>
<div style={{ width: '50%', paddingRight: 15 }}>
<WorkspaceSection config={this.props.config} configSchema={this.props.configSchema} />

12
app/internal_packages/preferences/lib/tabs/preferences-keymaps.tsx
View file

@ -132,12 +132,20 @@ export default class PreferencesKeymaps extends React.Component<
{localized('Restore Defaults')}
</button>
</Flexbox>
<p>
<p style={{ maxWidth: 600 }}>
{localized(
'You can choose a shortcut set to use keyboard shortcuts of familiar email clients. To edit a shortcut, click it in the list below and enter a replacement on the keyboard.'
)}
</p>
{displayedKeybindings.map(this._renderBindingsSection)}
<div className="keymaps-columns-flexbox">
<div style={{ flex: 1 }}>
{displayedKeybindings.slice(0, 3).map(this._renderBindingsSection)}
</div>
<div style={{ width: 30 }} />
<div style={{ flex: 1 }}>
{displayedKeybindings.slice(3).map(this._renderBindingsSection)}
</div>
</div>
</section>
<section>
<h2>{localized('Customization')}</h2>

19
app/internal_packages/preferences/styles/preferences.less
View file

@ -120,8 +120,9 @@
}
.container-general {
width: 80%;
width: 100%;
min-width: 430px;
max-width: 800px;
margin: 0 auto;
.local-data {
@ -192,8 +193,9 @@
}
.container-keymaps {
width: 40%;
min-width: 460px;
width: 100%;
max-width: 800px;
min-width: 430px;
margin: 0 auto;
.col-left {
@ -209,6 +211,10 @@
}
}
.keymaps-columns-flexbox {
display: flex;
}
.shortcut-section-title {
border-bottom: 1px solid @border-color-divider;
margin: @padding-large-vertical * 1.5 0;
@ -297,8 +303,13 @@ body.platform-linux {
}
}
@media (max-width: 600px) {
@media (max-width: 680px) {
.preferences-wrap {
.container-keymaps {
.keymaps-columns-flexbox {
flex-direction: column;
}
}
.container-preference-tabs {
.preferences-tabs .item img.tab-icon {
margin-bottom: 10px;