Adds expand/collapse toggle to settings editor

src/ui/scss/main.scss

@@ -666,14 +666,42 @@ ul {
     z-index: 1;
 }
 
+.page-header__row {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
 .page-header__title {
+    flex: 0 0 auto;
     font-size: 3em;
     margin: 0;
 }
 
+.page-header__title-actions {
+    flex: 0 0 auto;
+    margin: 1.75em 1em 0 1em;
+}
+
+.page-header__toolbar {
+    display: flex;
+    flex: 1 1 100%;
+    justify-content: flex-end;
+    margin: 1.5em 208px 0 0; // 208px ~ the width of the sidebar
+    white-space: nowrap;
+
+    @media all and (max-width: 860px) {
+        margin-right: -9px;
+    }
+
+    select, option {
+        background-color: var(--background-color) !important;
+    }
+}
+
 .page-header__subtitle {
     color: var(--color--50);
-    margin: 0;
+    margin: 0.25em 0 0 0;
 }
 
 .section__preview {
@@ -756,7 +784,8 @@ ul {
 
 .section-group__sidebar {
     align-self: flex-start;
-    margin: -1em 0 0 3em;
+    margin: -6.4em 0 0 3em;
+    max-width: 179px;
     position: sticky;
     top: 0;
     z-index: 2;
@@ -875,25 +904,8 @@ ul {
     margin: -1em 0 1em 1em;
 }
 
-.settings-toolbar {
-    display: flex;
-    margin: 1.6em 185px 0 0;
-    position: absolute;
-    right: 0;
-    top: -2px;
-    white-space: nowrap;
-
-    @media all and (max-width: 860px) {
-        margin-right: -9px;
-    }
-
-    select, option {
-        background-color: var(--background-color) !important;
-    }
-}
-
 .settings-scope {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
 }
 
 .sidebar-group {

src/ui/settings/app.ts

@@ -35,6 +35,9 @@ export class SettingsApp extends App {
     protected onBind() {
         const onSectionHeaderClicked = this.onSectionHeaderClicked.bind(this);
         DOM.listenAll('.section__header', 'click', function(this: HTMLInputElement) { return onSectionHeaderClicked(this, ...arguments); });
+
+        const onActionLinkClicked = this.onActionLinkClicked.bind(this);
+        DOM.listenAll('[data-action]', 'click', function(this: HTMLAnchorElement) { return onActionLinkClicked(this, ...arguments); });
     }
 
     protected getSettingsScope(): 'user' | 'workspace' {
@@ -43,6 +46,31 @@ export class SettingsApp extends App {
             : 'user';
     }
 
+    private onActionLinkClicked(element: HTMLElement, e: MouseEvent) {
+        switch (element.dataset.action) {
+            case 'collapse':
+                for (const el of document.querySelectorAll('.section__header')) {
+                    el.classList.add('collapsed');
+                }
+
+                document.querySelector('[data-action="collapse"]')!.classList.add('hidden');
+                document.querySelector('[data-action="expand"]')!.classList.remove('hidden');
+                break;
+
+            case 'expand':
+                for (const el of document.querySelectorAll('.section__header')) {
+                    el.classList.remove('collapsed');
+                }
+
+                document.querySelector('[data-action="collapse"]')!.classList.remove('hidden');
+                document.querySelector('[data-action="expand"]')!.classList.add('hidden');
+                break;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
     protected onInputSelected(element: HTMLSelectElement) {
         if (element === this._scopes) return;
 

src/ui/settings/index.html

@@ -29,24 +29,29 @@
             </header>
 
             <div class="page-header page-header--sticky">
-                <h2 class="page-header__title">Settings</h2>
-                <p class="page-header__subtitle">For advanced customizations refer to the <a title="See the GitLens settings docs" href="https://github.com/eamodio/vscode-gitlens/#gitlens-settings">GitLens settings docs</a> and edit your
-                    <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a>
-                </p>
-
-                <div class="settings-toolbar">
-                    <div class="settings-scope">
-                        <label for="scopes">Save to</label>
-                        <select id="scopes" name="scope">
-                        </select>
+                <div class="page-header__row">
+                    <h2 class="page-header__title">Settings</h2>
+                    <div class="page-header__title-actions">
+                        <a href="#" data-action="collapse">collapse all</a>
+                        <a href="#" data-action="expand" class="hidden">expand all</a>
                     </div>
-                    <div class="ml-1">
-                        <select class="setting" id="settings.mode" name="settings.mode">
-                            <option value="simple">Simple</option>
-                            <option value="advanced">Advanced</option>
-                        </select>
+                    <div class="page-header__toolbar">
+                        <div class="settings-scope">
+                            <label for="scopes">Save to</label>
+                            <select id="scopes" name="scope">
+                            </select>
+                        </div>
+                        <div class="settings-mode">
+                            <select class="setting" id="settings.mode" name="settings.mode">
+                                <option value="simple">Simple</option>
+                                <option value="advanced">Advanced</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
+                <p class="page-header__subtitle">For advanced customizations refer to the <a title="See the GitLens settings docs" href="https://github.com/eamodio/vscode-gitlens/#gitlens-settings">GitLens settings docs</a> and edit your
+                    <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a>
+                </p>
             </div>
 
             <div class="section-groups">

src/webviews/settingsEditor.ts

@@ -37,9 +37,9 @@ export class SettingsEditor extends WebviewEditor {
     }
 
     private getAvailableScopes(): ['user' | 'workspace', string][] {
-        const scopes: ['user' | 'workspace', string][] = [['user', 'User Settings']];
+        const scopes: ['user' | 'workspace', string][] = [['user', 'User']];
         if (workspace.workspaceFolders !== undefined && workspace.workspaceFolders.length) {
-            scopes.push(['workspace', 'Workspace Settings']);
+            scopes.push(['workspace', 'Workspace']);
         }
         return scopes;
     }