From 965133d6e2470eb46bc6f42db2d493d89296ad2e Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sun, 15 Dec 2019 05:29:03 +0530
Subject: [PATCH] :art: Styled select input

---
 assets/css/styles.scss                   |  22 ++++-
 components/collections/editRequest.vue   |  64 ++++++++------
 components/collections/saveRequestAs.vue | 107 +++++++++++++----------
 pages/index.vue                          |  55 +++++++-----
 4 files changed, 153 insertions(+), 95 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 069350987..3285d6874 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -550,11 +550,31 @@ code {
   border-radius: 8px;
 }
 
+.select-wrapper {
+  position: relative;
+
+  &:after {
+    display: inline-block;
+    position: absolute;
+    pointer-events: none;
+    content: "\e313";
+    font-family: "Material Icons";
+    top: 14px;
+    right: 14px;
+  }
+}
+
 select {
   height: 37px;
-  line-height: 37px;
   background-color: var(--bg-dark-color);
   cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
 }
 
 option {
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
index 8e3e6de69..46323d10e 100644
--- a/components/collections/editRequest.vue
+++ b/components/collections/editRequest.vue
@@ -26,35 +26,47 @@
             :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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectCollection"
+              v-model="requestUpdateData.collectionIndex"
             >
-            <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
-              :key="index"
-              :value="index"
-              >{{ collection.name }}</option
-            >
-          </select>
+              <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>
+          </span>
           <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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectFolder"
+              v-model="requestUpdateData.folderIndex"
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in folders"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
         </li>
       </ul>
     </div>
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index 03af8ef41..c3b5042a1 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -26,49 +26,64 @@
             @keyup.enter="saveRequestAs"
           />
           <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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectCollection"
+              v-model="requestData.collectionIndex"
             >
-            <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
-              :key="index"
-              :value="index"
-              >{{ collection.name }}</option
-            >
-          </select>
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+                >Select a Collection</option
+              >
+              <option
+                v-for="(collection, index) in $store.state.postwoman
+                  .collections"
+                :key="index"
+                :value="index"
+              >
+                {{ collection.name }}
+              </option>
+            </select>
+          </span>
           <label for="selectFolder">Folder</label>
-          <select
-            type="text"
-            id="selectFolder"
-            v-model="requestData.folderIndex"
-          >
-            <option :key="undefined" :value="undefined">/</option>
-            <option
-              v-for="(folder, index) in folders"
-              :key="index"
-              :value="index"
-              >{{ folder.name }}</option
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectFolder"
+              v-model="requestData.folderIndex"
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in folders"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
           <label for="selectRequest">Request</label>
-          <select
-            type="text"
-            id="selectRequest"
-            v-model="requestData.requestIndex"
-          >
-            <option :key="undefined" :value="undefined">/</option>
-            <option
-              v-for="(folder, index) in requests"
-              :key="index"
-              :value="index"
-              >{{ folder.name }}</option
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectRequest"
+              v-model="requestData.requestIndex"
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in requests"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
         </li>
       </ul>
     </div>
@@ -121,11 +136,13 @@ export default {
       const userSelectedAnyCollection =
         this.$data.requestData.collectionIndex !== undefined;
       if (!userSelectedAnyCollection) return [];
-      
-      const noCollectionAvailable = 
-        this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+
+      const noCollectionAvailable =
+        this.$store.state.postwoman.collections[
+          this.$data.requestData.collectionIndex
+        ] !== undefined;
       if (!noCollectionAvailable) return [];
-      
+
       return this.$store.state.postwoman.collections[
         this.$data.requestData.collectionIndex
       ].folders;
@@ -148,8 +165,10 @@ export default {
         const collection = this.$store.state.postwoman.collections[
           this.$data.requestData.collectionIndex
         ];
-        const noCollectionAvailable = 
-          this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+        const noCollectionAvailable =
+          this.$store.state.postwoman.collections[
+            this.$data.requestData.collectionIndex
+          ] !== undefined;
         if (!noCollectionAvailable) return [];
 
         const requests = collection.requests;
diff --git a/pages/index.vue b/pages/index.vue
index 4cf1cc54f..5a2ba82bd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -44,17 +44,19 @@
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
-              <select id="method" v-model="method" @change="methodChange">
-                <option value="GET">GET</option>
-                <option value="HEAD">HEAD</option>
-                <option value="POST">POST</option>
-                <option value="PUT">PUT</option>
-                <option value="DELETE">DELETE</option>
-                <option value="CONNECT">CONNECT</option>
-                <option value="OPTIONS">OPTIONS</option>
-                <option value="TRACE">TRACE</option>
-                <option value="PATCH">PATCH</option>
-              </select>
+              <span class="select-wrapper">
+                <select id="method" v-model="method" @change="methodChange">
+                  <option value="GET">GET</option>
+                  <option value="HEAD">HEAD</option>
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                  <option value="DELETE">DELETE</option>
+                  <option value="CONNECT">CONNECT</option>
+                  <option value="OPTIONS">OPTIONS</option>
+                  <option value="TRACE">TRACE</option>
+                  <option value="PATCH">PATCH</option>
+                </select>
+              </span>
             </li>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -330,11 +332,13 @@
                       </button>
                     </div>
                   </div>
-                  <select id="auth" v-model="auth">
-                    <option>None</option>
-                    <option>Basic</option>
-                    <option>Bearer Token</option>
-                  </select>
+                  <span class="select-wrapper">
+                    <select id="auth" v-model="auth">
+                      <option>None</option>
+                      <option>Basic</option>
+                      <option>Bearer Token</option>
+                    </select>
+                  </span>
                 </li>
               </ul>
               <ul v-if="auth === 'Basic'">
@@ -757,11 +761,13 @@
           <ul>
             <li>
               <label for="requestType">{{ $t("request_type") }}</label>
-              <select id="requestType" v-model="requestType">
-                <option>JavaScript XHR</option>
-                <option>Fetch</option>
-                <option>cURL</option>
-              </select>
+              <span class="select-wrapper">
+                <select id="requestType" v-model="requestType">
+                  <option>JavaScript XHR</option>
+                  <option>Fetch</option>
+                  <option>cURL</option>
+                </select>
+              </span>
             </li>
           </ul>
           <ul>
@@ -1488,8 +1494,9 @@ export default {
   },
   methods: {
     checkCollections() {
-      const checkCollectionAvailability = 
-        this.$store.state.postwoman.collections && this.$store.state.postwoman.collections.length > 0 ;
+      const checkCollectionAvailability =
+        this.$store.state.postwoman.collections &&
+        this.$store.state.postwoman.collections.length > 0;
       return checkCollectionAvailability;
     },
     scrollInto(view) {
@@ -2100,7 +2107,7 @@ export default {
         });
         return;
       }
-      
+
       this.editRequest = {
         url: this.url,
         path: this.path,