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

refactor(ui): better tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 00:39:05 +05:30
parent 08fe4ae71f
commit 0fb0ae1826
33 changed files with 394 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
TRANSLATIONS.md
View File

@@ -1,41 +1,23 @@
# Translations # Translations
Thanks for your interest in helping translating the software! Thanks for showing your interest in helping us to translate the software.
## Starting a translation ## Creating a new translation
Before you start working on a translation, look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone else is already working on one for your language. Before you start working on a new language, please look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone is already working on a translation. If you find one, please join the discussion and help us keep the existing translations up to date.
If there's not, then today is your day to lead this effort! Here's how to start: if there is no existing translation, you can create a new one by following these steps:
1. [Fork this repository](https://github.com/hoppscotch/hoppscotch/fork) 1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
2. Create a new branch for your translation work e.g. `es`. 2. **Create a new branch for your translation.**
3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings. 3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
4. Add your language entry to `nuxt.config.js`. 4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/locales/en.json) to the target language file.**
5. **Translate the strings in the target language file.**
6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/languages.json).**
7. **Save & commit changes.**
8. **Send a pull request.**
e.g. _You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However, your pull request will not be merged until all steps above are complete._
```
i18n: {
locales: [
{
code: "en",
name: "English",
iso: "en-US",
file: "en-US.json",
},
{
code: 'es',
name: 'Español',
iso: 'es-ES',
file: 'es-ES.json'
}
]
}
```
5. Save & commit changes.
6. Send a pull request. (You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However your pull request will not be merged until all steps above are complete.)
Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests. Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests.

41
assets/scss/styles.scss
View File

@@ -198,7 +198,7 @@ hr {
@apply rounded; @apply rounded;
@apply text-secondaryDark; @apply text-secondaryDark;
@apply border border-divider; @apply border border-divider;
@apply focus-visible:border-accent; @apply focus-visible:border-dividerDark;
} }
input, input,
@@ -242,7 +242,7 @@ button {
} }
.floating-input:focus-within ~ label { .floating-input:focus-within ~ label {
@apply text-accent; @apply text-secondaryDark;
} }
pre.ace_editor { pre.ace_editor {
@@ -292,7 +292,7 @@ pre.ace_editor {
@apply pointer-events-none; @apply pointer-events-none;
@apply font-icon; @apply font-icon;
@apply text-secondaryLight; @apply text-secondaryLight;
@apply left-3; @apply left-4;
content: "\e8b6"; content: "\e8b6";
} }
@@ -400,20 +400,35 @@ input[type="checkbox"] {
} }
} }
.splitpanes__splitter { .smart-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight; @apply bg-primaryLight;
} }
.splitpanes--vertical > .splitpanes__splitter { .no-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1; @apply w-1;
} }
.splitpanes--horizontal > .splitpanes__splitter { .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1; @apply h-1;
} }
.splitpanes__splitter::before { .no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5;
@apply pointer-events-none;
}
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5;
@apply pointer-events-none;
}
.smart-splitter .splitpanes__splitter::before {
@apply absolute; @apply absolute;
@apply inset-0; @apply inset-0;
@apply bg-dividerLight; @apply bg-dividerLight;
@@ -424,7 +439,7 @@ input[type="checkbox"] {
content: ""; content: "";
} }
.splitpanes__splitter::after { .smart-splitter .splitpanes__splitter::after {
@apply absolute; @apply absolute;
@apply inset-0; @apply inset-0;
@apply z-30; @apply z-30;
@@ -436,25 +451,25 @@ input[type="checkbox"] {
@apply font-icon; @apply font-icon;
} }
.splitpanes--vertical > .splitpanes__splitter::after { .smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4"; content: "\e5d4";
} }
.splitpanes--horizontal > .splitpanes__splitter::after { .smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3"; content: "\e5d3";
} }
.splitpanes__splitter:hover::before { .smart-splitter .splitpanes__splitter:hover::before {
@apply opacity-100; @apply opacity-100;
} }
.splitpanes--vertical > .splitpanes__splitter::before { .smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
@apply -left-0.5; @apply -left-0.5;
@apply -right-0.5; @apply -right-0.5;
@apply h-full; @apply h-full;
} }
.splitpanes--horizontal > .splitpanes__splitter::before { .smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
@apply -top-0.5; @apply -top-0.5;
@apply -bottom-0.5; @apply -bottom-0.5;
@apply w-full; @apply w-full;

18
assets/scss/themes.scss
View File

@@ -37,25 +37,25 @@
// Background color // Background color
--primary-color: theme("colors.white"); --primary-color: theme("colors.white");
// Light Background color // Light Background color
--primary-light-color: theme("colors.blue-gray.50"); --primary-light-color: theme("colors.true-gray.50");
// Dark Background color // Dark Background color
--primary-dark-color: theme("colors.blue-gray.100"); --primary-dark-color: theme("colors.true-gray.100");
// Text color // Text color
--secondary-color: theme("colors.blue-gray.500"); --secondary-color: theme("colors.true-gray.500");
// Light Text color // Light Text color
--secondary-light-color: theme("colors.blue-gray.400"); --secondary-light-color: theme("colors.true-gray.400");
// Dark Text color // Dark Text color
--secondary-dark-color: theme("colors.blue-gray.900"); --secondary-dark-color: theme("colors.true-gray.900");
// Border color // Border color
--divider-color: theme("colors.blue-gray.200"); --divider-color: theme("colors.true-gray.200");
// Light Border color // Light Border color
--divider-light-color: theme("colors.blue-gray.100"); --divider-light-color: theme("colors.true-gray.100");
// Dark Border color // Dark Border color
--divider-dark-color: theme("colors.blue-gray.300"); --divider-dark-color: theme("colors.true-gray.300");
// Error color // Error color
--error-color: theme("colors.yellow.100"); --error-color: theme("colors.yellow.100");
// Tooltip color // Tooltip color
--tooltip-color: theme("colors.blue-gray.800"); --tooltip-color: theme("colors.true-gray.800");
// Popover color // Popover color
--popover-color: theme("colors.white"); --popover-color: theme("colors.white");
// Editor theme // Editor theme

57
components/app/Sidenav.vue
View File

@@ -17,7 +17,7 @@
<span>{{ navigation.title }}</span> <span>{{ navigation.title }}</span>
</NuxtLink> </NuxtLink>
</nav> </nav>
<nav <!-- <nav
class=" class="
flex flex-nowrap flex flex-nowrap
p-4 p-4
@@ -25,7 +25,7 @@
justify-center justify-center
md:(flex-col md:(flex-col
space-x-0 space-y-2) space-x-0 space-y-2)
" "
> >
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }" v-tippy="{ theme: 'tooltip', placement: 'top' }"
@@ -48,41 +48,41 @@
class="rounded" class="rounded"
@click.native="showSupport = true" @click.native="showSupport = true"
/> />
</nav> </nav> -->
<AppSearch :show="showSearch" @hide-modal="showSearch = false" /> <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" /> <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" /> <AppShare :show="showShare" @hide-modal="showShare = false" /> -->
</aside> </aside>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { defineActionHandler } from "~/helpers/actions" // import { defineActionHandler } from "~/helpers/actions"
export default defineComponent({ export default defineComponent({
setup() { // setup() {
const showSearch = ref(false) // const showSearch = ref(false)
const showSupport = ref(false) // const showSupport = ref(false)
const showShare = ref(false) // const showShare = ref(false)
defineActionHandler("modals.search.toggle", () => { // defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value // showSearch.value = !showSearch.value
}) // })
defineActionHandler("modals.support.toggle", () => { // defineActionHandler("modals.support.toggle", () => {
showSupport.value = !showSupport.value // showSupport.value = !showSupport.value
}) // })
defineActionHandler("modals.share.toggle", () => { // defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value // showShare.value = !showShare.value
}) // })
return { // return {
showSearch, // showSearch,
showSupport, // showSupport,
showShare, // showShare,
} // }
}, // },
data() { data() {
return { return {
primaryNavigation: [ primaryNavigation: [
@@ -159,8 +159,9 @@ export default defineComponent({
} }
&.exact-active-link { &.exact-active-link {
@apply text-accent; @apply text-secondaryDark;
@apply hover:text-accent; @apply bg-primaryLight;
@apply hover:text-secondaryDark;
.material-icons, .material-icons,
.svg-icons { .svg-icons {

3
components/collections/ChooseType.vue
View File

@@ -18,8 +18,7 @@
type="text" type="text"
autofocus autofocus
class=" class="
bg-primaryLight bg-primary
border-b border-dividerLight
cursor-pointer cursor-pointer
flex flex
w-full w-full

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

@@ -4,7 +4,14 @@
:class="{ 'rounded border border-divider': savingMode }" :class="{ 'rounded border border-divider': savingMode }"
> >
<div <div
class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky" class="
divide-y divide-dividerLight
border-b border-dividerLight
flex flex-col
top-sidebarPrimaryStickyFold
z-10
sticky
"
:class="{ 'bg-primary': !savingMode }" :class="{ 'bg-primary': !savingMode }"
> >
<div v-if="showCollActions" class="search-wrapper"> <div v-if="showCollActions" class="search-wrapper">
@@ -12,18 +19,10 @@
v-model="filterText" v-model="filterText"
type="search" type="search"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
class=" class="bg-primary flex w-full py-2 pr-2 pl-10"
bg-primaryLight
border-b border-dividerLight
flex
w-full
py-2
pr-2
pl-9
"
/> />
</div> </div>
<div class="border-b border-dividerLight flex flex-1 justify-between"> <div class="flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"
:label="$t('action.new')" :label="$t('action.new')"

23
components/collections/index.vue
View File

@@ -4,7 +4,16 @@
:class="{ 'rounded border border-divider': saveRequest }" :class="{ 'rounded border border-divider': saveRequest }"
> >
<div <div
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky" class="
divide-y divide-dividerLight
bg-primary
border-b border-dividerLight
rounded-t
flex flex-col
top-0
z-10
sticky
"
:class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }" :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
> >
<div v-if="!saveRequest" class="search-wrapper"> <div v-if="!saveRequest" class="search-wrapper">
@@ -12,15 +21,7 @@
v-model="filterText" v-model="filterText"
type="search" type="search"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
class=" class="bg-primary flex w-full py-2 pr-2 pl-10"
bg-primaryLight
border-b border-dividerLight
flex
w-full
py-2
pr-2
pl-9
"
/> />
</div> </div>
<CollectionsChooseType <CollectionsChooseType
@@ -30,7 +31,7 @@
@update-collection-type="updateCollectionType" @update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam" @update-selected-team="updateSelectedTeam"
/> />
<div class="border-b border-dividerLight flex flex-1 justify-between"> <div class="flex flex-1 justify-between">
<ButtonSecondary <ButtonSecondary
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&

2
components/environments/index.vue
View File

@@ -16,7 +16,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('environment.select')" :title="$t('environment.select')"
class=" class="
bg-primaryLight bg-primary
border-b border-dividerLight border-b border-dividerLight
flex-1 flex-1
select-wrapper select-wrapper

4
components/graphql/Field.vue
View File

@@ -86,4 +86,8 @@ export default {
.field-highlighted { .field-highlighted {
@apply border-b-2 border-accent; @apply border-b-2 border-accent;
} }
.field-title {
@apply select-text;
}
</style> </style>

9
components/graphql/Request.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="space-x-2 flex-1 inline-flex">
<input <input
id="url" id="url"
v-model="url" v-model="url"
@@ -10,12 +10,13 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
px-4 px-4
focus-visible:border-accent hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
" "
:placeholder="$t('request.url')" :placeholder="$t('request.url')"
@keyup.enter="onConnectClick" @keyup.enter="onConnectClick"
@@ -24,7 +25,7 @@
id="get" id="get"
name="get" name="get"
:label="!connected ? $t('action.connect') : $t('action.disconnect')" :label="!connected ? $t('action.connect') : $t('action.disconnect')"
class="rounded-l-none w-28" class="w-32"
@click.native="onConnectClick" @click.native="onConnectClick"
/> />
</div> </div>

4
components/graphql/RequestOptions.vue
View File

@@ -159,7 +159,7 @@
:value="header.key" :value="header.key"
autofocus autofocus
styles=" styles="
bg-primaryLight bg-primary
flex flex
flex-1 flex-1
py-1 py-1
@@ -176,7 +176,7 @@
" "
/> />
<input <input
class="bg-primaryLight flex flex-1 py-2 px-4" class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })" :placeholder="$t('count.value', { count: index + 1 })"
:name="`value ${index}`" :name="`value ${index}`"
:value="header.value" :value="header.value"

8
components/graphql/Response.vue
View File

@@ -67,12 +67,12 @@
<span class="flex flex-1 items-center"> <span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }} {{ $t("shortcut.general.show_all") }}
</span> </span>
<span class="flex flex-1 items-center"> <!-- <span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }} {{ $t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }} {{ $t("shortcut.general.help_menu") }}
</span> </span> -->
</div> </div>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex"> <div class="flex">
@@ -83,12 +83,12 @@
<span class="shortcut-key">{{ getSpecialKey() }}</span> <span class="shortcut-key">{{ getSpecialKey() }}</span>
<span class="shortcut-key">K</span> <span class="shortcut-key">K</span>
</div> </div>
<div class="flex"> <!-- <div class="flex">
<span class="shortcut-key">/</span> <span class="shortcut-key">/</span>
</div> </div>
<div class="flex"> <div class="flex">
<span class="shortcut-key">?</span> <span class="shortcut-key">?</span>
</div> </div> -->
</div> </div>
</div> </div>
<ButtonSecondary <ButtonSecondary

13
components/graphql/Sidebar.vue
View File

@@ -3,21 +3,13 @@
<SmartTabs styles="sticky z-10 top-0"> <SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs"> <AppSection label="docs">
<div <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
class="
bg-primaryLight
flex
top-sidebarPrimaryStickyFold
z-10
sticky
"
>
<div class="search-wrapper"> <div class="search-wrapper">
<input <input
v-model="graphqlFieldsFilterText" v-model="graphqlFieldsFilterText"
type="search" type="search"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
class="bg-primaryLight flex w-full py-2 pr-2 pl-9" class="bg-primary flex w-full py-2 pr-2 pl-10"
/> />
</div> </div>
<div class="flex"> <div class="flex">
@@ -138,7 +130,6 @@
v-if="schemaString" v-if="schemaString"
class=" class="
bg-primary bg-primary
border-b border-dividerLight
flex flex-1 flex flex-1
top-sidebarPrimaryStickyFold top-sidebarPrimaryStickyFold
pl-4 pl-4

4
components/history/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="history"> <AppSection label="history">
<div <div
class=" class="
bg-primaryLight bg-primary
border-b border-dividerLight border-b border-dividerLight
flex flex
top-sidebarPrimaryStickyFold top-sidebarPrimaryStickyFold
@@ -14,7 +14,7 @@
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
class="bg-primaryLight flex w-full py-2 pr-2 pl-9" class="bg-primary flex w-full py-2 pr-2 pl-10"
:placeholder="$t('action.search')" :placeholder="$t('action.search')"
/> />
</div> </div>

6
components/http/Headers.vue
View File

@@ -50,7 +50,7 @@
:value="header.key" :value="header.key"
autofocus autofocus
styles=" styles="
bg-primaryLight bg-primary
flex flex
flex-1 flex-1
py-1 py-1
@@ -71,7 +71,7 @@
v-model="header.value" v-model="header.value"
:placeholder="$t('count.value', { count: index + 1 })" :placeholder="$t('count.value', { count: index + 1 })"
styles=" styles="
bg-primaryLight bg-primary
flex flex
flex-1 flex-1
py-1 py-1
@@ -87,7 +87,7 @@
/> />
<input <input
v-else v-else
class="bg-primaryLight flex flex-1 py-2 px-4" class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })" :placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index" :name="'value' + index"
:value="header.value" :value="header.value"

8
components/http/Parameters.vue
View File

@@ -48,7 +48,7 @@
v-model="param.key" v-model="param.key"
:placeholder="$t('count.parameter', { count: index + 1 })" :placeholder="$t('count.parameter', { count: index + 1 })"
styles=" styles="
bg-primaryLight bg-primary
flex flex
flex-1 flex-1
py-1 py-1
@@ -64,7 +64,7 @@
/> />
<input <input
v-else v-else
class="bg-primaryLight flex flex-1 py-2 px-4" class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.parameter', { count: index + 1 })" :placeholder="$t('count.parameter', { count: index + 1 })"
:name="'param' + index" :name="'param' + index"
:value="param.key" :value="param.key"
@@ -82,7 +82,7 @@
v-model="param.value" v-model="param.value"
:placeholder="$t('count.value', { count: index + 1 })" :placeholder="$t('count.value', { count: index + 1 })"
styles=" styles="
bg-primaryLight bg-primary
flex flex
flex-1 flex-1
py-1 py-1
@@ -98,7 +98,7 @@
/> />
<input <input
v-else v-else
class="bg-primaryLight flex flex-1 py-2 px-4" class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })" :placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index" :name="'value' + index"
:value="param.value" :value="param.value"

14
components/http/Request.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
<div class="flex flex-1"> <div class="flex flex-1">
<div class="flex relative"> <div class="flex relative">
<label for="method"> <label for="method">
@@ -26,7 +26,7 @@
px-4 px-4
w-28 w-28
hover:border-dividerDark hover:border-dividerDark
focus-visible:border-accent focus-visible:bg-primary focus-visible:border-dividerDark
" "
:value="newMethod" :value="newMethod"
:readonly="!isCustomMethod" :readonly="!isCustomMethod"
@@ -54,11 +54,13 @@
border border-divider border border-divider
flex flex
flex-1 flex-1
rounded-r
text-secondaryDark text-secondaryDark
py-1 py-1
px-4 px-4
hover:border-dividerDark hover:border-dividerDark
focus-visible:border-accent focus-visible:border-dividerDark
focus-visible:bg-primary
" "
@enter="newSendRequest()" @enter="newSendRequest()"
/> />
@@ -70,12 +72,14 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-r
flex flex
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
px-4 px-4
focus-visible:border-accent hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
" "
name="url" name="url"
type="text" type="text"
@@ -89,7 +93,7 @@
<div class="flex"> <div class="flex">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="rounded-none flex-1 min-w-24" class="rounded-r-none flex-1 min-w-22"
:label="!loading ? $t('action.send') : $t('action.cancel')" :label="!loading ? $t('action.send') : $t('action.cancel')"
@click.native="!loading ? newSendRequest() : cancelRequest()" @click.native="!loading ? newSendRequest() : cancelRequest()"
/> />

8
components/http/ResponseMeta.vue
View File

@@ -17,12 +17,12 @@
<span class="flex flex-1 items-center"> <span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }} {{ $t("shortcut.general.show_all") }}
</span> </span>
<span class="flex flex-1 items-center"> <!-- <span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }} {{ $t("shortcut.general.command_menu") }}
</span> </span>
<span class="flex flex-1 items-center"> <span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }} {{ $t("shortcut.general.help_menu") }}
</span> </span> -->
</div> </div>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex"> <div class="flex">
@@ -33,12 +33,12 @@
<span class="shortcut-key">{{ getSpecialKey() }}</span> <span class="shortcut-key">{{ getSpecialKey() }}</span>
<span class="shortcut-key">K</span> <span class="shortcut-key">K</span>
</div> </div>
<div class="flex"> <!-- <div class="flex">
<span class="shortcut-key">/</span> <span class="shortcut-key">/</span>
</div> </div>
<div class="flex"> <div class="flex">
<span class="shortcut-key">?</span> <span class="shortcut-key">?</span>
</div> </div> -->
</div> </div>
</div> </div>
<ButtonSecondary <ButtonSecondary

44
components/lenses/HeadersRenderer.vue
View File

@@ -1,5 +1,32 @@
<template> <template>
<div> <div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="headers"
ref="copyHeaders"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
@click.native="copyHeaders"
/>
</div>
</div>
<div <div
v-for="(header, index) in headers" v-for="(header, index) in headers"
:key="`header-${index}`" :key="`header-${index}`"
@@ -43,9 +70,26 @@
</template> </template>
<script> <script>
import { copyToClipboard } from "~/helpers/utils/clipboard"
export default { export default {
props: { props: {
headers: { type: Array, default: () => [] }, headers: { type: Array, default: () => [] },
}, },
data() {
return {
copyIcon: "content_copy",
}
},
methods: {
copyHeaders() {
copyToClipboard(JSON.stringify(this.headers))
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},
},
} }
</script> </script>

2
components/realtime/Log.vue
View File

@@ -59,7 +59,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.realtime-log { .realtime-log {
@apply p-4; @apply p-4;
@apply bg-primaryLight; @apply bg-primary;
@apply text-secondary; @apply text-secondary;
@apply overflow-auto; @apply overflow-auto;

13
components/realtime/Mqtt.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="space-x-2 flex-1 inline-flex">
<input <input
id="mqtt-url" id="mqtt-url"
v-model="url" v-model="url"
@@ -15,19 +15,20 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
px-4 px-4
focus-visible:border-accent hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
" "
:placeholder="$t('mqtt.url')" :placeholder="$t('mqtt.url')"
/> />
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!validUrl" :disabled="!validUrl"
class="rounded-l-none w-28" class="w-32"
:label=" :label="
connectionState connectionState
? $t('action.disconnect') ? $t('action.disconnect')

88
components/realtime/Socketio.vue
View File

@@ -1,52 +1,57 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="space-x-2 flex-1 inline-flex">
<input <div class="flex flex-1">
id="socketio-url" <input
v-model="url" id="socketio-url"
v-focus v-model="url"
type="url" v-focus
spellcheck="false" type="url"
:class="{ error: !urlValid }" spellcheck="false"
class=" :class="{ error: !urlValid }"
bg-primaryLight class="
border border-divider bg-primaryLight
rounded-l border border-divider
flex flex-1 rounded-l
text-secondaryDark flex flex-1
w-full text-secondaryDark
py-2 w-full
px-4 py-2
focus-visible:border-accent px-4
" hover:border-dividerDark
:placeholder="$t('socketio.url')" focus-visible:bg-primary focus-visible:border-dividerDark
@keyup.enter="urlValid ? toggleConnection() : null" "
/> :placeholder="$t('socketio.url')"
<input @keyup.enter="urlValid ? toggleConnection() : null"
id="socketio-path" />
v-model="path" <input
class=" id="socketio-path"
bg-primaryLight v-model="path"
border border-divider class="
flex flex-1 bg-primaryLight
text-secondaryDark border border-divider
w-full rounded-r
py-2 flex flex-1
px-4 text-secondaryDark
focus-visible:border-accent w-full
" py-2
spellcheck="false" px-4
/> hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
name="connect" name="connect"
class="rounded-l-none w-28" class="w-32"
:label=" :label="
!connectionState !connectionState
? $t('action.connect') ? $t('action.connect')
@@ -99,6 +104,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')" :title="$t('add.new')"
icon="add" icon="add"
class="rounded"
@click.native="addCommunicationInput" @click.native="addCommunicationInput"
/> />
</div> </div>
@@ -123,7 +129,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')" :title="$t('action.remove')"
icon="remove_circle_outline" icon="remove_circle_outline"
class="rounded-l-none" class="rounded-r"
color="red" color="red"
outline outline
@click.native="removeCommunicationInput({ index })" @click.native="removeCommunicationInput({ index })"

109
components/realtime/Sse.vue
View File

@@ -1,62 +1,67 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="space-x-2 flex-1 inline-flex">
<input <div class="flex flex-1">
id="server" <input
v-model="server" id="server"
v-focus v-model="server"
type="url" v-focus
:class="{ error: !serverValid }" type="url"
class=" :class="{ error: !serverValid }"
bg-primaryLight class="
border border-divider bg-primaryLight
rounded-l border border-divider
flex flex-1 rounded-l
text-secondaryDark flex flex-1
w-full text-secondaryDark
py-2 w-full
px-4 py-2
focus-visible:border-accent px-4
" hover:border-dividerDark
:placeholder="$t('sse.url')" focus-visible:bg-primary focus-visible:border-dividerDark
@keyup.enter="serverValid ? toggleSSEConnection() : null" "
/> :placeholder="$t('sse.url')"
<label @keyup.enter="serverValid ? toggleSSEConnection() : null"
for="url" />
class=" <label
bg-primaryLight for="url"
border-t border-b border-divider class="
font-semibold bg-primaryLight
text-secondaryLight border-t border-b border-divider
py-2 font-semibold
px-4 text-secondaryLight
truncate py-2
" px-4
> truncate
{{ $t("sse.event_type") }} "
</label> >
<input {{ $t("sse.event_type") }}
id="event-type" </label>
v-model="eventType" <input
class=" id="event-type"
bg-primaryLight v-model="eventType"
border border-divider class="
flex flex-1 bg-primaryLight
text-secondaryDark border border-divider
w-full rounded-r
py-2 flex flex-1
px-4 text-secondaryDark
focus-visible:border-accent w-full
" py-2
spellcheck="false" px-4
/> hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary <ButtonPrimary
id="start" id="start"
:disabled="!serverValid" :disabled="!serverValid"
name="start" name="start"
class="rounded-l-none w-22" class="w-32"
:label=" :label="
!connectionSSEState ? $t('action.start') : $t('action.stop') !connectionSSEState ? $t('action.start') : $t('action.stop')
" "

15
components/realtime/Websocket.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request"> <AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky"> <div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex"> <div class="space-x-2 flex-1 inline-flex">
<input <input
id="websocket-url" id="websocket-url"
v-model="url" v-model="url"
@@ -13,12 +13,13 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded
text-secondaryDark text-secondaryDark
w-full w-full
py-2 py-2
px-4 px-4
focus-visible:border-accent hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
" "
type="url" type="url"
spellcheck="false" spellcheck="false"
@@ -29,7 +30,7 @@
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
class="rounded-l-none w-28" class="w-32"
name="connect" name="connect"
:label=" :label="
!connectionState !connectionState
@@ -83,7 +84,7 @@
> >
<input <input
v-model="protocol.value" v-model="protocol.value"
class="bg-primaryLight flex flex-1 py-2 px-4" class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.protocol', { count: index + 1 })" :placeholder="$t('count.protocol', { count: index + 1 })"
name="message" name="message"
type="text" type="text"

69
components/smart/Tabs.vue
View File

@@ -1,25 +1,30 @@
<template> <template>
<div class="flex flex-col flex-nowrap flex-1"> <div class="flex flex-col flex-nowrap flex-1">
<div class="rounded-t tabs hide-scrollbar relative" :class="styles"> <div class="rounded-t tabs hide-scrollbar relative" :class="styles">
<div class="flex w-0"> <div class="flex flex-1">
<div class="inline-flex"> <div class="flex flex-1 justify-between">
<button <div class="flex">
v-for="(tab, index) in tabs" <button
:key="`tab-${index}`" v-for="(tab, index) in tabs"
class="tab" :key="`tab-${index}`"
:class="{ active: tab.active }" class="tab"
tabindex="0" :class="{ active: tab.active }"
@keyup.enter="selectTab(tab)" tabindex="0"
@click="selectTab(tab)" @keyup.enter="selectTab(tab)"
> @click="selectTab(tab)"
<i v-if="tab.icon" class="material-icons"> >
{{ tab.icon }} <i v-if="tab.icon" class="material-icons">
</i> {{ tab.icon }}
<span v-if="tab.label">{{ tab.label }}</span> </i>
<span v-if="tab.info" class="tab-info"> <span v-if="tab.label">{{ tab.label }}</span>
{{ tab.info }} <span v-if="tab.info" class="tab-info">
</span> {{ tab.info }}
</button> </span>
</button>
</div>
<div class="flex">
<slot name="actions"></slot>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -64,16 +69,16 @@ export default {
@apply overflow-auto; @apply overflow-auto;
@apply bg-primary; @apply bg-primary;
&::after { // &::after {
@apply absolute; // @apply absolute;
@apply inset-x-0; // @apply inset-x-0;
@apply bottom-0; // @apply bottom-0;
@apply bg-dividerLight; // @apply bg-dividerLight;
@apply z-1; // @apply z-1;
@apply h-0.5; // @apply h-0.5;
content: ""; // content: "";
} // }
.tab { .tab {
@apply relative; @apply relative;
@@ -104,9 +109,10 @@ export default {
&::after { &::after {
@apply absolute; @apply absolute;
@apply inset-x-0; @apply left-4;
@apply right-4;
@apply bottom-0; @apply bottom-0;
@apply bg-dividerLight; @apply bg-primary;
@apply z-2; @apply z-2;
@apply h-0.5; @apply h-0.5;
@@ -122,8 +128,7 @@ export default {
} }
&.active { &.active {
@apply text-accent; @apply text-secondaryDark;
@apply border-accent;
.tab-info { .tab-info {
@apply text-secondary; @apply text-secondary;

25
components/teams/Team.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-1 items-end"> <div class="border border-dividerLight rounded flex flex-1 items-end">
<div class="flex flex-1 items-start"> <div class="flex flex-1 items-start">
<div class="p-4"> <div class="p-4">
<label <label
@@ -12,6 +12,8 @@
<img <img
v-for="(member, index) in team.members" v-for="(member, index) in team.members"
:key="`member-${index}`" :key="`member-${index}`"
v-tippy="{ theme: 'tooltip' }"
:title="member.user.displayName"
:src="member.user.photoURL" :src="member.user.photoURL"
:alt="member.user.displayName" :alt="member.user.displayName"
class="rounded-full h-5 ring-primary ring-2 w-5 inline-block" class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
@@ -47,21 +49,24 @@
$refs.options.tippy().hide() $refs.options.tippy().hide()
" "
/> />
<SmartItem <span
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title=" :title="
team.myRole === 'OWNER' && team.ownersCount == 1 team.myRole === 'OWNER' && team.ownersCount == 1
? $t('team.exit_disabled') ? $t('team.exit_disabled')
: '' : ''
" "
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1" >
icon="remove" <SmartItem
:label="$t('team.exit')" :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
@click.native=" icon="remove"
exitTeam() :label="$t('team.exit')"
$refs.options.tippy().hide() @click.native="
" exitTeam()
/> $refs.options.tippy().hide()
"
/>
</span>
</tippy> </tippy>
</span> </span>
</div> </div>

11
components/teams/index.vue
View File

@@ -24,16 +24,7 @@
<i class="mr-4 material-icons">help_outline</i> <i class="mr-4 material-icons">help_outline</i>
{{ $t("empty.teams") }} {{ $t("empty.teams") }}
</div> </div>
<div <div v-else class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
v-else
class="
divide-y divide-dividerLight
border border-divider
rounded
flex flex-col flex-1
md:w-64
"
>
<TeamsTeam <TeamsTeam
v-for="(team, index) in myTeams" v-for="(team, index) in myTeams"
:key="`team-${index}`" :key="`team-${index}`"

34
helpers/shortcuts.js
View File

@@ -4,14 +4,14 @@ export default [
{ {
section: "shortcut.general.title", section: "shortcut.general.title",
shortcuts: [ shortcuts: [
{ // {
keys: ["?"], // keys: ["?"],
label: "shortcut.general.help_menu", // label: "shortcut.general.help_menu",
}, // },
{ // {
keys: ["/"], // keys: ["/"],
label: "shortcut.general.command_menu", // label: "shortcut.general.command_menu",
}, // },
{ {
keys: [getPlatformSpecialKey(), "K"], keys: [getPlatformSpecialKey(), "K"],
label: "shortcut.general.show_all", label: "shortcut.general.show_all",
@@ -104,15 +104,15 @@ export default [
}, },
], ],
}, },
{ // {
section: "shortcut.miscellaneous.title", // section: "shortcut.miscellaneous.title",
shortcuts: [ // shortcuts: [
{ // {
keys: [getPlatformSpecialKey(), "M"], // keys: [getPlatformSpecialKey(), "M"],
label: "shortcut.miscellaneous.invite", // label: "shortcut.miscellaneous.invite",
}, // },
], // ],
}, // },
] ]
export const spotlight = [ export const spotlight = [

9
layouts/default.vue
View File

@@ -1,11 +1,12 @@
<template> <template>
<div class="flex h-screen w-screen"> <div class="flex h-screen w-screen">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal>
<Pane v-if="!ZEN_MODE" style="height: auto"> <Pane v-if="!ZEN_MODE" style="height: auto">
<AppHeader /> <AppHeader />
</Pane> </Pane>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
<Splitpanes <Splitpanes
class="no-splitter"
:dbl-click-splitter="false" :dbl-click-splitter="false"
:horizontal="!(windowInnerWidth >= 768)" :horizontal="!(windowInnerWidth >= 768)"
> >
@@ -17,7 +18,11 @@
<AppSidenav /> <AppSidenav />
</Pane> </Pane>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes
class="no-splitter"
:dbl-click-splitter="false"
horizontal
>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto"> <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
<main class="flex flex-1 w-full"> <main class="flex flex-1 w-full">
<nuxt class="flex flex-1" /> <nuxt class="flex flex-1" />

4
pages/documentation.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<AppSection label="import"> <AppSection label="import">
<div class="flex p-4 items-start justify-between"> <div class="flex p-4 items-start justify-between">

8
pages/graphql.vue
View File

@@ -1,8 +1,12 @@
<template> <template>
<div> <div>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
horizontal
>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<GraphqlRequest :conn="gqlConn" /> <GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" /> <GraphqlRequestOptions :conn="gqlConn" />

4
pages/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<Splitpanes :dbl-click-splitter="false" vertical> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto"> <Pane class="hide-scrollbar !overflow-auto">
<HttpRequest /> <HttpRequest />
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10"> <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">

2
pages/realtime.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<SmartTabs <SmartTabs
class="h-full overflow-hidden" class="h-full overflow-hidden"
styles="sticky top-0 z-10 !overflow-visible" styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
> >
<SmartTab <SmartTab
id="websocket" id="websocket"