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

refactor(ui): better font weight, icon hover states, etc

Browse Source
This commit is contained in:
liyasthomas
2021-08-13 16:44:02 +05:30
parent 08e3cffff8
commit 11816111ea
94 changed files with 547 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
components/http/Auth.vue → components/http/Authorization.vue
View File

@@ -1,21 +1,22 @@
<template>
<div>
<div class="flex flex-1 p-2 items-center justify-between">
<span class="flex">
<span
class="
border
rounded-r-none rounded
border-divider border-r-0
font-semibold
text-secondaryLight
py-2
px-4
py-2
"
>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
{{ $t("authorization_type") }}
</span>
</label>
<tippy
ref="authTypeOptions"
interactive
@@ -27,9 +28,8 @@
<div class="flex">
<span class="select-wrapper">
<ButtonSecondary
class="rounded-l-none pr-8"
:label="authType.charAt(0).toUpperCase() + authType.slice(1)"
outline
class="rounded-none ml-2 pr-8"
:label="authName"
/>
</span>
</div>
@@ -38,20 +38,23 @@
label="None"
@click.native="
authType = 'none'
authName = 'None'
$refs.authTypeOptions.tippy().hide()
"
/>
<SmartItem
label="Basic"
label="Basic Auth"
@click.native="
authType = 'basic'
authName = 'Basic Auth'
$refs.authTypeOptions.tippy().hide()
"
/>
<SmartItem
label="Bearer"
label="Bearer Token"
@click.native="
authType = 'bearer'
authName = 'Bearer Token'
$refs.authTypeOptions.tippy().hide()
"
/>
@@ -60,11 +63,18 @@
<div class="flex">
<SmartToggle
:on="authActive"
class="mr-2 px-2"
class="px-2"
@change="authActive = !authActive"
>
{{ authActive ? $t("enabled") : $t("disabled") }}
</SmartToggle>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -73,6 +83,22 @@
/>
</div>
</div>
<div
v-if="authType === 'none'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<span class="text-center pb-4">
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary
outline
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io"
blank
icon="open_in_new"
reverse
/>
</div>
<div v-if="authType === 'basic'" class="space-y-2 p-2">
<div class="flex relative">
<input
@@ -101,10 +127,21 @@
<ButtonSecondary
:icon="passwordFieldType === 'text' ? 'visibility' : 'visibility_off'"
outline
class="ml-2"
class="rounded ml-2"
@click.native="switchVisibility"
/>
</div>
<div class="p-2">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io/"
blank
/>
</div>
</div>
<div v-if="authType === 'bearer'" class="space-y-2 p-2">
<div class="flex relative">
@@ -117,6 +154,17 @@
/>
<label for="bearer_token"> Token </label>
</div>
<div class="p-2">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io/"
blank
/>
</div>
</div>
<!-- <button
v-if="authType === 'OAuth 2.0'"
@@ -157,11 +205,12 @@ export default defineComponent({
setup() {
const auth = useStream(
restAuth$,
{ authType: "none", authActive: true },
{ authType: "none", authName: "None", authActive: true },
setRESTAuth
)
const authType = pluckRef(auth, "authType")
const authName = pluckRef(auth, "authName")
const authActive = pluckRef(auth, "authActive")
const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
@@ -176,6 +225,7 @@ export default defineComponent({
const clearContent = () => {
auth.value = {
authType: "none",
authName: "None",
authActive: true,
}
}
@@ -189,6 +239,7 @@ export default defineComponent({
return {
auth,
authType,
authName,
authActive,
basicUsername,
basicPassword,

31
components/http/Body.vue
View File

@@ -1,21 +1,19 @@
<template>
<div>
<div class="flex flex-1 p-2 items-center justify-between">
<span class="flex">
<span
class="
border
rounded-r-none rounded
border-divider border-r-0
font-semibold
text-secondaryLight
py-2
px-4
py-2
"
>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
pl-4 pl-4
items-center
justify-between
"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
{{ $t("content_type") }}
</span>
</label>
<tippy
ref="contentTypeOptions"
interactive
@@ -28,8 +26,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="contentType"
outline
class="rounded-l-none pr-8"
class="rounded-none ml-2 pr-8"
/>
</span>
</div>

25
components/http/BodyParameters.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("request_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -44,7 +51,7 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -62,9 +69,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -89,7 +94,7 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -107,9 +112,7 @@
v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !requestBodyParamIsFile(index)"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -195,13 +198,13 @@
v-if="bodyParams.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
{{ $t("empty.body") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
icon="add"
@click.native="addBodyParam"
/>
</div>

6
components/http/CodegenModal.vue
View File

@@ -6,7 +6,7 @@
>
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="font-semibold px-4 pb-4">
<label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }}
</label>
<div class="flex flex-1">
@@ -22,7 +22,7 @@
<ButtonSecondary
:label="codegens.find((x) => x.id === codegenType).name"
outline
class="w-full"
class="pr-8"
/>
</span>
</template>
@@ -40,7 +40,7 @@
</tippy>
</div>
<div class="flex flex-1 justify-between">
<label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
<label for="generatedCode" class="px-4 pt-4 pb-4">
{{ $t("request.generated_code") }}
</label>
</div>

18
components/http/Headers.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label for="headerList" class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -46,13 +53,13 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
truncate
focus:outline-none
"
:class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
@input="
updateHeader(index, {
key: $event,
@@ -68,7 +75,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -86,9 +92,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -146,13 +150,13 @@
v-if="headers$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
</span>
<ButtonSecondary
outline
:label="$t('add.new')"
icon="add"
@click.native="addHeader"
/>
</div>

3
components/http/ImportCurl.vue
View File

@@ -5,7 +5,7 @@
<textarea
id="import-curl"
v-model="curl"
class="font-mono textarea floating-input"
class="textarea floating-input"
autofocus
rows="8"
placeholder=" "
@@ -113,6 +113,7 @@ export default defineComponent({
testScript: "",
auth: {
authType: "none",
authName: "None",
authActive: true,
},
body: {

21
components/http/Parameters.vue
View File

@@ -13,10 +13,17 @@
justify-between
"
>
<label class="font-semibold">
<label class="font-semibold text-secondaryLight">
{{ $t("parameter_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
@@ -44,7 +51,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -62,9 +68,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -89,7 +93,6 @@
styles="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-1
px-4
@@ -107,9 +110,7 @@
v-else
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
flex flex-1
py-2
px-4
truncate
@@ -167,12 +168,12 @@
v-if="params$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
icon="add"
outline
@click.native="addParam"
/>

52
components/http/PreRequestScript.vue
View File

@@ -13,7 +13,7 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -24,18 +24,44 @@
icon="help_outline"
/>
</div>
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="pre"
/>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor
v-model="preRequestScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="pre"
/>
</div>
<div
class="
h-full
max-w-1/3
top-upperTertiaryStickyFold
min-w-46
p-4
z-9
sticky
overflow-auto
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.pre_request_script") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
blank
/>
</div>
</div>
</AppSection>
</template>

21
components/http/RawBody.vue
View File

@@ -13,10 +13,23 @@
justify-between
"
>
<label for="rawBody" class="font-semibold">
<label for="rawBody">
{{ $t("raw_request_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>
<ButtonSecondary
v-if="contentType.endsWith('json')"
ref="prettifyRequest"
@@ -40,12 +53,6 @@
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">

16
components/http/Request.vue
View File

@@ -18,13 +18,14 @@
rounded-l
cursor-pointer
flex
font-semibold font-mono
font-semibold
text-secondaryDark
py-2
px-4
transition
w-28
truncate
hover:border-dividerDark
focus:border-accent focus:outline-none
"
:value="newMethod"
@@ -36,7 +37,6 @@
v-for="(method, index) in methods"
:key="`method-${index}`"
:label="method"
class="font-mono"
@click.native="onSelectMethod(method)"
/>
</tippy>
@@ -51,13 +51,13 @@
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
text-secondaryDark
py-1
px-4
transition
truncate
hover:border-dividerDark
focus:outline-none focus:border-accent
"
@enter="newSendRequest()"
@@ -70,9 +70,7 @@
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
flex flex-1
text-secondaryDark
py-2
px-4
@@ -157,7 +155,7 @@
<ButtonSecondary
icon="keyboard_arrow_down"
outline
class="rounded-l-none"
class="rounded-r"
/>
</template>
<input
@@ -236,14 +234,14 @@ import { useSetting } from "~/newstore/settings"
const methods = [
"GET",
"HEAD",
"POST",
"PUT",
"PATCH",
"DELETE",
"HEAD",
"CONNECT",
"OPTIONS",
"TRACE",
"PATCH",
"CUSTOM",
]

12
components/http/ResponseMeta.vue
View File

@@ -9,7 +9,7 @@
justify-center
"
>
<div class="flex space-x-2 pb-8">
<div class="flex space-x-2 pb-4">
<div class="flex flex-col space-y-4 items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.send_request") }}
@@ -44,8 +44,10 @@
<ButtonSecondary
:label="$t('documentation')"
to="https://docs.hoppscotch.io"
icon="open_in_new"
blank
outline
reverse
/>
</div>
<div v-else>
@@ -55,18 +57,18 @@
<div
v-else
:class="statusCategory.className"
class="font-mono font-semibold space-x-4"
class="font-semibold space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondaryDark"> Status: </span>
<span class="text-secondary"> Status: </span>
{{ response.statusCode || $t("waiting_send_req") }}
</span>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondaryDark"> Time: </span>
<span class="text-secondary"> Time: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondaryDark"> Size: </span>
<span class="text-secondary"> Size: </span>
{{ `${response.meta.responseSize} B` }}
</span>
</div>

14
components/http/TestResult.vue
View File

@@ -19,7 +19,7 @@
justify-between
"
>
<label class="font-semibold"> Test Report </label>
<label> Test Report </label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
@@ -35,13 +35,13 @@
:progress="(failedTests / totalTests) * 100"
/>
<div class="ml-2">
<span v-if="failedTests" class="font-semibold text-red-500">
<span v-if="failedTests" class="text-red-500">
{{ failedTests }} failing,
</span>
<span v-if="passedTests" class="font-semibold text-green-500">
<span v-if="passedTests" class="text-green-500">
{{ passedTests }} successful,
</span>
<span class="font-semibold"> out of {{ totalTests }} tests. </span>
<span> out of {{ totalTests }} tests. </span>
</div>
</div>
<div class="divide-y divide-dividerLight">
@@ -57,7 +57,6 @@
class="
border-b border-dividerLight
flex
font-semibold
text-secondaryDark
py-2
px-4
@@ -83,10 +82,7 @@
>
{{ result.status === "pass" ? "check" : "close" }}
</i>
<span
v-if="result.message"
class="font-semibold text-secondaryDark"
>
<span v-if="result.message" class="text-secondaryDark">
{{ result.message }}
</span>
<span class="text-secondaryLight">

52
components/http/Tests.vue
View File

@@ -13,7 +13,7 @@
justify-between
"
>
<label class="font-semibold">
<label>
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -24,18 +24,44 @@
icon="help_outline"
/>
</div>
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="test"
/>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor
v-model="testScript"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
complete-mode="test"
/>
</div>
<div
class="
h-full
max-w-1/3
top-upperTertiaryStickyFold
min-w-46
p-4
z-9
sticky
overflow-auto
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.post_request_tests") }}
</div>
<SmartAnchor
class="link"
:label="$t('action.learn_more')"
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
blank
/>
</div>
</div>
</AppSection>
</template>