btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Styled select input (#431)

Browse Source 
Styled select input

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>
This commit is contained in:
Liyas Thomas
2019-12-15 05:50:47 +05:30
committed by GitHub
parent 498b3f80bf 965133d6e2
commit 9b7141b1f4
4 changed files with 153 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/styles.scss
View File

@@ -550,11 +550,31 @@ code {
border-radius: 8px; 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 { select {
height: 37px; height: 37px;
line-height: 37px;
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
cursor: pointer; cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
} }
option { option {

20
components/collections/editRequest.vue
View File

@@ -26,22 +26,32 @@
:placeholder="request.name" :placeholder="request.name"
/> />
<label for="selectCollection">Collection</label> <label for="selectCollection">Collection</label>
<span class="select-wrapper">
<select <select
type="text" type="text"
id="selectCollection" id="selectCollection"
v-model="requestUpdateData.collectionIndex" v-model="requestUpdateData.collectionIndex"
> >
<option :key="undefined" :value="undefined" hidden disabled selected <option
:key="undefined"
:value="undefined"
hidden
disabled
selected
>Current Collection</option >Current Collection</option
> >
<option <option
v-for="(collection, index) in $store.state.postwoman.collections" v-for="(collection, index) in $store.state.postwoman
.collections"
:key="index" :key="index"
:value="index" :value="index"
>{{ collection.name }}</option
> >
{{ collection.name }}
</option>
</select> </select>
</span>
<label for="selectFolder">Folder</label> <label for="selectFolder">Folder</label>
<span class="select-wrapper">
<select <select
type="text" type="text"
id="selectFolder" id="selectFolder"
@@ -52,9 +62,11 @@
v-for="(folder, index) in folders" v-for="(folder, index) in folders"
:key="index" :key="index"
:value="index" :value="index"
>{{ folder.name }}</option
> >
{{ folder.name }}
</option>
</select> </select>
</span>
</li> </li>
</ul> </ul>
</div> </div>

33
components/collections/saveRequestAs.vue
View File

@@ -26,22 +26,32 @@
@keyup.enter="saveRequestAs" @keyup.enter="saveRequestAs"
/> />
<label for="selectCollection">Collection</label> <label for="selectCollection">Collection</label>
<span class="select-wrapper">
<select <select
type="text" type="text"
id="selectCollection" id="selectCollection"
v-model="requestData.collectionIndex" v-model="requestData.collectionIndex"
> >
<option :key="undefined" :value="undefined" hidden disabled selected <option
:key="undefined"
:value="undefined"
hidden
disabled
selected
>Select a Collection</option >Select a Collection</option
> >
<option <option
v-for="(collection, index) in $store.state.postwoman.collections" v-for="(collection, index) in $store.state.postwoman
.collections"
:key="index" :key="index"
:value="index" :value="index"
>{{ collection.name }}</option
> >
{{ collection.name }}
</option>
</select> </select>
</span>
<label for="selectFolder">Folder</label> <label for="selectFolder">Folder</label>
<span class="select-wrapper">
<select <select
type="text" type="text"
id="selectFolder" id="selectFolder"
@@ -52,10 +62,13 @@
v-for="(folder, index) in folders" v-for="(folder, index) in folders"
:key="index" :key="index"
:value="index" :value="index"
>{{ folder.name }}</option
> >
{{ folder.name }}
</option>
</select> </select>
</span>
<label for="selectRequest">Request</label> <label for="selectRequest">Request</label>
<span class="select-wrapper">
<select <select
type="text" type="text"
id="selectRequest" id="selectRequest"
@@ -66,9 +79,11 @@
v-for="(folder, index) in requests" v-for="(folder, index) in requests"
:key="index" :key="index"
:value="index" :value="index"
>{{ folder.name }}</option
> >
{{ folder.name }}
</option>
</select> </select>
</span>
</li> </li>
</ul> </ul>
</div> </div>
@@ -123,7 +138,9 @@ export default {
if (!userSelectedAnyCollection) return []; if (!userSelectedAnyCollection) return [];
const noCollectionAvailable = const noCollectionAvailable =
this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined; this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
] !== undefined;
if (!noCollectionAvailable) return []; if (!noCollectionAvailable) return [];
return this.$store.state.postwoman.collections[ return this.$store.state.postwoman.collections[
@@ -149,7 +166,9 @@ export default {
this.$data.requestData.collectionIndex this.$data.requestData.collectionIndex
]; ];
const noCollectionAvailable = const noCollectionAvailable =
this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined; this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
] !== undefined;
if (!noCollectionAvailable) return []; if (!noCollectionAvailable) return [];
const requests = collection.requests; const requests = collection.requests;

9
pages/index.vue
View File

@@ -44,6 +44,7 @@
<ul> <ul>
<li> <li>
<label for="method">{{ $t("method") }}</label> <label for="method">{{ $t("method") }}</label>
<span class="select-wrapper">
<select id="method" v-model="method" @change="methodChange"> <select id="method" v-model="method" @change="methodChange">
<option value="GET">GET</option> <option value="GET">GET</option>
<option value="HEAD">HEAD</option> <option value="HEAD">HEAD</option>
@@ -55,6 +56,7 @@
<option value="TRACE">TRACE</option> <option value="TRACE">TRACE</option>
<option value="PATCH">PATCH</option> <option value="PATCH">PATCH</option>
</select> </select>
</span>
</li> </li>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
@@ -330,11 +332,13 @@
</button> </button>
</div> </div>
</div> </div>
<span class="select-wrapper">
<select id="auth" v-model="auth"> <select id="auth" v-model="auth">
<option>None</option> <option>None</option>
<option>Basic</option> <option>Basic</option>
<option>Bearer Token</option> <option>Bearer Token</option>
</select> </select>
</span>
</li> </li>
</ul> </ul>
<ul v-if="auth === 'Basic'"> <ul v-if="auth === 'Basic'">
@@ -757,11 +761,13 @@
<ul> <ul>
<li> <li>
<label for="requestType">{{ $t("request_type") }}</label> <label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<select id="requestType" v-model="requestType"> <select id="requestType" v-model="requestType">
<option>JavaScript XHR</option> <option>JavaScript XHR</option>
<option>Fetch</option> <option>Fetch</option>
<option>cURL</option> <option>cURL</option>
</select> </select>
</span>
</li> </li>
</ul> </ul>
<ul> <ul>
@@ -1489,7 +1495,8 @@ export default {
methods: { methods: {
checkCollections() { checkCollections() {
const checkCollectionAvailability = const checkCollectionAvailability =
this.$store.state.postwoman.collections && this.$store.state.postwoman.collections.length > 0 ; this.$store.state.postwoman.collections &&
this.$store.state.postwoman.collections.length > 0;
return checkCollectionAvailability; return checkCollectionAvailability;
}, },
scrollInto(view) { scrollInto(view) {