From 3eab24d67588ffaf530f03e50c41b48169992f94 Mon Sep 17 00:00:00 2001
From: Wyatt Allen <wyatta@google.com>
Date: Tue, 21 Jun 2016 16:00:41 -0700
Subject: [PATCH] Adds navigation to settings

Adds a navigation element to the side of the PolyGerrit settings page
which displays links to the available sections. The element uses a
responsive layout that hides it on smaller screens.

Change-Id: Id2d7a7e694f01dd4065629c114be78e09e3c6cac
---
 .../gr-settings-view/gr-settings-view.html    | 70 ++++++++++++++++---
 .../gr-settings-view/gr-settings-view.js      | 22 ++++++
 2 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
index 9da78aa03c..f4c5184102 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -55,21 +55,63 @@ limitations under the License.
       #newEmailInput {
         width: 20em;
       }
-      @media only screen and (max-width: 40em) {
+      nav {
+        border: 1px solid #eee;
+        border-top: none;
+        position: absolute;
+        top: 0;
+        width: 14em;
+      }
+      nav.pinned {
+        position: fixed;
+      }
+      nav ul {
+        margin: 1em 2em;
+      }
+      nav a {
+        color: black;
+        display: inline-block;
+        margin: .4em 0;
+      }
+      @media only screen and (max-width: 67em) {
+        main {
+          margin: 2em 0 2em 15em;
+        }
+      }
+      @media only screen and (max-width: 53em) {
         .loading {
           padding: 0 var(--default-horizontal-margin);
         }
         main {
           margin: 2em 1em;
         }
+        nav {
+          display: none;
+        }
       }
     </style>
     <style include="gr-settings-styles"></style>
     <div class="loading" hidden$="[[!_loading]]">Loading...</div>
     <div hidden$="[[_loading]]" hidden>
+      <nav id="settingsNav">
+        <ul>
+          <li><a href="#Profile">Profile</a></li>
+          <li><a href="#Preferences">Preferences</a></li>
+          <li><a href="#DiffPreferences">Diff Preferences</a></li>
+          <li><a href="#Notifications">Notifications</a></li>
+          <li><a href="#EmailAddresses">Email Addresses</a></li>
+          <li><a href="#HTTPCredentials">HTTP Credentials</a></li>
+          <li hidden$="[[!_serverConfig.sshd]]"><a href="#SSHKeys">
+            SSH Keys
+          </a></li>
+          <li><a href="#Groups">Groups</a></li>
+        </ul>
+      </nav>
       <main class="gr-settings-styles">
         <h1>User Settings</h1>
-        <h2 class$="[[_computeHeaderClass(_accountInfoChanged)]]">Profile</h2>
+        <h2
+            id="Profile"
+            class$="[[_computeHeaderClass(_accountInfoChanged)]]">Profile</h2>
         <fieldset id="profile">
           <gr-account-info
               id="accountInfo"
@@ -80,7 +122,9 @@ limitations under the License.
               hidden$="[[!_accountInfoMutable]]"
               disabled="[[!_accountInfoChanged]]">Save Changes</gr-button>
         </fieldset>
-        <h2 class$="[[_computeHeaderClass(_prefsChanged)]]">Preferences</h2>
+        <h2
+            id="Preferences"
+            class$="[[_computeHeaderClass(_prefsChanged)]]">Preferences</h2>
         <fieldset id="preferences">
           <section>
             <span class="title">Changes Per Page</span>
@@ -144,7 +188,9 @@ limitations under the License.
               on-tap="_handleSavePreferences"
               disabled="[[!_prefsChanged]]">Save Changes</gr-button>
         </fieldset>
-        <h2 class$="[[_computeHeaderClass(_diffPrefsChanged)]]">
+        <h2
+            id="DiffPreferences"
+            class$="[[_computeHeaderClass(_diffPrefsChanged)]]">
           Diff Preferences
         </h2>
         <fieldset id="diffPreferences">
@@ -209,7 +255,9 @@ limitations under the License.
               on-tap="_handleSaveMenu"
               disabled="[[!_menuChanged]]">Save Changes</gr-button>
         </fieldset>
-        <h2 class$="[[_computeHeaderClass(_watchedProjectsChanged)]]">
+        <h2
+            id="Notifications"
+            class$="[[_computeHeaderClass(_watchedProjectsChanged)]]">
           Notifications
         </h2>
         <fieldset id="watchedProjects">
@@ -221,7 +269,9 @@ limitations under the License.
               disabled$="[[!_watchedProjectsChanged]]"
               id="_handleSaveWatchedProjects">Save Changes</gr-button>
         </fieldset>
-        <h2 class$="[[_computeHeaderClass(_emailsChanged)]]">
+        <h2
+            id="EmailAddresses"
+            class$="[[_computeHeaderClass(_emailsChanged)]]">
           Email Addresses
         </h2>
         <fieldset id="email">
@@ -258,17 +308,19 @@ limitations under the License.
               disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]"
               on-tap="_handleAddEmailButton">Send Verification</gr-button>
         </fieldset>
-        <h2>HTTP Credentials</h2>
+        <h2 id="HTTPCredentials">HTTP Credentials</h2>
         <fieldset>
           <gr-http-password id="httpPass"></gr-http-password>
         </fieldset>
         <div hidden$="[[!_serverConfig.sshd]]">
-          <h2 class$="[[_computeHeaderClass(_keysChanged)]]">SSH Keys</h2>
+          <h2
+              id="SSHKeys"
+              class$="[[_computeHeaderClass(_keysChanged)]]">SSH Keys</h2>
           <gr-ssh-editor
               id="sshEditor"
               has-unsaved-changes="{{_keysChanged}}"></gr-ssh-editor>
         </div>
-        <h2>Groups</h2>
+        <h2 id="Groups">Groups</h2>
         <fieldset>
           <gr-group-list id="groupList"></gr-group-list>
         </fieldset>
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
index d62d718852..76c671e8e6 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
@@ -81,6 +81,7 @@
         value: null,
       },
       _serverConfig: Object,
+      _headerHeight: Number,
 
       /**
        * For testing purposes.
@@ -125,6 +126,27 @@
       this._loadingPromise = Promise.all(promises).then(function() {
         this._loading = false;
       }.bind(this));
+
+      this.listen(window, 'scroll', '_handleBodyScroll');
+    },
+
+    detached: function() {
+      this.unlisten(window, 'scroll', '_handleBodyScroll');
+    },
+
+    _handleBodyScroll: function(e) {
+      if (this._headerHeight === undefined) {
+        var top = this.$.settingsNav.offsetTop;
+        for (var offsetParent = this.$.settingsNav.offsetParent;
+           offsetParent;
+           offsetParent = offsetParent.offsetParent) {
+          top += offsetParent.offsetTop;
+        }
+        this._headerHeight = top;
+      }
+
+      this.$.settingsNav.classList.toggle('pinned',
+          window.scrollY >= this._headerHeight);
     },
 
     _isLoading: function() {