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

refactor: lint + minor ui fixes

Browse Source
This commit is contained in:
liyasthomas
2021-11-27 19:59:28 +05:30
parent da8c446ad7
commit 0bf856291c
68 changed files with 363 additions and 1691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -19,22 +19,9 @@
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
<AppSection label="query">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
gqlRunQuery
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("request.query") }}
</label>
<div class="flex">
@@ -66,21 +53,9 @@
<SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
<AppSection label="variables">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("request.variables") }}
</label>
<div class="flex">
@@ -106,21 +81,9 @@
<SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
<AppSection label="headers">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("tab.headers") }}
</label>
<div class="flex">
@@ -158,13 +121,7 @@
<div
v-for="(header, index) in headers"
:key="`header-${String(index)}`"
class="
divide-dividerLight
border-dividerLight
flex
border-b
divide-x
"
class="divide-dividerLight border-dividerLight flex border-b divide-x"
>
<SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -242,27 +199,12 @@
</div>
<div
v-if="headers.length === 0"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`"
/>
<span class="pb-4 text-center">

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

@@ -9,21 +9,9 @@
</div>
<div v-else-if="responseString">
<div
class="
bg-primary
border-dividerLight
sticky
top-0
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("response.title") }}
</label>
<div class="flex">
@@ -54,18 +42,10 @@
</div>
<div
v-else
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
flex-1
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center flex-1 p-4"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end text-right space-y-4">
<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>

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

@@ -34,27 +34,12 @@
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/add_comment.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.documentation')}`"
/>
<span class="mb-4 text-center">
@@ -62,7 +47,7 @@
</span>
</div>
<div v-else>
<div class="sticky top-0 z-10 flex bg-primary">
<div class="bg-primary sticky top-0 z-10 flex">
<input
v-model="graphqlFieldsFilterText"
type="search"
@@ -155,21 +140,9 @@
<AppSection ref="schema" label="schema">
<div
v-if="schemaString"
class="
bg-primary
border-dividerLight
sticky
top-0
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("graphql.schema") }}
</label>
<div class="flex">
@@ -206,27 +179,12 @@
<div v-if="schemaString" ref="schemaEditor"></div>
<div
v-else
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.schema')}`"
/>
<span class="mb-4 text-center">