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

18
assets/scss/styles.scss
View File

@@ -35,6 +35,16 @@
@apply text-accentContrast; @apply text-accentContrast;
} }
input::placeholder {
@apply text-secondaryDark;
@apply opacity-25;
}
input {
@apply text-secondaryDark;
@apply font-medium;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@@ -141,7 +151,7 @@ a {
[interactive] > div { [interactive] > div {
@apply flex; @apply flex;
@apply h-full; @apply flex-1;
} }
.tippy-content > div { .tippy-content > div {
@@ -174,7 +184,7 @@ hr {
@apply bg-primary; @apply bg-primary;
@apply truncate; @apply truncate;
@apply rounded; @apply rounded;
@apply font-semibold; @apply text-secondaryDark;
@apply border border-divider; @apply border border-divider;
@apply transition; @apply transition;
@apply focus:(outline-none border-accent); @apply focus:(outline-none border-accent);
@@ -196,7 +206,7 @@ button {
} }
.floating-input ~ label { .floating-input ~ label {
@apply font-semibold; @apply font-medium;
@apply py-0.5; @apply py-0.5;
@apply px-2; @apply px-2;
@apply m-2; @apply m-2;
@@ -352,7 +362,7 @@ input[type="checkbox"] {
@apply text-primary; @apply text-primary;
@apply justify-start; @apply justify-start;
@apply shadow; @apply shadow;
@apply font-semibold; @apply font-medium;
font-size: var(--body-font-size); font-size: var(--body-font-size);
line-height: var(--body-line-height); line-height: var(--body-line-height);

12
assets/scss/themes.scss
View File

@@ -24,7 +24,7 @@
// Dark Border color // Dark Border color
--divider-dark-color: theme("colors.dark.300"); --divider-dark-color: theme("colors.dark.300");
// Error color // Error color
--error-color: theme("colors.dark.800"); --error-color: theme("colors.warm-gray.800");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.true-gray.100"); --tooltip-color: theme("colors.true-gray.100");
// Popover color // Popover color
@@ -53,7 +53,7 @@
// Dark Border color // Dark Border color
--divider-dark-color: theme("colors.blue-gray.300"); --divider-dark-color: theme("colors.blue-gray.300");
// Error color // Error color
--error-color: theme("colors.blue-gray.700"); --error-color: theme("colors.yellow.100");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.blue-gray.800"); --tooltip-color: theme("colors.blue-gray.800");
// Popover color // Popover color
@@ -82,7 +82,7 @@
// Dark Border color // Dark Border color
--divider-dark-color: theme("colors.dark.300"); --divider-dark-color: theme("colors.dark.300");
// Error color // Error color
--error-color: theme("colors.dark.800"); --error-color: theme("colors.warm-gray.900");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.true-gray.100"); --tooltip-color: theme("colors.true-gray.100");
// Popover color // Popover color
@@ -308,7 +308,7 @@
// Upper secondary sticky fold // Upper secondary sticky fold
--upper-secondary-sticky-fold: 6.125rem; --upper-secondary-sticky-fold: 6.125rem;
// Upper tertiary sticky fold // Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 8.125rem; --upper-tertiary-sticky-fold: 8.188rem;
// Lower primary sticky fold // Lower primary sticky fold
--lower-primary-sticky-fold: 3rem; --lower-primary-sticky-fold: 3rem;
// Lower secondary sticky fold // Lower secondary sticky fold
@@ -329,7 +329,7 @@
// Upper secondary sticky fold // Upper secondary sticky fold
--upper-secondary-sticky-fold: 6.625rem; --upper-secondary-sticky-fold: 6.625rem;
// Upper tertiary sticky fold // Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 8.875rem; --upper-tertiary-sticky-fold: 8.813rem;
// Lower primary sticky fold // Lower primary sticky fold
--lower-primary-sticky-fold: 3.25rem; --lower-primary-sticky-fold: 3.25rem;
// Lower secondary sticky fold // Lower secondary sticky fold
@@ -350,7 +350,7 @@
// Upper secondary sticky fold // Upper secondary sticky fold
--upper-secondary-sticky-fold: 7.125rem; --upper-secondary-sticky-fold: 7.125rem;
// Upper tertiary sticky fold // Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 9.625rem; --upper-tertiary-sticky-fold: 9.5rem;
// Lower primary sticky fold // Lower primary sticky fold
--lower-primary-sticky-fold: 3.5rem; --lower-primary-sticky-fold: 3.5rem;
// Lower secondary sticky fold // Lower secondary sticky fold

42
components/app/Announcement.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<div class="bg-dividerLight border-b border-divider flex justify-between"> <div class="bg-error flex justify-between">
<span class="flex"> <span
<SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6"
blank
class=" class="
flex flex
py-2 py-2
@@ -15,40 +12,15 @@
group group
" "
> >
<i class="mr-4 material-icons">science</i> <i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark"> <span class="text-secondaryDark">
<span class="md:hidden"> Beta Layout </span> <span class="md:hidden">
{{ $t("helpers.offline_short") }}
</span>
<span class="hidden md:inline"> <span class="hidden md:inline">
You're currently viewing an experimental beta layout {{ $t("helpers.offline") }}
</span> </span>
</span> </span>
<span
class="
border-l border-divider
flex
font-semibold
text-accent
ml-4
pl-4
transition
items-center
justify-center
group-hover:text-accentDark
"
>
<span class="md:hidden"> Give Feedback </span>
<span class="hidden md:inline"> Report a problem </span>
</span> </span>
</SmartLink>
<SmartLink
to="https://hoppscotch.io"
class="flex transition items-center justify-center group"
>
<span class="text-secondaryDark">
Switch back to the Hoppscotch website
</span>
</SmartLink>
</span>
<ButtonSecondary icon="close" />
</div> </div>
</template> </template>

5
components/app/Header.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div>
<header class="flex flex-1 py-2 px-4 items-center justify-between"> <header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold flex-shrink-0 inline-flex items-center"> <div class="font-bold flex-shrink-0 inline-flex items-center">
<AppLogo /> Hoppscotch
</div> </div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center"> <div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="flex mx-2 mt-1" /> <AppGitHubStarButton class="flex mx-2 mt-1" />
@@ -48,6 +49,8 @@
</div> </div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" /> <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</header> </header>
<AppAnnouncement v-if="!isOnLine" />
</div>
</template> </template>
<script> <script>

2
components/app/Search.vue
View File

@@ -34,7 +34,7 @@
v-for="(map, mapIndex) in filteredMappings" v-for="(map, mapIndex) in filteredMappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
> >
<h5 class="font-normal my-2 text-secondaryLight py-2 px-4"> <h5 class="my-2 text-secondaryLight py-2 px-4">
{{ map.section }} {{ map.section }}
</h5> </h5>
<div <div

2
components/app/Section.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<section :id="label.toLowerCase()" class="flex flex-col flex-1"> <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
<slot></slot> <slot></slot>
</section> </section>
</template> </template>

2
components/app/Share.vue
View File

@@ -24,7 +24,7 @@
</a> </a>
<button class="share-link" @click="copyAppLink"> <button class="share-link" @click="copyAppLink">
<span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span> <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
<span class="font-medium mt-3"> <span class="mt-3">
{{ $t("app.copy") }} {{ $t("app.copy") }}
</span> </span>
</button> </button>

9
components/app/Shortcuts.vue
View File

@@ -15,7 +15,11 @@
> >
<h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3> <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
<div class="flex"> <div class="flex">
<ButtonSecondary icon="close" @click.native="close()" /> <ButtonSecondary
icon="close"
class="rounded"
@click.native="close()"
/>
</div> </div>
</div> </div>
<div class="border-b border-dividerLight"> <div class="border-b border-dividerLight">
@@ -28,7 +32,6 @@
border border-dividerLight border border-dividerLight
rounded rounded
flex flex
font-semibold font-mono
w-full w-full
py-2 py-2
pr-2 pr-2
@@ -54,7 +57,7 @@
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6" class="space-y-4 py-4 px-6"
> >
<h5 class="font-bold text-secondaryDark"> <h5 class="font-semibold text-secondaryDark">
{{ map.section }} {{ map.section }}
</h5> </h5>
<div <div

2
components/app/Sidenav.vue
View File

@@ -130,7 +130,7 @@ export default defineComponent({
span { span {
@apply mt-2; @apply mt-2;
@apply font-semibold; @apply font-font-medium;
} }
&.exact-active-link { &.exact-active-link {

1
components/button/Primary.vue
View File

@@ -11,6 +11,7 @@
items-center items-center
justify-center justify-center
focus:outline-none focus:outline-none
focus-visible:bg-accentDark
" "
:class="[ :class="[
color color

16
components/button/Secondary.vue
View File

@@ -4,7 +4,7 @@
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class=" class="
font-semibold font-medium
py-2 py-2
transition transition
inline-flex inline-flex
@@ -12,13 +12,14 @@
justify-center justify-center
hover:bg-primaryDark hover:bg-primaryDark
focus:outline-none focus:outline-none
focus-visible:bg-primaryDark
" "
:class="[ :class="[
color color
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)` ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
: 'text-secondary hover:text-secondaryDark focus:text-secondaryDark', : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
label ? 'px-4' : 'px-2', label ? 'rounded px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded', { 'rounded-full': rounded },
{ 'opacity-75 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse }, { 'flex-row-reverse': reverse },
{ 'px-6 py-4 text-lg': large }, { 'px-6 py-4 text-lg': large },
@@ -53,14 +54,7 @@
<kbd <kbd
v-for="(key, index) in shortcut" v-for="(key, index) in shortcut"
:key="`key-${index}`" :key="`key-${index}`"
class=" class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
bg-dividerLight
rounded
text-secondaryLight
ml-1
px-1
inline-flex
"
> >
{{ key }} {{ key }}
</kbd> </kbd>

1
components/collections/ChooseType.vue
View File

@@ -21,7 +21,6 @@
bg-primaryLight bg-primaryLight
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold
w-full w-full
py-2 py-2
px-4 px-4

2
components/collections/SaveRequest.vue
View File

@@ -16,7 +16,7 @@
{{ $t("request.name") }} {{ $t("request.name") }}
</label> </label>
</div> </div>
<label class="font-semibold px-4 pt-4 pb-4"> <label class="px-4 pt-4 pb-4">
{{ $t("collection.select_location") }} {{ $t("collection.select_location") }}
</label> </label>
<CollectionsGraphql <CollectionsGraphql

4
components/collections/graphql/Collection.vue
View File

@@ -20,9 +20,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

4
components/collections/graphql/Folder.vue
View File

@@ -20,9 +20,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

5
components/collections/graphql/Request.vue
View File

@@ -12,7 +12,6 @@
class=" class="
cursor-pointer cursor-pointer
flex flex
font-mono font-bold
mx-2 mx-2
w-12 w-12
justify-center justify-center
@@ -28,9 +27,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

2
components/collections/graphql/index.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight bg-primaryLight
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold font-mono
w-full w-full
py-2 py-2
pr-2 pr-2
@@ -30,6 +29,7 @@
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"
:label="$t('new')" :label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)" @click.native="displayModalAdd(true)"
/> />
<ButtonSecondary <ButtonSecondary

13
components/collections/index.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight bg-primaryLight
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold font-mono
w-full w-full
py-2 py-2
pr-2 pr-2
@@ -42,6 +41,7 @@
" "
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
disabled disabled
class="rounded-none"
icon="add" icon="add"
:title="$t('team.no_access')" :title="$t('team.no_access')"
:label="$t('new')" :label="$t('new')"
@@ -50,8 +50,17 @@
v-else v-else
icon="add" icon="add"
:label="$t('new')" :label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)" @click.native="displayModalAdd(true)"
/> />
<span class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/"
blank
:title="$t('wiki')"
icon="help_outline"
/>
<ButtonSecondary <ButtonSecondary
v-if="!saveRequest" v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -63,6 +72,7 @@
:title="$t('modal.import_export')" :title="$t('modal.import_export')"
@click.native="displayModalImportExport(true)" @click.native="displayModalImportExport(true)"
/> />
</span>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
@@ -99,7 +109,6 @@
v-if="collections.length === 0" v-if="collections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-center pb-4"> <span class="text-center pb-4">
{{ $t("empty.collections") }} {{ $t("empty.collections") }}
</span> </span>

4
components/collections/my/Collection.vue
View File

@@ -20,9 +20,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

4
components/collections/my/Folder.vue
View File

@@ -20,9 +20,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

5
components/collections/my/Request.vue
View File

@@ -12,7 +12,6 @@
class=" class="
cursor-pointer cursor-pointer
flex flex
font-mono font-bold
mx-2 mx-2
w-12 w-12
justify-center justify-center
@@ -36,9 +35,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

4
components/collections/teams/Collection.vue
View File

@@ -12,9 +12,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

4
components/collections/teams/Folder.vue
View File

@@ -12,9 +12,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

5
components/collections/teams/Request.vue
View File

@@ -5,7 +5,6 @@
class=" class="
cursor-pointer cursor-pointer
flex flex
font-mono font-bold
mx-2 mx-2
w-12 w-12
justify-center justify-center
@@ -29,9 +28,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

12
components/environments/Edit.vue
View File

@@ -17,7 +17,7 @@
</label> </label>
</div> </div>
<div class="flex flex-1 justify-between items-center"> <div class="flex flex-1 justify-between items-center">
<label for="variableList" class="font-semibold p-4"> <label for="variableList" class="p-4">
{{ $t("env_variable_list") }} {{ $t("env_variable_list") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -25,12 +25,14 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('clear')"
:icon="clearIcon" :icon="clearIcon"
class="rounded"
@click.native="clearContent()" @click.native="clearContent()"
/> />
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
icon="add" icon="add"
:title="$t('add.new')" :title="$t('add.new')"
class="rounded"
@click.native="addEnvironmentVariable" @click.native="addEnvironmentVariable"
/> />
</div> </div>
@@ -45,9 +47,7 @@
v-model="variable.key" v-model="variable.key"
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate
@@ -60,9 +60,7 @@
v-model="variable.value" v-model="variable.value"
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate

4
components/environments/Environment.vue
View File

@@ -9,9 +9,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

2
components/environments/index.vue
View File

@@ -18,7 +18,6 @@
bg-primaryLight bg-primaryLight
border-b border-dividerLight border-b border-dividerLight
flex flex
font-semibold
w-full w-full
py-2 py-2
px-4 px-4
@@ -43,6 +42,7 @@
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"
:label="$t('new')" :label="$t('new')"
class="rounded-none"
@click.native="displayModalAdd(true)" @click.native="displayModalAdd(true)"
/> />
<ButtonSecondary <ButtonSecondary

2
components/firebase/Login.vue
View File

@@ -64,7 +64,7 @@
<i class="text-accent material-icons !text-4xl"> <i class="text-accent material-icons !text-4xl">
mark_email_unread mark_email_unread
</i> </i>
<h3 class="font-bold my-2 text-center text-lg"> <h3 class="my-2 text-center text-lg">
{{ $t("auth.we_sent_magic_link") }} {{ $t("auth.we_sent_magic_link") }}
</h3> </h3>
<p class="text-center"> <p class="text-center">

8
components/graphql/Field.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<div> <div>
<div <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
class="font-semibold field-title"
:class="{ 'field-highlighted': isHighlighted }"
>
{{ fieldName }} {{ fieldName }}
<span v-if="fieldArgs.length > 0"> <span v-if="fieldArgs.length > 0">
( (
@@ -32,7 +29,6 @@
v-if="gqlField.isDeprecated" v-if="gqlField.isDeprecated"
class=" class="
rounded rounded
font-semibold
bg-yellow-200 bg-yellow-200
my-1 my-1
text-black text-black
@@ -48,7 +44,7 @@
<h5 class="my-2">Arguments:</h5> <h5 class="my-2">Arguments:</h5>
<div class="border-divider border-l-2 pl-4"> <div class="border-divider border-l-2 pl-4">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`"> <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span class="font-semibold"> <span>
{{ field.name }}: {{ field.name }}:
<GraphqlTypeLink <GraphqlTypeLink
:gql-type="field.type" :gql-type="field.type"

1
components/graphql/Request.vue
View File

@@ -11,7 +11,6 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
font-semibold font-mono
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2

38
components/graphql/RequestOptions.vue
View File

@@ -17,7 +17,7 @@
gqlRunQuery gqlRunQuery
" "
> >
<label for="gqlQuery" class="font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("query") }} {{ $t("query") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -25,7 +25,7 @@
:label="$t('run')" :label="$t('run')"
:shortcut="[getSpecialKey(), 'Enter']" :shortcut="[getSpecialKey(), 'Enter']"
icon="play_arrow" icon="play_arrow"
class="!text-accent" class="rounded-none !text-accent"
@click.native="runQuery()" @click.native="runQuery()"
/> />
<ButtonSecondary <ButtonSecondary
@@ -83,7 +83,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("variables") }} {{ $t("variables") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -126,7 +126,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("headers") }} {{ $t("headers") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -163,9 +163,8 @@
styles=" styles="
bg-primaryLight bg-primaryLight
flex flex
font-semibold font-mono
flex-1 flex-1
py-2 py-1
px-4 px-4
truncate truncate
focus:outline-none focus:outline-none
@@ -181,9 +180,7 @@
<input <input
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
w-full
py-2 py-2
px-4 px-4
truncate truncate
@@ -248,13 +245,13 @@
justify-center justify-center
" "
> >
<i class="opacity-75 pb-2 material-icons">post_add</i>
<span class="text-center pb-4"> <span class="text-center pb-4">
{{ $t("empty.headers") }} {{ $t("empty.headers") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
:label="$t('add.new')" :label="$t('add.new')"
outline outline
icon="add"
@click.native="addRequestHeader" @click.native="addRequestHeader"
/> />
</div> </div>
@@ -273,6 +270,7 @@
<script lang="ts"> <script lang="ts">
import { import {
defineComponent, defineComponent,
onMounted,
PropType, PropType,
ref, ref,
useContext, useContext,
@@ -335,8 +333,24 @@ export default defineComponent({
const showSaveRequestModal = ref(false) const showSaveRequestModal = ref(false)
const schema = useReadonlyStream(props.conn.schemaString$, "") const schema = useReadonlyStream(props.conn.schemaString$, "")
watch(schema, () => { watch(
console.log(schema.value) headers,
() => {
console.log("changed")
if (
(headers.value[headers.value.length - 1]?.key !== "" ||
headers.value[headers.value.length - 1]?.value !== "") &&
headers.value.length
)
addRequestHeader()
},
{ deep: true }
)
onMounted(() => {
if (!headers.value?.length) {
addRequestHeader()
}
}) })
const copyQuery = () => { const copyQuery = () => {

6
components/graphql/Response.vue
View File

@@ -14,7 +14,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold" for="responseField"> <label class="font-semibold text-secondaryLight">
{{ $t("response") }} {{ $t("response") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -59,7 +59,7 @@
justify-center 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"> <div class="flex flex-col space-y-4 items-end">
<span class="flex flex-1 items-center"> <span class="flex flex-1 items-center">
{{ $t("shortcut.send_request") }} {{ $t("shortcut.send_request") }}
@@ -94,8 +94,10 @@
<ButtonSecondary <ButtonSecondary
:label="$t('documentation')" :label="$t('documentation')"
to="https://docs.hoppscotch.io" to="https://docs.hoppscotch.io"
icon="open_in_new"
blank blank
outline outline
reverse
/> />
</div> </div>
</AppSection> </AppSection>

3
components/graphql/Sidebar.vue
View File

@@ -20,7 +20,6 @@
class=" class="
bg-primaryLight bg-primaryLight
flex flex
font-semibold font-mono
w-full w-full
py-2 py-2
pr-2 pr-2
@@ -150,7 +149,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("schema") }} {{ $t("schema") }}
</label> </label>
<div class="flex"> <div class="flex">

5
components/graphql/Type.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<div :id="`type_${gqlType.name}`" class="p-4"> <div :id="`type_${gqlType.name}`" class="p-4">
<div <div class="type-title" :class="{ 'text-accent': isHighlighted }">
class="font-semibold type-title"
:class="{ 'text-accent': isHighlighted }"
>
<span v-if="isInput" class="text-accent">input </span> <span v-if="isInput" class="text-accent">input </span>
<span v-else-if="isInterface" class="text-accent">interface </span> <span v-else-if="isInterface" class="text-accent">interface </span>
<span v-else-if="isEnum" class="text-accent">enum </span> <span v-else-if="isEnum" class="text-accent">enum </span>

1
components/graphql/TypeLink.vue
View File

@@ -1,7 +1,6 @@
<template> <template>
<span <span
:class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'" :class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
class="font-mono"
@click="jumpToType" @click="jumpToType"
> >
{{ typeString }} {{ typeString }}

13
components/history/graphql/Card.vue
View File

@@ -4,9 +4,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2
@@ -51,14 +49,7 @@
<span <span
v-for="(line, index) in query" v-for="(line, index) in query"
:key="`line-${index}`" :key="`line-${index}`"
class=" class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
cursor-pointer
font-mono
text-secondaryLight
px-4
whitespace-pre
truncate
"
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="useEntry" @click="useEntry"
>{{ line }}</span >{{ line }}</span

1
components/history/index.vue
View File

@@ -17,7 +17,6 @@
class=" class="
bg-primaryLight bg-primaryLight
flex flex
font-semibold font-mono
w-full w-full
py-2 py-2
pr-2 pr-2

15
components/history/rest/Card.vue
View File

@@ -1,16 +1,7 @@
<template> <template>
<div class="flex items-center group"> <div class="flex items-center group">
<span <span
class=" class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
items-center
truncate
"
:class="entryStatus.className" :class="entryStatus.className"
data-testid="restore_history_entry" data-testid="restore_history_entry"
:title="duration" :title="duration"
@@ -21,9 +12,7 @@
<span <span
class=" class="
cursor-pointer cursor-pointer
flex flex flex-1
font-semibold
flex-1
min-w-0 min-w-0
py-2 py-2
pr-2 pr-2

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

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

25
components/http/Body.vue
View File

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

25
components/http/BodyParameters.vue
View File

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

6
components/http/CodegenModal.vue
View File

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

18
components/http/Headers.vue
View File

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

3
components/http/ImportCurl.vue
View File

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

21
components/http/Parameters.vue
View File

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

28
components/http/PreRequestScript.vue
View File

@@ -13,7 +13,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label>
{{ $t("javascript_code") }} {{ $t("javascript_code") }}
</label> </label>
<ButtonSecondary <ButtonSecondary
@@ -24,6 +24,8 @@
icon="help_outline" icon="help_outline"
/> />
</div> </div>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor <SmartJsEditor
v-model="preRequestScript" v-model="preRequestScript"
:options="{ :options="{
@@ -36,6 +38,30 @@
}" }"
complete-mode="pre" 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> </AppSection>
</template> </template>

21
components/http/RawBody.vue
View File

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

16
components/http/Request.vue
View File

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

12
components/http/ResponseMeta.vue
View File

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

14
components/http/TestResult.vue
View File

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

28
components/http/Tests.vue
View File

@@ -13,7 +13,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label>
{{ $t("javascript_code") }} {{ $t("javascript_code") }}
</label> </label>
<ButtonSecondary <ButtonSecondary
@@ -24,6 +24,8 @@
icon="help_outline" icon="help_outline"
/> />
</div> </div>
<div class="flex">
<div class="border-r border-dividerLight w-2/3">
<SmartJsEditor <SmartJsEditor
v-model="testScript" v-model="testScript"
:options="{ :options="{
@@ -36,6 +38,30 @@
}" }"
complete-mode="test" 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> </AppSection>
</template> </template>

4
components/landing/CTA.vue
View File

@@ -19,9 +19,7 @@
> >
<i class="text-accent text-3xl material-icons">{{ cta.icon }}</i> <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
<div class="flex-grow"> <div class="flex-grow">
<h2 <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
>
{{ cta.title }} {{ cta.title }}
</h2> </h2>
<p> <p>

14
components/landing/Features.vue
View File

@@ -1,9 +1,7 @@
<template> <template>
<div class="flex flex-col p-4"> <div class="flex flex-col p-4">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<p class="font-semibold my-4 text-center text-accent tracking-widest"> <p class="my-4 text-center text-accent tracking-widest">FEATURES</p>
FEATURES
</p>
</div> </div>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div <div
@@ -13,15 +11,7 @@
> >
<i class="text-accent text-4xl material-icons">{{ feature.icon }}</i> <i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
<div class="flex-grow"> <div class="flex-grow">
<h2 <h2 class="mt-4 text-lg text-secondaryDark mb-2 transition">
class="
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
"
>
{{ feature.title }} {{ feature.title }}
</h2> </h2>
<p> <p>

8
components/landing/Footer.vue
View File

@@ -2,7 +2,7 @@
<footer class="flex flex-col p-6"> <footer class="flex flex-col p-6">
<nav class="grid gap-4 grid-cols-2 md:grid-cols-4"> <nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Hoppscotch</h4> <h4 class="my-2">Hoppscotch</h4>
<ul class="space-y-4"> <ul class="space-y-4">
<li> <li>
<SmartChangeLanguage /> <SmartChangeLanguage />
@@ -13,7 +13,7 @@
</ul> </ul>
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Solutions</h4> <h4 class="my-2">Solutions</h4>
<ul class="space-y-2"> <ul class="space-y-2">
<li <li
v-for="(item, index) in navigation.solutions" v-for="(item, index) in navigation.solutions"
@@ -28,7 +28,7 @@
</ul> </ul>
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Platform</h4> <h4 class="my-2">Platform</h4>
<ul class="space-y-2"> <ul class="space-y-2">
<li <li
v-for="(item, index) in navigation.platform" v-for="(item, index) in navigation.platform"
@@ -43,7 +43,7 @@
</ul> </ul>
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<h4 class="font-semibold my-2">Company</h4> <h4 class="my-2">Company</h4>
<ul class="space-y-2"> <ul class="space-y-2">
<li <li
v-for="(item, index) in navigation.company" v-for="(item, index) in navigation.company"

2
components/landing/Hero.vue
View File

@@ -3,7 +3,6 @@
<div class="flex flex-col mt-16 items-center justify-center"> <div class="flex flex-col mt-16 items-center justify-center">
<h2 <h2
class=" class="
font-extrabold
text-accent text-center text-accent text-center
leading-none leading-none
tracking-tighter tracking-tighter
@@ -16,7 +15,6 @@
</h2> </h2>
<h3 <h3
class=" class="
font-extrabold
my-4 my-4
text-center text-secondaryDark text-center text-secondaryDark
leading-none leading-none

4
components/landing/Stats.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex font-mono space-x-16 p-6"> <div class="flex space-x-16 p-6">
<div v-for="(stat, index) in stats" :key="`stat-${index}`"> <div v-for="(stat, index) in stats" :key="`stat-${index}`">
<span class="font-bold text-xl"> <span class="text-xl">
{{ stat.count }}<span class="text-secondaryLight">+</span> {{ stat.count }}<span class="text-secondaryLight">+</span>
</span> </span>
<br /> <br />

4
components/landing/Users.vue
View File

@@ -1,9 +1,7 @@
<template> <template>
<div class="bg-primaryLight rounded flex flex-col mx-6 p-4"> <div class="bg-primaryLight rounded flex flex-col mx-6 p-4">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<p class="font-semibold my-4 text-center tracking-widest"> <p class="my-4 text-center tracking-widest">EMPOWERING DEVELOPERS FROM</p>
EMPOWERING DEVELOPERS FROM
</p>
</div> </div>
<div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6"> <div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div <div

30
components/lenses/HeadersRenderer.vue
View File

@@ -1,41 +1,19 @@
<template> <template>
<div class="font-mono p-2"> <div class="p-2">
<div <div
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`header-${index}`" :key="`header-${index}`"
class="flex items-center" class="flex items-center"
> >
<span <span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
class="
flex
font-semibold
min-w-0
p-2
transition
group-hover:text-secondaryDark
"
>
<span class="rounded select-all truncate"> <span class="rounded select-all truncate">
{{ header.key }} {{ header.key }}
</span> </span>
</span> </span>
<span class="flex mx-2 justify-center items-center truncate"> → </span>
<span <span
class=" class="
flex flex flex-1
font-mono font-bold
mx-2
justify-center
items-center
truncate
"
>
→
</span>
<span
class="
flex
font-semibold
flex-1
min-w-0 min-w-0
p-2 p-2
transition transition

3
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
top-lowerSecondaryStickyFold top-lowerSecondaryStickyFold
pl-4
z-10 z-10
sticky sticky
items-center items-center
justify-between justify-between
" "
> >
<label for="body" class="font-semibold px-4"> <label class="font-semibold text-secondaryLight">
{{ $t("response_body") }} {{ $t("response_body") }}
</label> </label>
<div class="flex"> <div class="flex">

3
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
top-lowerSecondaryStickyFold top-lowerSecondaryStickyFold
pl-4
z-10 z-10
sticky sticky
items-center items-center
justify-between justify-between
" "
> >
<label for="body" class="font-semibold px-4"> <label class="font-semibold text-secondaryLight">
{{ $t("response_body") }} {{ $t("response_body") }}
</label> </label>
<div class="flex"> <div class="flex">

3
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
top-lowerSecondaryStickyFold top-lowerSecondaryStickyFold
pl-4
z-10 z-10
sticky sticky
items-center items-center
justify-between justify-between
" "
> >
<label for="body" class="font-semibold px-4"> <label class="font-semibold text-secondaryLight">
{{ $t("response_body") }} {{ $t("response_body") }}
</label> </label>
<div class="flex"> <div class="flex">

3
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
top-lowerSecondaryStickyFold top-lowerSecondaryStickyFold
pl-4
z-10 z-10
sticky sticky
items-center items-center
justify-between justify-between
" "
> >
<label for="body" class="font-semibold px-4"> <label class="font-semibold text-secondaryLight">
{{ $t("response_body") }} {{ $t("response_body") }}
</label> </label>
<div class="flex"> <div class="flex">

3
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -6,13 +6,14 @@
border-b border-dividerLight border-b border-dividerLight
flex flex-1 flex flex-1
top-lowerSecondaryStickyFold top-lowerSecondaryStickyFold
pl-4
z-10 z-10
sticky sticky
items-center items-center
justify-between justify-between
" "
> >
<label for="body" class="font-semibold px-4"> <label class="font-semibold text-secondaryLight">
{{ $t("response_body") }} {{ $t("response_body") }}
</label> </label>
<div class="flex"> <div class="flex">

5
components/realtime/Log.vue
View File

@@ -13,7 +13,9 @@
justify-between justify-between
" "
> >
<label for="log" class="font-semibold py-2">{{ title }}</label> <label for="log" class="font-semibold text-secondaryLight py-2">
{{ title }}
</label>
</div> </div>
<div ref="log" name="log" class="realtime-log"> <div ref="log" name="log" class="realtime-log">
<span v-if="log" class="space-y-2"> <span v-if="log" class="space-y-2">
@@ -65,7 +67,6 @@ export default {
&, &,
span { span {
@apply font-mono font-semibold;
@apply select-text; @apply select-text;
} }

7
components/realtime/Mqtt.vue
View File

@@ -16,7 +16,6 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
font-semibold font-mono
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
@@ -56,7 +55,7 @@
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="pub_topic" class="font-semibold"> <label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
</label> </label>
</div> </div>
@@ -71,7 +70,7 @@
/> />
</div> </div>
<div class="flex flex-1 p-4 items-center justify-between"> <div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold">{{ <label for="mqtt-message" class="font-semibold text-secondaryLight">{{
$t("communication") $t("communication")
}}</label> }}</label>
</div> </div>
@@ -102,7 +101,7 @@
inline-flex inline-flex
" "
> >
<label for="sub_topic" class="font-semibold">{{ <label for="sub_topic" class="font-semibold text-secondaryLight">{{
$t("mqtt.topic") $t("mqtt.topic")
}}</label> }}</label>
</div> </div>

14
components/realtime/Socketio.vue
View File

@@ -17,9 +17,7 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
flex flex flex-1
font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
@@ -38,9 +36,7 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
flex flex flex-1
font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
@@ -81,7 +77,7 @@
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="events" class="font-semibold"> <label for="events" class="font-semibold text-secondaryLight">
{{ $t("events") }} {{ $t("events") }}
</label> </label>
</div> </div>
@@ -97,7 +93,9 @@
/> />
</div> </div>
<div class="flex flex-1 p-4 items-center justify-between"> <div class="flex flex-1 p-4 items-center justify-between">
<label class="font-semibold">{{ $t("communication") }}</label> <label class="font-semibold text-secondaryLight">{{
$t("communication")
}}</label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

18
components/realtime/Sse.vue
View File

@@ -13,9 +13,7 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
flex flex flex-1
font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
@@ -30,7 +28,15 @@
/> />
<label <label
for="url" for="url"
class="bg-primaryLight border border-divider py-2 px-4 truncate" class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
> >
{{ $t("event_type") }} {{ $t("event_type") }}
</label> </label>
@@ -40,9 +46,7 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
flex flex flex-1
font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2

12
components/realtime/Websocket.vue
View File

@@ -14,7 +14,6 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
font-semibold font-mono
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
@@ -54,7 +53,7 @@
justify-between justify-between
" "
> >
<label class="font-semibold"> <label class="font-semibold text-secondaryLight">
{{ $t("websocket.protocols") }} {{ $t("websocket.protocols") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -86,9 +85,7 @@
v-model="protocol.value" v-model="protocol.value"
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate
@@ -166,7 +163,10 @@
> >
<AppSection label="messages"> <AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex"> <div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold"> <label
for="websocket-message"
class="font-semibold text-secondaryLight"
>
{{ $t("communication") }} {{ $t("communication") }}
</label> </label>
</div> </div>

1
components/smart/AccentModePicker.vue
View File

@@ -15,6 +15,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
:class="[{ 'bg-primaryLight': color === active }]" :class="[{ 'bg-primaryLight': color === active }]"
class="rounded"
icon="lens" icon="lens"
:color="color" :color="color"
@click.native="setActiveColor(color)" @click.native="setActiveColor(color)"

6
components/smart/AceEditor.vue
View File

@@ -6,9 +6,7 @@
class=" class="
bg-primaryLight bg-primaryLight
border-t border-divider border-t border-divider
flex flex-nowrap flex flex-nowrap flex-1
font-mono
flex-1
py-1 py-1
px-4 px-4
bottom-0 bottom-0
@@ -23,7 +21,6 @@
:key="`p-${index}`" :key="`p-${index}`"
class=" class="
cursor-pointer cursor-pointer
font-semibold
flex-grow-0 flex-shrink-0 flex-grow-0 flex-shrink-0
text-secondaryLight text-secondaryLight
inline-flex inline-flex
@@ -48,7 +45,6 @@
<SmartItem <SmartItem
v-for="(sibling, siblingIndex) in currentSibling" v-for="(sibling, siblingIndex) in currentSibling"
:key="`p-${index}-sibling-${siblingIndex}`" :key="`p-${index}-sibling-${siblingIndex}`"
class="font-mono"
:label="sibling.key ? sibling.key.value : i" :label="sibling.key ? sibling.key.value : i"
@click.native="goToSibling(sibling)" @click.native="goToSibling(sibling)"
/> />

7
components/smart/AutoComplete.vue
View File

@@ -186,9 +186,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.autocomplete-wrapper { .autocomplete-wrapper {
@apply relative; @apply contents;
@apply flex;
@apply w-full;
input:focus + ul.suggestions, input:focus + ul.suggestions,
ul.suggestions:hover { ul.suggestions:hover {
@@ -211,8 +209,7 @@ export default {
@apply w-full; @apply w-full;
@apply block; @apply block;
@apply py-2 px-4; @apply py-2 px-4;
@apply text-secondaryLight; @apply text-secondary;
@apply font-semibold font-mono;
&:last-child { &:last-child {
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;

1
components/smart/ColorModePicker.vue
View File

@@ -8,6 +8,7 @@
:class="{ :class="{
'bg-primaryLight !text-accent hover:text-accent': color === active, 'bg-primaryLight !text-accent hover:text-accent': color === active,
}" }"
class="rounded"
:icon="getIcon(color)" :icon="getIcon(color)"
@click.native="setBGMode(color)" @click.native="setBGMode(color)"
/> />

2
components/smart/ConfirmModal.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal"> <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<label class="font-semibold"> <label>
{{ title }} {{ title }}
</label> </label>
</div> </div>

4
components/smart/DeletableChip.vue
View File

@@ -2,7 +2,7 @@
<span class="chip"> <span class="chip">
<span><slot></slot></span> <span><slot></slot></span>
<ButtonSecondary <ButtonSecondary
class="p-2 close-button icon" class="rounded p-2 close-button icon"
icon="close" icon="close"
@click.native="$emit('chip-delete')" @click.native="$emit('chip-delete')"
/> />
@@ -19,7 +19,7 @@
@apply pl-4; @apply pl-4;
@apply bg-primaryDark; @apply bg-primaryDark;
@apply text-secondary; @apply text-secondary;
@apply font-mono font-semibold;
@apply border border-divider; @apply border border-divider;
} }

9
components/smart/EnvInput.vue
View File

@@ -464,12 +464,15 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
[contenteditable="true"] { [contenteditable="true"] {
@apply text-secondaryDark;
@apply font-medium;
&:empty { &:empty {
line-height: 1.9; line-height: 1.9;
&::before { &::before {
@apply text-secondary; @apply text-secondaryDark;
@apply opacity-75; @apply opacity-25;
@apply pointer-events-none; @apply pointer-events-none;
content: attr(placeholder); content: attr(placeholder);
@@ -479,7 +482,7 @@ export default defineComponent({
.env-input-container { .env-input-container {
@apply inline-grid; @apply inline-grid;
@apply w-full; @apply flex-1;
} }
.env-input { .env-input {

4
components/smart/Item.vue
View File

@@ -5,7 +5,7 @@
:blank="blank" :blank="blank"
class=" class="
rounded rounded
font-semibold font-medium
py-2 py-2
px-4 px-4
transition transition
@@ -60,7 +60,7 @@
class="flex-1 inline-flex items-start" class="flex-1 inline-flex items-start"
:class="{ 'flex-col': description }" :class="{ 'flex-col': description }"
> >
<div class="font-semibold"> <div>
{{ label }} {{ label }}
</div> </div>
<p v-if="description" class="my-2 text-left text-secondaryLight"> <p v-if="description" class="my-2 text-left text-secondaryLight">

1
components/smart/Modal.vue
View File

@@ -57,6 +57,7 @@
<slot name="actions"></slot> <slot name="actions"></slot>
<ButtonSecondary <ButtonSecondary
v-if="dimissible" v-if="dimissible"
class="rounded"
icon="close" icon="close"
@click.native="close" @click.native="close"
/> />

2
components/smart/Tabs.vue
View File

@@ -97,7 +97,7 @@ export default {
@apply ml-2; @apply ml-2;
@apply text-8px; @apply text-8px;
@apply border border-divider; @apply border border-divider;
@apply font-mono;
@apply rounded; @apply rounded;
@apply text-secondaryLight; @apply text-secondaryLight;
} }

2
components/smart/Toggle.vue
View File

@@ -6,7 +6,7 @@
<label ref="toggle" class="toggle" :class="{ on: on }"> <label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="cursor-pointer font-semibold pl-0 align-middle truncate"> <label class="cursor-pointer pl-0 align-middle truncate">
<slot></slot> <slot></slot>
</label> </label>
</div> </div>

1
components/tab/Primary.vue
View File

@@ -5,7 +5,6 @@
:blank="blank" :blank="blank"
class=" class="
rounded rounded
font-semibold
py-2 py-2
px-4 px-4
transition transition

1
components/tab/Secondary.vue
View File

@@ -4,7 +4,6 @@
:exact="exact" :exact="exact"
:blank="blank" :blank="blank"
class=" class="
font-semibold
flex-1 flex-1
py-2 py-2
transform transform

18
components/teams/Edit.vue
View File

@@ -17,7 +17,7 @@
</label> </label>
</div> </div>
<div class="flex flex-1 justify-between items-center"> <div class="flex flex-1 justify-between items-center">
<label for="memberList" class="font-semibold p-4"> <label for="memberList" class="p-4">
{{ $t("team.members") }} {{ $t("team.members") }}
</label> </label>
<div class="flex"> <div class="flex">
@@ -37,9 +37,7 @@
<input <input
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate
@@ -62,9 +60,7 @@
<input <input
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate
@@ -114,9 +110,7 @@
v-model="member.key" v-model="member.key"
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate
@@ -138,9 +132,7 @@
<input <input
class=" class="
bg-primaryLight bg-primaryLight
flex flex flex-1
font-semibold font-mono
flex-1
py-2 py-2
px-4 px-4
truncate truncate

7
components/teams/Team.vue
View File

@@ -3,12 +3,7 @@
<div class="flex flex-1 items-start"> <div class="flex flex-1 items-start">
<div class="p-4"> <div class="p-4">
<label <label
class=" class="cursor-pointer transition hover:text-secondaryDark"
cursor-pointer
font-semibold
transition
hover:text-secondaryDark
"
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''" @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
> >
{{ team.name || $t("nothing_found") }} {{ team.name || $t("nothing_found") }}

2
components/teams/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<AppSection label="teams"> <AppSection label="teams">
<h4 class="font-bold text-secondaryDark"> <h4 class="text-secondaryDark">
{{ $t("team.title") }} {{ $t("team.title") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">

3
helpers/types/HoppRESTAuth.ts
View File

@@ -1,10 +1,12 @@
export type HoppRESTAuthNone = { export type HoppRESTAuthNone = {
authType: "none" authType: "none"
authName: "None"
authActive: true authActive: true
} }
export type HoppRESTAuthBasic = { export type HoppRESTAuthBasic = {
authType: "basic" authType: "basic"
authName: "Basic Auth"
authActive: true authActive: true
username: string username: string
@@ -13,6 +15,7 @@ export type HoppRESTAuthBasic = {
export type HoppRESTAuthBearer = { export type HoppRESTAuthBearer = {
authType: "bearer" authType: "bearer"
authName: "Bearer Token"
authActive: true authActive: true
token: string token: string

5
helpers/types/HoppRESTRequest.ts
View File

@@ -115,12 +115,14 @@ export function parseOldAuth(x: any): HoppRESTAuth {
if (!x.auth || x.auth === "None") if (!x.auth || x.auth === "None")
return { return {
authType: "none", authType: "none",
authName: "None",
authActive: true, authActive: true,
} }
if (x.auth === "Basic Auth") if (x.auth === "Basic Auth")
return { return {
authType: "basic", authType: "basic",
authName: "Basic Auth",
authActive: true, authActive: true,
username: x.httpUser, username: x.httpUser,
password: x.httpPassword, password: x.httpPassword,
@@ -129,9 +131,10 @@ export function parseOldAuth(x: any): HoppRESTAuth {
if (x.auth === "Bearer Token") if (x.auth === "Bearer Token")
return { return {
authType: "bearer", authType: "bearer",
authName: "Bearer Token",
authActive: true, authActive: true,
token: x.bearerToken, token: x.bearerToken,
} }
return { authType: "none", authActive: true } return { authType: "none", authName: "None", authActive: true }
} }

20
lang/en-US.json
View File

@@ -13,7 +13,8 @@
"turn_on": "Turn on", "turn_on": "Turn on",
"turn_off": "Turn off", "turn_off": "Turn off",
"dismiss": "Dismiss", "dismiss": "Dismiss",
"copy": "Copy" "copy": "Copy",
"learn_more": "Learn more"
}, },
"confirm": { "confirm": {
"logout": "Are you sure you want to logout?", "logout": "Are you sure you want to logout?",
@@ -32,13 +33,15 @@
"team_name": "Team name empty", "team_name": "Team name empty",
"collection": "Collection is empty", "collection": "Collection is empty",
"folder": "Folder is empty", "folder": "Folder is empty",
"parameters": "Parameters are empty", "parameters": "This request does not have any parameters",
"history": "History is empty", "history": "History is empty",
"headers": "Headers are empty", "headers": "This request does not have any headers",
"tests": "Tests are empty", "tests": "Tests are empty",
"schema": "Connect to a GraphQL endpoint", "schema": "Connect to a GraphQL endpoint",
"teams": "Teams are empty", "teams": "Teams are empty",
"members": "Team is empty" "members": "Team is empty",
"body": "This request does not have a body",
"authorization": "This request does not use any authorization"
}, },
"count": { "count": {
"message": "Message {count}", "message": "Message {count}",
@@ -244,6 +247,13 @@
"something_went_wrong": "Something went wrong", "something_went_wrong": "Something went wrong",
"check_console_details": "Check console log for details." "check_console_details": "Check console log for details."
}, },
"helpers": {
"authorization": "The authorization header will be automatically generated when you send the request.",
"pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
"post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
"offline_short": "You seem to be offline.",
"offline": "You seem to be offline. Data in this workspace might not be up to date."
},
"options": "Options", "options": "Options",
"communication": "Communication", "communication": "Communication",
"endpoint": "Endpoint", "endpoint": "Endpoint",
@@ -288,7 +298,7 @@
"event_type": "Event type", "event_type": "Event type",
"variables": "Variables", "variables": "Variables",
"get_schema": "Get schema", "get_schema": "Get schema",
"header_list": "Header list", "header_list": "Header List",
"response": "Response", "response": "Response",
"query": "Query", "query": "Query",
"queries": "Queries", "queries": "Queries",

1
layouts/default.vue
View File

@@ -16,7 +16,6 @@
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes :dbl-click-splitter="false" horizontal>
<Pane v-if="!ZEN_MODE" style="height: auto"> <Pane v-if="!ZEN_MODE" style="height: auto">
<!-- <AppAnnouncement /> -->
<AppHeader /> <AppHeader />
</Pane> </Pane>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane class="flex flex-1 hide-scrollbar !overflow-auto">

4
layouts/error.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="page page-error"> <div class="page page-error">
<h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1> <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
<h3 class="font-mono font-semibold select-text">{{ message }}</h3> <h3 class="select-text">{{ message }}</h3>
<p class="mt-4"> <p class="mt-4">
<ButtonSecondary to="/" icon="home" outline :label="$t('home')" /> <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
<ButtonSecondary <ButtonSecondary

1
newstore/RESTSession.ts
View File

@@ -28,6 +28,7 @@ const defaultRESTRequest: HoppRESTRequest = {
method: "GET", method: "GET",
auth: { auth: {
authType: "none", authType: "none",
authName: "None",
authActive: true, authActive: true,
}, },
preRequestScript: "// pw.env.set('variable', 'value');", preRequestScript: "// pw.env.set('variable', 'value');",

6
pages/documentation.vue
View File

@@ -5,14 +5,13 @@
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="import"> <AppSection label="import">
<div class="flex p-4 items-start justify-between"> <div class="flex p-4 items-start justify-between">
<label class="font-semibold"> <label>
{{ $t("generate_docs_message") }} {{ $t("generate_docs_message") }}
</label> </label>
<span <span
class=" class="
bg-accentDark bg-accentDark
rounded rounded
font-semibold
text-accentContrast text-accentContrast
py-1 py-1
px-2 px-2
@@ -34,11 +33,12 @@
sticky sticky
" "
> >
<label for="collectionUpload" class="font-semibold"> <label for="collectionUpload">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
title="JSON" title="JSON"
icon="folder" icon="folder"
class="rounded-none"
:label="$t('import.collections')" :label="$t('import.collections')"
@click.native="$refs.collectionUpload.click()" @click.native="$refs.collectionUpload.click()"
/> />

2
pages/enter.vue
View File

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

2
pages/index.vue
View File

@@ -27,7 +27,7 @@
</SmartTab> </SmartTab>
<SmartTab :id="'authorization'" :label="$t('authorization')"> <SmartTab :id="'authorization'" :label="$t('authorization')">
<HttpAuth /> <HttpAuthorization />
</SmartTab> </SmartTab>
<SmartTab <SmartTab

23
pages/settings.vue
View File

@@ -17,7 +17,7 @@
</div> </div>
<div v-else class="space-y-8"> <div v-else class="space-y-8">
<section> <section>
<h4 class="font-bold text-secondaryDark">User</h4> <h4 class="font-semibold text-secondaryDark">User</h4>
<div class="space-y-4 py-4"> <div class="space-y-4 py-4">
<div class="flex items-start"> <div class="flex items-start">
<div class="flex items-center"> <div class="flex items-center">
@@ -29,7 +29,7 @@
<i v-else class="material-icons">account_circle</i> <i v-else class="material-icons">account_circle</i>
</div> </div>
<div class="ml-4"> <div class="ml-4">
<label class="font-semibold"> <label>
{{ currentUser.displayName || $t("nothing_found") }} {{ currentUser.displayName || $t("nothing_found") }}
</label> </label>
<p class="mt-1 text-secondaryLight"> <p class="mt-1 text-secondaryLight">
@@ -42,7 +42,7 @@
<i class="material-icons">email</i> <i class="material-icons">email</i>
</div> </div>
<div class="ml-4"> <div class="ml-4">
<label class="font-semibold"> <label>
{{ currentUser.email || $t("nothing_found") }} {{ currentUser.email || $t("nothing_found") }}
</label> </label>
<p class="mt-1 text-secondaryLight"> <p class="mt-1 text-secondaryLight">
@@ -54,7 +54,7 @@
</section> </section>
<Teams v-if="currentBackendUser && currentBackendUser.eaInvited" /> <Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
<section> <section>
<h4 class="font-bold text-secondaryDark">Sync</h4> <h4 class="font-semibold text-secondaryDark">Sync</h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
These settings are synced to cloud. These settings are synced to cloud.
</div> </div>
@@ -104,7 +104,7 @@
</div> </div>
<div class="space-y-8 p-8 md:col-span-2"> <div class="space-y-8 p-8 md:col-span-2">
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("background") }} {{ $t("background") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
@@ -123,7 +123,7 @@
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("settings.accent_color") }} {{ $t("settings.accent_color") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
@@ -134,7 +134,7 @@
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("settings.font_size") }} {{ $t("settings.font_size") }}
</h4> </h4>
<div class="mt-4"> <div class="mt-4">
@@ -142,7 +142,7 @@
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("settings.language") }} {{ $t("settings.language") }}
</h4> </h4>
<div class="mt-4"> <div class="mt-4">
@@ -150,7 +150,7 @@
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("settings.experiments") }} {{ $t("settings.experiments") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
@@ -218,7 +218,7 @@
</div> </div>
<div class="space-y-8 p-8 md:col-span-2"> <div class="space-y-8 p-8 md:col-span-2">
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("extensions") }} {{ $t("extensions") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
@@ -270,7 +270,7 @@
</div> </div>
</section> </section>
<section> <section>
<h4 class="font-bold text-secondaryDark"> <h4 class="font-semibold text-secondaryDark">
{{ $t("proxy") }} {{ $t("proxy") }}
</h4> </h4>
<div class="mt-1 text-secondaryLight"> <div class="mt-1 text-secondaryLight">
@@ -312,6 +312,7 @@
:title="$t('reset_default')" :title="$t('reset_default')"
:icon="clearIcon" :icon="clearIcon"
outline outline
class="rounded"
@click.native="resetProxy" @click.native="resetProxy"
/> />
</div> </div>