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

chore(refactor): modern UI

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-11 22:24:34 +05:30
parent 773423069b
commit 5a7bcf32ea
55 changed files with 936 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
assets/scss/styles.scss
View File

@@ -20,7 +20,6 @@ $responsiveWidth: 768px;
::-webkit-scrollbar { ::-webkit-scrollbar {
@apply h-1; @apply h-1;
@apply w-2; @apply w-2;
@apply rounded-lg;
&:hover { &:hover {
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@@ -28,7 +27,6 @@ $responsiveWidth: 768px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply rounded-lg;
@apply bg-fgLightColor; @apply bg-fgLightColor;
&:hover { &:hover {
@@ -290,6 +288,7 @@ hr {
button { button {
@apply flex-1; @apply flex-1;
@apply m-0; @apply m-0;
@apply p-2;
@apply justify-start; @apply justify-start;
@apply text-left; @apply text-left;
} }
@@ -337,10 +336,7 @@ button {
@apply inline-flex; @apply inline-flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply m-2; @apply p-4;
@apply py-2;
@apply px-4;
@apply rounded-lg;
@apply bg-acColor; @apply bg-acColor;
@apply text-actColor; @apply text-actColor;
@apply font-body; @apply font-body;
@@ -373,10 +369,9 @@ button {
@apply bg-transparent; @apply bg-transparent;
@apply text-fgLightColor; @apply text-fgLightColor;
@apply fill-current; @apply fill-current;
@apply rounded-lg;
@apply outline-none; @apply outline-none;
@apply border-none; @apply border-none;
@apply p-2; @apply rounded-lg;
&:not([disabled]):hover, &:not([disabled]):hover,
&:not([disabled]):active, &:not([disabled]):active,
@@ -389,6 +384,7 @@ button {
&.primary { &.primary {
@apply text-acColor; @apply text-acColor;
@apply px-6;
&:not([disabled]):hover, &:not([disabled]):hover,
&:not([disabled]):active, &:not([disabled]):active,
@@ -473,9 +469,7 @@ textarea,
pre, pre,
code { code {
@apply flex; @apply flex;
@apply m-2; @apply p-4;
@apply p-2;
@apply rounded-lg;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply text-fgColor; @apply text-fgColor;
@apply font-mono; @apply font-mono;
@@ -486,8 +480,7 @@ code {
@apply select-text; @apply select-text;
@apply resize-y; @apply resize-y;
@apply outline-none; @apply outline-none;
@apply w-full;
width: calc(100% - 16px);
&:not([readonly]):not(.ace_editor):hover, &:not([readonly]):not(.ace_editor):hover,
&:not([readonly]):not(.ace_editor):active, &:not([readonly]):not(.ace_editor):active,
@@ -499,6 +492,7 @@ code {
.method { .method {
@apply cursor-pointer; @apply cursor-pointer;
@apply uppercase; @apply uppercase;
@apply rounded-none;
min-width: 128px; min-width: 128px;
@@ -527,6 +521,7 @@ pre {
.select-wrapper { .select-wrapper {
@apply relative; @apply relative;
@apply w-full;
pre, pre,
input { input {
@@ -553,7 +548,7 @@ select {
@apply cursor-pointer; @apply cursor-pointer;
@apply appearance-none; @apply appearance-none;
height: 40px; // height: 40px;
&::-ms-expand { &::-ms-expand {
@apply hidden; @apply hidden;
@@ -613,7 +608,7 @@ input[type="checkbox"] {
} }
label { label {
@apply px-2; @apply p-4;
@apply text-fgLightColor; @apply text-fgLightColor;
@apply text-sm; @apply text-sm;
@apply transition; @apply transition;
@@ -624,15 +619,6 @@ label {
ul, ul,
ol { ol {
@apply flex; @apply flex;
@apply p-0;
@apply list-none;
margin: 4px 0 4px;
ul,
ol {
@apply m-0;
}
} }
ul li, ul li,
@@ -689,8 +675,6 @@ ol li {
#response-details-wrapper { #response-details-wrapper {
@apply relative; @apply relative;
@apply overflow-hidden;
@apply rounded-lg;
textarea { textarea {
@apply m-0; @apply m-0;
@@ -720,6 +704,7 @@ ol li {
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-200;
@apply shadow-lg; @apply shadow-lg;
@apply rounded-lg;
bottom: 86px; bottom: 86px;
left: 50%; left: 50%;

2
components/collections/add-collection.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

2
components/collections/add-folder.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

14
components/collections/collection.vue
View File

@@ -55,7 +55,6 @@
</v-popover> </v-popover>
</div> </div>
</div> </div>
<div v-show="showChildren || isFiltered"> <div v-show="showChildren || isFiltered">
<ul class="flex-col"> <ul class="flex-col">
<li <li
@@ -75,9 +74,6 @@
@edit-request="$emit('edit-request', $event)" @edit-request="$emit('edit-request', $event)"
/> />
</li> </li>
<li v-if="collection.folders.length === 0 && collection.requests.length === 0">
<p class="info">{{ $t("collection_empty") }}</p>
</li>
</ul> </ul>
<ul class="flex-col"> <ul class="flex-col">
<li <li
@@ -96,6 +92,16 @@
/> />
</li> </li>
</ul> </ul>
<ul>
<li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
</p>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>

2
components/collections/edit-collection.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

2
components/collections/edit-folder.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

2
components/collections/edit-request.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

12
components/collections/folder.vue
View File

@@ -51,7 +51,6 @@
</template> </template>
</v-popover> </v-popover>
</div> </div>
<div v-show="showChildren || isFiltered"> <div v-show="showChildren || isFiltered">
<ul class="flex-col"> <ul class="flex-col">
<li <li
@@ -71,7 +70,11 @@
</li> </li>
</ul> </ul>
<ul v-if="folder.folders && folder.folders.length" class="flex-col"> <ul v-if="folder.folders && folder.folders.length" class="flex-col">
<li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name"> <li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
>
<folder <folder
:folder="subFolder" :folder="subFolder"
:folder-index="subFolderIndex" :folder-index="subFolderIndex"
@@ -84,6 +87,11 @@
/> />
</li> </li>
</ul> </ul>
<ul v-if="folder.folders.length === 0 && folder.requests.length === 0">
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>

4
components/collections/import-export-collections.vue
View File

@@ -44,8 +44,8 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start p-2">
<span <span
v-tooltip="{ v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'), content: !fb.currentUser ? $t('login_first') : $t('replace_current'),

50
components/collections/index.vue
View File

@@ -1,15 +1,13 @@
<!--
TODO:
- probably refactor and pass event arguments to modals directly without unpacking
-->
<template> <template>
<pw-section class="yellow" :label="$t('collections')" ref="collections"> <pw-section class="yellow" :label="$t('collections')" ref="collections" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" /> <input
<!-- <button class="icon"> aria-label="Search"
<i class="material-icons">search</i> type="search"
</button> --> :placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div> </div>
<add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" /> <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<edit-collection <edit-collection
@@ -45,28 +43,14 @@ TODO:
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="border-b row-wrapper border-brdColor">
<div class="row-wrapper"> <button class="icon" @click="displayModalAdd(true)">
<div> <i class="material-icons">add</i>
<button class="icon" @click="displayModalAdd(true)"> <span>{{ $t("new") }}</span>
<i class="material-icons">add</i> </button>
<span>{{ $t("new") }}</span> <button class="icon" @click="displayModalImportExport(true)">
</button> {{ $t("import_export") }}
</div> </button>
<div>
<button class="icon" @click="displayModalImportExport(true)">
{{ $t("import_export") }}
</button>
<!-- <a
href="https://github.com/hoppscotch/hoppscotch/wiki/Collections"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help_outline</i>
</button>
</a> -->
</div>
</div> </div>
<p v-if="collections.length === 0" class="info"> <p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }} <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
@@ -90,7 +74,7 @@ TODO:
</ul> </ul>
</div> </div>
<p v-if="filterText && filteredCollections.length === 0" class="info"> <p v-if="filterText && filteredCollections.length === 0" class="info">
{{ $t("nothing_found") }} "{{ filterText }}" <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
</p> </p>
</pw-section> </pw-section>
</template> </template>

2
components/collections/save-request-as.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("token_req_name") }}</label> <label for="selectLabel">{{ $t("token_req_name") }}</label>
<input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" /> <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
<ul> <ul>

2
components/environments/add-environment.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

2
components/environments/edit-environment.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text" type="text"

4
components/environments/import-export-environment.vue
View File

@@ -44,8 +44,8 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start p-2">
<span <span
v-tooltip="{ v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'), content: !fb.currentUser ? $t('login_first') : $t('replace_current'),

41
components/environments/index.vue
View File

@@ -1,26 +1,23 @@
<template> <template>
<pw-section class="green" icon="history" :label="$t('environments')" ref="environments"> <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<ul class="w-full"> <!-- <label for="currentEnvironment">{{ $t("select_environment") }}</label> -->
<li> <span class="select-wrapper">
<label for="currentEnvironment">{{ $t("select_environment") }}</label> <select
<span class="select-wrapper"> id="currentEnvironment"
<select v-model="selectedEnvironmentIndex"
id="currentEnvironment" :disabled="environments.length == 0"
v-model="selectedEnvironmentIndex" class="rounded-t-lg"
:disabled="environments.length == 0" >
> <option :value="-1">No environment</option>
<option :value="-1">No environment</option> <option v-if="environments.length === 0" value="0">
<option v-if="environments.length === 0" value="0"> {{ $t("create_new_environment") }}
{{ $t("create_new_environment") }} </option>
</option> <option v-for="(environment, index) in environments" :value="index" :key="index">
<option v-for="(environment, index) in environments" :value="index" :key="index"> {{ environment.name }}
{{ environment.name }} </option>
</option> </select>
</select> </span>
</span>
</li>
</ul>
</div> </div>
<add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" /> <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<edit-environment <edit-environment
@@ -33,7 +30,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="row-wrapper"> <div class="border-b row-wrapper border-brdColor">
<div> <div>
<button class="icon" @click="displayModalAdd(true)"> <button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i> <i class="material-icons">add</i>

13
components/firebase/feeds.vue
View File

@@ -1,10 +1,9 @@
<template> <template>
<div v-if="fb.currentFeeds.length !== 0" class="virtual-list"> <div
<ul v-if="fb.currentFeeds.length !== 0"
v-for="feed in fb.currentFeeds" class="divide-y virtual-list divide-dashed divide-brdColor"
:key="feed.id" >
class="flex-col py-2 border-b border-dashed border-brdColor" <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
>
<div data-test="list-item" class="show-on-large-screen"> <div data-test="list-item" class="show-on-large-screen">
<li class="info"> <li class="info">
<label data-test="list-label"> <label data-test="list-label">
@@ -24,7 +23,7 @@
</div> </div>
<ul v-else class="flex-col"> <ul v-else class="flex-col">
<li> <li>
<label class="info">{{ $t("empty") }}</label> <p class="info"><i class="material-icons">not_interested</i> {{ $t("empty") }}</p>
</li> </li>
</ul> </ul>
</template> </template>

3
components/firebase/inputform.vue
View File

@@ -8,9 +8,10 @@
v-model="message" v-model="message"
:placeholder="$t('paste_a_note')" :placeholder="$t('paste_a_note')"
@keyup.enter="formPost" @keyup.enter="formPost"
class="rounded-t-lg"
/> />
</div> </div>
<div class="show-on-large-screen"> <div class="border-b show-on-large-screen border-brdColor">
<input <input
:aria-label="$t('label')" :aria-label="$t('label')"
type="text" type="text"

6
components/graphql/queryeditor.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="opacity-0 show-if-initialized" :class="{ initialized }"> <div class="opacity-0 show-if-initialized" :class="{ initialized }">
<pre ref="editor"></pre> <pre ref="editor" :class="styles"></pre>
</div> </div>
</template> </template>
@@ -46,6 +46,10 @@ export default {
type: Object, type: Object,
default: {}, default: {},
}, },
styles: {
type: String,
default: "",
},
}, },
data() { data() {

3
components/http/codegen-modal.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<label for="requestType">{{ $t("request_type") }}</label> <label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper"> <span class="select-wrapper">
<v-popover> <v-popover>
@@ -54,6 +54,7 @@
rows="8" rows="8"
v-model="requestCode" v-model="requestCode"
readonly readonly
class="rounded-b-lg"
></textarea> ></textarea>
</div> </div>
</modal> </modal>

2
components/http/http-headers.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers" no-legend>
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">

2
components/http/http-parameters.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters" no-legend>
<ul v-if="params.length !== 0"> <ul v-if="params.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">

2
components/http/import-curl.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea> <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
</div> </div>
<div slot="footer"> <div slot="footer">

2
components/http/notes.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<pw-section class="pink" :label="$t('notes')" ref="sync"> <pw-section class="pink" :label="$t('notes')" ref="sync" no-legend>
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<inputform /> <inputform />
<feeds /> <feeds />

2
components/http/token-list.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<div class="row-wrapper"> <div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label> <label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0"> <div v-if="tokens.length != 0">

159
components/layout/contributors.vue
View File

@@ -6,7 +6,7 @@
<p class="info"> <p class="info">
{{ $t("donate_info2") }} {{ $t("donate_info2") }}
</p> </p>
<div class="row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
href="https://github.com/sponsors/hoppscotch" href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
</a> </a>
</span> </span>
</div> </div>
<div class="row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
href="https://opencollective.com/hoppscotch" href="https://opencollective.com/hoppscotch"
@@ -48,84 +48,96 @@
</a> </a>
</span> </span>
</div> </div>
<div> <div class="px-2 row-wrapper">
<a <span>
href="https://www.patreon.com/liyasthomas" <a
target="_blank" href="https://www.patreon.com/liyasthomas"
rel="noopener" target="_blank"
v-tooltip.right="$t('recurring')" rel="noopener"
> v-tooltip.right="$t('recurring')"
<button class="icon"> >
<i class="material-icons">local_parking</i> <button class="icon">
<span>{{ $t("patreon") }}</span> <i class="material-icons">local_parking</i>
</button> <span>{{ $t("patreon") }}</span>
</a> </button>
</a>
</span>
</div> </div>
<div> <div class="px-2 row-wrapper">
<a <span>
href="https://www.paypal.me/liyascthomas" <a
target="_blank" href="https://www.paypal.me/liyascthomas"
rel="noopener" target="_blank"
v-tooltip.right="$t('one_time')" rel="noopener"
> v-tooltip.right="$t('one_time')"
<button class="icon"> >
<i class="material-icons">payment</i> <button class="icon">
<span>{{ $t("paypal") }}</span> <i class="material-icons">payment</i>
</button> <span>{{ $t("paypal") }}</span>
</a> </button>
</a>
</span>
</div> </div>
<hr /> <hr />
<h3 class="title">Financial Contributors</h3> <div class="p-2">
<div class="contributors fle"> <h3 class="title">Financial Contributors</h3>
<a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener"> <div class="contributors">
<img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" /> <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
</a> <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
</a>
</div>
<div class="contributors">
<a
href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
target="_blank"
rel="noopener"
>
<img
style="max-width: 100px"
src="~assets/images/Paw-Logo-for-Hoppscotch.png"
alt="Paw"
/>
</a>
</div>
<div class="contributors">
<a href="https://tyk.io" target="_blank" rel="noopener">
<img
style="max-width: 320px"
src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
alt="Tyk Banner"
/>
</a>
</div>
<div class="contributors">
<a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/0/website"
>
<img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
</a>
<a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/1/website"
>
<img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
</a>
</div>
</div> </div>
<div class="contributors"> <hr />
<a <p class="info">
href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship" This project exists thanks to all the
target="_blank"
rel="noopener"
>
<img style="max-width: 100px" src="~assets/images/Paw-Logo-for-Hoppscotch.png" alt="Paw" />
</a>
</div>
<div class="contributors">
<a href="https://tyk.io" target="_blank" rel="noopener">
<img
style="max-width: 320px"
src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
alt="Tyk Banner"
/>
</a>
</div>
<div class="contributors">
<a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/0/website"
>
<img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
</a>
<a
target="_blank"
rel="noopener"
href="https://opencollective.com/hoppscotch/organization/1/website"
>
<img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
</a>
</div>
<h3 class="title">Code Contributors</h3>
<p class="info">This project exists thanks to all the people who contribute.</p>
<div class="contributors">
<a <a
target="_blank" target="_blank"
rel="noopener" rel="noopener"
href="https://github.com/hoppscotch/hoppscotch/graphs/contributors" href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"
class="link"
> >
<img src="https://opencollective.com/hoppscotch/contributors.svg" /> people who contribute
</a> </a>
</div> .
</p>
</div> </div>
</template> </template>
@@ -135,11 +147,6 @@
@apply items-center; @apply items-center;
@apply flex-no-wrap; @apply flex-no-wrap;
@apply overflow-auto; @apply overflow-auto;
@apply my-4; @apply m-2;
}
.github-sponsor {
@apply mr-2;
@apply rounded-full;
} }
</style> </style>

36
components/layout/history.vue
View File

@@ -1,13 +1,19 @@
<template> <template>
<pw-section class="green" icon="history" :label="$t('history')" ref="history"> <pw-section class="green" icon="history" :label="$t('history')" ref="history" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" /> <input
<button class="icon"> aria-label="Search"
<i class="material-icons">search</i> type="search"
</button> :placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div> </div>
<div class="virtual-list" :class="{ filled: filteredHistory.length }"> <div
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> class="divide-y virtual-list divide-dashed divide-brdColor"
:class="{ filled: filteredHistory.length }"
>
<ul v-for="(entry, index) in filteredHistory" :key="index">
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<span <span
class="p-2 m-2" class="p-2 m-2"
@@ -105,15 +111,17 @@
readonly readonly
:value="entry.time" :value="entry.time"
v-tooltip="entry.date" v-tooltip="entry.date"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
/> />
</li> </li>
<li> <li>
<input <input
:aria-label="$t('duration')" :aria-label="$t('nn')"
type="text" type="text"
readonly readonly
:value="entry.duration" :value="entry.duration"
:placeholder="$t('no_duration')" :placeholder="$t('no_duration')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
/> />
</li> </li>
<li> <li>
@@ -123,6 +131,7 @@
readonly readonly
:value="entry.preRequestScript" :value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')" :placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
/> />
</li> </li>
</div> </div>
@@ -135,7 +144,7 @@
<p v-if="history.length === 0" class="info"> <p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }} <i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p> </p>
<div v-if="history.length !== 0"> <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
<div class="row-wrapper" v-if="!isClearingHistory"> <div class="row-wrapper" v-if="!isClearingHistory">
<button <button
class="icon" class="icon"
@@ -199,9 +208,9 @@
</v-popover> </v-popover>
</div> </div>
<div class="row-wrapper" v-else> <div class="row-wrapper" v-else>
<label for="clear-history-button" class="info"> <p for="clear-history-button" class="info">
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }} <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</label> </p>
<div> <div>
<button <button
class="icon" class="icon"
@@ -253,11 +262,6 @@ ol {
flex-direction: column; flex-direction: column;
} }
.entry {
border-bottom: 1px dashed var(--brd-color);
padding: 0 0 8px;
}
@media (max-width: 720px) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 320px; min-height: 320px;

11
components/layout/pw-section.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }"> <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
<legend @click.prevent="collapse"> <legend v-if="!noLegend" @click.prevent="collapse">
<span>{{ label }}</span> <span>{{ label }}</span>
<i class="ml-2 align-middle material-icons"> <i class="ml-2 align-middle material-icons">
{{ isCollapsed(label) ? "expand_more" : "expand_less" }} {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
@@ -14,8 +14,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
fieldset { fieldset {
@apply my-2; @apply my-4;
@apply p-2;
@apply rounded-lg; @apply rounded-lg;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply transition; @apply transition;
@@ -23,8 +22,8 @@ fieldset {
@apply duration-200; @apply duration-200;
legend { legend {
@apply px-4;
@apply text-fgColor; @apply text-fgColor;
@apply text-sm;
@apply font-bold; @apply font-bold;
@apply cursor-pointer; @apply cursor-pointer;
@apply transition; @apply transition;
@@ -86,6 +85,10 @@ export default {
type: String, type: String,
default: "Section", default: "Section",
}, },
noLegend: {
type: Boolean,
default: false,
},
}, },
methods: { methods: {

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

@@ -61,6 +61,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
<iframe <iframe
:class="{ hidden: !previewEnabled }" :class="{ hidden: !previewEnabled }"

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

@@ -52,6 +52,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>

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

@@ -49,6 +49,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>

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

@@ -49,6 +49,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</div> </div>
</div> </div>

2
components/lenses/response-body-renderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<tabs> <tabs styles="m-4">
<tab <tab
v-for="(lens, index) in validLenses" v-for="(lens, index) in validLenses"
:key="lens.lensName" :key="lens.lensName"

6
components/others/extensions.vue
View File

@@ -10,11 +10,11 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<p class="info"> <p class="info">
{{ $t("extensions_info1") }} {{ $t("extensions_info1") }}
</p> </p>
<div> <div class="px-2">
<a <a
href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch" href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
target="_blank" target="_blank"
@@ -33,7 +33,7 @@
</button> </button>
</a> </a>
</div> </div>
<div> <div class="px-2">
<a <a
href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld" href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
target="_blank" target="_blank"

105
components/others/shortcuts.vue
View File

@@ -10,57 +10,63 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<div> <div class="p-2">
<kbd>{{ getSpecialKey() }}</kbd> <div>
+ <kbd>{{ getSpecialKey() }}</kbd>
<kbd>G</kbd> +
<label>{{ $t("send_request") }}</label> <kbd>G</kbd>
</div> <label>{{ $t("send_request") }}</label>
<div> </div>
<kbd>{{ getSpecialKey() }}</kbd <div>
>+<kbd>S</kbd> <kbd>{{ getSpecialKey() }}</kbd
<label>{{ $t("save_to_collections") }}</label> >+<kbd>S</kbd>
</div> <label>{{ $t("save_to_collections") }}</label>
<div> </div>
<kbd>{{ getSpecialKey() }}</kbd <div>
>+<kbd>K</kbd> <kbd>{{ getSpecialKey() }}</kbd
<label>{{ $t("copy_request_link") }}</label> >+<kbd>K</kbd>
</div> <label>{{ $t("copy_request_link") }}</label>
<div> </div>
<kbd>{{ getSpecialKey() }}</kbd <div>
>+<kbd>I</kbd> <kbd>{{ getSpecialKey() }}</kbd
<label>{{ $t("reset_request") }}</label> >+<kbd>I</kbd>
<label>{{ $t("reset_request") }}</label>
</div>
</div> </div>
<hr /> <hr />
<div> <div class="p-2">
<kbd>Alt</kbd>+<kbd>▲</kbd> <div>
<label>{{ $t("select_next_method") }}</label> <kbd>Alt</kbd>+<kbd>▲</kbd>
</div> <label>{{ $t("select_next_method") }}</label>
<div> </div>
<kbd>Alt</kbd>+<kbd>▼</kbd> <div>
<label>{{ $t("select_previous_method") }}</label> <kbd>Alt</kbd>+<kbd>▼</kbd>
<label>{{ $t("select_previous_method") }}</label>
</div>
</div> </div>
<hr /> <hr />
<div> <div class="p-2">
<kbd>Alt</kbd>+<kbd>G</kbd> <div>
<label>{{ $t("select_get_method") }}</label> <kbd>Alt</kbd>+<kbd>G</kbd>
</div> <label>{{ $t("select_get_method") }}</label>
<div> </div>
<kbd>Alt</kbd>+<kbd>H</kbd> <div>
<label>{{ $t("select_head_method") }}</label> <kbd>Alt</kbd>+<kbd>H</kbd>
</div> <label>{{ $t("select_head_method") }}</label>
<div> </div>
<kbd>Alt</kbd>+<kbd>P</kbd> <div>
<label>{{ $t("select_post_method") }}</label> <kbd>Alt</kbd>+<kbd>P</kbd>
</div> <label>{{ $t("select_post_method") }}</label>
<div> </div>
<kbd>Alt</kbd>+<kbd>U</kbd> <div>
<label>{{ $t("select_put_method") }}</label> <kbd>Alt</kbd>+<kbd>U</kbd>
</div> <label>{{ $t("select_put_method") }}</label>
<div> </div>
<kbd>Alt</kbd>+<kbd>X</kbd> <div>
<label>{{ $t("select_delete_method") }}</label> <kbd>Alt</kbd>+<kbd>X</kbd>
<label>{{ $t("select_delete_method") }}</label>
</div>
</div> </div>
</div> </div>
<div slot="footer"></div> <div slot="footer"></div>
@@ -71,6 +77,11 @@
kbd { kbd {
@apply inline-flex; @apply inline-flex;
@apply resize-none; @apply resize-none;
@apply m-2;
@apply rounded-lg;
@apply py-2;
@apply px-4;
@apply text-sm;
} }
</style> </style>

2
components/others/support.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<contributors /> <contributors />
</div> </div>
<div slot="footer"></div> <div slot="footer"></div>

7
components/realtime/log.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="flex flex-col">
<label for="log">{{ title }}</label> <label for="log">{{ title }}</label>
<div name="log" class="realtime-log" ref="log"> <div name="log" class="realtime-log" ref="log">
<span v-if="log"> <span v-if="log">
@@ -14,9 +14,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.realtime-log { .realtime-log {
@apply m-2; @apply p-4;
@apply p-2;
@apply rounded-lg;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply text-fgColor; @apply text-fgColor;
@apply overflow-auto; @apply overflow-auto;
@@ -25,7 +23,6 @@
&, &,
span { span {
@apply text-sm;
@apply font-mono; @apply font-mono;
@apply font-normal; @apply font-normal;
@apply select-text; @apply select-text;

35
components/realtime/mqtt.vue
View File

@@ -1,15 +1,26 @@
<template> <template>
<div> <div>
<pw-section class="blue" :label="$t('request')"> <pw-section class="blue" :label="$t('request')" no-legend>
<ul> <ul>
<li> <li>
<label for="mqtt-url">{{ $t("url") }}</label> <label for="mqtt-url">{{ $t("url") }}</label>
<input id="mqtt-url" type="url" v-model="url" spellcheck="false" /> <input
id="mqtt-url"
type="url"
v-model="url"
spellcheck="false"
class="md:rounded-bl-lg"
/>
</li> </li>
<div> <div>
<li> <li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button id="connect" :disabled="!validUrl" @click="toggleConnection"> <button
id="connect"
:disabled="!validUrl"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ this.connectionState ? $t("disconnect") : $t("connect") }} {{ this.connectionState ? $t("disconnect") : $t("connect") }}
<span> <span>
<i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i> <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
@@ -20,7 +31,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue" :label="$t('communication')"> <pw-section class="blue" :label="$t('communication')" no-legend>
<ul> <ul>
<li> <li>
<log :title="$t('log')" :log="this.log" /> <log :title="$t('log')" :log="this.log" />
@@ -50,12 +61,24 @@
<ul> <ul>
<li> <li>
<label for="sub_topic">{{ $t("mqtt_topic") }}</label> <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
<input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" /> <input
id="sub_topic"
type="text"
v-model="sub_topic"
spellcheck="false"
class="md:rounded-bl-lg"
/>
</li> </li>
<div> <div>
<li> <li>
<label for="subscribe" class="hide-on-small-screen">&nbsp;</label> <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
<button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription"> <button
id="subscribe"
name="get"
:disabled="!cansubscribe"
@click="toggleSubscription"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }} {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
<span> <span>
<i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i> <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>

14
components/realtime/socketio.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="socketio-url">{{ $t("url") }}</label> <label for="socketio-url">{{ $t("url") }}</label>
@@ -11,6 +11,7 @@
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
v-model="url" v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
class="md:rounded-bl-lg"
/> />
</li> </li>
<div> <div>
@@ -22,7 +23,13 @@
<div> <div>
<li> <li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection"> <button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }} {{ !connectionState ? $t("connect") : $t("disconnect") }}
<span> <span>
<i class="material-icons"> <i class="material-icons">
@@ -34,7 +41,8 @@
</div> </div>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<log :title="$t('log')" :log="communication.log" /> <log :title="$t('log')" :log="communication.log" />

13
components/realtime/sse.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="server">{{ $t("server") }}</label> <label for="server">{{ $t("server") }}</label>
@@ -10,12 +10,19 @@
:class="{ error: !serverValid }" :class="{ error: !serverValid }"
v-model="server" v-model="server"
@keyup.enter="serverValid ? toggleSSEConnection() : null" @keyup.enter="serverValid ? toggleSSEConnection() : null"
class="md:rounded-bl-lg"
/> />
</li> </li>
<div> <div>
<li> <li>
<label for="start" class="hide-on-small-screen">&nbsp;</label> <label for="start" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection"> <button
:disabled="!serverValid"
id="start"
name="start"
@click="toggleSSEConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ !connectionSSEState ? $t("start") : $t("stop") }} {{ !connectionSSEState ? $t("start") : $t("stop") }}
<span> <span>
<i class="material-icons"> <i class="material-icons">
@@ -28,7 +35,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response"> <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<log :title="$t('events')" :log="events.log" /> <log :title="$t('events')" :log="events.log" />

22
components/realtime/websocket.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="websocket-url">{{ $t("url") }}</label> <label for="websocket-url">{{ $t("url") }}</label>
@@ -11,12 +11,19 @@
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
v-model="url" v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null" @keyup.enter="urlValid ? toggleConnection() : null"
class="md:rounded-bl-lg"
/> />
</li> </li>
<div> <div>
<li> <li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection"> <button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }} {{ !connectionState ? $t("connect") : $t("disconnect") }}
<span> <span>
<i class="material-icons"> <i class="material-icons">
@@ -29,7 +36,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response"> <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<log :title="$t('log')" :log="communication.log" /> <log :title="$t('log')" :log="communication.log" />
@@ -47,12 +54,19 @@
@keyup.enter="connectionState ? sendMessage() : null" @keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null" @keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null" @keyup.down="connectionState ? walkHistory('down') : null"
class="md:rounded-bl-lg"
/> />
</li> </li>
<div> <div>
<li> <li>
<label for="send" class="hide-on-small-screen">&nbsp;</label> <label for="send" class="hide-on-small-screen">&nbsp;</label>
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage"> <button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ $t("send") }} {{ $t("send") }}
<span> <span>
<i class="material-icons">send</i> <i class="material-icons">send</i>

4
components/ui/accent-mode-picker.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<li> <div>
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label> <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div class="space-x-2"> <div class="space-x-2">
<span <span
@@ -13,7 +13,7 @@
<i class="material-icons">lens</i> <i class="material-icons">lens</i>
</span> </span>
</div> </div>
</li> </div>
</template> </template>
<script> <script>

6
components/ui/ace-editor.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="show-if-initialized" :class="{ initialized }"> <div class="show-if-initialized" :class="{ initialized }">
<pre ref="editor"></pre> <pre ref="editor" :class="styles"></pre>
</div> </div>
</template> </template>
@@ -48,6 +48,10 @@ export default {
type: Object, type: Object,
default: {}, default: {},
}, },
styles: {
type: String,
default: "",
},
}, },
data() { data() {

6
components/ui/autocomplete.vue
View File

@@ -12,6 +12,7 @@
:spellcheck="spellcheck" :spellcheck="spellcheck"
:autocapitalize="autocapitalize" :autocapitalize="autocapitalize"
:autocorrect="spellcheck" :autocorrect="spellcheck"
:class="styles"
/> />
<ul <ul
class="suggestions" class="suggestions"
@@ -108,6 +109,11 @@ export default {
default: "", default: "",
required: false, required: false,
}, },
styles: {
type: String,
default: "",
},
}, },
watch: { watch: {

4
components/ui/color-mode-picker.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<li> <div>
<label> <label>
<ColorScheme placeholder="..." tag="span"> <ColorScheme placeholder="..." tag="span">
{{ $t("background") }}: {{ $t("background") }}:
@@ -24,7 +24,7 @@
<i class="material-icons">{{ getIcon(color) }}</i> <i class="material-icons">{{ getIcon(color) }}</i>
</span> </span>
</div> </div>
</li> </div>
</template> </template>
<script> <script>

6
components/ui/js-editor.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="show-if-initialized" :class="{ initialized }"> <div class="show-if-initialized" :class="{ initialized }">
<pre ref="editor"></pre> <pre ref="editor" :class="styles"></pre>
</div> </div>
</template> </template>
@@ -40,6 +40,10 @@ export default {
type: Object, type: Object,
default: {}, default: {},
}, },
styles: {
type: String,
default: "",
},
}, },
data() { data() {

11
components/ui/modal.vue
View File

@@ -49,7 +49,6 @@
@apply flex-1; @apply flex-1;
@apply flex-col; @apply flex-col;
@apply m-2; @apply m-2;
@apply p-2;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-200;
@@ -58,13 +57,21 @@
@apply shadow-2xl; @apply shadow-2xl;
max-height: calc(100vh - 128px); max-height: calc(100vh - 128px);
max-width: 720px; max-width: 640px;
}
.modal-header {
@apply pl-2;
} }
.modal-body { .modal-body {
@apply overflow-auto; @apply overflow-auto;
} }
.modal-footer {
@apply p-2;
}
/* /*
* The following styles are auto-applied to elements with * The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled * transition="modal" when their visibility is toggled

19
components/ui/pw-toggle.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div @click="toggle()"> <div @click="toggle()" class="inline-block cursor-pointer">
<label class="toggle" :class="{ on: on }" ref="toggle"> <label class="toggle" :class="{ on: on }" ref="toggle">
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="caption"> <label class="pl-0 align-middle cursor-pointer">
<slot /> <slot />
</label> </label>
</div> </div>
@@ -21,24 +21,13 @@ $height: 16px;
$handleSpacing: 4px; $handleSpacing: 4px;
$transition: all 0.2s ease-in-out; $transition: all 0.2s ease-in-out;
div { .toggle {
@apply inline-block;
@apply cursor-pointer;
}
label.caption {
@apply align-middle;
@apply cursor-pointer;
}
label.toggle {
@apply relative; @apply relative;
@apply inline-block; @apply inline-block;
@apply align-middle; @apply align-middle;
@apply rounded-full; @apply rounded-full;
@apply p-0; @apply p-0;
@apply my-4; @apply m-4;
@apply mx-2;
@apply cursor-pointer; @apply cursor-pointer;
width: $width; width: $width;

9
components/ui/tabs.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="tabs-wrapper"> <div class="tabs-wrapper">
<div class="tabs"> <div class="tabs">
<ul> <ul :class="styles">
<li <li
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:class="{ 'is-active': tab.isActive }" :class="{ 'is-active': tab.isActive }"
@@ -90,6 +90,13 @@
<script> <script>
export default { export default {
props: {
styles: {
type: String,
default: "",
},
},
data() { data() {
return { return {
tabs: [], tabs: [],

1
lang/en-US.json
View File

@@ -64,6 +64,7 @@
"server": "Server", "server": "Server",
"events": "Events", "events": "Events",
"url": "URL", "url": "URL",
"variables": "Variables",
"get_schema": "Get schema", "get_schema": "Get schema",
"header_list": "Header list", "header_list": "Header list",
"add_new": "Add new", "add_new": "Add new",

12
package-lock.json generated
View File

@@ -2924,9 +2924,9 @@
} }
}, },
"@nuxtjs/tailwindcss": { "@nuxtjs/tailwindcss": {
"version": "3.3.3", "version": "3.3.4",
"resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.3.3.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.3.4.tgz",
"integrity": "sha512-IAWyKm9iXGlok0GgNcjEuoMvPIAmOrUmlAFJVlpZBTySr1Bs0aeZhNqfiTUSQAEaSDLFw+gwZvxRPrHytR3J0w==", "integrity": "sha512-blign8PnZDoHI/A7vxSJTNEpqS7REu7ZwaclB37+HskJSep1qYXblELwvNlMa3/eVuP/KKk8tUFxCtDXiqOdUQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"clear-module": "^4.1.1", "clear-module": "^4.1.1",
@@ -8613,9 +8613,9 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.7",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
}, },
"inquirer": { "inquirer": {
"version": "7.3.3", "version": "7.3.3",

2
package.json
View File

@@ -50,7 +50,7 @@
"@nuxtjs/color-mode": "^2.0.2", "@nuxtjs/color-mode": "^2.0.2",
"@nuxtjs/google-analytics": "^2.4.0", "@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/pwa": "^3.3.2", "@nuxtjs/pwa": "^3.3.2",
"@nuxtjs/tailwindcss": "^3.3.3", "@nuxtjs/tailwindcss": "^3.3.4",
"@testing-library/jest-dom": "^5.11.6", "@testing-library/jest-dom": "^5.11.6",
"@vue/test-utils": "^1.1.1", "@vue/test-utils": "^1.1.1",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",

376
pages/doc.vue
View File

@@ -2,110 +2,188 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<pw-section class="blue" :label="$t('import')" ref="import"> <pw-section class="blue" :label="$t('import')" ref="import" no-legend>
<ul> <div class="flex flex-col">
<li> <label>{{ $t("collection") }}</label>
<p class="info"> <p class="info">
{{ $t("generate_docs_message") }} {{ $t("generate_docs_message") }}
</p> </p>
</li> <div class="row-wrapper">
</ul> <label for="collectionUpload">
<ul> <button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
<li> <i class="material-icons">folder</i>
<div class="row-wrapper"> <span>{{ $t("import_collections") }}</span>
<label for="collectionUpload"> </button>
<button </label>
class="icon" <input
@click="$refs.collectionUpload.click()" ref="collectionUpload"
v-tooltip="$t('json')" name="collectionUpload"
> type="file"
<i class="material-icons">folder</i> @change="uploadCollection"
<span>{{ $t("import_collections") }}</span>
</button>
</label>
<input
ref="collectionUpload"
name="collectionUpload"
type="file"
@change="uploadCollection"
/>
<div>
<button
class="icon"
@click="collectionJSON = '[]'"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul>
<li>
<ace-editor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/> />
</li> <div>
</ul> <button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
<ul> <i class="material-icons">clear_all</i>
<li> </button>
<button class="icon" @click="getDoc"> </div>
<i class="material-icons">topic</i> </div>
<span>{{ $t("generate_docs") }}</span> <ace-editor
</button> v-model="collectionJSON"
</li> :lang="'json'"
</ul> :lint="false"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
<button class="icon" @click="getDoc">
<i class="material-icons">topic</i>
<span>{{ $t("generate_docs") }}</span>
</button>
</div>
</pw-section> </pw-section>
<pw-section class="green" :label="$t('documentation')" ref="documentation"> <pw-section class="green" :label="$t('documentation')" ref="documentation" no-legend>
<p v-if="this.items.length === 0" class="info"> <div class="flex flex-col">
{{ $t("generate_docs_first") }} <label>{{ $t("documentation") }}</label>
</p> <p v-if="this.items.length === 0" class="info">
<div v-else class="row-wrapper"> {{ $t("generate_docs_first") }}
<div </p>
v-tooltip.bottom="{ <div v-else class="row-wrapper">
content: !fb.currentUser <div
? $t('login_with_github_to') + $t('create_secret_gist') v-tooltip.bottom="{
: fb.currentUser.provider !== 'github.com' content: !fb.currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? $t('login_with_github_to') + $t('create_secret_gist')
: null, : fb.currentUser.provider !== 'github.com'
}" ? $t('login_with_github_to') + $t('create_secret_gist')
> : null,
<button }"
:disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
"
class="icon"
@click="createDocsGist"
> >
<i class="material-icons">assignment</i> <button
<span>{{ $t("create_secret_gist") }}</span> :disabled="
</button> !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
"
class="icon"
@click="createDocsGist"
>
<i class="material-icons">assignment</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</div> </div>
</div> <div>
<div> <span class="collection" v-for="(collection, index) in this.items" :key="index">
<span class="collection" v-for="(collection, index) in this.items" :key="index"> <h2>
<h2> <i class="material-icons">folder</i>
<i class="material-icons">folder</i> {{ collection.name || $t("none") }}
{{ collection.name || $t("none") }} </h2>
</h2> <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
<span class="folder" v-for="(folder, index) in collection.folders" :key="index"> <h3>
<h3> <i class="material-icons">folder_open</i>
<i class="material-icons">folder_open</i> {{ folder.name || $t("none") }}
{{ folder.name || $t("none") }} </h3>
</h3> <span class="request" v-for="(request, index) in folder.requests" :key="index">
<span class="request" v-for="(request, index) in folder.requests" :key="index"> <h4>
<i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }}
</h4>
<p class="doc-desc" v-if="request.url">
<span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.path">
<span>
{{ $t("path") }}:
<code>{{ request.path || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.method">
<span>
{{ $t("method") }}:
<code>{{ request.method || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.auth">
<span>
{{ $t("authentication") }}:
<code>{{ request.auth || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpUser">
<span>
{{ $t("username") }}:
<code>{{ request.httpUser || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpPassword">
<span>
{{ $t("password") }}:
<code>{{ request.httpPassword || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.bearerToken">
<span>
{{ $t("token") }}:
<code>{{ request.bearerToken || $t("none") }}</code>
</span>
</p>
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
<span v-if="request.headers">
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
<span v-if="request.params">
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
<span v-if="request.bodyParams">
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
</span>
</p>
</span>
<p class="doc-desc" v-if="request.rawParams">
<span>
{{ $t("parameters") }}:
<code>{{ request.rawParams || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.contentType">
<span>
{{ $t("content_type") }}:
<code>{{ request.contentType || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.requestType">
<span>
{{ $t("request_type") }}:
<code>{{ request.requestType || $t("none") }}</code>
</span>
</p>
</span>
</span>
<span
class="request"
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
>
<h4> <h4>
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }} {{ request.name || $t("none") }}
@@ -117,8 +195,7 @@
</p> </p>
<p class="doc-desc" v-if="request.path"> <p class="doc-desc" v-if="request.path">
<span> <span>
{{ $t("path") }}: {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
<code>{{ request.path || $t("none") }}</code>
</span> </span>
</p> </p>
<p class="doc-desc" v-if="request.method"> <p class="doc-desc" v-if="request.method">
@@ -198,102 +275,7 @@
</p> </p>
</span> </span>
</span> </span>
<span </div>
class="request"
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
>
<h4>
<i class="material-icons">insert_drive_file</i>
{{ request.name || $t("none") }}
</h4>
<p class="doc-desc" v-if="request.url">
<span>
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.path">
<span>
{{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.method">
<span>
{{ $t("method") }}:
<code>{{ request.method || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.auth">
<span>
{{ $t("authentication") }}:
<code>{{ request.auth || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpUser">
<span>
{{ $t("username") }}:
<code>{{ request.httpUser || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.httpPassword">
<span>
{{ $t("password") }}:
<code>{{ request.httpPassword || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.bearerToken">
<span>
{{ $t("token") }}:
<code>{{ request.bearerToken || $t("none") }}</code>
</span>
</p>
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
<span v-if="request.headers">
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
<span v-if="request.params">
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
</span>
</p>
</span>
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
<span v-if="request.bodyParams">
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
</span>
</p>
</span>
<p class="doc-desc" v-if="request.rawParams">
<span>
{{ $t("parameters") }}:
<code>{{ request.rawParams || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.contentType">
<span>
{{ $t("content_type") }}:
<code>{{ request.contentType || $t("none") }}</code>
</span>
</p>
<p class="doc-desc" v-if="request.requestType">
<span>
{{ $t("request_type") }}:
<code>{{ request.requestType || $t("none") }}</code>
</span>
</p>
</span>
</span>
</div> </div>
</pw-section> </pw-section>
</div> </div>

289
pages/graphql.vue
View File

@@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint"> <pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
<ul> <ul>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
@@ -12,12 +12,18 @@
v-model="url" v-model="url"
spellcheck="false" spellcheck="false"
@keyup.enter="onPollSchemaClick()" @keyup.enter="onPollSchemaClick()"
class="md:rounded-bl-lg"
/> />
</li> </li>
<div> <div>
<li> <li>
<label for="get" class="hide-on-small-screen">&nbsp;</label> <label for="get" class="hide-on-small-screen">&nbsp;</label>
<button id="get" name="get" @click="onPollSchemaClick"> <button
id="get"
name="get"
@click="onPollSchemaClick"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
>
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }} {{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
<span <span
><i class="material-icons">{{ ><i class="material-icons">{{
@@ -30,73 +36,76 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="orange" :label="$t('headers')" ref="headers"> <pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
<ul v-if="headers.length !== 0"> <div class="flex flex-col">
<li> <label>{{ $t("headers") }}</label>
<div class="row-wrapper"> <ul v-if="headers.length !== 0">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
<li>
<autocomplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<div>
<li> <li>
<button <div class="row-wrapper">
class="icon" <label for="headerList">{{ $t("header_list") }}</label>
@click="removeRequestHeader(index)" <div>
v-tooltip.bottom="$t('delete')" <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
id="header" <i class="material-icons">clear_all</i>
> </button>
<i class="material-icons">delete</i> </div>
</div>
</li>
</ul>
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
<li>
<autocomplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
id="header"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button> </button>
</li> </li>
</div> </ul>
</ul> </div>
<ul>
<li>
<button class="icon" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section> </pw-section>
<pw-section class="green" :label="$t('schema')" ref="schema"> <pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
<div class="row-wrapper"> <div class="row-wrapper">
<label>{{ $t("schema") }}</label> <label>{{ $t("schema") }}</label>
<div v-if="schema"> <div v-if="schema">
@@ -143,10 +152,11 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
<input <input
v-else v-else
class="missing-data-response" class="rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')" :value="$t('waiting_receive_schema')"
ref="status" ref="status"
id="status" id="status"
@@ -156,7 +166,7 @@
/> />
</pw-section> </pw-section>
<pw-section class="teal" :label="$t('query')" ref="query"> <pw-section class="teal" :label="$t('query')" ref="query" no-legend>
<div class="row-wrapper gqlRunQuery"> <div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label> <label for="gqlQuery">{{ $t("query") }}</label>
<div> <div>
@@ -195,80 +205,95 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</pw-section> </pw-section>
<pw-section class="yellow" label="Variables" ref="variables"> <pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
<ace-editor <div class="flex flex-col">
v-model="variableString" <label>{{ $t("variables") }}</label>
:lang="'json'" <ace-editor
:options="{ v-model="variableString"
maxLines: 10, :lang="'json'"
minLines: 5, :options="{
fontSize: '16px', maxLines: 10,
autoScrollEditorIntoView: true, minLines: 5,
showPrintMargin: false, fontSize: '16px',
useWorker: false, autoScrollEditorIntoView: true,
}" showPrintMargin: false,
/> useWorker: false,
</pw-section> }"
styles="rounded-b-lg"
<pw-section class="purple" label="Response" ref="response"> />
<div class="row-wrapper"> </div>
<label for="responseField">{{ $t("response") }}</label> </pw-section>
<div>
<button <pw-section class="purple" :label="$t('response')" ref="response" no-legend>
class="icon" <div class="flex flex-col">
@click="downloadResponse" <label>{{ $t("response") }}</label>
ref="downloadResponse" <div class="row-wrapper">
v-if="response" <label for="responseField">{{ $t("response") }}</label>
v-tooltip="$t('download_file')" <div>
> <button
<i class="material-icons">save_alt</i> class="icon"
</button> @click="downloadResponse"
<button ref="downloadResponse"
class="icon" v-if="response"
@click="copyResponse" v-tooltip="$t('download_file')"
ref="copyResponseButton" >
v-if="response" <i class="material-icons">save_alt</i>
v-tooltip="$t('copy_response')" </button>
> <button
<i class="material-icons">content_copy</i> class="icon"
</button> @click="copyResponse"
</div> ref="copyResponseButton"
v-if="response"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<ace-editor
v-if="response"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '16px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
class="rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
ref="status"
id="status"
name="status"
readonly
type="text"
/>
</div> </div>
<ace-editor
v-if="response"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '16px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
/>
<input
v-else
class="missing-data-response"
:value="$t('waiting_receive_response')"
ref="status"
id="status"
name="status"
readonly
type="text"
/>
</pw-section> </pw-section>
</div> </div>
<aside class="sticky-inner inner-right lg:max-w-md"> <aside class="sticky-inner inner-right lg:max-w-md">
<pw-section class="purple" :label="$t('docs')" ref="docs"> <pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
<section class="flex-col"> <section class="flex-col">
<input type="text" :placeholder="$t('search')" v-model="graphqlFieldsFilterText" /> <input
<tabs ref="gqlTabs"> type="text"
:placeholder="$t('search')"
v-model="graphqlFieldsFilterText"
class="rounded-t-lg"
/>
<tabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs"> <div class="gqlTabs">
<tab <tab
v-if="queryFields.length > 0" v-if="queryFields.length > 0"

71
pages/index.vue
View File

@@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li class="shrink"> <li class="shrink">
<label for="method">{{ $t("method") }}</label> <label for="method">{{ $t("method") }}</label>
@@ -40,6 +40,7 @@
<input <input
v-if="!this.$store.state.postwoman.settings.EXPERIMENTAL_URL_BAR_ENABLED" v-if="!this.$store.state.postwoman.settings.EXPERIMENTAL_URL_BAR_ENABLED"
:class="{ error: !isValidURL }" :class="{ error: !isValidURL }"
class="rounded-none"
@keyup.enter="isValidURL ? sendRequest() : null" @keyup.enter="isValidURL ? sendRequest() : null"
id="url" id="url"
name="url" name="url"
@@ -47,6 +48,7 @@
v-model="uri" v-model="uri"
spellcheck="false" spellcheck="false"
@input="pathInputHandler" @input="pathInputHandler"
:placeholder="$t('url')"
/> />
<url-field v-model="uri" v-else /> <url-field v-model="uri" v-else />
</li> </li>
@@ -72,18 +74,27 @@
</button> </button>
</li> </li>
</ul> </ul>
<div> <ul>
<label for="name">{{ $t("token_req_name") }}</label> <li>
<input id="name" name="name" type="text" v-model="name" /> <label for="name" class="text-sm">{{ $t("token_req_name") }}</label>
</div> <input
id="name"
name="name"
type="text"
v-model="name"
class="text-sm rounded-none"
/>
</li>
</ul>
<div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)"> <div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)">
<ul> <ul>
<li> <li>
<label for="contentType">{{ $t("content_type") }}</label> <label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
<autocomplete <autocomplete
:source="validContentTypes" :source="validContentTypes"
:spellcheck="false" :spellcheck="false"
v-model="contentType" v-model="contentType"
styles="text-sm rounded-none"
/> />
</li> </li>
</ul> </ul>
@@ -96,7 +107,7 @@
</pw-toggle> </pw-toggle>
</span> </span>
<div> <div>
<label for="attachment"> <label for="attachment" class="p-0">
<button <button
class="icon" class="icon"
@click="$refs.attachment.click()" @click="$refs.attachment.click()"
@@ -123,7 +134,7 @@
@change="uploadAttachment" @change="uploadAttachment"
multiple multiple
/> />
<label for="payload"> <label for="payload" class="p-0">
<button <button
class="icon" class="icon"
@click="$refs.payload.click()" @click="$refs.payload.click()"
@@ -318,8 +329,23 @@
/> />
</tab> </tab>
<tab
:id="'headers'"
:label="
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
"
>
<http-headers
:headers="headers"
@clear-content="clearContent"
@set-route-query-state="setRouteQueryState"
@remove-request-header="removeRequestHeader"
@add-request-header="addRequestHeader"
/>
</tab>
<tab :id="'authentication'" :label="$t('authentication')"> <tab :id="'authentication'" :label="$t('authentication')">
<pw-section class="teal" :label="$t('authentication')" ref="authentication"> <pw-section class="teal" :label="$t('authentication')" ref="authentication" no-legend>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">
@@ -401,6 +427,7 @@
</pw-toggle> </pw-toggle>
</div> </div>
</pw-section> </pw-section>
<pw-section <pw-section
v-if="showTokenRequest" v-if="showTokenRequest"
class="red" class="red"
@@ -522,27 +549,13 @@
</pw-section> </pw-section>
</tab> </tab>
<tab
:id="'headers'"
:label="
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
"
>
<http-headers
:headers="headers"
@clear-content="clearContent"
@set-route-query-state="setRouteQueryState"
@remove-request-header="removeRequestHeader"
@add-request-header="addRequestHeader"
/>
</tab>
<tab :id="'pre_request_script'" :label="$t('pre_request_script')"> <tab :id="'pre_request_script'" :label="$t('pre_request_script')">
<pw-section <pw-section
v-if="showPreRequestScript" v-if="showPreRequestScript"
class="orange" class="orange"
:label="$t('pre_request_script')" :label="$t('pre_request_script')"
ref="preRequest" ref="preRequest"
no-legend
> >
<ul> <ul>
<li> <li>
@@ -570,6 +583,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
</li> </li>
</ul> </ul>
@@ -582,6 +596,7 @@
class="orange" class="orange"
:label="$t('tests')" :label="$t('tests')"
ref="postRequestTests" ref="postRequestTests"
no-legend
> >
<ul> <ul>
<li> <li>
@@ -609,6 +624,7 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg"
/> />
<div v-if="testReports.length !== 0"> <div v-if="testReports.length !== 0">
<div class="row-wrapper"> <div class="row-wrapper">
@@ -654,7 +670,10 @@
<li> <li>
<label for="status">{{ $t("status") }}</label> <label for="status">{{ $t("status") }}</label>
<input <input
:class="statusCategory ? statusCategory.className : ''" :class="[
statusCategory ? statusCategory.className : '',
response.status ? '' : 'rounded-b-lg',
]"
:value="response.status || $t('waiting_send_req')" :value="response.status || $t('waiting_send_req')"
ref="status" ref="status"
id="status" id="status"
@@ -733,7 +752,7 @@
</div> </div>
</div> </div>
</div> </div>
<div slot="body"> <div slot="body" class="flex flex-col">
<div class="row-wrapper"> <div class="row-wrapper">
<label for="token-req-list">{{ $t("token_req_list") }}</label> <label for="token-req-list">{{ $t("token_req_list") }}</label>
<div> <div>

351
pages/settings.vue
View File

@@ -1,173 +1,147 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="green" :label="$t('account')" ref="account"> <pw-section class="green" :label="$t('account')" ref="account" no-legend>
<ul> <div class="flex flex-col">
<li> <label>{{ $t("account") }}</label>
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<button class="icon"> <button class="icon">
<img <img
v-if="fb.currentUser.photoURL" v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL" :src="fb.currentUser.photoURL"
class="rounded-full material-icons" class="rounded-full material-icons"
/> />
<i v-else class="material-icons">account_circle</i> <i v-else class="material-icons">account_circle</i>
<span>
{{ fb.currentUser.displayName || $t("nothing_found") }}
</span>
</button>
<br />
<button class="icon">
<i class="material-icons">email</i>
<span>
{{ fb.currentUser.email || $t("nothing_found") }}
</span>
</button>
<br />
<logout />
<p v-for="setting in fb.currentSettings" :key="setting.id">
<pw-toggle
:key="setting.name"
:on="setting.value"
@change="toggleSettings(setting.name, setting.value)"
>
{{ $t(setting.name) + " " + $t("sync") }}
{{ setting.value ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</p>
<p v-if="fb.currentSettings.length !== 3">
<button class="" @click="initSettings">
<i class="material-icons">sync</i>
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
</button>
</p>
</div>
<div v-else>
<label>{{ $t("login_with") }}</label>
<p>
<login />
</p>
</div>
</li>
</ul>
</pw-section>
<pw-section class="teal" :label="$t('theme')" ref="theme">
<ul>
<color-mode-picker />
</ul>
<ul>
<accent-mode-picker />
</ul>
<ul>
<li>
<span>
<pw-toggle
:on="settings.FRAME_COLORS_ENABLED"
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>
{{ $t("multi_color") }}
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
</li>
</ul>
<ul>
<li>
<span>
<pw-toggle
:on="settings.SCROLL_INTO_ENABLED"
@change="toggleSetting('SCROLL_INTO_ENABLED')"
>
{{ $t("scrollInto_use_toggle") }}
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
</li>
</ul>
</pw-section>
<pw-section class="purple" :label="$t('extensions')" ref="extensions">
<ul>
<li>
<div class="row-wrapper">
<pw-toggle
:on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
>
{{ $t("extensions_use_toggle") }}
</pw-toggle>
</div>
</li>
</ul>
<ul class="info">
<li v-if="extensionVersion != null">
<p>
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
extensionVersion.minor
}}
</p>
</li>
<li v-else>
<p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
</li>
</ul>
</pw-section>
<pw-section class="blue" :label="$t('proxy')" ref="proxy">
<ul>
<li>
<div class="row-wrapper">
<span> <span>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"> {{ fb.currentUser.displayName || $t("nothing_found") }}
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span> </span>
<a </button>
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy" <br />
target="_blank" <button class="icon">
rel="noopener" <i class="material-icons">email</i>
<span>
{{ fb.currentUser.email || $t("nothing_found") }}
</span>
</button>
<br />
<logout />
<p v-for="setting in fb.currentSettings" :key="setting.id">
<pw-toggle
:key="setting.name"
:on="setting.value"
@change="toggleSettings(setting.name, setting.value)"
> >
<button class="icon" v-tooltip="$t('wiki')"> {{ $t(setting.name) + " " + $t("sync") }}
<i class="material-icons">help_outline</i> {{ setting.value ? $t("enabled") : $t("disabled") }}
</button> </pw-toggle>
</a>
</div>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="url">{{ $t("url") }}</label>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<i class="material-icons">clear_all</i>
</button>
</div>
<input
id="url"
type="url"
v-model="settings.PROXY_URL"
:disabled="!settings.PROXY_ENABLED"
/>
</li>
</ul>
<ul class="info">
<li>
<p>
{{ $t("postwoman_official_proxy_hosting") }}
<br />
{{ $t("read_the") }}
<a
class="link"
href="https://apollosoftware.xyz/legal/postwoman"
target="_blank"
rel="noopener"
>
{{ $t("apollosw_privacy_policy") }} </a
>.
</p> </p>
</li> <p v-if="fb.currentSettings.length !== 3">
</ul> <button class="" @click="initSettings">
<i class="material-icons">sync</i>
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
</button>
</p>
</div>
<div v-else>
<label>{{ $t("login_with") }}</label>
<p>
<login />
</p>
</div>
</div>
</pw-section>
<pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
<div class="flex flex-col">
<label>{{ $t("theme") }}</label>
<color-mode-picker />
<accent-mode-picker />
<span>
<pw-toggle
:on="settings.FRAME_COLORS_ENABLED"
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>
{{ $t("multi_color") }}
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
<span>
<pw-toggle
:on="settings.SCROLL_INTO_ENABLED"
@change="toggleSetting('SCROLL_INTO_ENABLED')"
>
{{ $t("scrollInto_use_toggle") }}
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
</div>
</pw-section>
<pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
<div class="flex flex-col">
<label>{{ $t("extensions") }}</label>
<div class="row-wrapper">
<pw-toggle
:on="settings.EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
>
{{ $t("extensions_use_toggle") }}
</pw-toggle>
</div>
<p v-if="extensionVersion != null" class="info">
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
</p>
<p v-else class="info">
{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
</p>
</div>
</pw-section>
<pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
<div class="flex flex-col">
<label>{{ $t("proxy") }}</label>
<div class="row-wrapper">
<span>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
<a
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="$t('wiki')">
<i class="material-icons">help_outline</i>
</button>
</a>
</div>
<div class="row-wrapper">
<label for="url">{{ $t("url") }}</label>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<i class="material-icons">clear_all</i>
</button>
</div>
<input
id="url"
type="url"
v-model="settings.PROXY_URL"
:disabled="!settings.PROXY_ENABLED"
/>
<p class="info">
{{ $t("postwoman_official_proxy_hosting") }}
<br />
{{ $t("read_the") }}
<a
class="link"
href="https://apollosoftware.xyz/legal/postwoman"
target="_blank"
rel="noopener"
>
{{ $t("apollosw_privacy_policy") }} </a
>.
</p>
</div>
<!-- <!--
PROXY SETTINGS URL AND KEY PROXY SETTINGS URL AND KEY
-------------- --------------
@@ -185,33 +159,28 @@
--> -->
</pw-section> </pw-section>
<pw-section class="red" :label="$t('experiments')" ref="experiments"> <pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
<ul class="info"> <div class="flex flex-col">
<li> <label>{{ $t("experiments") }}</label>
<p> <p class="info">
{{ $t("experiments_notice") }} {{ $t("experiments_notice") }}
<a <a
class="link" class="link"
href="https://github.com/hoppscotch/hoppscotch/issues/new/choose" href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>{{ $t("contact_us") }}</a >{{ $t("contact_us") }}</a
>. >.
</p> </p>
</li> <div class="row-wrapper">
</ul> <pw-toggle
<ul> :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
<li> @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
<div class="row-wrapper"> >
<pw-toggle {{ $t("use_experimental_url_bar") }}
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED" </pw-toggle>
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')" </div>
> </div>
{{ $t("use_experimental_url_bar") }}
</pw-toggle>
</div>
</li>
</ul>
</pw-section> </pw-section>
</div> </div>
</template> </template>