Minor tweaks (#245)

Minor tweaks
hoppscotch · Nov 2, 2019 · 7cc7e56 · 7cc7e56
2 parents b95eaf1 + 18bbe98
commit 7cc7e56
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
@@ -37,7 +37,6 @@
           <label>Collection is empty</label>
         </li>
       </ul>
-
       <ul>
         <li v-for="(request, index) in collection.requests" :key="index">
           <request

diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
@@ -17,16 +17,20 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
-          <select type="text" v-model="requestUpdateData.collectionIndex">
+          <label for="selectLabel">Label</label>
+          <input type="text" id="selectLabel" v-model="requestUpdateData.name" :placeholder="request.name" />
+          <label for="selectCollection">Collection</label>
+          <select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
+            <option :key="undefined" :value="undefined" hidden disabled selected>Current Collection</option>
             <option
               v-for="(collection, index) in $store.state.postwoman.collections"
               :key="index"
               :value="index"
             >{{ collection.name }}</option>
           </select>
-          <select type="text" v-model="requestUpdateData.folderIndex">
-            <option :key="undefined" :value="undefined"></option>
+          <label for="selectFolder">Folder</label>
+          <select type="text" id="selectFolder" v-model="requestUpdateData.folderIndex">
+            <option :key="undefined" :value="undefined">/</option>
             <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
           </select>
         </li>

diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
@@ -26,6 +26,7 @@
           />
           <label for="selectCollection">Collection</label>
           <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+            <option :key="undefined" :value="undefined" hidden disabled selected>Select a Collection</option>
             <option
               v-for="(collection, index) in $store.state.postwoman.collections"
               :key="index"

diff --git a/pages/index.vue b/pages/index.vue
@@ -258,7 +258,7 @@
           >
             <i class="material-icons">save</i>
           </button>
-          <button class="icon" @click="clearContent" v-tooltip.bottom="'Clear All'">
+          <button class="icon" @click="clearContent('', $event)" v-tooltip.bottom="'Clear All'">
             <i class="material-icons">clear_all</i>
           </button>
         </div>
@@ -317,9 +317,8 @@
               <div class="flex-wrap">
                 <label for="auth">Authentication Type</label>
                 <div>
-                  <button class="icon" @click="clearContent('auth')">
+                  <button class="icon" @click="clearContent('auth', $event)" v-tooltip.bottom="'Clear'">
                     <i class="material-icons">clear_all</i>
-                    <span>Clear</span>
                   </button>
                 </div>
               </div>
@@ -377,9 +376,8 @@
               <div class="flex-wrap">
                 <label for="headerList">Header List</label>
                 <div>
-                  <button class="icon" @click="clearContent('headers')">
+                  <button class="icon" @click="clearContent('headers', $event)" v-tooltip.bottom="'Clear'">
                     <i class="material-icons">clear_all</i>
-                    <span>Clear</span>
                   </button>
                 </div>
               </div>
@@ -442,9 +440,8 @@
               <div class="flex-wrap">
                 <label for="paramList">Parameter List</label>
                 <div>
-                  <button class="icon" @click="clearContent('parameters')">
+                  <button class="icon" @click="clearContent('parameters', $event)" v-tooltip.bottom="'Clear'">
                     <i class="material-icons">clear_all</i>
-                    <span>Clear</span>
                   </button>
                 </div>
               </div>
@@ -1143,14 +1140,17 @@ export default {
     }
   },
   methods: {
+    scrollInto(view) {
+      this.$refs[view].$el.scrollIntoView({
+        behavior: "smooth"
+      });
+    },
     handleUseHistory({ label, method, url, path }) {
       this.label = label;
       this.method = method;
       this.url = url;
       this.path = path;
-      this.$refs.request.$el.scrollIntoView({
-        behavior: "smooth"
-      });
+      this.scrollInto('request');
     },
     getVariablesFromPreRequestScript() {
       if (!this.preRequestScript) {
@@ -1206,6 +1206,7 @@ export default {
     },
     async sendRequest() {
       this.$toast.clear();
+      this.scrollInto('response');
 
       if (!this.isValidURL) {
         this.$toast.error("URL is not formatted properly", {
@@ -1221,9 +1222,6 @@ export default {
       if (this.$refs.response.$el.classList.contains("hidden")) {
         this.$refs.response.$el.classList.toggle("hidden");
       }
-      this.$refs.response.$el.scrollIntoView({
-        behavior: "smooth"
-      });
       this.previewEnabled = false;
       this.response.status = "Fetching...";
       this.response.body = "Loading...";
@@ -1641,7 +1639,7 @@ export default {
       this.passwordFieldType =
         this.passwordFieldType === "password" ? "text" : "password";
     },
-    clearContent(name) {
+    clearContent(name, e) {
       switch (name) {
         case "auth":
           this.auth = "None";
@@ -1670,9 +1668,16 @@ export default {
           this.bodyParams = [];
           this.rawParams = "";
       }
+      e.target.innerHTML = this.copiedButton;
       this.$toast.info("Cleared", {
         icon: "clear_all"
       });
+      setTimeout(
+        () =>
+          (e.target.innerHTML =
+            '<i class="material-icons">clear_all</i>'),
+        1000
+      );
     },
     saveRequest() {
       this.editRequest = {

diff --git a/store/state.js b/store/state.js
@@ -1,4 +1,4 @@
-export default {
+export default () => ({
   request: {
     method: 'GET',
     url: 'https://reqres.in',
@@ -7,13 +7,14 @@ export default {
     auth: 'None',
     httpUser: '',
     httpPassword: '',
+    passwordFieldType: 'password',
     bearerToken: '',
     headers: [],
     params: [],
     bodyParams: [],
     rawParams: '',
     rawInput: false,
-    requestType: '',
+    requestType: 'JavaScript XHR',
     contentType: '',
   }
-};
+});