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

19
assets/scss/styles.scss
View File

@@ -41,7 +41,7 @@ html {
body {
@apply bg-primary;
@apply text-secondary !text-sm;
@apply text-secondary text-xs;
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@@ -69,14 +69,14 @@ body {
}
.material-icons {
font-size: 1.25rem !important;
font-size: 1rem;
}
.svg-icons {
@apply inline-flex;
@apply flex-shrink-0;
@apply h-5;
@apply w-5;
@apply h-4;
@apply w-4;
}
a {
@@ -166,8 +166,7 @@ hr {
@apply bg-primary;
@apply truncate;
@apply rounded;
@apply font-semibold font-mono;
@apply text-xs;
@apply font-semibold;
@apply border border-divider;
@apply transition;
@apply focus:(outline-none border-accent);
@@ -204,7 +203,7 @@ pre.ace_editor {
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply top-3;
@apply top-2.5;
@apply right-3;
content: "\e313";
@@ -290,13 +289,9 @@ input[type="checkbox"] {
@apply text-primary text-xs;
@apply !font-semibold;
.material-icons {
@apply !text-md;
}
.action {
@apply transition;
@apply text-current text-xs;
@apply text-current;
@apply hover:(opacity-75 no-underline);
}
}

4
assets/scss/themes.scss
View File

@@ -1,5 +1,5 @@
@mixin baseTheme {
--font-sans: "Montserrat", "sans-serif";
--font-sans: "Inter", "sans-serif";
--font-mono: "Roboto Mono", "monospace";
--font-icon: "Material Icons";
}
@@ -41,7 +41,7 @@
// Text color
--secondary-color: theme("colors.true-gray.600");
// Light Text color
--secondary-light-color: theme("colors.true-gray.400");
--secondary-light-color: theme("colors.true-gray.500");
// Dark Text color
--secondary-dark-color: theme("colors.true-gray.800");
// Border color

8
components/app/Announcement.vue
View File

@@ -13,7 +13,7 @@
blank
class="
flex
py-3
py-2
px-4
transition
relative
@@ -23,7 +23,7 @@
"
>
<i class="mr-4 material-icons">science</i>
<span class="text-secondaryDark text-xs">
<span class="text-secondaryDark">
<span class="md:hidden"> Beta Layout </span>
<span class="hidden md:inline">
You're currently viewing an experimental beta layout
@@ -34,7 +34,7 @@
border-l border-divider
flex
font-semibold
text-accent text-xs
text-accent
ml-4
pl-4
transition
@@ -51,7 +51,7 @@
to="https://hoppscotch.io"
class="flex transition items-center justify-center group"
>
<span class="text-secondaryDark text-xs">
<span class="text-secondaryDark">
Switch back to the Hoppscotch website
</span>
</SmartLink>

4
components/app/Header.vue
View File

@@ -1,6 +1,8 @@
<template>
<header class="flex flex-1 py-2 px-4 items-center justify-between">
<div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
<div
class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center"
>
<AppLogo class="h-6 mr-4" /> Hoppscotch
</div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center">

58
components/app/Shortcuts.vue
View File

@@ -20,30 +20,38 @@
<ButtonSecondary icon="close" @click.native="close()" />
</div>
</div>
<div class="p-4">
<div
v-for="(shortcut, index) in shortcuts"
:key="`shortcut-${index}`"
class="flex items-center"
>
<kbd
v-for="(key, keyIndex) in shortcut.keys"
:key="`shortcut-${index}-key-${keyIndex}`"
class="
border border-divider
rounded
font-bold
m-1
text-xs
py-1
px-2
divide-y divide-dividerLight
flex flex-col flex-1
overflow-auto
hide-scrollbar
"
>
{{ key }}
</kbd>
<span class="flex text-xs ml-4">
<div
v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`"
class="space-y-4 p-4"
>
<h5 class="font-bold text-secondaryDark text-base">
{{ map.section }}
</h5>
<div
v-for="(shortcut, shortcutIndex) in map.shortcuts"
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
class="flex items-center"
>
<span class="flex flex-1 text-secondaryLight mr-4">
{{ shortcut.label }}
</span>
<span
v-for="(key, keyIndex) in shortcut.keys"
:key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
class="bg-dividerLight rounded ml-1 py-1 px-2 inline-flex"
>
{{ key }}
</span>
</div>
</div>
</div>
</template>
@@ -59,6 +67,9 @@ export default {
},
data() {
return {
mappings: [
{
section: "General",
shortcuts: [
{
keys: [this.getSpecialKey(), "G"],
@@ -76,12 +87,17 @@ export default {
keys: [this.getSpecialKey(), "I"],
label: this.$t("reset_request"),
},
],
},
{
keys: ["Alt", "▲"],
section: "Request",
shortcuts: [
{
keys: ["Alt", "↑"],
label: this.$t("select_next_method"),
},
{
keys: ["Alt", "▼"],
keys: ["Alt", "↓"],
label: this.$t("select_previous_method"),
},
{
@@ -105,6 +121,8 @@ export default {
label: this.$t("select_delete_method"),
},
],
},
],
}
},
watch: {

1
components/app/Sidenav.vue
View File

@@ -48,7 +48,6 @@ export default {
span {
@apply mt-2;
@apply text-xs;
@apply font-semibold;
}

5
components/app/SlideOver.vue
View File

@@ -9,12 +9,12 @@
leave-to-class="opacity-0"
>
<div
v-show="show"
v-if="show"
class="inset-0 transition-opacity z-20 fixed"
@keydown.esc="close()"
>
<div
class="bg-black opacity-25 inset-0 absolute"
class="bg-primaryDark opacity-75 inset-0 absolute"
tabindex="0"
@click="close()"
></div>
@@ -23,6 +23,7 @@
<aside
class="
bg-primary
flex flex-col
h-full
max-w-full
shadow-xl

2
components/button/Primary.vue
View File

@@ -4,7 +4,7 @@
:exact="exact"
:blank="blank"
class="
font-semibold
font-bold
py-2
transition
inline-flex

2
components/collections/Add.vue
View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

5
components/collections/AddFolder.vue
View File

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelAddFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

5
components/collections/ChooseType.vue
View File

@@ -22,12 +22,11 @@
border-b border-dividerLight
flex
font-medium
text-xs
w-full
py-3
py-2
px-4
focus:outline-none
select
appearance-none
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>

2
components/collections/Edit.vue
View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEdit" class="font-semibold text-xs px-4 pb-4">{{
<label for="selectLabelEdit" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input

8
components/collections/EditFolder.vue
View File

@@ -8,11 +8,9 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelEditFolder"
class="font-semibold text-xs px-4 pb-4"
>{{ $t("label") }}</label
>
<label for="selectLabelEditFolder" class="font-semibold px-4 pb-4">{{
$t("label")
}}</label>
<input
id="selectLabelEditFolder"
v-model="name"

2
components/collections/EditRequest.vue
View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEditReq" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

6
components/collections/SaveRequest.vue
View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
{{ $t("request_name") }}
</label>
<input
@@ -15,9 +15,7 @@
class="input"
type="text"
/>
<label class="font-semibold text-xs px-4 pt-4 pb-4">
Select Location
</label>
<label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
<CollectionsGraphql
v-if="mode === 'graphql'"
:doc="false"

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

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

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

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlAddFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

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

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -97,7 +88,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
@@ -146,7 +137,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

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

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

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

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditFolder"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

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

@@ -8,10 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditReq"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

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

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -93,7 +84,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
@@ -145,7 +136,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

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

@@ -14,7 +14,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -32,9 +31,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

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

@@ -4,7 +4,7 @@
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="flex flex-col top-10 z-10 sticky"
class="flex flex-col top-8 z-10 sticky"
:class="{ 'bg-primary': !savingMode }"
>
<input
@@ -18,8 +18,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -63,7 +62,7 @@
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-xs text-center">
<span class="text-center">
{{ $t("create_new_collection") }}
</span>
</div>
@@ -72,7 +71,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>

9
components/collections/index.vue
View File

@@ -5,7 +5,7 @@
>
<div
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
:class="{ '!top-10': !saveRequest && !doc }"
:class="{ '!top-8': !saveRequest && !doc }"
>
<input
v-if="!saveRequest"
@@ -18,8 +18,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -98,7 +97,7 @@
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-xs text-center">
<span class="text-center">
{{ $t("create_new_collection") }}
</span>
</div>
@@ -107,7 +106,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>

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

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -114,7 +105,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
@@ -169,7 +160,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

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

@@ -10,15 +10,7 @@
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -98,7 +89,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
@@ -154,7 +145,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

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

@@ -14,7 +14,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -40,9 +39,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

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

@@ -2,15 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -111,7 +102,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder
v-for="(folder, index) in collection.children"
:key="`folder-${folder}`"
@@ -166,7 +157,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("collection_empty") }}
</span>
</div>

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

@@ -2,15 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark
@@ -95,7 +86,7 @@
/>
</tippy>
</div>
<div v-show="showChildren || isFiltered">
<div v-if="showChildren || isFiltered">
<CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`"
@@ -149,7 +140,7 @@
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("folder_empty") }}
</span>
</div>

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

@@ -7,7 +7,6 @@
flex
font-mono font-bold
mx-2
text-xs
w-12
justify-center
items-center
@@ -33,9 +32,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

2
components/environments/Add.vue
View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEnvAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelEnvAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

11
components/environments/Edit.vue
View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelEnvEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
@@ -20,10 +20,7 @@
@keyup.enter="saveEnvironment"
/>
<div class="flex flex-1 justify-between items-center">
<label
for="variableList"
class="font-semibold text-xs px-4 pt-4 pb-4"
>
<label for="variableList" class="font-semibold px-4 pt-4 pb-4">
{{ $t("env_variable_list") }}
</label>
<div>
@@ -58,8 +55,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -73,7 +69,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

13
components/environments/Environment.vue
View File

@@ -1,15 +1,7 @@
<template>
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
text-xs
w-10
justify-center
items-center
truncate
"
class="cursor-pointer flex w-10 justify-center items-center truncate"
@click="$emit('edit-environment')"
>
<i class="material-icons">layers</i>
@@ -20,9 +12,8 @@
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
py-2
pr-2
transition
group-hover:text-secondaryDark

9
components/environments/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<AppSection label="environments">
<div class="bg-primary rounded-t flex flex-col top-10 z-10 sticky">
<div class="bg-primary rounded-t flex flex-col top-8 z-10 sticky">
<div class="select-wrapper">
<select
v-model="selectedEnvironmentIndex"
@@ -10,12 +10,11 @@
border-b border-dividerLight
flex
font-medium
text-xs
w-full
py-3
py-2
px-4
focus:outline-none
select
appearance-none
"
>
<option :value="-1">No environment</option>
@@ -64,7 +63,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">library_add</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("create_new_environment") }}
</span>
</div>

6
components/firebase/Login.vue
View File

@@ -73,13 +73,13 @@
</div>
</template>
<template #footer>
<p v-if="mode === 'sign-in'" class="text-secondaryLight text-xs">
<p v-if="mode === 'sign-in'" class="text-secondaryLight">
By signing in, you are agreeing to our
<SmartAnchor class="link" to="/index" label="Terms of Service" />
and
<SmartAnchor class="link" to="/index" label="Privacy Policy" />.
</p>
<p v-if="mode === 'email'" class="text-secondaryLight text-xs">
<p v-if="mode === 'email'" class="text-secondaryLight">
<SmartAnchor
class="link"
label="← All sign in options"
@@ -88,7 +88,7 @@
</p>
<p
v-if="mode === 'email-sent'"
class="flex flex-1 text-secondaryLight text-xs justify-between"
class="flex flex-1 text-secondaryLight justify-between"
>
<SmartAnchor
class="link"

12
components/graphql/Field.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div
class="font-semibold text-xs field-title"
class="font-semibold field-title"
:class="{ 'field-highlighted': isHighlighted }"
>
{{ fieldName }}
@@ -24,7 +24,7 @@
</div>
<div
v-if="gqlField.description"
class="text-xs text-secondaryLight py-2 field-desc"
class="text-secondaryLight py-2 field-desc"
>
{{ gqlField.description }}
</div>
@@ -35,7 +35,7 @@
font-semibold
bg-yellow-200
my-1
text-xs text-black
text-black
py-1
px-2
inline-block
@@ -45,10 +45,10 @@
{{ $t("deprecated") }}
</div>
<div v-if="fieldArgs.length > 0">
<h5 class="my-2 text-xs">Arguments:</h5>
<h5 class="my-2">Arguments:</h5>
<div class="border-divider border-l-2 pl-4">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span class="font-semibold text-xs">
<span class="font-semibold">
{{ field.name }}:
<GraphqlTypeLink
:gql-type="field.type"
@@ -57,7 +57,7 @@
</span>
<div
v-if="field.description"
class="text-xs text-secondaryLight py-2 field-desc"
class="text-secondaryLight py-2 field-desc"
>
{{ field.description }}
</div>

15
components/graphql/Type.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :id="`type_${gqlType.name}`" class="p-4">
<div
class="font-semibold text-xs type-title"
class="font-semibold type-title"
:class="{ 'text-accent': isHighlighted }"
>
<span v-if="isInput" class="text-accent">input </span>
@@ -9,14 +9,11 @@
<span v-else-if="isEnum" class="text-accent">enum </span>
{{ gqlType.name }}
</div>
<div
v-if="gqlType.description"
class="text-xs text-secondaryLight py-2 type-desc"
>
<div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0">
<h5 class="my-2 text-xs">Interfaces:</h5>
<h5 class="my-2">Interfaces:</h5>
<div
v-for="(gqlInterface, index) in interfaces"
:key="`gqlInterface-${index}`"
@@ -29,7 +26,7 @@
</div>
</div>
<div v-if="children.length > 0" class="mb-2">
<h5 class="my-2 text-xs">Children:</h5>
<h5 class="my-2">Children:</h5>
<GraphqlTypeLink
v-for="(child, index) in children"
:key="`child-${index}`"
@@ -39,7 +36,7 @@
/>
</div>
<div v-if="gqlType.getFields">
<h5 class="my-2 text-xs">Fields:</h5>
<h5 class="my-2">Fields:</h5>
<GraphqlField
v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`"
@@ -50,7 +47,7 @@
/>
</div>
<div v-if="isEnum">
<h5 class="my-2 text-xs">Values:</h5>
<h5 class="my-2">Values:</h5>
<div
v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`"

2
components/graphql/TypeLink.vue
View File

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

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

@@ -2,7 +2,18 @@
<div class="flex flex-col group">
<div class="flex items-center">
<span
class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 pl-4 transition group-hover:text-secondaryDark"
class="
cursor-pointer
flex
font-semibold
flex-1
min-w-0
py-2
pr-2
pl-4
transition
group-hover:text-secondaryDark
"
data-testid="restore_history_entry"
@click="$emit('use-entry')"
>
@@ -40,7 +51,7 @@
<span
v-for="(line, index) in query"
:key="`line-${index}`"
class="cursor-pointer font-mono text-xs text-secondaryLight px-4 truncate"
class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
data-testid="restore_history_entry"
@click="$emit('use-entry')"
>

9
components/history/index.vue
View File

@@ -5,7 +5,7 @@
bg-primaryLight
border-b border-dividerLight
flex
top-10
top-8
z-10
sticky
"
@@ -18,8 +18,7 @@
flex
font-semibold font-mono
flex-1
text-xs
py-3
py-2
px-4
focus:outline-none
"
@@ -60,7 +59,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>
@@ -69,7 +68,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">schedule</i>
<span class="text-xs text-center">
<span class="text-center">
{{ $t("history_empty") }}
</span>
</div>

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

@@ -1,7 +1,16 @@
<template>
<div class="flex items-center group">
<span
class="cursor-pointer flex font-mono font-bold mx-2 text-xs w-12 justify-center items-center truncate"
class="
cursor-pointer
flex
font-mono font-bold
mx-2
w-12
justify-center
items-center
truncate
"
:class="entryStatus.className"
data-testid="restore_history_entry"
:title="duration"
@@ -10,7 +19,17 @@
{{ entry.method }}
</span>
<span
class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 transition group-hover:text-secondaryDark"
class="
cursor-pointer
flex
font-semibold
flex-1
min-w-0
py-2
pr-2
transition
group-hover:text-secondaryDark
"
data-testid="restore_history_entry"
:title="duration"
@click="$emit('use-entry')"

1
components/http/Body.vue
View File

@@ -20,7 +20,6 @@
rounded
flex
font-semibold font-mono
text-xs
w-full
py-2
px-4

6
components/http/BodyParameters.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="reqParamList" class="font-semibold text-xs">
<label for="reqParamList" class="font-semibold">
{{ $t("request_body") }}
</label>
<div class="flex">
@@ -41,7 +41,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -60,7 +59,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

14
components/http/CodegenModal.vue
View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="font-semibold text-xs px-4 pb-4">
<label for="requestType" class="font-semibold px-4 pb-4">
{{ $t("choose_language") }}
</label>
<div class="flex flex-1">
@@ -23,14 +23,13 @@
<span
class="
bg-primaryLight
border-b border-dividerLight
border border-dividerLight
rounded
cursor-pointer
flex
font-semibold
text-xs
w-full
py-3
py-2
px-4
focus:outline-none
"
@@ -51,10 +50,7 @@
</span>
</div>
<div class="flex flex-1 justify-between">
<label
for="generatedCode"
class="font-semibold text-xs px-4 pt-4 pb-4"
>
<label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
{{ $t("generated_code") }}
</label>
<ButtonSecondary
@@ -73,7 +69,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

5
components/http/Headers.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="headerList" class="font-semibold text-xs">
<label for="headerList" class="font-semibold">
{{ $t("header_list") }}
</label>
<div class="flex">
@@ -61,7 +61,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

6
components/http/Parameters.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("parameter_list") }}
</label>
<div class="flex">
@@ -47,7 +47,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -70,7 +69,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none

6
components/http/PreRequestScript.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -29,7 +29,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,

6
components/http/RawBody.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label for="rawBody" class="font-semibold text-xs">
<label for="rawBody" class="font-semibold">
{{ $t("raw_request_body") }}
</label>
<div class="flex">
@@ -55,7 +55,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,

12
components/http/ResponseMeta.vue
View File

@@ -11,7 +11,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>
@@ -28,17 +28,11 @@
<span class="text-secondaryDark"> Status: </span>
{{ response.statusCode || $t("waiting_send_req") }}
</span>
<span
v-if="response.meta && response.meta.responseDuration"
class="text-xs"
>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondaryDark"> Time: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span
v-if="response.meta && response.meta.responseSize"
class="text-xs"
>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondaryDark"> Size: </span>
{{ `${response.meta.responseSize} B` }}
</span>

9
components/http/TestResult.vue
View File

@@ -3,7 +3,7 @@
<div v-if="results.tests">
<span
v-if="results.tests.description"
class="font-semibold text-secondaryDark text-xs"
class="font-semibold text-secondaryDark"
>
{{ results.tests.description }}
</span>
@@ -26,13 +26,10 @@
>
{{ result.status === "pass" ? "check_circle" : "cancel" }}
</i>
<span
v-if="result.message"
class="font-semibold text-secondaryDark text-xs"
>
<span v-if="result.message" class="font-semibold text-secondaryDark">
{{ result.message }}
</span>
<span class="text-secondaryLight text-xs">
<span class="text-secondaryLight">
{{
` \xA0 — \xA0test ${
result.status === "pass" ? $t("passed") : $t("failed")

30
components/http/Tests.vue
View File

@@ -6,14 +6,14 @@
border-b border-dividerLight
flex flex-1
pl-4
top-110px
top-98px
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("javascript_code") }}
</label>
<ButtonSecondary
@@ -29,7 +29,7 @@
:options="{
maxLines: '16',
minLines: '8',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
@@ -37,9 +37,21 @@
complete-mode="test"
/>
<div v-if="testResults">
<div class="flex flex-1 pl-4 items-center justify-between">
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-98px
z-10
sticky
items-center
justify-between
"
>
<div>
<label class="font-semibold text-xs"> Test Report </label>
<label class="font-semibold"> Test Report </label>
</div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -50,15 +62,13 @@
</div>
<div class="flex my-4 items-center">
<div class="ml-4">
<span class="font-semibold text-xs text-red-500">
<span class="font-semibold text-red-500">
{{ failedTests }} failing,
</span>
<span class="font-semibold text-xs text-green-500">
<span class="font-semibold text-green-500">
{{ passedTests }} successful,
</span>
<span class="font-semibold text-xs">
out of {{ totalTests }} tests.
</span>
<span class="font-semibold"> out of {{ totalTests }} tests. </span>
</div>
<div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
<div

1
components/landing/Footer.vue
View File

@@ -158,7 +158,6 @@ export default {
.footer-nav {
@apply px-2 py-1;
@apply -mx-2 -my-1;
@apply text-xs;
@apply hover:text-secondaryDark;
@apply focus:text-secondaryDark;
}

28
components/lenses/HeadersRenderer.vue
View File

@@ -6,19 +6,41 @@
class="flex items-center"
>
<span
class="flex font-semibold text-xs 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="truncate">
{{ header.key }}
</span>
</span>
<span
class="flex font-mono font-bold mx-2 text-xs justify-center items-center truncate"
class="
flex
font-mono font-bold
mx-2
justify-center
items-center
truncate
"
>
→
</span>
<span
class="flex font-semibold flex-1 text-xs min-w-0 p-2 transition group-hover:text-secondaryDark"
class="
flex
font-semibold
flex-1
min-w-0
p-2
transition
group-hover:text-secondaryDark
"
>
<span class="truncate">
{{ header.value }}

2
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartTabs styles="sticky z-10 top-13">
<SmartTabs styles="sticky z-10 top-12">
<SmartTab
v-for="(lens, index) in validLenses"
:id="lens.lensName"

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

@@ -5,14 +5,14 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-23
top-20
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold text-xs px-4">
<label for="body" class="font-semibold px-4">
{{ $t("response_body") }}
</label>
<div>
@@ -48,7 +48,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

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

@@ -5,14 +5,14 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-23
top-20
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold text-xs px-4">
<label for="body" class="font-semibold px-4">
{{ $t("response_body") }}
</label>
<div>

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

@@ -5,14 +5,14 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-23
top-20
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold text-xs px-4">
<label for="body" class="font-semibold px-4">
{{ $t("response_body") }}
</label>
<div>
@@ -42,7 +42,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

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

@@ -5,14 +5,14 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-23
top-20
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold text-xs px-4">
<label for="body" class="font-semibold px-4">
{{ $t("response_body") }}
</label>
<div>
@@ -41,7 +41,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

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

@@ -5,14 +5,14 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-23
top-20
z-10
sticky
items-center
justify-between
"
>
<label for="body" class="font-semibold text-xs px-4">
<label for="body" class="font-semibold px-4">
{{ $t("response_body") }}
</label>
<div>
@@ -41,7 +41,7 @@
:options="{
maxLines: Infinity,
minLines: '16',
fontSize: '14px',
fontSize: '12px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,

6
components/realtime/Log.vue
View File

@@ -13,10 +13,10 @@
justify-between
"
>
<label for="log" class="font-semibold text-xs py-2">{{ title }}</label>
<label for="log" class="font-semibold py-2">{{ title }}</label>
</div>
<div ref="log" name="log" class="realtime-log">
<span v-if="log">
<span v-if="log" class="space-y-2">
<span
v-for="(entry, index) in log"
:key="`entry-${index}`"
@@ -65,7 +65,7 @@ export default {
&,
span {
@apply font-mono;
@apply font-mono font-semibold;
@apply select-text;
}

14
components/realtime/Mqtt.vue
View File

@@ -1,8 +1,8 @@
<template>
<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="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="log" />
</AppSection>
@@ -48,10 +48,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"
>
<AppSection label="messages">
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>

14
components/realtime/Socketio.vue
View File

@@ -1,8 +1,8 @@
<template>
<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="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -59,7 +59,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection>
@@ -68,10 +68,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"
>
<AppSection label="messages">
<label for="event_name">{{ $t("event_name") }}</label>

6
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template>
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<ul>
<li>

19
components/realtime/Websocket.vue
View File

@@ -1,8 +1,8 @@
<template>
<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 class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
@@ -52,7 +52,7 @@
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("protocols") }}
</label>
<div class="flex">
@@ -87,7 +87,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -132,7 +131,7 @@
</div>
</div>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection>
@@ -141,14 +140,14 @@
</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"
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold text-xs pb-4">
<label for="websocket-message" class="font-semibold pb-4">
{{ $t("message") }}
</label>
<input

3
components/smart/AceEditor.vue
View File

@@ -10,6 +10,7 @@
font-mono
flex-1
shadow-lg
py-1
px-4
bottom-0
z-10
@@ -25,7 +26,7 @@
cursor-pointer
font-semibold
flex-grow-0 flex-shrink-0
text-secondaryLight text-xs
text-secondaryLight
inline-flex
items-center
hover:text-secondary

4
components/smart/AutoComplete.vue
View File

@@ -8,7 +8,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -220,8 +219,7 @@ export default {
@apply w-full;
@apply block;
@apply py-2 px-4;
@apply text-xs;
@apply font-mono;
@apply font-semibold font-mono;
&:last-child {
border-radius: 0 0 8px 8px;

2
components/smart/ConfirmModal.vue
View File

@@ -8,7 +8,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ title }}
</label>
</div>

2
components/smart/DeletableChip.vue
View File

@@ -19,7 +19,7 @@
@apply pl-4;
@apply bg-primaryDark;
@apply text-secondary;
@apply font-mono;
@apply font-mono font-semibold;
@apply border border-divider;
}

2
components/smart/Item.vue
View File

@@ -45,7 +45,7 @@
<div class="font-semibold">
{{ label }}
</div>
<p v-if="description" class="my-2 text-xs text-left text-secondaryLight">
<p v-if="description" class="my-2 text-left text-secondaryLight">
{{ description }}
</p>
</div>

2
components/smart/Spinner.vue
View File

@@ -1,6 +1,6 @@
<template>
<svg
class="h-5 animate-spin w-5"
class="h-4 animate-spin w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

3
components/smart/Tabs.vue
View File

@@ -82,10 +82,9 @@ export default {
@apply flex;
@apply items-center;
@apply justify-center;
@apply px-4 py-3;
@apply px-4 py-2;
@apply text-secondary;
@apply font-semibold;
@apply text-xs;
@apply cursor-pointer;
@apply transition;
@apply hover:text-secondaryDark;

20
components/smart/Toggle.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="cursor-pointer flex-nowrap inline-flex" @click="$emit('change')">
<div
class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
@click="$emit('change')"
>
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label
class="cursor-pointer font-semibold text-xs pl-0 align-middle truncate"
>
<label class="cursor-pointer font-semibold pl-0 align-middle truncate">
<slot></slot>
</label>
</div>
@@ -29,15 +30,16 @@ $activeColor: var(--accent-color);
$inactiveColor: var(--divider-color);
$inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--primary-color);
$width: 2rem;
$height: 1rem;
$handleSpacing: 0.25rem;
$width: 1.6rem;
$height: 0.78rem;
$handleSpacing: 0.2rem;
$transition: all 0.2s ease-in-out;
.toggle {
@apply relative;
@apply inline-block;
@apply align-middle;
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply rounded-full;
@apply p-0;
@apply mr-4;

2
components/teams/Add.vue
View File

@@ -6,7 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label for="selectLabelTeamAdd" class="font-semibold text-xs px-4 pb-4">
<label for="selectLabelTeamAdd" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input

7
components/teams/Edit.vue
View File

@@ -6,10 +6,7 @@
</template>
<template #body>
<div class="flex flex-col px-2">
<label
for="selectLabelTeamEdit"
class="font-semibold text-xs px-4 pb-4"
>
<label for="selectLabelTeamEdit" class="font-semibold px-4 pb-4">
{{ $t("label") }}
</label>
<input
@@ -20,7 +17,7 @@
:placeholder="editingTeam.name"
@keyup.enter="saveTeam"
/>
<label for="memberList" class="font-semibold text-xs px-4 pt-4 pb-4">
<label for="memberList" class="font-semibold px-4 pt-4 pb-4">
{{ $t("team_member_list") }}
</label>
<ul

2
components/teams/index.vue
View File

@@ -38,7 +38,7 @@
<p v-if="myTeams.length === 0">
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
</p>
<div v-else class="overflow-auto hide-scrollbar">
<div v-else class="!overflow-auto hide-scrollbar">
<ul class="flex-col">
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
<TeamsTeam

12
layouts/default.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="flex h-screen w-screen">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="flex flex-1 overflow-auto">
<Splitpanes vertical :dbl-click-splitter="false">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="flex flex-1 !overflow-auto">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane
v-if="LEFT_SIDEBAR"
style="width: auto"
@@ -10,13 +10,13 @@
>
<AppSidenav />
</Pane>
<Pane class="flex flex-1 overflow-auto">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="flex flex-1 !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane v-if="!ZEN_MODE" style="height: auto">
<!-- <AppAnnouncement /> -->
<AppHeader />
</Pane>
<Pane class="flex flex-1 overflow-auto">
<Pane class="flex flex-1 !overflow-auto">
<nuxt class="flex flex-1" />
</Pane>
</Splitpanes>

4
layouts/error.vue
View File

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

2
nuxt.config.js
View File

@@ -207,7 +207,7 @@ export default {
googleFonts: {
display: "block",
families: {
Montserrat: [400, 500, 600, 700, 800],
Inter: [400, 500, 600, 700, 800],
"Material+Icons": true,
"Roboto+Mono": true,
},

30
package-lock.json generated
View File

@@ -9,7 +9,7 @@
"dependencies": {
"@apollo/client": "^3.3.21",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/composition-api": "^0.24.7",
"@nuxtjs/composition-api": "^0.25.1",
"@nuxtjs/gtm": "^2.4.0",
"@nuxtjs/robots": "^2.5.0",
"@nuxtjs/sitemap": "^2.4.0",
@@ -5414,11 +5414,11 @@
"dev": true
},
"node_modules/@nuxtjs/composition-api": {
"version": "0.24.7",
"resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
"integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.25.1.tgz",
"integrity": "sha512-YoRVwt8zmdomYeaRM7AcQ8K7jlz/T3vz6Yn5EBVZqYOuQ6e7b987DBrZFbxr6yCsx5ytaihD+nJyDM8+XPfcOw==",
"dependencies": {
"@vue/composition-api": "1.0.0-rc.14",
"@vue/composition-api": "^1.0.4",
"defu": "^5.0.0",
"estree-walker": "^2.0.2",
"fs-extra": "^9.1.0",
@@ -7899,9 +7899,9 @@
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
},
"node_modules/@vue/composition-api": {
"version": "1.0.0-rc.14",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
"integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
"integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
"dependencies": {
"tslib": "^2.3.0"
},
@@ -35791,11 +35791,11 @@
}
},
"@nuxtjs/composition-api": {
"version": "0.24.7",
"resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
"integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.25.1.tgz",
"integrity": "sha512-YoRVwt8zmdomYeaRM7AcQ8K7jlz/T3vz6Yn5EBVZqYOuQ6e7b987DBrZFbxr6yCsx5ytaihD+nJyDM8+XPfcOw==",
"requires": {
"@vue/composition-api": "1.0.0-rc.14",
"@vue/composition-api": "^1.0.4",
"defu": "^5.0.0",
"estree-walker": "^2.0.2",
"fs-extra": "^9.1.0",
@@ -37985,9 +37985,9 @@
}
},
"@vue/composition-api": {
"version": "1.0.0-rc.14",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
"integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
"integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
"requires": {
"tslib": "^2.3.0"
},

2
package.json
View File

@@ -25,7 +25,7 @@
"dependencies": {
"@apollo/client": "^3.3.21",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/composition-api": "^0.24.7",
"@nuxtjs/composition-api": "^0.25.1",
"@nuxtjs/gtm": "^2.4.0",
"@nuxtjs/robots": "^2.5.0",
"@nuxtjs/sitemap": "^2.4.0",

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