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; display: none;
} }
.method,
kbd, kbd,
select, select,
input, input,
@@ -557,6 +558,7 @@ code {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
user-select: text; user-select: text;
width: calc(100% - 8px); width: calc(100% - 8px);
min-width: 128px;
resize: vertical; resize: vertical;
text-overflow: ellipsis; text-overflow: ellipsis;

69
pages/index.vue
View File

@@ -46,12 +46,22 @@
<label for="method">{{ $t("method") }}</label> <label for="method">{{ $t("method") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<v-popover> <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"> <template slot="popover">
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'GET'" @click="
customMethod = false;
method = 'GET';
"
v-close-popover v-close-popover
> >
GET GET
@@ -60,7 +70,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'HEAD'" @click="
customMethod = false;
method = 'HEAD';
"
v-close-popover v-close-popover
> >
HEAD HEAD
@@ -69,7 +82,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'POST'" @click="
customMethod = false;
method = 'POST';
"
v-close-popover v-close-popover
> >
POST POST
@@ -78,7 +94,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'PUT'" @click="
customMethod = false;
method = 'PUT';
"
v-close-popover v-close-popover
> >
PUT PUT
@@ -87,7 +106,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'DELETE'" @click="
customMethod = false;
method = 'DELETE';
"
v-close-popover v-close-popover
> >
DELETE DELETE
@@ -96,7 +118,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'CONNECT'" @click="
customMethod = false;
method = 'CONNECT';
"
v-close-popover v-close-popover
> >
CONNECT CONNECT
@@ -105,7 +130,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'OPTIONS'" @click="
customMethod = false;
method = 'OPTIONS';
"
v-close-popover v-close-popover
> >
OPTIONS OPTIONS
@@ -114,7 +142,10 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'TRACE'" @click="
customMethod = false;
method = 'TRACE';
"
v-close-popover v-close-popover
> >
TRACE TRACE
@@ -123,12 +154,27 @@
<div> <div>
<button <button
class="icon" class="icon"
@click="method = 'PATCH'" @click="
customMethod = false;
method = 'PATCH';
"
v-close-popover v-close-popover
> >
PATCH PATCH
</button> </button>
</div> </div>
<div>
<button
class="icon"
@click="
customMethod = true;
method = 'CUSTOM';
"
v-close-popover
>
CUSTOM
</button>
</div>
</template> </template>
</v-popover> </v-popover>
</span> </span>
@@ -1559,7 +1605,8 @@ export default {
responseBodyType: "text", responseBodyType: "text",
responseBodyMaxLines: 16, responseBodyMaxLines: 16,
activeSidebar: true, activeSidebar: true,
fb fb,
customMethod: false
}; };
}, },
watch: { watch: {