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

8
packages/hoppscotch-app/components/graphql/Field.vue
View File

@@ -21,19 +21,19 @@
</div>
<div
v-if="gqlField.description"
class="text-secondaryLight py-2 field-desc"
class="py-2 text-secondaryLight field-desc"
>
{{ gqlField.description }}
</div>
<div
v-if="gqlField.isDeprecated"
class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block field-deprecated"
class="inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded field-deprecated"
>
{{ $t("state.deprecated") }}
</div>
<div v-if="fieldArgs.length > 0">
<h5 class="my-2">Arguments:</h5>
<div class="border-divider border-l-2 pl-4">
<div class="pl-4 border-l-2 border-divider">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span>
{{ field.name }}:
@@ -44,7 +44,7 @@
</span>
<div
v-if="field.description"
class="text-secondaryLight py-2 field-desc"
class="py-2 text-secondaryLight field-desc"
>
{{ field.description }}
</div>

6
packages/hoppscotch-app/components/graphql/Request.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
<div class="sticky top-0 z-10 flex p-4 bg-primary">
<div class="inline-flex flex-1 space-x-2">
<input
id="url"
v-model="url"
type="url"
autocomplete="off"
spellcheck="false"
class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
:placeholder="`${t('request.url')}`"
:disabled="connected"
@keyup.enter="onConnectClick"

16
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -8,7 +8,7 @@
:indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
>
<div
class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
>
<label class="font-semibold text-secondaryLight">
{{ t("request.query") }}
@@ -71,7 +71,7 @@
:indicator="variableString && variableString.length > 0 ? true : false"
>
<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.variables") }}
@@ -114,7 +114,7 @@
:info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
>
<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("tab.headers") }}
@@ -154,7 +154,7 @@
<div
v-for="(header, index) in headers"
:key="`header-${String(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 })}`"
@@ -180,7 +180,7 @@
"
/>
<input
class="bg-transparent flex flex-1 py-2 px-4"
class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('count.value', { count: index + 1 })}`"
:name="`value ${String(index)}`"
:value="header.value"
@@ -232,15 +232,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

14
packages/hoppscotch-app/components/graphql/Response.vue
View File

@@ -2,14 +2,14 @@
<div>
<div
v-if="responseString === 'loading'"
class="flex flex-col p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div v-else-if="responseString">
<div
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
>
<label class="font-semibold text-secondaryLight">
{{ t("response.title") }}
@@ -42,14 +42,14 @@
</div>
<div
v-else
class="flex flex-col flex-1 text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center flex-1 p-4 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.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>

26
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -33,26 +33,26 @@
subscriptionFields.length === 0 &&
graphqlTypes.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_comment.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.documentation')}`"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ t("empty.documentation") }}
</span>
</div>
<div v-else>
<div class="bg-primary flex top-0 z-10 sticky">
<div class="sticky top-0 z-10 flex bg-primary">
<input
v-model="graphqlFieldsFilterText"
type="search"
autocomplete="off"
:placeholder="`${t('action.search')}`"
class="bg-transparent flex w-full p-4 py-2"
class="flex w-full p-4 py-2 bg-transparent"
/>
<div class="flex">
<ButtonSecondary
@@ -74,7 +74,7 @@
:id="'queries'"
:label="`${t('tab.queries')}`"
:selected="true"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredQueryFields"
@@ -88,7 +88,7 @@
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="`${t('graphql.mutations')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredMutationFields"
@@ -102,7 +102,7 @@
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="`${t('graphql.subscriptions')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlField
v-for="(field, index) in filteredSubscriptionFields"
@@ -117,7 +117,7 @@
:id="'types'"
ref="typesTab"
:label="`${t('tab.types')}`"
class="divide-dividerLight divide-y"
class="divide-y divide-dividerLight"
>
<GraphqlType
v-for="(type, index) in filteredGraphqlTypes"
@@ -137,7 +137,7 @@
<SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
<div
v-if="schemaString"
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
>
<label class="font-semibold text-secondaryLight">
{{ t("graphql.schema") }}
@@ -176,15 +176,15 @@
<div v-if="schemaString" ref="schemaEditor"></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}/blockchain.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.schema')}`"
/>
<span class="text-center mb-4">
<span class="mb-4 text-center">
{{ t("empty.schema") }}
</span>
</div>

10
packages/hoppscotch-app/components/graphql/Type.vue
View File

@@ -6,7 +6,7 @@
<span v-else-if="isEnum" class="text-accent">enum </span>
{{ gqlType.name }}
</div>
<div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
<div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
/>
</div>
</div>
@@ -29,7 +29,7 @@
:key="`child-${index}`"
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
/>
</div>
<div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
<GraphqlField
v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
<div
v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`"
class="border-divider border-l-2 pl-4"
class="pl-4 border-l-2 border-divider"
v-text="value.name"
></div>
</div>