Skip to content

Commit

Permalink
Styled select input (#431)
Browse files Browse the repository at this point in the history 
Styled select input

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>
  • Loading branch information
@liyasthomas
liyasthomas and Liyas Thomas committed Dec 15, 2019
2 parents 498b3f8 + 965133d commit 9b7141b
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 95 deletions.
22 changes: 21 additions & 1 deletion assets/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
64 changes: 38 additions & 26 deletions components/collections/editRequest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option
<span class="select-wrapper">
<select
type="text"
id="selectCollection"
v-model="requestUpdateData.collectionIndex"
>
</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>
Expand Down
107 changes: 63 additions & 44 deletions components/collections/saveRequestAs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>{{ collection.name }}</option
<span class="select-wrapper">
<select
type="text"
id="selectCollection"
v-model="requestData.collectionIndex"
>
</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>
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
55 changes: 31 additions & 24 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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'">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -2100,7 +2107,7 @@ export default {
});
return;
}
this.editRequest = {
url: this.url,
path: this.path,
Expand Down

0 comments on commit 9b7141b

Please sign in to comment.