From 6a13b8c3c5fe5706f8eb56cbde3a011c961c4cdb Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 4 Feb 2020 20:52:52 +0530
Subject: [PATCH] :art: Better drop-down for `method` field

---
 assets/css/styles.scss |  2 ++
 pages/index.vue        | 69 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 382870d31..902ec8af5 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -538,6 +538,7 @@ input[type="radio"],
   display: none;
 }
 
+.method,
 kbd,
 select,
 input,
@@ -557,6 +558,7 @@ code {
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
+  min-width: 128px;
   resize: vertical;
   text-overflow: ellipsis;
 
diff --git a/pages/index.vue b/pages/index.vue
index af395bd97..b6f087d48 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -46,12 +46,22 @@
               <label for="method">{{ $t("method") }}</label>
               <span class="select-wrapper">
                 <v-popover>
-                  <input id="method" v-model="method" />
+                  <input
+                    id="method"
+                    class="method"
+                    v-if="!customMethod"
+                    v-model="method"
+                    readonly
+                  />
+                  <input v-else v-model="method" placeholder="CUSTOM" />
                   <template slot="popover">
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'GET'"
+                        @click="
+                          customMethod = false;
+                          method = 'GET';
+                        "
                         v-close-popover
                       >
                         GET
@@ -60,7 +70,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'HEAD'"
+                        @click="
+                          customMethod = false;
+                          method = 'HEAD';
+                        "
                         v-close-popover
                       >
                         HEAD
@@ -69,7 +82,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'POST'"
+                        @click="
+                          customMethod = false;
+                          method = 'POST';
+                        "
                         v-close-popover
                       >
                         POST
@@ -78,7 +94,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'PUT'"
+                        @click="
+                          customMethod = false;
+                          method = 'PUT';
+                        "
                         v-close-popover
                       >
                         PUT
@@ -87,7 +106,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'DELETE'"
+                        @click="
+                          customMethod = false;
+                          method = 'DELETE';
+                        "
                         v-close-popover
                       >
                         DELETE
@@ -96,7 +118,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'CONNECT'"
+                        @click="
+                          customMethod = false;
+                          method = 'CONNECT';
+                        "
                         v-close-popover
                       >
                         CONNECT
@@ -105,7 +130,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'OPTIONS'"
+                        @click="
+                          customMethod = false;
+                          method = 'OPTIONS';
+                        "
                         v-close-popover
                       >
                         OPTIONS
@@ -114,7 +142,10 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'TRACE'"
+                        @click="
+                          customMethod = false;
+                          method = 'TRACE';
+                        "
                         v-close-popover
                       >
                         TRACE
@@ -123,12 +154,27 @@
                     <div>
                       <button
                         class="icon"
-                        @click="method = 'PATCH'"
+                        @click="
+                          customMethod = false;
+                          method = 'PATCH';
+                        "
                         v-close-popover
                       >
                         PATCH
                       </button>
                     </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="
+                          customMethod = true;
+                          method = 'CUSTOM';
+                        "
+                        v-close-popover
+                      >
+                        CUSTOM
+                      </button>
+                    </div>
                   </template>
                 </v-popover>
               </span>
@@ -1559,7 +1605,8 @@ export default {
       responseBodyType: "text",
       responseBodyMaxLines: 16,
       activeSidebar: true,
-      fb
+      fb,
+      customMethod: false
     };
   },
   watch: {