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

refactor: minor input stylings

Browse Source
This commit is contained in:
liyasthomas
2021-07-10 23:38:35 +05:30
parent d94c8aec51
commit 2e092d34a6
7 changed files with 294 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
components/http/BodyParameters.vue
View File

@@ -1,132 +1,127 @@
<template> <template>
<div> <AppSection label="bodyParameters">
<ul> <div
<li> v-if="bodyParams.length !== 0"
<div class="flex flex-1"> class="flex flex-1 items-center justify-between pl-4"
<label for="reqParamList">{{ $t("request_body") }}</label> >
<div> <label for="reqParamList" class="font-semibold text-xs">
<ButtonSecondary {{ $t("request_body") }}
v-tippy="{ theme: 'tooltip' }" </label>
:title="$t('clear')" <ButtonSecondary
icon="clear_all" v-tippy="{ theme: 'tooltip' }"
@click.native="clearContent('bodyParams', $event)" :title="$t('clear')"
/> icon="clear_all"
</div> @click.native="clearContent('bodyParams', $event)"
</div> />
</li> </div>
</ul> <div
<ul
v-for="(param, index) in bodyParams" v-for="(param, index) in bodyParams"
:key="index" :key="index"
class=" class="
flex
border-b border-dashed border-b border-dashed
divide-y divide-x
md:divide-x
border-divider border-divider
divide-dashed divide-divider divide-dashed divide-divider
md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
> >
<li> <input
<input class="
class="input" px-4
:placeholder="`key ${index + 1}`" py-3
:name="`bparam ${index}`" text-xs
:value="param.key" flex flex-1
autofocus font-semibold
@change="updateBodyParams($event, index, `setKeyBodyParams`)" bg-primaryLight
@keyup.prevent="setRouteQueryState" focus:outline-none
/> "
</li> :placeholder="$t('parameter_count', { count: index + 1 })"
<li> :name="'param' + index"
<input :value="param.key"
v-if="!requestBodyParamIsFile(index)" autofocus
class="input" @change="updateBodyParams($event, index, `setKeyBodyParams`)"
:placeholder="`value ${index + 1}`" @keyup.prevent="setRouteQueryState"
:value="param.value" />
@change=" <input
// if input is form data, set value to be an array containing the value v-if="!requestBodyParamIsFile(index)"
// only class="
updateBodyParams($event, index, `setValueBodyParams`) px-4
" py-3
@keyup.prevent="setRouteQueryState" text-xs
/> flex flex-1
<div v-else class="file-chips-container"> font-semibold
<div class="file-chips-wrapper"> bg-primaryLight
<SmartDeletableChip focus:outline-none
v-for="(file, i) in Array.from(bodyParams[index].value)" "
:key="`body-param-${index}-file-${i}`" :placeholder="$t('value_count', { count: index + 1 })"
@chip-delete="chipDelete(index, i)" :name="'value' + index"
> :value="param.value"
{{ file.name }} @change="
</SmartDeletableChip> // if input is form data, set value to be an array containing the value
</div> // only
updateBodyParams($event, index, `setValueBodyParams`)
"
@keyup.prevent="setRouteQueryState"
/>
<div v-else class="file-chips-container">
<div class="file-chips-wrapper">
<SmartDeletableChip
v-for="(file, i) in Array.from(bodyParams[index].value)"
:key="`body-param-${index}-file-${i}`"
@chip-delete="chipDelete(index, i)"
>
{{ file.name }}
</SmartDeletableChip>
</div> </div>
</li> </div>
<div> <div>
<li> <ButtonSecondary
<ButtonSecondary v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip' }" :title="
:title=" param.hasOwnProperty('active')
param.hasOwnProperty('active') ? param.active
? param.active ? $t('turn_off')
? $t('turn_off') : $t('turn_on')
: $t('turn_on') : $t('turn_off')
: $t('turn_off') "
" :icon="
:icon=" param.hasOwnProperty('active')
param.hasOwnProperty('active') ? param.active
? param.active ? 'check_box'
? 'check_box' : 'check_box_outline_blank'
: 'check_box_outline_blank' : 'check_box'
: 'check_box' "
" @click.native="toggleActive(index, param)"
@click.native="toggleActive(index, param)" />
/>
</li>
</div> </div>
<div v-if="contentType === 'multipart/form-data'"> <div v-if="contentType === 'multipart/form-data'">
<li> <label for="attachment" class="p-0">
<label for="attachment" class="p-0"> <ButtonSecondary
<ButtonSecondary class="w-full"
class="w-full" icon="attach_file"
icon="attach_file" @click.native="$refs.attachment[index].click()"
@click.native="$refs.attachment[index].click()"
/>
</label>
<input
ref="attachment"
class="input"
name="attachment"
type="file"
multiple
@change="setRequestAttachment($event, index)"
/> />
</li> </label>
<input
ref="attachment"
class="input"
name="attachment"
type="file"
multiple
@change="setRequestAttachment($event, index)"
/>
</div> </div>
<div> <div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestBodyParam(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary <ButtonSecondary
name="addrequest" v-tippy="{ theme: 'tooltip' }"
icon="add" :title="$t('delete')"
:label="$t('add_new')" icon="delete"
@click.native="addRequestBodyParam" @click.native="removeRequestBodyParam(index)"
/> />
</li> </div>
</ul> </div>
</div> </AppSection>
</template> </template>
<script> <script>
@@ -139,6 +134,23 @@ export default {
return this.$store.state.request.contentType return this.$store.state.request.contentType
}, },
}, },
watch: {
bodyParams: {
handler(newValue) {
if (
newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== ""
)
this.addRequestBodyParam()
},
deep: true,
},
},
mounted() {
if (!this.bodyParams?.length) {
this.addRequestBodyParam()
}
},
methods: { methods: {
clearContent(bodyParams, $event) { clearContent(bodyParams, $event) {
this.$emit("clear-content", bodyParams, $event) this.$emit("clear-content", bodyParams, $event)

194
components/http/Headers.vue
View File

@@ -1,111 +1,100 @@
<template> <template>
<AppSection label="headers"> <AppSection label="headers">
<ul v-if="headers.length !== 0"> <div
<li> v-if="headers.length !== 0"
<div class="flex flex-1"> class="flex flex-1 items-center justify-between pl-4"
<label for="headerList">{{ $t("header_list") }}</label> >
<div> <label for="headerList" class="font-semibold text-xs">
<ButtonSecondary {{ $t("header_list") }}
v-tippy="{ theme: 'tooltip' }" </label>
:title="$t('clear')" <ButtonSecondary
icon="clear_all" v-tippy="{ theme: 'tooltip' }"
@click.native="clearContent('headers', $event)" :title="$t('clear')"
/> icon="clear_all"
</div> @click.native="clearContent('headers', $event)"
</div> />
</li> </div>
</ul> <div
<ul
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`${header.value}_${index}`" :key="`${header.value}_${index}`"
class=" class="
flex
border-b border-dashed border-b border-dashed
divide-y divide-x
md:divide-x
border-divider border-divider
divide-dashed divide-divider divide-dashed divide-divider
md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
> >
<li> <SmartAutoComplete
<SmartAutoComplete :placeholder="$t('header_count', { count: index + 1 })"
:placeholder="$t('header_count', { count: index + 1 })" :source="commonHeaders"
:source="commonHeaders" :spellcheck="false"
:spellcheck="false" :value="header.key"
:value="header.key" autofocus
autofocus @input="
@input=" $store.commit('setKeyHeader', {
$store.commit('setKeyHeader', { index,
index, value: $event,
value: $event, })
}) "
" @keyup.prevent="setRouteQueryState"
@keyup.prevent="setRouteQueryState" />
/> <input
</li> class="
<li> px-4
<input py-3
class="input" text-xs
:placeholder="$t('value_count', { count: index + 1 })" flex flex-1
:name="'value' + index" font-semibold
:value="header.value" bg-primaryLight
@change=" focus:outline-none
$store.commit('setValueHeader', { "
index, :placeholder="$t('value_count', { count: index + 1 })"
value: $event.target.value, :name="'value' + index"
}) :value="header.value"
" @change="
@keyup.prevent="setRouteQueryState" $store.commit('setValueHeader', {
/> index,
</li> value: $event.target.value,
})
"
@keyup.prevent="setRouteQueryState"
/>
<div> <div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
/>
</li>
</div>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary <ButtonSecondary
icon="add" v-tippy="{ theme: 'tooltip' }"
:label="$t('add_new')" :title="
@click.native="addRequestHeader" header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
header.hasOwnProperty('active')
? header.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
/> />
</li> </div>
</ul> <div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
</div>
</div>
</AppSection> </AppSection>
</template> </template>
@@ -121,6 +110,23 @@ export default {
commonHeaders, commonHeaders,
} }
}, },
watch: {
headers: {
handler(newValue) {
if (
newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== ""
)
this.addRequestHeader()
},
deep: true,
},
},
mounted() {
if (!this.params?.length) {
this.addRequestHeader()
}
},
methods: { methods: {
clearContent(headers, $event) { clearContent(headers, $event) {
this.$emit("clear-content", headers, $event) this.$emit("clear-content", headers, $event)

32
components/http/Parameters.vue
View File

@@ -9,7 +9,7 @@
</label> </label>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('clear_all')"
icon="clear_all" icon="clear_all"
@click.native="clearContent('parameters', $event)" @click.native="clearContent('parameters', $event)"
/> />
@@ -20,11 +20,9 @@
class=" class="
flex flex
border-b border-dashed border-b border-dashed
divide-y divide-x
md:divide-x
border-divider border-divider
divide-dashed divide-divider divide-dashed divide-divider
md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
> >
@@ -80,7 +78,6 @@
py-3 py-3
mr-8 mr-8
focus:outline-none focus:outline-none
border-b border-dividerLight
font-medium font-medium
bg-primaryLight bg-primaryLight
" "
@@ -135,14 +132,6 @@
/> />
</div> </div>
</div> </div>
<div class="flex sticky bottom-0 bg-primary z-10 flex-1">
<ButtonSecondary
icon="add"
class="flex-1"
:label="$t('add_new')"
@click.native="addRequestParam"
/>
</div>
</AppSection> </AppSection>
</template> </template>
@@ -151,6 +140,23 @@ export default {
props: { props: {
params: { type: Array, default: () => [] }, params: { type: Array, default: () => [] },
}, },
watch: {
params: {
handler(newValue) {
if (
newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== ""
)
this.addRequestParam()
},
deep: true,
},
},
mounted() {
if (!this.params?.length) {
this.addRequestParam()
}
},
methods: { methods: {
clearContent(parameters, $event) { clearContent(parameters, $event) {
this.$emit("clear-content", parameters, $event) this.$emit("clear-content", parameters, $event)

48
components/http/ResponseMeta.vue
View File

@@ -1,28 +1,28 @@
<template> <template>
<div class="flex flex-col"> <div
<div class="flex items-center justify-between"> class="
<label>{{ $t("response") }}</label> flex
<label v-if="active" sticky
><i class="animate-spin material-icons">refresh</i></label top-0
> z-10
<label v-else :class="statusCategory ? statusCategory.className : ''"> bg-primary
<i class="material-icons">fiber_manual_record</i> items-center
</label> p-4
</div> font-mono font-semibold
<div class="flex flex-col lg:flex-row"> space-x-4
<label class="flex-1"> "
{{ $t("status") + `: \xA0 ` }} :class="statusCategory ? statusCategory.className : ''"
<span :class="statusCategory ? statusCategory.className : ''"> >
{{ response.status || $t("waiting_send_req") }} <i v-if="active" class="animate-spin material-icons">refresh</i>
</span> <span v-else>
</label> {{ response.status }}
<label> </span>
{{ $t("duration") + `: \xA0 ${response.duration} ms` }} <span v-if="response.duration" class="text-xs">
</label> {{ `${response.duration} ms` }}
<label> </span>
{{ $t("size") + `: \xA0 ${response.size} B` }} <span v-if="response.size" class="text-xs">
</label> {{ `${response.size} B` }}
</div> </span>
</div> </div>
</template> </template>

2
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<SmartTabs styles="m-4"> <SmartTabs styles="sticky z-10 top-13">
<SmartTab <SmartTab
v-for="(lens, index) in validLenses" v-for="(lens, index) in validLenses"
:id="lens.lensName" :id="lens.lensName"

14
components/smart/AutoComplete.vue
View File

@@ -3,7 +3,15 @@
<input <input
ref="acInput" ref="acInput"
v-model="text" v-model="text"
class="input" class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
focus:outline-none
"
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
:spellcheck="spellcheck" :spellcheck="spellcheck"
@@ -187,6 +195,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.autocomplete-wrapper { .autocomplete-wrapper {
@apply relative; @apply relative;
@apply flex;
@apply flex-1;
input:focus + ul.suggestions, input:focus + ul.suggestions,
ul.suggestions:hover { ul.suggestions:hover {
@@ -209,7 +219,7 @@ export default {
@apply w-full; @apply w-full;
@apply block; @apply block;
@apply py-2 px-4; @apply py-2 px-4;
@apply text-sm; @apply text-xs;
@apply font-mono; @apply font-mono;
&:last-child { &:last-child {

41
pages/index.vue
View File

@@ -2,10 +2,10 @@
<!-- eslint-disable --> <!-- eslint-disable -->
<div> <div>
<Splitpanes vertical :dbl-click-splitter="false"> <Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false"> <Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<div class="sticky top-0 z-10 bg-primary flex px-4 pt-4 pb-2"> <div class="sticky top-0 z-10 bg-primary flex p-4">
<div class="relative inline-flex"> <div class="relative inline-flex">
<span class="select-wrapper"> <span class="select-wrapper">
<tippy <tippy
@@ -28,6 +28,7 @@
px-4 px-4
py-2 py-2
truncate truncate
text-secondaryDark
font-semibold font-semibold
border border-divider border border-divider
transition transition
@@ -59,6 +60,7 @@
w-full w-full
font-mono font-semibold font-mono font-semibold
truncate truncate
text-secondaryDark
px-4 px-4
py-2 py-2
border border-divider border border-divider
@@ -90,7 +92,6 @@
font-mono font-mono
flex flex
items-center items-center
justify-center
truncate truncate
font-semibold font-semibold
bg-accent bg-accent
@@ -110,7 +111,6 @@
font-mono font-mono
flex flex
items-center items-center
justify-center
truncate truncate
font-semibold font-semibold
bg-accent bg-accent
@@ -248,7 +248,7 @@
</tippy> </tippy>
</div> </div>
</div> </div>
<SmartTabs styles="sticky top-62px z-10"> <SmartTabs styles="sticky top-70px z-10">
<SmartTab <SmartTab
:id="'params'" :id="'params'"
:label=" :label="
@@ -325,7 +325,13 @@
<li> <li>
<div class="flex flex-1"> <div class="flex flex-1">
<span> <span>
<SmartToggle :on="rawInput" /> <SmartToggle
v-if="canListParameters"
:on="rawInput"
@change="rawInput = !rawInput"
>
{{ $t("raw_input") }}
</SmartToggle>
</span> </span>
</div> </div>
</li> </li>
@@ -700,7 +706,7 @@
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</Pane> </Pane>
<Pane class="overflow-auto"> <Pane class="overflow-auto hide-scrollbar">
<HttpResponse <HttpResponse
:response="response" :response="response"
:active="runningRequest" :active="runningRequest"
@@ -966,22 +972,7 @@ export default {
this.setRouteQueryState() this.setRouteQueryState()
}, },
params: { params: {
handler(newValue) { handler() {
if (!this.paramsWatchEnabled) {
this.paramsWatchEnabled = true
return
}
let path = this.path
let queryString = getQueryParams(newValue)
.map(({ key, value }) => `${key.trim()}=${value.trim()}`)
.join("&")
queryString = queryString === "" ? "" : `?${encodeURI(queryString)}`
if (path.includes("?")) {
path = path.slice(0, path.indexOf("?")) + queryString
} else {
path = path + queryString
}
this.path = path
this.setRouteQueryState() this.setRouteQueryState()
}, },
deep: true, deep: true,
@@ -2026,7 +2017,7 @@ export default {
this.headers = [] this.headers = []
this.testReports = [] this.testReports = []
} }
target.innerHTML = this.doneButton // target.innerHTML = this.doneButton
this.$toast.info(this.$t("cleared"), { this.$toast.info(this.$t("cleared"), {
icon: "clear_all", icon: "clear_all",
}) })