Minor ui update
This commit is contained in:
316
pages/index.vue
316
pages/index.vue
@@ -37,143 +37,145 @@
|
|||||||
|
|
||||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<div>
|
||||||
<label for="method">{{ $t("method") }}</label>
|
<li>
|
||||||
<span class="select-wrapper">
|
<label for="method">{{ $t("method") }}</label>
|
||||||
<v-popover>
|
<span class="select-wrapper">
|
||||||
<input
|
<v-popover>
|
||||||
id="method"
|
<input
|
||||||
class="method"
|
id="method"
|
||||||
v-if="!customMethod"
|
class="method"
|
||||||
v-model="method"
|
v-if="!customMethod"
|
||||||
readonly
|
v-model="method"
|
||||||
/>
|
readonly
|
||||||
<input v-else v-model="method" placeholder="CUSTOM" />
|
/>
|
||||||
<template slot="popover">
|
<input v-else v-model="method" placeholder="CUSTOM" />
|
||||||
<div>
|
<template slot="popover">
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'GET'
|
customMethod = false
|
||||||
"
|
method = 'GET'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
GET
|
>
|
||||||
</button>
|
GET
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'HEAD'
|
customMethod = false
|
||||||
"
|
method = 'HEAD'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
HEAD
|
>
|
||||||
</button>
|
HEAD
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'POST'
|
customMethod = false
|
||||||
"
|
method = 'POST'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
POST
|
>
|
||||||
</button>
|
POST
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'PUT'
|
customMethod = false
|
||||||
"
|
method = 'PUT'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
PUT
|
>
|
||||||
</button>
|
PUT
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'DELETE'
|
customMethod = false
|
||||||
"
|
method = 'DELETE'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
DELETE
|
>
|
||||||
</button>
|
DELETE
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'CONNECT'
|
customMethod = false
|
||||||
"
|
method = 'CONNECT'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
CONNECT
|
>
|
||||||
</button>
|
CONNECT
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'OPTIONS'
|
customMethod = false
|
||||||
"
|
method = 'OPTIONS'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
OPTIONS
|
>
|
||||||
</button>
|
OPTIONS
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'TRACE'
|
customMethod = false
|
||||||
"
|
method = 'TRACE'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
TRACE
|
>
|
||||||
</button>
|
TRACE
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = false
|
@click="
|
||||||
method = 'PATCH'
|
customMethod = false
|
||||||
"
|
method = 'PATCH'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
PATCH
|
>
|
||||||
</button>
|
PATCH
|
||||||
</div>
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button
|
<div>
|
||||||
class="icon"
|
<button
|
||||||
@click="
|
class="icon"
|
||||||
customMethod = true
|
@click="
|
||||||
method = 'CUSTOM'
|
customMethod = true
|
||||||
"
|
method = 'CUSTOM'
|
||||||
v-close-popover
|
"
|
||||||
>
|
v-close-popover
|
||||||
CUSTOM
|
>
|
||||||
</button>
|
CUSTOM
|
||||||
</div>
|
</button>
|
||||||
</template>
|
</div>
|
||||||
</v-popover>
|
</template>
|
||||||
</span>
|
</v-popover>
|
||||||
</li>
|
</span>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<label for="url">{{ $t("url") }}</label>
|
<label for="url">{{ $t("url") }}</label>
|
||||||
<input
|
<input
|
||||||
@@ -185,26 +187,28 @@
|
|||||||
v-model="uri"
|
v-model="uri"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<div>
|
||||||
<label for="label">{{ $t("label") }}</label>
|
<li>
|
||||||
<input
|
<label class="hide-on-small-screen" for="send"> </label>
|
||||||
id="label"
|
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
|
||||||
name="label"
|
{{ $t("send") }}
|
||||||
type="text"
|
<span>
|
||||||
v-model="label"
|
<i class="material-icons">send</i>
|
||||||
:placeholder="$t('optional')"
|
</span>
|
||||||
/>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
</div>
|
||||||
<label class="hide-on-small-screen" for="send"> </label>
|
|
||||||
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
|
|
||||||
{{ $t("send") }}
|
|
||||||
<span>
|
|
||||||
<i class="material-icons">send</i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="blue">
|
||||||
|
<label for="label">{{ $t("label") }}</label>
|
||||||
|
<input
|
||||||
|
id="label"
|
||||||
|
name="label"
|
||||||
|
type="text"
|
||||||
|
v-model="label"
|
||||||
|
:placeholder="$t('optional')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="blue" label="Request Body" v-if="['POST', 'PUT', 'PATCH'].includes(method)">
|
<div class="blue" label="Request Body" v-if="['POST', 'PUT', 'PATCH'].includes(method)">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
Reference in New Issue
Block a user