From bac0db10a68c711410537fb32b3b675aa2fecece Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 17 Nov 2019 05:03:57 +0530
Subject: [PATCH] :zap: UI optimizations

---
 assets/css/styles.scss                |   2 +
 components/collections/collection.vue |  42 ++-----
 components/collections/folder.vue     |  32 ++---
 components/collections/request.vue    |  36 ++----
 components/history.vue                | 172 ++++++++++++--------------
 layouts/default.vue                   |  18 +--
 pages/index.vue                       |  16 +--
 7 files changed, 126 insertions(+), 192 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index e6f3aa50c..842ea5cea 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -765,12 +765,14 @@ input[type="radio"]:checked + label + div.tab {
 .inner-left {
   display: flex;
   order: 1;
+  margin-right: 16px;
 }
 
 .inner-right {
   display: flex;
   width: 25%;
   order: 2;
+  height: calc(100vh - 80px)
 }
 
 @media (max-width: $responsiveWidth) {
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index e58e09b18..bd29b59b7 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -9,30 +9,7 @@
           <span>{{ collection.name }}</span>
         </button>
       </div>
-      <div class="hide-on-small-screen">
-        <button
-          class="icon"
-          @click="removeCollection"
-          v-tooltip="'Delete collection'"
-        >
-          <i class="material-icons">delete</i>
-        </button>
-        <button
-          class="icon"
-          @click="$emit('edit-collection')"
-          v-tooltip="'Edit collection'"
-        >
-          <i class="material-icons">create</i>
-        </button>
-        <button
-          class="icon"
-          @click="$emit('add-folder')"
-          v-tooltip="'New Folder'"
-        >
-          <i class="material-icons">create_new_folder</i>
-        </button>
-      </div>
-      <v-popover class="hide-on-large-screen">
+      <v-popover>
         <button class="tooltip-target icon" v-tooltip="'More'">
           <i class="material-icons">more_vert</i>
         </button>
@@ -40,12 +17,11 @@
           <div>
             <button
               class="icon"
-              @click="removeCollection"
-              v-tooltip="'Delete collection'"
-              v-close-popover
+              @click="$emit('add-folder')"
+              v-tooltip="'New Folder'"
             >
-              <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <i class="material-icons">create_new_folder</i>
+              <span>New folder</span>
             </button>
           </div>
           <div>
@@ -62,12 +38,12 @@
           <div>
             <button
               class="icon"
-              @click="$emit('add-folder')"
-              v-tooltip="'New Folder'"
+              @click="removeCollection"
+              v-tooltip="'Delete collection'"
               v-close-popover
             >
-              <i class="material-icons">create_new_folder</i>
-              <span>New folder</span>
+              <i class="material-icons">delete</i>
+              <span>Delete</span>
             </button>
           </div>
         </template>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 3517c6277..0fd38c244 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -9,30 +9,11 @@
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <div class="hide-on-small-screen">
-        <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
-          <i class="material-icons">delete</i>
-        </button>
-        <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
-          <i class="material-icons">edit</i>
-        </button>
-      </div>
-      <v-popover class="hide-on-large-screen">
+      <v-popover>
         <button class="tooltip-target icon" v-tooltip="'More'">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
-          <div>
-            <button
-              class="icon"
-              @click="removeFolder"
-              v-tooltip="'Delete folder'"
-              v-close-popover
-            >
-              <i class="material-icons">delete</i>
-              <span>Delete</span>
-            </button>
-          </div>
           <div>
             <button
               class="icon"
@@ -44,6 +25,17 @@
               <span>Edit</span>
             </button>
           </div>
+          <div>
+            <button
+              class="icon"
+              @click="removeFolder"
+              v-tooltip="'Delete folder'"
+              v-close-popover
+            >
+              <i class="material-icons">delete</i>
+              <span>Delete</span>
+            </button>
+          </div>
         </template>
       </v-popover>
     </div>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 32de9bfe5..f9103a537 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -6,34 +6,11 @@
         <span>{{ request.name }}</span>
       </button>
     </div>
-    <div class="hide-on-small-screen">
-      <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
-        <i class="material-icons">delete</i>
-      </button>
-      <button
-        class="icon"
-        @click="$emit('edit-request')"
-        v-tooltip="'Edit request'"
-      >
-        <i class="material-icons">edit</i>
-      </button>
-    </div>
-    <v-popover class="hide-on-large-screen">
+    <v-popover>
       <button class="tooltip-target icon" v-tooltip="'More'">
         <i class="material-icons">more_vert</i>
       </button>
       <template slot="popover">
-        <div>
-          <button
-            class="icon"
-            @click="removeRequest"
-            v-tooltip="'Delete request'"
-            v-close-popover
-          >
-            <i class="material-icons">delete</i>
-            <span>Delete</span>
-          </button>
-        </div>
         <div>
           <button
             class="icon"
@@ -45,6 +22,17 @@
             <span>Edit</span>
           </button>
         </div>
+        <div>
+          <button
+            class="icon"
+            @click="removeRequest"
+            v-tooltip="'Delete request'"
+            v-close-popover
+          >
+            <i class="material-icons">delete</i>
+            <span>Delete</span>
+          </button>
+        </div>
       </template>
     </v-popover>
   </div>
diff --git a/components/history.vue b/components/history.vue
index 8d101c156..d53decc90 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -13,67 +13,46 @@
     <ul v-if="history.length !== 0" class="labels">
       <div class="show-on-large-screen">
         <li>
-          <button class="icon">
-            <i class="material-icons">star_half</i>
+          <button class="icon" @click="sort_by_label()">
+            <i class="material-icons">label</i>
           </button>
         </li>
         <li>
-          <button class="icon">
-            <i class="material-icons">history</i>
+          <button class="icon" @click="sort_by_time()">
+            <i class="material-icons">access_time</i>
           </button>
         </li>
-      </div>
-      <li>
-        <button class="icon" @click="sort_by_label()">
-          Label
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_time()">
-          Time
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_status_code()">
-          Status
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_url()">
-          URL
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_path()">
-          Path
-        </button>
-      </li>
-      <transition name="smooth" v-if="show">
         <li>
-          <ul>
-            <li>
-              <button class="icon" @click="sort_by_duration()">
-                Duration (ms)
-              </button>
-            </li>
-            <li>
-              <button class="icon">
-                Pre-script
-              </button>
-            </li>
-          </ul>
-        </li>
-      </transition>
-      <div class="show-on-large-screen">
-        <li>
-          <button
-            class="icon"
-            @click="enableHistoryClearing"
-            v-tooltip="'Clear History'"
-          >
-            <i class="material-icons">clear_all</i>
+          <button class="icon" @click="sort_by_status_code()">
+            <i class="material-icons">assistant</i>
           </button>
         </li>
+        <li>
+          <button class="icon" @click="sort_by_url()">
+            <i class="material-icons">language</i>
+          </button>
+        </li>
+        <li>
+          <button class="icon" @click="sort_by_path()">
+            <i class="material-icons">http</i>
+          </button>
+        </li>
+        <transition name="smooth" v-if="show">
+          <li>
+            <ul>
+              <li>
+                <button class="icon" @click="sort_by_duration()">
+                  <i class="material-icons">timer</i>
+                </button>
+              </li>
+              <li>
+                <button class="icon">
+                  <i class="material-icons">code</i>
+                </button>
+              </li>
+            </ul>
+          </li>
+        </transition>
         <li>
           <button
             class="icon"
@@ -138,23 +117,23 @@
               v-tooltip="entry.date"
             />
           </li>
+          <li class="method-list-item">
+            <input
+              aria-label="Method"
+              type="text"
+              readonly
+              :value="entry.method"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
+            />
+            <span
+              class="entry-status-code"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
+              >{{ entry.status }}</span
+            >
+          </li>
         </div>
-        <li class="method-list-item">
-          <input
-            aria-label="Method"
-            type="text"
-            readonly
-            :value="entry.method"
-            :class="findEntryStatus(entry).className"
-            :style="{ '--status-code': entry.status }"
-          />
-          <span
-            class="entry-status-code"
-            :class="findEntryStatus(entry).className"
-            :style="{ '--status-code': entry.status }"
-            >{{ entry.status }}</span
-          >
-        </li>
         <div class="show-on-large-screen">
           <li>
             <input
@@ -197,30 +176,37 @@
             </li>
           </div>
         </transition>
-        <div class="show-on-large-screen">
-          <li>
-            <button
-              v-tooltip="'Delete entry'"
-              class="icon"
-              :id="'delete-button#' + index"
-              @click="deleteHistory(entry)"
-              aria-label="Delete"
-            >
-              <i class="material-icons">delete</i>
-            </button>
-          </li>
-          <li>
-            <button
-              v-tooltip="'Edit entry'"
-              class="icon"
-              :id="'use-button#' + index"
-              @click="useHistory(entry)"
-              aria-label="Edit"
-            >
-              <i class="material-icons">edit</i>
-            </button>
-          </li>
-        </div>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip="'More'">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button
+                v-tooltip="'Edit entry'"
+                class="icon"
+                :id="'use-button#' + index"
+                @click="useHistory(entry)"
+                aria-label="Edit"
+              >
+                <i class="material-icons">edit</i>
+                <span>Use</span>
+              </button>
+            </div>
+             <div>
+              <button
+                v-tooltip="'Delete entry'"
+                class="icon"
+                :id="'delete-button#' + index"
+                @click="deleteHistory(entry)"
+                aria-label="Delete"
+              >
+                <i class="material-icons">delete</i>
+                <span>Delete</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
       </ul>
     </virtual-list>
     <ul
diff --git a/layouts/default.vue b/layouts/default.vue
index 2daac1679..8fbc70f66 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -137,16 +137,6 @@
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
-                <li>
-                  <a href="#collections" v-tooltip.right="'Collections'">
-                    <i class="material-icons">folder_special</i>
-                  </a>
-                </li>
-                <li>
-                  <a href="#history" v-tooltip.right="'History'">
-                    <i class="material-icons">watch_later</i>
-                  </a>
-                </li>
               </ul>
             </nav>
           </div>
@@ -239,22 +229,22 @@
         <br />
         <div>
           <label>Send Request</label>
-          <kbd>Ctrl G</kbd>
+          <kbd>⌘ G</kbd>
         </div>
         <br />
         <div>
           <label>Save to Collections</label>
-          <kbd>Ctrl S</kbd>
+          <kbd>⌘ S</kbd>
         </div>
         <br />
         <div>
           <label>Copy Request Link</label>
-          <kbd>Ctrl K</kbd>
+          <kbd>⌘ K</kbd>
         </div>
         <br />
         <div>
           <label>Reset Request</label>
-          <kbd>Ctrl L</kbd>
+          <kbd>⌘ L</kbd>
         </div>
         <br />
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index b77be31da..c3932348f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -642,18 +642,18 @@
 
       <aside class="sticky-inner inner-right">
         <section>
-          <input id="collection-tab" type="radio" name="side" checked="checked" />
-          <label for="collection-tab">Collections</label>
-          <div class="tab">
-            <pw-section class="yellow" label="Collections" ref="collections">
-          <collections />
-          </pw-section>
-          </div>
-          <input id="history-tab" type="radio" name="side" />
+          <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">History</label>
           <div class="tab">
             <history @useHistory="handleUseHistory" ref="historyComponent"></history>
           </div>
+          <input id="collection-tab" type="radio" name="side" />
+          <label for="collection-tab">Collections</label>
+          <div class="tab">
+            <pw-section class="yellow" label="Collections" ref="collections">
+              <collections />
+            </pw-section>
+          </div>
         </section>
       </aside>