From 79c437d01fadf2869e2b1554960ef31abad294c1 Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Sun, 16 Feb 2020 20:48:20 -0600
Subject: [PATCH] Make Preferences > Shortcuts two columns on large screens

---
 .../preferences/lib/preferences-tabs-bar.tsx  |  4 ++--
 .../lib/tabs/keymaps/displayed-keybindings.ts | 24 +++++++++----------
 .../lib/tabs/preferences-general.tsx          |  2 +-
 .../lib/tabs/preferences-keymaps.tsx          | 12 ++++++++--
 .../preferences/styles/preferences.less       | 19 +++++++++++----
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/app/internal_packages/preferences/lib/preferences-tabs-bar.tsx b/app/internal_packages/preferences/lib/preferences-tabs-bar.tsx
index ca437c0d2..ca0cc2a24 100644
--- a/app/internal_packages/preferences/lib/preferences-tabs-bar.tsx
+++ b/app/internal_packages/preferences/lib/preferences-tabs-bar.tsx
@@ -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>
     );
diff --git a/app/internal_packages/preferences/lib/tabs/keymaps/displayed-keybindings.ts b/app/internal_packages/preferences/lib/tabs/keymaps/displayed-keybindings.ts
index f63c7bff2..951552545 100644
--- a/app/internal_packages/preferences/lib/tabs/keymaps/displayed-keybindings.ts
+++ b/app/internal_packages/preferences/lib/tabs/keymaps/displayed-keybindings.ts
@@ -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: [
diff --git a/app/internal_packages/preferences/lib/tabs/preferences-general.tsx b/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
index 89dc0820e..9c3563864 100644
--- a/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
+++ b/app/internal_packages/preferences/lib/tabs/preferences-general.tsx
@@ -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} />
diff --git a/app/internal_packages/preferences/lib/tabs/preferences-keymaps.tsx b/app/internal_packages/preferences/lib/tabs/preferences-keymaps.tsx
index b4cebcba5..3954e2153 100644
--- a/app/internal_packages/preferences/lib/tabs/preferences-keymaps.tsx
+++ b/app/internal_packages/preferences/lib/tabs/preferences-keymaps.tsx
@@ -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>
diff --git a/app/internal_packages/preferences/styles/preferences.less b/app/internal_packages/preferences/styles/preferences.less
index d5b0d5518..ba06fa901 100644
--- a/app/internal_packages/preferences/styles/preferences.less
+++ b/app/internal_packages/preferences/styles/preferences.less
@@ -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;