From 3cea9de8fe9c3306bc2a284e63bbde6e4f5f17ee Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Thu, 14 Nov 2019 23:18:44 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20More=20shortcuts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/styles.scss                   | 92 +++++++++++-------------
 components/collections/saveRequestAs.vue |  7 ++
 components/history.vue                   |  2 +-
 layouts/default.vue                      | 36 +++++-----
 pages/index.vue                          | 22 ++++--
 5 files changed, 88 insertions(+), 71 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 614e89475..4a890ddbc 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -231,31 +231,6 @@ nav.secondary-nav {
   flex-direction: column;
 }
 
-$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;
-  }
-
-  .main {
-    padding: 0 8px;
-  }
-}
-
 h1,
 h2,
 h3 {
@@ -625,31 +600,6 @@ ol li {
   display: none;
 }
 
-@media (max-width: $responsiveWidth) {
-
-  ul,
-  ol {
-    flex-direction: column;
-  }
-
-  ul li,
-  ol li {
-    display: flex;
-  }
-
-  .hide-on-small-screen {
-    display: none;
-  }
-
-  .hide-on-large-screen {
-    display: inline-flex;
-  }
-
-  .show-on-small-screen {
-    display: inline-flex;
-  }
-}
-
 #installPWA {
   display: none;
 }
@@ -800,3 +750,45 @@ input[type="radio"]:checked+label+div.tab {
 .toasted.bubble .action {
   color: inherit !important;
 }
+
+@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;
+  }
+
+  .main {
+    padding: 0 8px;
+  }
+
+  ul,
+  ol {
+    flex-direction: column;
+  }
+
+  ul li,
+  ol li {
+    display: flex;
+  }
+
+  .hide-on-small-screen {
+    display: none;
+  }
+
+  .hide-on-large-screen,
+  .show-on-small-screen {
+    display: inline-flex;
+  }
+}
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index bb96c5b8b..0d51b83ae 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -24,7 +24,14 @@
             v-model="requestData.name"
             v-bind:placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
+            list="preCollectionLabels"
           />
+          <datalist id="preCollectionLabels">
+            <option value="Login"></option>
+            <option value="Logout"></option>
+            <option value="Bug"></option>
+            <option value="Users"></option>
+          </datalist>
           <label for="selectCollection">Collection</label>
           <select
             type="text"
diff --git a/components/history.vue b/components/history.vue
index 134709cd7..24190dc32 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -53,7 +53,7 @@
           <ul>
             <li>
               <button class="icon" @click="sort_by_duration()">
-                Duration
+                Duration (ms)
               </button>
             </li>
             <li>
diff --git a/layouts/default.vue b/layouts/default.vue
index 081dc460b..898cc9d25 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -236,23 +236,27 @@
         </ul>
       </div>
       <div slot="body">
-        <ul>
-          <li>
-            <div>
-              <label>Save to Collections</label>
-              <kbd>Ctrl</kbd><kbd>S</kbd>
-            </div>
-          </li>
-        </ul>
         <br>
-        <ul>
-          <li>
-            <div>
-              <label>Copy Sharable Link</label>
-              <kbd>Ctrl</kbd><kbd>K</kbd>
-            </div>
-          </li>
-        </ul>
+        <div>
+          <label>Send Request</label>
+          <kbd>Ctrl G</kbd>
+        </div>
+        <br>
+        <div>
+          <label>Save to Collections</label>
+          <kbd>Ctrl S</kbd>
+        </div>
+        <br>
+        <div>
+          <label>Copy Request Link</label>
+          <kbd>Ctrl K</kbd>
+        </div>
+        <br>
+        <div>
+          <label>Reset Request</label>
+          <kbd>Ctrl L</kbd>
+        </div>
+        <br>
       </div>
       <div slot="footer"></div>
     </modal>
diff --git a/pages/index.vue b/pages/index.vue
index 5c67b6516..145987868 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,6 @@
             @keydown="formatRawParams"
             rows="8"
             v-model="preRequestScript"
-            v-textarea-auto-height="preRequestScript"
             spellcheck="false"
             placeholder="pw.env.set('variable', 'value');"
           ></textarea>
@@ -78,7 +77,14 @@
             type="text"
             v-model="label"
             placeholder="(optional)"
+            list="preLabels"
           />
+          <datalist id="preLabels">
+            <option value="Login"></option>
+            <option value="Logout"></option>
+            <option value="Bug"></option>
+            <option value="Users"></option>
+          </datalist>
         </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -219,7 +225,6 @@
                 @keydown="formatRawParams"
                 rows="8"
                 v-model="rawParams"
-                v-textarea-auto-height="rawParams"
               ></textarea>
             </li>
           </ul>
@@ -291,6 +296,7 @@
             class="icon"
             @click="clearContent('', $event)"
             v-tooltip.bottom="'Clear All'"
+            ref="clearAll"
           >
             <i class="material-icons">clear_all</i>
           </button>
@@ -1943,14 +1949,22 @@ export default {
   mounted() {
     this.observeRequestButton();
     this._keyListener = function(e) {
-      if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+      if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.sendRequest();
+      }
+      else if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
         this.saveRequest();
       }
-      if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      else if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
         this.copyRequest();
       }
+      else if (e.key === "l" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.$refs.clearAll.click();
+      }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
   },