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

refactor: sort classes

Browse Source
This commit is contained in:
liyasthomas
2021-12-31 20:05:39 +05:30
parent 80956fbd27
commit b343789554
62 changed files with 349 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
@@ -17,7 +17,7 @@
<template #trigger>
<span class="select-wrapper">
<ButtonSecondary
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
:label="authName"
/>
</span>
@@ -130,15 +130,15 @@
</div>
<div
v-if="authType === 'none'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.authorization')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary
@@ -151,17 +151,17 @@
class="mb-4"
/>
</div>
<div v-else class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div v-else class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div v-if="authType === 'basic'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="basicUsername"
:placeholder="$t('authorization.username')"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="basicPassword"
:placeholder="$t('authorization.password')"
@@ -170,7 +170,7 @@
</div>
</div>
<div v-if="authType === 'bearer'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="bearerToken"
placeholder="Token"
@@ -179,7 +179,7 @@
</div>
</div>
<div v-if="authType === 'oauth-2'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="oauth2Token"
placeholder="Token"
@@ -189,22 +189,22 @@
<HttpOAuth2Authorization />
</div>
<div v-if="authType === 'api-key'">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="apiKey"
placeholder="Key"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<SmartEnvInput
v-model="apiValue"
placeholder="Value"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="border-b border-dividerLight flex items-center">
<label class="text-secondaryLight ml-4">
<div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight">
{{ $t("authorization.pass_key_by") }}
</label>
<tippy
@@ -218,7 +218,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="addTo || $t('state.none')"
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
/>
</span>
</template>
@@ -257,9 +257,9 @@
</div>
</div>
<div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
>
<div class="text-secondaryLight pb-2">
<div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor

10
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
@@ -18,7 +18,7 @@
<span class="select-wrapper">
<ButtonSecondary
:label="contentType || $t('state.none').toLowerCase()"
class="rounded-none ml-2 pr-8"
class="pr-8 ml-2 rounded-none"
/>
</span>
</template>
@@ -53,15 +53,15 @@
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
<div
v-if="contentType == null"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.body") }}
</span>
<ButtonSecondary

10
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.body") }}
@@ -31,7 +31,7 @@
<div
v-for="(param, index) in bodyParams"
:key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartEnvInput
v-model="param.key"
@@ -141,15 +141,15 @@
</div>
<div
v-if="bodyParams.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.body')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ $t("empty.body") }}
</span>
<ButtonSecondary

4
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -33,7 +33,7 @@
"
/>
</tippy>
<div class="flex flex-1 justify-between">
<div class="flex justify-between flex-1">
<label for="generatedCode" class="p-4">
{{ t("request.generated_code") }}
</label>
@@ -41,7 +41,7 @@
<div
v-if="codegenType"
ref="generatedCode"
class="border border-dividerLight rounded"
class="border rounded border-dividerLight"
></div>
</div>
</template>

10
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.header_list") }}
@@ -41,7 +41,7 @@
<div
v-for="(header, index) in headers$"
:key="`header-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -125,15 +125,15 @@
</div>
<div
v-if="headers$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.headers") }}
</span>
<ButtonSecondary

4
packages/hoppscotch-app/components/http/ImportCurl.vue
View File

@@ -1,10 +1,10 @@
<template>
<SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
<template #body>
<div class="h-46 px-2">
<div class="px-2 h-46">
<div
ref="curlEditor"
class="border border-dividerLight h-full rounded"
class="h-full border rounded border-dividerLight"
></div>
</div>
</template>

20
packages/hoppscotch-app/components/http/OAuth2Authorization.vue
View File

@@ -1,46 +1,46 @@
<template>
<div class="flex flex-col">
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="oidcDiscoveryURL"
v-model="oidcDiscoveryURL"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="OpenID Connect Discovery URL"
name="oidcDiscoveryURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="authURL"
v-model="authURL"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Authentication URL"
name="authURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="accessTokenURL"
v-model="accessTokenURL"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Access Token URL"
name="accessTokenURL"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="clientID"
v-model="clientID"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Client ID"
name="clientID"
/>
</div>
<div class="border-b border-dividerLight flex">
<div class="flex border-b border-dividerLight">
<input
id="scope"
v-model="scope"
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Scope"
name="scope"
/>

10
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.parameter_list") }}
@@ -41,7 +41,7 @@
<div
v-for="(param, index) in params$"
:key="`param-${index}`"
class="divide-dividerLight divide-x border-b border-dividerLight flex"
class="flex border-b divide-x divide-dividerLight border-dividerLight"
>
<SmartEnvInput
v-model="param.key"
@@ -118,15 +118,15 @@
</div>
<div
v-if="params$.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/add_files.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.parameters')}`"
/>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("empty.parameters") }}
</span>
<ButtonSecondary

12
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("preRequest.javascript_code") }}
@@ -29,14 +29,14 @@
/>
</div>
</div>
<div class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div ref="preRrequestEditor" class="h-full"></div>
</div>
<div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
>
<div class="text-secondaryLight pb-2">
<div class="pb-2 text-secondaryLight">
{{ t("helpers.pre_request_script") }}
</div>
<SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
<h4 class="pt-6 font-bold text-secondaryLight">
{{ t("preRequest.snippets") }}
</h4>
<div class="flex flex-col pt-4">

2
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.raw_body") }}

2
packages/hoppscotch-app/components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-1 flex-col">
<div class="flex flex-col flex-1">
<HttpResponseMeta :response="response" />
<LensesResponseBodyRenderer
v-if="!loading && hasResponse"

40
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -1,23 +1,23 @@
<template>
<div
class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
class="sticky top-0 z-10 flex items-center p-4 overflow-auto bg-primary hide-scrollbar whitespace-nowrap"
>
<div
v-if="response == null"
class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
>
<div class="flex space-x-2 my-4 pb-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
<span class="flex items-center flex-1">
{{ t("shortcut.general.help_menu") }}
</span>
</div>
@@ -57,44 +57,44 @@
</div>
<div
v-if="response.type === 'network_fail'"
class="flex flex-col flex-1 p-4 items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy"
class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.network_fail')}`"
/>
<span class="font-semibold text-center mb-2">
<span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }}
</span>
<span
class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor class="border border-dividerLight rounded" />
<AppInterceptor class="border rounded border-dividerLight" />
</div>
<div
v-if="response.type === 'script_fail'"
class="flex flex-col flex-1 p-4 items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4"
>
<img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy"
class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.script_fail')}`"
/>
<span class="font-semibold text-center mb-2">
<span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }}
</span>
<span
class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.script_fail") }}
</span>
<div
class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
>
{{ response.error.name }}: {{ response.error.message }}<br />
{{ response.error.stack }}
@@ -102,11 +102,11 @@
</div>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="font-semibold flex items-center text-tiny"
class="flex items-center font-semibold text-tiny"
>
<div
:class="statusCategory.className"
class="space-x-4 inline-flex flex-1"
class="inline-flex flex-1 space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondary"> {{ t("response.status") }}: </span>

18
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -7,7 +7,7 @@
"
>
<div
class="bg-primary border-b border-dividerLight flex top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("test.report") }}
@@ -19,8 +19,8 @@
@click.native="clearContent()"
/>
</div>
<div class="divide-dividerLight border-b border-dividerLight divide-y-4">
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
<div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
<div v-if="testResults.tests" class="divide-y-4 divide-dividerLight">
<HttpTestResultEntry
v-for="(result, index) in testResults.tests"
:key="`result-${index}`"
@@ -29,7 +29,7 @@
</div>
<div
v-if="testResults.expectResults"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<HttpTestResultReport
v-if="testResults.expectResults.length"
@@ -38,7 +38,7 @@
<div
v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`"
class="flex py-2 px-4 items-center"
class="flex items-center px-4 py-2"
>
<i
class="mr-4 material-icons"
@@ -64,18 +64,18 @@
</div>
<div
v-else
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.tests')}`"
/>
<span class="text-center pb-2">
<span class="pb-2 text-center">
{{ t("empty.tests") }}
</span>
<span class="text-center pb-4">
<span class="pb-4 text-center">
{{ t("helpers.tests") }}
</span>
<ButtonSecondary

6
packages/hoppscotch-app/components/http/TestResultEntry.vue
View File

@@ -2,11 +2,11 @@
<div>
<span
v-if="testResults.description"
class="flex font-bold text-secondaryDark py-2 px-4 items-center"
class="flex items-center px-4 py-2 font-bold text-secondaryDark"
>
{{ testResults.description }}
</span>
<div v-if="testResults.expectResults" class="divide-dividerLight divide-y">
<div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
<HttpTestResultReport
v-if="testResults.expectResults.length"
:test-results="testResults"
@@ -14,7 +14,7 @@
<div
v-for="(result, index) in testResults.expectResults"
:key="`result-${index}`"
class="flex py-2 px-4 items-center"
class="flex items-center px-4 py-2"
>
<i
class="mr-4 material-icons"

2
packages/hoppscotch-app/components/http/TestResultReport.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex p-2 items-center">
<div class="flex items-center p-2">
<SmartProgressRing
class="text-red-500"
:radius="16"

12
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
{{ t("test.javascript_code") }}
@@ -29,14 +29,14 @@
/>
</div>
</div>
<div class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3">
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div ref="testScriptEditor" class="h-full"></div>
</div>
<div
class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
>
<div class="text-secondaryLight pb-2">
<div class="pb-2 text-secondaryLight">
{{ t("helpers.post_request_tests") }}
</div>
<SmartAnchor
@@ -44,7 +44,7 @@
to="https://docs.hoppscotch.io/features/tests"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
<h4 class="pt-6 font-bold text-secondaryLight">
{{ t("test.snippets") }}
</h4>
<div class="flex flex-col pt-4">