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

refactor(ui): better rendering with Inter font

Browse Source
This commit is contained in:
liyasthomas
2021-07-26 01:33:32 +05:30
parent 397cab9032
commit 8debb65d89
86 changed files with 434 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/http/Body.vue
View File

@@ -20,7 +20,6 @@
rounded
flex
font-semibold font-mono
text-xs
w-full
py-2
px-4

6
components/http/BodyParameters.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="reqParamList" class="font-semibold text-xs">
<label for="reqParamList" class="font-semibold">
{{ $t("request_body") }}
</label>
<div class="flex">
@@ -41,7 +41,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -60,7 +59,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

14
components/http/CodegenModal.vue
View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="font-semibold text-xs px-4 pb-4">
<label for="requestType" class="font-semibold px-4 pb-4">
{{ $t("choose_language") }}
</label>
<div class="flex flex-1">
@@ -23,14 +23,13 @@
<span
class="
bg-primaryLight
border-b border-dividerLight
border border-dividerLight
rounded
cursor-pointer
flex
font-semibold
text-xs
w-full
py-3
py-2
px-4
focus:outline-none
"
@@ -51,10 +50,7 @@
</span>
</div>
<div class="flex flex-1 justify-between">
<label
for="generatedCode"
class="font-semibold text-xs px-4 pt-4 pb-4"
>
<label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
{{ $t("generated_code") }}
</label>
<ButtonSecondary
@@ -73,7 +69,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

5
components/http/Headers.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="headerList" class="font-semibold text-xs">
<label for="headerList" class="font-semibold">
{{ $t("header_list") }}
</label>
<div class="flex">
@@ -61,7 +61,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

6
components/http/Parameters.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("parameter_list") }}
</label>
<div class="flex">
@@ -47,7 +47,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -70,7 +69,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

6
components/http/PreRequestScript.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -29,7 +29,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,

6
components/http/RawBody.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="rawBody" class="font-semibold text-xs">
<label for="rawBody" class="font-semibold">
{{ $t("raw_request_body") }}
</label>
<div class="flex">
@@ -55,7 +55,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,

12
components/http/ResponseMeta.vue
View File

@@ -11,7 +11,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">send</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("waiting_send_req") }}
</span>
</div>
@@ -28,17 +28,11 @@
<span class="text-secondaryDark"> Status: </span>
{{ response.statusCode || $t("waiting_send_req") }}
</span>
<span
v-if="response.meta && response.meta.responseDuration"
class="text-xs"
>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondaryDark"> Time: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span
v-if="response.meta && response.meta.responseSize"
class="text-xs"
>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondaryDark"> Size: </span>
{{ `${response.meta.responseSize} B` }}
</span>

9
components/http/TestResult.vue
View File

@@ -3,7 +3,7 @@
<div v-if="results.tests">
<span
v-if="results.tests.description"
class="font-semibold text-secondaryDark text-xs"
class="font-semibold text-secondaryDark"
>
{{ results.tests.description }}
</span>
@@ -26,13 +26,10 @@
>
{{ result.status === "pass" ? "check_circle" : "cancel" }}
</i>
<span
v-if="result.message"
class="font-semibold text-secondaryDark text-xs"
>
<span v-if="result.message" class="font-semibold text-secondaryDark">
{{ result.message }}
</span>
<span class="text-secondaryLight text-xs">
<span class="text-secondaryLight">
{{
` \xA0 — \xA0test ${
result.status === "pass" ? $t("passed") : $t("failed")

30
components/http/Tests.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -29,7 +29,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -37,9 +37,21 @@
complete-mode="test"
/>
<div v-if="testResults">
<div class="flex flex-1 pl-4 items-center justify-between">
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-98px
z-10
sticky
items-center
justify-between
"
>
<div>
<label class="font-semibold text-xs"> Test Report </label>
<label class="font-semibold"> Test Report </label>
</div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -50,15 +62,13 @@
</div>
<div class="flex my-4 items-center">
<div class="ml-4">
<span class="font-semibold text-xs text-red-500">
<span class="font-semibold text-red-500">
{{ failedTests }} failing,
</span>
<span class="font-semibold text-xs text-green-500">
<span class="font-semibold text-green-500">
{{ passedTests }} successful,
</span>
<span class="font-semibold text-xs">
out of {{ totalTests }} tests.
</span>
<span class="font-semibold"> out of {{ totalTests }} tests. </span>
</div>
<div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
<div