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> <template>
<AppSection <AppSection
label="collections" label="collections"
class=""
:class="{ 'rounded-lg border-2 border-divider': savingMode }" :class="{ 'rounded-lg border-2 border-divider': savingMode }"
> >
<div <div

2
components/http/CodegenModal.vue
View File

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

100
components/http/RawBody.vue
View File

@@ -1,57 +1,55 @@
<template> <template>
<div> <div>
<ul> <div class="flex flex-1 items-center justify-between pl-4">
<li> <label for="rawBody" class="font-semibold text-xs">
<div class="flex flex-1"> {{ $t("raw_request_body") }}
<label for="rawBody">{{ $t("raw_request_body") }}</label> </label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-if="rawInput && contentType.endsWith('json')" v-if="rawInput && contentType.endsWith('json')"
ref="prettifyRequest" ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('prettify_body')" :title="$t('prettify_body')"
:icon="prettifyIcon" :icon="prettifyIcon"
@click.native="prettifyRequestBody" @click.native="prettifyRequestBody"
/> />
<label for="payload" class="p-0"> <label for="payload">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('import_json')" :title="$t('import_json')"
icon="post_add" icon="post_add"
@click.native="$refs.payload.click()" @click.native="$refs.payload.click()"
/>
</label>
<input
ref="payload"
class="input"
name="payload"
type="file"
@change="uploadPayload"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
</div>
</div>
<div class="relative">
<SmartAceEditor
v-model="rawParamsBody"
:lang="rawInputEditorLang"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/> />
</div> </label>
</li> <input
</ul> ref="payload"
class="input"
name="payload"
type="file"
@change="uploadPayload"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
</div>
</div>
<div class="relative">
<SmartAceEditor
v-model="rawParamsBody"
:lang="rawInputEditorLang"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
</div>
</div> </div>
</template> </template>

7
components/http/ResponseMeta.vue
View File

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

55
components/lenses/HeadersRenderer.vue
View File

@@ -1,13 +1,50 @@
<template> <template>
<div> <div class="p-2 font-mono">
<p v-for="(value, key) in headers" :key="key"> <div v-for="(value, key) in headers" :key="key" class="flex items-center">
<input <span
:value="`${key} → ${value}`" class="
:name="key" p-2
class="input bg-transparent" flex
readonly min-w-0
/> text-xs
</p> 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> </div>
</template> </template>

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

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

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

@@ -1,7 +1,19 @@
<template> <template>
<div> <div>
<div class="flex flex-1"> <div
<label for="body">{{ $t("response_body") }}</label> 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> <div>
<ButtonSecondary <ButtonSecondary
v-if="response.body" v-if="response.body"

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

@@ -1,18 +1,20 @@
<template> <template>
<div> <div>
<div class="flex flex-1"> <div
<label for="body">{{ $t("response_body") }}</label> 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> <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 <ButtonSecondary
v-if="response.body && canDownloadResponse" v-if="response.body && canDownloadResponse"
ref="downloadResponse" ref="downloadResponse"
@@ -37,15 +39,14 @@
:lang="'json'" :lang="'json'"
:provide-j-s-o-n-outline="true" :provide-j-s-o-n-outline="true"
:options="{ :options="{
maxLines: responseBodyMaxLines, maxLines: Infinity,
minLines: '16', minLines: '16',
fontSize: '15px', fontSize: '14px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>
@@ -62,8 +63,6 @@ export default {
}, },
data() { data() {
return { return {
expandResponse: false,
responseBodyMaxLines: 16,
downloadIcon: "save_alt", downloadIcon: "save_alt",
copyIcon: "content_copy", copyIcon: "content_copy",
} }
@@ -92,11 +91,6 @@ export default {
}, },
}, },
methods: { methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() { downloadResponse() {
const dataToWrite = this.responseBodyText const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType }) const file = new Blob([dataToWrite], { type: this.responseType })

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

@@ -1,18 +1,20 @@
<template> <template>
<div> <div>
<div class="flex flex-1"> <div
<label for="body">{{ $t("response_body") }}</label> 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> <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 <ButtonSecondary
v-if="response.body && canDownloadResponse" v-if="response.body && canDownloadResponse"
ref="downloadResponse" ref="downloadResponse"
@@ -36,15 +38,14 @@
:value="responseBodyText" :value="responseBodyText"
:lang="'plain_text'" :lang="'plain_text'"
:options="{ :options="{
maxLines: responseBodyMaxLines, maxLines: Infinity,
minLines: '16', minLines: '16',
fontSize: '15px', fontSize: '14px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>
@@ -61,8 +62,6 @@ export default {
}, },
data() { data() {
return { return {
expandResponse: false,
responseBodyMaxLines: 16,
downloadIcon: "save_alt", downloadIcon: "save_alt",
copyIcon: "content_copy", copyIcon: "content_copy",
} }
@@ -83,11 +82,6 @@ export default {
}, },
}, },
methods: { methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() { downloadResponse() {
const dataToWrite = this.responseBodyText const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType }) const file = new Blob([dataToWrite], { type: this.responseType })

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

@@ -1,18 +1,20 @@
<template> <template>
<div> <div>
<div class="flex flex-1"> <div
<label for="body">{{ $t("response_body") }}</label> 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> <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 <ButtonSecondary
v-if="response.body" v-if="response.body"
ref="downloadResponse" ref="downloadResponse"
@@ -36,15 +38,14 @@
:value="responseBodyText" :value="responseBodyText"
:lang="'xml'" :lang="'xml'"
:options="{ :options="{
maxLines: responseBodyMaxLines, maxLines: Infinity,
minLines: '16', minLines: '16',
fontSize: '15px', fontSize: '14px',
autoScrollEditorIntoView: true, autoScrollEditorIntoView: true,
readOnly: true, readOnly: true,
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>
@@ -60,8 +61,6 @@ export default {
}, },
data() { data() {
return { return {
expandResponse: false,
responseBodyMaxLines: 16,
copyIcon: "content_copy", copyIcon: "content_copy",
downloadIcon: "save_alt", downloadIcon: "save_alt",
} }
@@ -74,11 +73,6 @@ export default {
}, },
}, },
methods: { methods: {
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() { downloadResponse() {
const dataToWrite = this.responseBodyText const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType }) const file = new Blob([dataToWrite], { type: this.responseType })

4
components/smart/AceEditor.vue
View File

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

6
components/smart/Toggle.vue
View File

@@ -1,9 +1,11 @@
<template> <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 }"> <label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="pl-0 align-middle cursor-pointer"> <label
class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
>
<slot></slot> <slot></slot>
</label> </label>
</div> </div>

2
pages/doc.vue
View File

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

14
pages/graphql.vue
View File

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

287
pages/index.vue
View File

@@ -278,64 +278,58 @@
}` }`
" "
> >
<ul> <div class="flex flex-1 items-center justify-between py-2">
<li> <tippy
<label for="contentType" class="text-sm">{{ interactive
$t("content_type") ref="contentTypeOptions"
}}</label> tabindex="-1"
<span class="select-wrapper"> trigger="click"
<tippy theme="popover"
interactive arrow
ref="contentTypeOptions" >
tabindex="-1" <template #trigger>
trigger="click" <div class="flex">
theme="popover" <span class="select-wrapper">
arrow
>
<template #trigger>
<input <input
id="contentType" 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" v-model="contentType"
readonly readonly
/> />
</template> </span>
<SmartItem </div>
v-for="( </template>
contentTypeMenuItem, index <SmartItem
) in validContentTypes" v-for="(contentTypeMenuItem, index) in validContentTypes"
:key="`content-type-${index}`" :key="`content-type-${index}`"
@click.native=" @click.native="
contentType = contentTypeMenuItem contentType = contentTypeMenuItem
$refs.contentTypeOptions.tippy().hide() $refs.contentTypeOptions.tippy().hide()
" "
:label="contentTypeMenuItem" :label="contentTypeMenuItem"
/> />
</tippy> </tippy>
</span> <SmartToggle
<!-- <SmartAutoComplete v-if="canListParameters"
:source="validContentTypes" :on="rawInput"
:spellcheck="false" @change="rawInput = !rawInput"
v-model="contentType" class="px-4"
styles="text-sm" >
/> --> {{ $t("raw_input") }}
</li> </SmartToggle>
</ul> </div>
<ul>
<li>
<div class="flex flex-1">
<span>
<SmartToggle
v-if="canListParameters"
:on="rawInput"
@change="rawInput = !rawInput"
>
{{ $t("raw_input") }}
</SmartToggle>
</span>
</div>
</li>
</ul>
<HttpBodyParameters <HttpBodyParameters
v-if="!rawInput" v-if="!rawInput"
:bodyParams="bodyParams" :bodyParams="bodyParams"
@@ -597,111 +591,102 @@
:label="$t('pre_request_script')" :label="$t('pre_request_script')"
> >
<AppSection v-if="showPreRequestScript" label="preRequest"> <AppSection v-if="showPreRequestScript" label="preRequest">
<ul> <div class="flex flex-1 items-center justify-between pl-4">
<li> <label class="font-semibold text-xs">
<div class="flex flex-1"> {{ $t("javascript_code") }}
<label>{{ $t("javascript_code") }}</label> </label>
<div> <ButtonSecondary
<ButtonSecondary to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts" blank
blank v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip' }" :title="$t('wiki')"
:title="$t('wiki')" icon="help_outline"
icon="help_outline" />
/> </div>
</div> <SmartJsEditor
</div> v-model="preRequestScript"
<SmartJsEditor :options="{
v-model="preRequestScript" maxLines: '16',
:options="{ minLines: '8',
maxLines: '16', fontSize: '14px',
minLines: '8', autoScrollEditorIntoView: true,
fontSize: '15px', showPrintMargin: false,
autoScrollEditorIntoView: true, useWorker: false,
showPrintMargin: false, }"
useWorker: false, completeMode="pre"
}" />
styles="rounded-b-lg"
completeMode="pre"
/>
</li>
</ul>
</AppSection> </AppSection>
</SmartTab> </SmartTab>
<SmartTab :id="'tests'" :label="$t('tests')"> <SmartTab :id="'tests'" :label="$t('tests')">
<AppSection v-if="testsEnabled" label="postRequestTests"> <AppSection v-if="testsEnabled" label="postRequestTests">
<ul> <div class="flex flex-1 items-center justify-between pl-4">
<li> <label class="font-semibold text-xs">
<div class="flex flex-1"> {{ $t("javascript_code") }}
<label>{{ $t("javascript_code") }}</label> </label>
<div> <ButtonSecondary
<ButtonSecondary to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests" blank
blank v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip' }" :title="$t('wiki')"
:title="$t('wiki')" icon="help_outline"
icon="help_outline" />
/> </div>
</div> <SmartJsEditor
</div> v-model="testScript"
<SmartJsEditor :options="{
v-model="testScript" maxLines: '16',
:options="{ minLines: '8',
maxLines: '16', fontSize: '14px',
minLines: '8', autoScrollEditorIntoView: true,
fontSize: '15px', showPrintMargin: false,
autoScrollEditorIntoView: true, useWorker: false,
showPrintMargin: false, }"
useWorker: false, completeMode="test"
}" />
styles="rounded-b-lg" <div v-if="testReports.length !== 0">
completeMode="test" <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' }"
:title="$t('clear')"
icon="clear_all"
/> />
<div v-if="testReports.length !== 0"> </div>
<div class="flex flex-1"> <div
<label>Test Reports</label> v-for="(testReport, index) in testReports"
<div> :key="index"
<ButtonSecondary class="px-4"
@click.native="clearContent('tests', $event)" >
v-tippy="{ theme: 'tooltip' }" <div v-if="testReport.startBlock">
:title="$t('clear')" <hr />
icon="clear_all" <h4 class="heading">
/> {{ testReport.startBlock }}
</div> </h4>
</div>
<div
v-for="(testReport, index) in testReports"
:key="index"
>
<div v-if="testReport.startBlock">
<hr />
<h4 class="heading">
{{ testReport.startBlock }}
</h4>
</div>
<p
v-else-if="testReport.result"
class="flex flex-1 info"
>
<span :class="testReport.styles.class">
<i class="material-icons">
{{ testReport.styles.icon }}
</i>
<span>&nbsp; {{ testReport.result }}</span>
<span v-if="testReport.message">
<label
>&nbsp; • &nbsp;
{{ testReport.message }}</label
>
</span>
</span>
</p>
<div v-else-if="testReport.endBlock"><hr /></div>
</div>
</div> </div>
</li> <p
</ul> v-else-if="testReport.result"
class="flex flex-1 font-mono text-xs info"
>
<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>: {{ testReport.message }}</label>
</span>
</span>
</p>
<div v-else-if="testReport.endBlock"><hr /></div>
</div>
</div>
</AppSection> </AppSection>
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>