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

🎨 Better drop-down for method field

Browse Source
This commit is contained in:
Liyas Thomas
2020-02-04 20:52:52 +05:30
parent c43a864480
commit 6a13b8c3c5
2 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/styles.scss
View File

@@ -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;

69
pages/index.vue
View File

@@ -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: {