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

refactor: remaining sections stylings

Browse Source
This commit is contained in:
liyasthomas
2021-07-12 04:20:00 +05:30
parent 2e092d34a6
commit b5e524e513
15 changed files with 316 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/collections/graphql/index.vue
View File

@@ -1,7 +1,6 @@
<template>
<AppSection
label="collections"
class=""
:class="{ 'rounded-lg border-2 border-divider': savingMode }"
>
<div

2
components/http/CodegenModal.vue
View File

@@ -73,7 +73,7 @@
:options="{
maxLines: '10',
minLines: '10',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

14
components/http/RawBody.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<ul>
<li>
<div class="flex flex-1">
<label for="rawBody">{{ $t("raw_request_body") }}</label>
<div class="flex flex-1 items-center justify-between pl-4">
<label for="rawBody" class="font-semibold text-xs">
{{ $t("raw_request_body") }}
</label>
<div>
<ButtonSecondary
v-if="rawInput && contentType.endsWith('json')"
@@ -13,7 +13,7 @@
:icon="prettifyIcon"
@click.native="prettifyRequestBody"
/>
<label for="payload" class="p-0">
<label for="payload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import_json')"
@@ -43,15 +43,13 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
</div>
</li>
</ul>
</div>
</template>

7
components/http/ResponseMeta.vue
View File

@@ -9,18 +9,21 @@
items-center
p-4
font-mono font-semibold
space-x-4
space-x-8
"
:class="statusCategory ? statusCategory.className : ''"
>
<i v-if="active" class="animate-spin material-icons">refresh</i>
<span v-else>
{{ response.status }}
<span class="text-secondaryDark"> Status: </span>
{{ response.status || $t("waiting_send_req") }}
</span>
<span v-if="response.duration" class="text-xs">
<span class="text-secondaryDark"> Time: </span>
{{ `${response.duration} ms` }}
</span>
<span v-if="response.size" class="text-xs">
<span class="text-secondaryDark"> Size: </span>
{{ `${response.size} B` }}
</span>
</div>

55
components/lenses/HeadersRenderer.vue
View File

@@ -1,13 +1,50 @@
<template>
<div>
<p v-for="(value, key) in headers" :key="key">
<input
:value="`${key} → ${value}`"
:name="key"
class="input bg-transparent"
readonly
/>
</p>
<div class="p-2 font-mono">
<div v-for="(value, key) in headers" :key="key" class="flex items-center">
<span
class="
p-2
flex
min-w-0
text-xs
group-hover:text-secondaryDark
transition
font-semibold
"
>
<span class="truncate">
{{ key }}
</span>
</span>
<span
class="
font-mono font-bold
flex
justify-center
items-center
text-xs
mx-2
truncate
"
>
→
</span>
<span
class="
p-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
font-semibold
"
>
<span class="truncate">
{{ value }}
</span>
</span>
</div>
</div>
</template>

24
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,18 +1,8 @@
<template>
<div>
<div class="flex flex-1">
<div class="flex flex-1 items-center justify-between">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response.body"
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse ? $t('expand_response') : $t('collapse_response')
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
@@ -43,15 +33,14 @@
:value="responseBodyText"
:lang="'html'"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: '16',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<iframe
ref="previewFrame"
@@ -73,19 +62,12 @@ export default {
},
data() {
return {
expandResponse: false,
responseBodyMaxLines: 16,
downloadIcon: "save_alt",
copyIcon: "content_copy",
previewEnabled: false,
}
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: "text/html" })

16
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,7 +1,19 @@
<template>
<div>
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div
class="
flex flex-1
sticky
top-23
z-10
bg-primary
items-center
justify-between
"
>
<label for="body" class="px-4 font-semibold text-xs">
{{ $t("response_body") }}
</label>
<div>
<ButtonSecondary
v-if="response.body"

38
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,18 +1,20 @@
<template>
<div>
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response.body"
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse ? $t('expand_response') : $t('collapse_response')
<div
class="
flex flex-1
sticky
top-23
z-10
bg-primary
items-center
justify-between
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
>
<label for="body" class="px-4 font-semibold text-xs">
{{ $t("response_body") }}
</label>
<div>
<ButtonSecondary
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
@@ -37,15 +39,14 @@
:lang="'json'"
:provide-j-s-o-n-outline="true"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: '16',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</div>
</div>
@@ -62,8 +63,6 @@ export default {
},
data() {
return {
expandResponse: false,
responseBodyMaxLines: 16,
downloadIcon: "save_alt",
copyIcon: "content_copy",
}
@@ -92,11 +91,6 @@ export default {
},
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType })

38
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,18 +1,20 @@
<template>
<div>
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response.body"
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse ? $t('expand_response') : $t('collapse_response')
<div
class="
flex flex-1
sticky
top-23
z-10
bg-primary
items-center
justify-between
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
>
<label for="body" class="px-4 font-semibold text-xs">
{{ $t("response_body") }}
</label>
<div>
<ButtonSecondary
v-if="response.body && canDownloadResponse"
ref="downloadResponse"
@@ -36,15 +38,14 @@
:value="responseBodyText"
:lang="'plain_text'"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: '16',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</div>
</div>
@@ -61,8 +62,6 @@ export default {
},
data() {
return {
expandResponse: false,
responseBodyMaxLines: 16,
downloadIcon: "save_alt",
copyIcon: "content_copy",
}
@@ -83,11 +82,6 @@ export default {
},
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType })

38
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,18 +1,20 @@
<template>
<div>
<div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response.body"
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse ? $t('expand_response') : $t('collapse_response')
<div
class="
flex flex-1
sticky
top-23
z-10
bg-primary
items-center
justify-between
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
>
<label for="body" class="px-4 font-semibold text-xs">
{{ $t("response_body") }}
</label>
<div>
<ButtonSecondary
v-if="response.body"
ref="downloadResponse"
@@ -36,15 +38,14 @@
:value="responseBodyText"
:lang="'xml'"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: '16',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</div>
</div>
@@ -60,8 +61,6 @@ export default {
},
data() {
return {
expandResponse: false,
responseBodyMaxLines: 16,
copyIcon: "content_copy",
downloadIcon: "save_alt",
}
@@ -74,11 +73,6 @@ export default {
},
},
methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType })

4
components/smart/AceEditor.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="show-if-initialized" :class="{ initialized }">
<div v-if="lang == 'json'" class="outline">
<div v-if="lang == 'json'" class="outline hide-scrollbar">
<div v-for="(p, index) in currPath" :key="index" class="block">
<div class="label" @click="onBlockClick(index)">
{{ p }}
@@ -258,7 +258,7 @@ export default {
.outline {
@apply flex flex-nowrap;
@apply w-full;
@apply flex-1;
@apply overflow-auto;
@apply font-mono;
@apply shadow-lg;

6
components/smart/Toggle.vue
View File

@@ -1,9 +1,11 @@
<template>
<div class="inline-block cursor-pointer" @click="$emit('change')">
<div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label class="pl-0 align-middle cursor-pointer">
<label
class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
>
<slot></slot>
</label>
</div>

2
pages/doc.vue
View File

@@ -43,7 +43,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,

14
pages/graphql.vue
View File

@@ -183,9 +183,9 @@
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: 10,
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -202,7 +202,7 @@
:options="{
maxLines: 10,
minLines: 5,
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -249,9 +249,9 @@
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: 16,
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
@@ -299,9 +299,9 @@
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
maxLines: Infinity,
minLines: 10,
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

99
pages/index.vue
View File

@@ -278,12 +278,7 @@
}`
"
>
<ul>
<li>
<label for="contentType" class="text-sm">{{
$t("content_type")
}}</label>
<span class="select-wrapper">
<div class="flex flex-1 items-center justify-between py-2">
<tippy
interactive
ref="contentTypeOptions"
@@ -293,17 +288,31 @@
arrow
>
<template #trigger>
<div class="flex">
<span class="select-wrapper">
<input
id="contentType"
class="input"
class="
flex
w-full
px-4
py-2
bg-primary
truncate
rounded-lg
font-semibold font-mono
text-xs
transition
focus:outline-none
"
v-model="contentType"
readonly
/>
</span>
</div>
</template>
<SmartItem
v-for="(
contentTypeMenuItem, index
) in validContentTypes"
v-for="(contentTypeMenuItem, index) in validContentTypes"
:key="`content-type-${index}`"
@click.native="
contentType = contentTypeMenuItem
@@ -312,30 +321,15 @@
:label="contentTypeMenuItem"
/>
</tippy>
</span>
<!-- <SmartAutoComplete
:source="validContentTypes"
:spellcheck="false"
v-model="contentType"
styles="text-sm"
/> -->
</li>
</ul>
<ul>
<li>
<div class="flex flex-1">
<span>
<SmartToggle
v-if="canListParameters"
:on="rawInput"
@change="rawInput = !rawInput"
class="px-4"
>
{{ $t("raw_input") }}
</SmartToggle>
</span>
</div>
</li>
</ul>
<HttpBodyParameters
v-if="!rawInput"
:bodyParams="bodyParams"
@@ -597,11 +591,10 @@
:label="$t('pre_request_script')"
>
<AppSection v-if="showPreRequestScript" label="preRequest">
<ul>
<li>
<div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label>
<div>
<div class="flex flex-1 items-center justify-between pl-4">
<label class="font-semibold text-xs">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
blank
@@ -610,32 +603,27 @@
icon="help_outline"
/>
</div>
</div>
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
completeMode="pre"
/>
</li>
</ul>
</AppSection>
</SmartTab>
<SmartTab :id="'tests'" :label="$t('tests')">
<AppSection v-if="testsEnabled" label="postRequestTests">
<ul>
<li>
<div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label>
<div>
<div class="flex flex-1 items-center justify-between pl-4">
<label class="font-semibold text-xs">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
blank
@@ -644,24 +632,23 @@
icon="help_outline"
/>
</div>
</div>
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
completeMode="test"
/>
<div v-if="testReports.length !== 0">
<div class="flex flex-1">
<label>Test Reports</label>
<div>
<div class="flex flex-1 items-center justify-between pl-4">
<label class="font-semibold text-xs">
Test Reports
</label>
<ButtonSecondary
@click.native="clearContent('tests', $event)"
v-tippy="{ theme: 'tooltip' }"
@@ -669,10 +656,10 @@
icon="clear_all"
/>
</div>
</div>
<div
v-for="(testReport, index) in testReports"
:key="index"
class="px-4"
>
<div v-if="testReport.startBlock">
<hr />
@@ -682,26 +669,24 @@
</div>
<p
v-else-if="testReport.result"
class="flex flex-1 info"
class="flex flex-1 font-mono text-xs info"
>
<span :class="testReport.styles.class">
<i class="material-icons">
<span
:class="testReport.styles.class"
class="flex items-center"
>
<i class="material-icons text-sm">
{{ testReport.styles.icon }}
</i>
<span>&nbsp;{{ testReport.result }}</span>
<span v-if="testReport.message">
<label
>&nbsp; • &nbsp;
{{ testReport.message }}</label
>
<label>: {{ testReport.message }}</label>
</span>
</span>
</p>
<div v-else-if="testReport.endBlock"><hr /></div>
</div>
</div>
</li>
</ul>
</AppSection>
</SmartTab>
</SmartTabs>