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

16
pages/documentation.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="import">
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
@@ -43,7 +43,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -57,7 +57,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="documentation">
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
@@ -104,10 +104,10 @@
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="!overflow-auto hide-scrollbar"
>
<aside>
<Collections

4
pages/enter.vue
View File

@@ -3,10 +3,10 @@
<span v-if="signingInWithEmail">
<SmartSpinner />
</span>
<span v-else class="text-secondaryLight text-xs">
<span v-else class="text-secondaryLight">
{{ $t("waiting_for_connection") }}
</span>
<pre v-if="error" class="font-mono text-xs">{{ error }}</pre>
<pre v-if="error" class="font-mono">{{ error }}</pre>
</div>
</template>

60
pages/graphql.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<div class="bg-primary flex p-4 top-0 z-20 sticky">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
id="url"
@@ -37,7 +37,7 @@
/>
</div>
</div>
<SmartTabs styles="sticky top-68px z-10">
<SmartTabs styles="sticky top-16 z-10">
<SmartTab :id="'query'" :label="$t('query')" :selected="true">
<AppSection label="query">
<div
@@ -46,7 +46,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-108px
top-24
z-10
sticky
items-center
@@ -54,7 +54,7 @@
gqlRunQuery
"
>
<label for="gqlQuery" class="font-semibold text-xs">
<label for="gqlQuery" class="font-semibold">
{{ $t("query") }}
</label>
<div class="flex">
@@ -62,7 +62,7 @@
:label="$t('run')"
:shortcut="[getSpecialKey(), 'Enter']"
icon="play_arrow"
class="text-xs !text-accent"
class="!text-accent"
@click.native="runQuery()"
/>
<ButtonSecondary
@@ -95,7 +95,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -113,14 +113,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-108px
top-24
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("variables") }}
</label>
<div class="flex">
@@ -147,7 +147,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -164,14 +164,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-108px
top-24
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("headers") }}
</label>
<div class="flex">
@@ -218,7 +218,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -276,7 +275,7 @@
</SmartTab>
</SmartTabs>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection ref="response" label="response">
<div
v-if="response"
@@ -292,7 +291,7 @@
justify-between
"
>
<label class="font-semibold text-xs" for="responseField">
<label class="font-semibold" for="responseField">
{{ $t("response") }}
</label>
<div class="flex">
@@ -320,7 +319,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
@@ -339,7 +338,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>
@@ -349,16 +348,16 @@
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="hide-scrollbar !overflow-auto"
>
<aside>
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div class="bg-primaryLight flex flex-col top-10 z-10 sticky">
<div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
<input
v-model="graphqlFieldsFilterText"
type="text"
@@ -368,8 +367,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -378,7 +376,7 @@
<SmartTabs
ref="gqlTabs"
styles="
border-t border-dividerLight sticky z-10 top-20"
border-t border-dividerLight sticky z-8 top-16"
>
<div class="gqlTabs">
<SmartTab
@@ -463,7 +461,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">link</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("connect_graphql_endpoint") }}
</span>
</div>
@@ -491,14 +489,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-10
top-8
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("schema") }}
</label>
<div class="flex">
@@ -525,7 +523,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
@@ -543,7 +541,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">link</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("connect_graphql_endpoint") }}
</span>
</div>

16
pages/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<!-- eslint-disable -->
<div>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<HttpRequest />
<SmartTabs styles="sticky top-70px z-10">
<SmartTabs styles="sticky top-66px z-10">
<SmartTab
:id="'params'"
:label="$t('parameters')"
@@ -257,17 +257,17 @@
</SmartTab>
</SmartTabs>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="hide-scrollbar !overflow-auto">
<HttpResponse ref="response" />
</Pane>
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="hide-scrollbar !overflow-auto"
>
<aside>
<SmartTabs styles="sticky z-10 top-0">

28
pages/settings.vue
View File

@@ -6,16 +6,14 @@
<h3 class="heading">
{{ $t("account") }}
</h3>
<p class="mt-1 text-xs text-secondaryLight">
<p class="mt-1 text-secondaryLight">
Customize your account settings.
</p>
</div>
<div class="p-8 md:col-span-2">
<div v-if="currentUser === null">
<ButtonPrimary label="Log in" @click.native="showLogin = true" />
<div class="mt-4 text-xs text-secondaryLight">
Log in to access.
</div>
<div class="mt-4 text-secondaryLight">Log in to access.</div>
</div>
<div v-else class="space-y-8">
<fieldset>
@@ -34,7 +32,7 @@
<label>
{{ currentUser.displayName || $t("nothing_found") }}
</label>
<p class="mt-1 text-xs text-secondaryLight">
<p class="mt-1 text-secondaryLight">
This is your display name.
</p>
</div>
@@ -47,7 +45,7 @@
<label>
{{ currentUser.email || $t("nothing_found") }}
</label>
<p class="mt-1 text-xs text-secondaryLight">
<p class="mt-1 text-secondaryLight">
Your primary email address.
</p>
</div>
@@ -56,7 +54,7 @@
</fieldset>
<fieldset>
<legend class="font-bold text-secondaryDark">Sync</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
These settings are synced to cloud.
</div>
<div class="space-y-4 mt-4">
@@ -99,7 +97,7 @@
<h3 class="heading">
{{ $t("theme") }}
</h3>
<p class="mt-1 text-xs text-secondaryLight">
<p class="mt-1 text-secondaryLight">
Customize your application theme.
</p>
</div>
@@ -108,7 +106,7 @@
<legend class="font-bold text-secondaryDark">
{{ $t("background") }}
</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
<ColorScheme placeholder="..." tag="span">
{{
$colorMode.preference.charAt(0).toUpperCase() +
@@ -127,7 +125,7 @@
<legend class="font-bold text-secondaryDark">
{{ $t("color") }}
</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
{{ active.charAt(0).toUpperCase() + active.slice(1) }}
</div>
<div class="mt-4">
@@ -138,7 +136,7 @@
<legend class="font-bold text-secondaryDark">
{{ $t("experiments") }}
</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
{{ $t("experiments_notice") }}
<SmartLink
class="link"
@@ -205,7 +203,7 @@
<h3 class="heading">
{{ $t("interceptor") }}
</h3>
<p class="mt-1 text-xs text-secondaryLight">
<p class="mt-1 text-secondaryLight">
Middleware between application and APIs.
</p>
</div>
@@ -214,7 +212,7 @@
<legend class="font-bold text-secondaryDark">
{{ $t("extensions") }}
</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
<span v-if="extensionVersion != null">
{{
`${$t("extension_version")}: v${extensionVersion.major}.${
@@ -262,7 +260,7 @@
<legend class="font-bold text-secondaryDark">
{{ $t("proxy") }}
</legend>
<div class="mt-1 text-xs text-secondaryLight">
<div class="mt-1 text-secondaryLight">
{{ `${$t("official_proxy_hosting")} ${$t("read_the")}` }}
<SmartLink
class="link"
@@ -284,7 +282,6 @@
bg-primaryLight
border border-divider
rounded-l
text-xs
ml-2
py-2
px-4
@@ -301,7 +298,6 @@
rounded-r
font-semibold font-mono
flex-1
text-xs
mr-2
w-full
py-2