From 4e1d3e9fe956f9707ab35b1856ebaef757aa10be Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 1 Nov 2019 16:45:53 +0530
Subject: [PATCH] :sparkles: Major UI redesign

---
 README.md              |   2 +-
 assets/css/styles.scss |  42 +----
 components/history.vue |   2 +-
 components/logo.vue    |   9 +-
 components/section.vue |   8 -
 layouts/default.vue    | 343 +++++++++++++++++++++++++++++++----------
 pages/index.vue        |  18 +--
 pages/settings.vue     |   7 +-
 pages/websocket.vue    |   6 +-
 9 files changed, 295 insertions(+), 142 deletions(-)

diff --git a/README.md b/README.md
index f312061a5..eb5ff6f5f 100644
--- a/README.md
+++ b/README.md
@@ -348,7 +348,7 @@ Make your own badge!
 [![Postwoman](https://img.shields.io/badge/<your_text>-Postwoman-<hex_color_code>)](https://postwoman.io)
 ```
 
-Replace `<your text>` with your custom text and `<hex_color_code>` with 6 digit color hex code.
+Replace `<your_text>` with your custom text and `<hex_color_code>` with 6 digit color hex code.
 
 <div align="center">
     <a href="https://postwoman.io"><img src="https://raw.githubusercontent.com/liyasthomas/templates/master/assets/logo.gif" alt="Postwoman.io" width="200"></a>
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 1792f5a68..ed9aa1af8 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -21,12 +21,13 @@ body.afterLoad {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--fg-light-color);
   border-radius: 8px;
+  border: 2px solid var(--bg-color);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--fg-color);
 }
 
 ::placeholder {
@@ -57,6 +58,8 @@ body {
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   user-select: none;
+  padding: 0;
+  margin: 0;
 }
 
 h1,
@@ -180,31 +183,6 @@ h3.title {
   margin: 4px;
 }
 
-header,
-footer {
-  &>div {
-    display: flex;
-    padding: 16px;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
-nav {
-  a:not(:last-of-type) {
-    margin-right: 15px;
-  }
-}
-
-body.sticky-footer footer {
-  opacity: .25;
-}
-
-.logo {
-  color: var(--ac-color);
-}
-
 button {
   display: inline-flex;
   align-items: center;
@@ -429,16 +407,6 @@ ol li {
 }
 
 @media (max-width: $responsiveWidth) {
-  header div {
-    display: flex;
-    text-align: center;
-    flex-direction: column;
-
-    nav {
-      display: inline-flex;
-      margin-top: 20px;
-    }
-  }
 
   ul,
   ol {
diff --git a/components/history.vue b/components/history.vue
index 9a2dbf439..64f217032 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="green" icon="history" label="History">
+  <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
       <li id="filter-history">
         <input
diff --git a/components/logo.vue b/components/logo.vue
index 46cee36b3..2531295dc 100644
--- a/components/logo.vue
+++ b/components/logo.vue
@@ -37,11 +37,12 @@
 
 <style>
   #circle3814 {
+    /* fill: var(--fg-color); */
+    fill: transparent;
+  }
+  /* #path3816 {
     fill: var(--bg-color);
-  }
-  #path3816 {
-    fill: var(--ac-color);
-  }
+  } */
 </style>
 
 <script>
diff --git a/components/section.vue b/components/section.vue
index 2a061bcae..509bd1818 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -1,7 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
     <legend @click.prevent="collapse">
-      <i class="material-icons icon">{{ icon }}</i>
       <span>{{ label }}</span>
       <i class="material-icons" v-if="isCollapsed">expand_more</i>
       <i class="material-icons" v-if="!isCollapsed">expand_less</i>
@@ -16,9 +15,6 @@
   fieldset.no-colored-frames legend {
     color: var(--fg-color);
   }
-  .icon {
-    margin-right: 8px;
-  }
 </style>
 
 <script>
@@ -40,10 +36,6 @@
         type: String,
         default: "Section"
       },
-      icon: {
-        type: String,
-        default: "lens"
-      },
       collapsed: {
         type: Boolean
       }
diff --git a/layouts/default.vue b/layouts/default.vue
index b97d57d71..5751acdac 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,41 +1,107 @@
 <template>
-  <div>
-    <header>
+  <div class="wrapper">
+    <header class="header">
       <div>
         <div class="slide-in">
           <nuxt-link to="/">
-            <h1 class="logo">
-              <logo alt style="height: 24px; margin-right: 16px"></logo>Postwoman
-            </h1>
+            <h1 class="logo">Postwoman</h1>
           </nuxt-link>
-          <h3>API request builder</h3>
+          <h3 class="tagline">API request builder</h3>
         </div>
-        <nav>
-          <!--
-           We're using manual checks for linkActive because the query string
-           seems to mess up the nuxt-link active class.
-          -->
-          <nuxt-link to="/" :class="linkActive('/')">HTTP</nuxt-link>
-          <nuxt-link to="/websocket" :class="linkActive('/websocket')">WebSocket</nuxt-link>
-          <nuxt-link
-            to="/settings"
-            :class="linkActive('/settings')"
-            v-tooltip="'Settings'"
-            aria-label="Settings"
-          >
-            <!-- Settings cog -->
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-              <path
-                d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"
-              />
-            </svg>
-          </nuxt-link>
-        </nav>
       </div>
     </header>
-    <br>
-    <nuxt id="main" />
-    <footer>
+    <div class="content">
+      <div class="columns">
+        <nuxt id="main" class="main" />
+        <aside class="nav-first">
+          <nav class="primary-nav">
+            <!--
+              We're using manual checks for linkActive because the query string
+              seems to mess up the nuxt-link active class.
+            -->
+            <nuxt-link to="/" :class="linkActive('/')">
+              <logo alt style="height: 24px;"></logo>
+            </nuxt-link>
+            <nuxt-link to="/websocket" :class="linkActive('/websocket')">
+              <i class="material-icons">cloud</i>
+            </nuxt-link>
+            <nuxt-link
+              to="/settings"
+              :class="linkActive('/settings')"
+              v-tooltip="'Settings'"
+              aria-label="Settings"
+            >
+              <i class="material-icons">settings</i>
+            </nuxt-link>
+          </nav>
+          <div v-if="['/'].includes($route.path)">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#request">
+                    <i class="material-icons">cloud_upload</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#options">
+                    <i class="material-icons">toc</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#response">
+                    <i class="material-icons">cloud_download</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#collections">
+                    <i class="material-icons">folder_special</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#history">
+                    <i class="material-icons">watch_later</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div v-else-if="['/websocket'].includes($route.path)">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#request">
+                    <i class="material-icons">cloud_upload</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#response">
+                    <i class="material-icons">cloud_download</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div v-else-if="['/settings'].includes($route.path)">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#theme">
+                    <i class="material-icons">brush</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#proxy">
+                    <i class="material-icons">public</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </aside>
+        <aside class="nav-second"></aside>
+      </div>
+    </div>
+    <footer class="footer">
       <!-- Top section of footer: GitHub/install links -->
       <div class="flex-wrap">
         <a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
@@ -87,6 +153,107 @@
 </template>
 
 <style lang="scss">
+  html {
+    scroll-behavior: smooth;
+  }
+
+  header,
+  footer {
+    & > div {
+      display: flex;
+      padding: 16px;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  body.sticky-footer footer {
+    opacity: 0.25;
+  }
+
+  .wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header,
+  .content,
+  .columns,
+  .footer {
+    display: flex;
+    flex: 1;
+  }
+
+  .logo {
+    font-size: 22px;
+    color: var(--ac-color);
+  }
+
+  .tagline {
+    font-size: 18px;
+  }
+
+  .nav-first {
+    display: flex;
+    order: 1;
+    flex-flow: column;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
+
+  .main {
+    flex: 1;
+    order: 2;
+    position: relative;
+    padding: 0 8px;
+  }
+
+  .nav-second {
+    display: flex;
+    width: 10%;
+    order: 3;
+    // comment this to display
+    display: none;
+  }
+
+  nav.secondary-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ul {
+      display: flex;
+      flex-flow: column;
+
+      li {
+        display: flex;
+
+        a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 16px;
+          border-radius: 50%;
+          background-color: var(--bg-dark-color);
+          color: var(--fg-light-color);
+          margin: 8px;
+
+          &:hover {
+            color: var(--fg-color);
+          }
+
+          &.current {
+            color: var(--ac-color);
+            fill: var(--ac-color);
+          }
+        }
+      }
+    }
+  }
+
   .slide-in {
     position: relative;
     animation: slideIn 0.2s forwards ease-in-out;
@@ -104,68 +271,65 @@
     }
   }
 
-  header,
-  #main,
-  footer {
-    margin: 0 auto;
-    max-width: 1200px;
+  .footer {
+    flex-direction: column;
   }
 
-  footer {
-    margin: 32px auto;
-  }
+  nav.primary-nav {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid var(--brd-color);
 
-  nav {
     svg {
-      vertical-align: sub;
+      fill: var(--fg-light-color);
     }
 
     a {
-      display: inline-block;
-      position: relative;
-      padding: 8px 16px;
-      fill: var(--fg-color);
-      color: var(--fg-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      border-radius: 8px;
+      background-color: var(--brd-color);
+      color: var(--fg-light-color);
+      margin: 8px;
+
+      &:hover {
+        color: var(--fg-color);
+
+        svg {
+          fill: var(--fg-color);
+        }
+      }
 
       &.nuxt-link-exact-active {
-        color: var(--act-color);
-        fill: var(--act-color);
-
-        &:before {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      &:before {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: -1;
         background-color: var(--ac-color);
-        border-radius: 8px;
-        margin: auto;
-      }
+        color: var(--act-color);
 
-      &:not(.nuxt-link-exact-active):hover:before {
-        animation: linkHover 0.2s forwards ease-in-out;
-      }
-
-      @keyframes linkHover {
-        0% {
-          width: 0;
-          height: 2px;
-        }
-
-        100% {
-          width: 100%;
-          height: 2px;
+        svg {
+          fill: var(--act-color);
         }
       }
     }
   }
+
+  $responsiveWidth: 720px;
+
+  @media (max-width: $responsiveWidth) {
+    .columns {
+      flex-flow: column;
+    }
+    .nav-first {
+      width: 100%;
+      background-color: var(--bg-color);
+    }
+    nav.primary-nav {
+      flex-flow: row;
+    }
+    nav.secondary-nav {
+      display: none;
+    }
+  }
 </style>
 
 <script>
@@ -230,7 +394,13 @@
       if (process.client) {
         document.body.classList.add("afterLoad");
       }
-      document.querySelector('meta[name=theme-color]').setAttribute('content', this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628");
+
+      document
+        .querySelector("meta[name=theme-color]")
+        .setAttribute(
+          "content",
+          this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
+        );
 
       // Initializes the PWA code - checks if the app is installed,
       // etc.
@@ -254,6 +424,23 @@
           });
         }
       })();
+
+      window.addEventListener("scroll", event => {
+        let mainNavLinks = document.querySelectorAll("nav ul li a");
+        let fromTop = window.scrollY;
+        mainNavLinks.forEach(link => {
+          let section = document.querySelector(link.hash);
+
+          if (
+            section.offsetTop <= fromTop &&
+            section.offsetTop + section.offsetHeight > fromTop
+          ) {
+            link.classList.add("current");
+          } else {
+            link.classList.remove("current");
+          }
+        });
+      });
     },
 
     watch: {
diff --git a/pages/index.vue b/pages/index.vue
index 0d028bfa6..abfed5ed3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,11 +40,11 @@
       </div>
     </pw-modal>
 
-    <pw-section v-if="showPreRequestScript" class="orange" icon="code" label="Pre-Request • β (experimental)" ref="preRequest">
+    <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
       <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="rawParams" spellcheck="false"></textarea>
     </pw-section>
 
-    <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
+    <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
           <label for="method">Method</label>
@@ -244,7 +244,7 @@
       </div>
     </pw-section>
 
-    <pw-section class="yellow" icon="flash_on" label="Code" ref="requestCode" v-if="!isHidden">
+    <pw-section class="yellow" label="Code" ref="requestCode" v-if="!isHidden">
       <ul>
         <li>
           <label for="requestType">Request Type</label>
@@ -282,11 +282,11 @@
       </ul>
     </pw-section>
 
-    <section>
+    <section id="options">
       <input id="tab-one" type="radio" name="grp" checked="checked" />
       <label for="tab-one">Authentication</label>
       <div class="tab">
-        <pw-section class="cyan" icon="vpn_key" label="Authentication">
+        <pw-section class="cyan" label="Authentication" ref="authentication">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -348,7 +348,7 @@
       <input id="tab-two" type="radio" name="grp" />
       <label for="tab-two">Headers</label>
       <div class="tab">
-        <pw-section class="orange" icon="toc" label="Headers">
+        <pw-section class="orange" label="Headers" ref="headers">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -411,7 +411,7 @@
       <input id="tab-three" type="radio" name="grp" />
       <label for="tab-three">Parameters</label>
       <div class="tab">
-        <pw-section class="pink" icon="input" label="Parameters">
+        <pw-section class="pink" label="Parameters" ref="parameters">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -473,7 +473,7 @@
 
     <br>
 
-    <pw-section class="purple" icon="cloud_download" id="response" label="Response" ref="response">
+    <pw-section class="purple" id="response" label="Response" ref="response">
       <ul>
         <li>
           <label for="status">status</label>
@@ -532,7 +532,7 @@
 
     <br>
 
-    <pw-section class="yellow" icon="folder_special" label="Collections" ref="Collections">
+    <pw-section class="yellow" label="Collections" ref="collections">
       <collections />
     </pw-section>
 
diff --git a/pages/settings.vue b/pages/settings.vue
index c5437f18d..5be9c355e 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="cyan" icon="color_lens" label="Theme">
+    <pw-section class="cyan" label="Theme" ref="theme">
       <ul>
         <li>
           <h3 class="title">Background</h3>
@@ -47,7 +47,10 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="blue" icon="public" label="Proxy">
+
+    <br>
+
+    <pw-section class="blue" label="Proxy" ref="proxy">
       <ul>
         <li>
           <span>
diff --git a/pages/websocket.vue b/pages/websocket.vue
index c70884149..81408273f 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
+    <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
           <label for="url">URL</label>
@@ -24,9 +24,11 @@
         </li>
       </ul>
     </pw-section>
+
+    <br>
+
     <pw-section
       class="purple"
-      icon="cloud_download"
       label="Communication"
       id="response"
       ref="response"