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
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)
2. Create a new branch for your translation work e.g. `es`.
3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings.
4. Add your language entry to `nuxt.config.js`.
1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
2. **Create a new branch for your translation.**
3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
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.
```
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.)
_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.

41
assets/scss/styles.scss
View File

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

18
assets/scss/themes.scss
View File

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

55
components/app/Sidenav.vue
View File

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

3
components/collections/ChooseType.vue
View File

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

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

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

23
components/collections/index.vue
View File

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

2
components/environments/index.vue
View File

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

4
components/graphql/Field.vue
View File

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

9
components/graphql/Request.vue
View File

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

4
components/graphql/RequestOptions.vue
View File

@@ -159,7 +159,7 @@
:value="header.key"
autofocus
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -176,7 +176,7 @@
"
/>
<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 })"
:name="`value ${index}`"
:value="header.value"

8
components/graphql/Response.vue
View File

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

13
components/graphql/Sidebar.vue
View File

@@ -3,21 +3,13 @@
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div
class="
bg-primaryLight
flex
top-sidebarPrimaryStickyFold
z-10
sticky
"
>
<div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
<div class="search-wrapper">
<input
v-model="graphqlFieldsFilterText"
type="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 class="flex">
@@ -138,7 +130,6 @@
v-if="schemaString"
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-sidebarPrimaryStickyFold
pl-4

4
components/history/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="history">
<div
class="
bg-primaryLight
bg-primary
border-b border-dividerLight
flex
top-sidebarPrimaryStickyFold
@@ -14,7 +14,7 @@
<input
v-model="filterText"
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')"
/>
</div>

6
components/http/Headers.vue
View File

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

8
components/http/Parameters.vue
View File

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

14
components/http/Request.vue
View File

@@ -1,5 +1,5 @@
<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 relative">
<label for="method">
@@ -26,7 +26,7 @@
px-4
w-28
hover:border-dividerDark
focus-visible:border-accent
focus-visible:bg-primary focus-visible:border-dividerDark
"
:value="newMethod"
:readonly="!isCustomMethod"
@@ -54,11 +54,13 @@
border border-divider
flex
flex-1
rounded-r
text-secondaryDark
py-1
px-4
hover:border-dividerDark
focus-visible:border-accent
focus-visible:border-dividerDark
focus-visible:bg-primary
"
@enter="newSendRequest()"
/>
@@ -70,12 +72,14 @@
class="
bg-primaryLight
border border-divider
rounded-r
flex
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
name="url"
type="text"
@@ -89,7 +93,7 @@
<div class="flex">
<ButtonPrimary
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')"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>

8
components/http/ResponseMeta.vue
View File

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

44
components/lenses/HeadersRenderer.vue
View File

@@ -1,5 +1,32 @@
<template>
<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
v-for="(header, index) in headers"
:key="`header-${index}`"
@@ -43,9 +70,26 @@
</template>
<script>
import { copyToClipboard } from "~/helpers/utils/clipboard"
export default {
props: {
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>

2
components/realtime/Log.vue
View File

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

13
components/realtime/Mqtt.vue
View File

@@ -1,11 +1,11 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<AppSection label="request">
<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
id="mqtt-url"
v-model="url"
@@ -15,19 +15,20 @@
class="
bg-primaryLight
border border-divider
rounded-l
rounded
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('mqtt.url')"
/>
<ButtonPrimary
id="connect"
:disabled="!validUrl"
class="rounded-l-none w-28"
class="w-32"
:label="
connectionState
? $t('action.disconnect')

20
components/realtime/Socketio.vue
View File

@@ -1,11 +1,12 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<AppSection label="request">
<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">
<div class="flex flex-1">
<input
id="socketio-url"
v-model="url"
@@ -22,7 +23,8 @@
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('socketio.url')"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -33,20 +35,23 @@
class="
bg-primaryLight
border border-divider
rounded-r
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary
id="connect"
:disabled="!urlValid"
name="connect"
class="rounded-l-none w-28"
class="w-32"
:label="
!connectionState
? $t('action.connect')
@@ -99,6 +104,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
class="rounded"
@click.native="addCommunicationInput"
/>
</div>
@@ -123,7 +129,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
class="rounded-l-none"
class="rounded-r"
color="red"
outline
@click.native="removeCommunicationInput({ index })"

15
components/realtime/Sse.vue
View File

@@ -1,8 +1,9 @@
<template>
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<div class="space-x-2 flex-1 inline-flex">
<div class="flex flex-1">
<input
id="server"
v-model="server"
@@ -18,7 +19,8 @@
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('sse.url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -43,20 +45,23 @@
class="
bg-primaryLight
border border-divider
rounded-r
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary
id="start"
:disabled="!serverValid"
name="start"
class="rounded-l-none w-22"
class="w-32"
:label="
!connectionSSEState ? $t('action.start') : $t('action.stop')
"

15
components/realtime/Websocket.vue
View File

@@ -1,11 +1,11 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<AppSection label="request">
<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
id="websocket-url"
v-model="url"
@@ -13,12 +13,13 @@
class="
bg-primaryLight
border border-divider
rounded-l
rounded
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
type="url"
spellcheck="false"
@@ -29,7 +30,7 @@
<ButtonPrimary
id="connect"
:disabled="!urlValid"
class="rounded-l-none w-28"
class="w-32"
name="connect"
:label="
!connectionState
@@ -83,7 +84,7 @@
>
<input
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 })"
name="message"
type="text"

35
components/smart/Tabs.vue
View File

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

9
components/teams/Team.vue
View File

@@ -1,5 +1,5 @@
<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="p-4">
<label
@@ -12,6 +12,8 @@
<img
v-for="(member, index) in team.members"
:key="`member-${index}`"
v-tippy="{ theme: 'tooltip' }"
:title="member.user.displayName"
:src="member.user.photoURL"
:alt="member.user.displayName"
class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
@@ -47,13 +49,15 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
team.myRole === 'OWNER' && team.ownersCount == 1
? $t('team.exit_disabled')
: ''
"
>
<SmartItem
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
icon="remove"
:label="$t('team.exit')"
@@ -62,6 +66,7 @@
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</div>

11
components/teams/index.vue
View File

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

34
helpers/shortcuts.js
View File

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

9
layouts/default.vue
View File

@@ -1,11 +1,12 @@
<template>
<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">
<AppHeader />
</Pane>
<Pane class="flex flex-1 hide-scrollbar !overflow-auto">
<Splitpanes
class="no-splitter"
:dbl-click-splitter="false"
:horizontal="!(windowInnerWidth >= 768)"
>
@@ -17,7 +18,11 @@
<AppSidenav />
</Pane>
<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">
<main class="flex flex-1 w-full">
<nuxt class="flex flex-1" />

4
pages/documentation.vue
View File

@@ -1,7 +1,7 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<AppSection label="import">
<div class="flex p-4 items-start justify-between">

8
pages/graphql.vue
View File

@@ -1,8 +1,12 @@
<template>
<div>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" />

4
pages/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<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">
<HttpRequest />
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">

2
pages/realtime.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartTabs
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
id="websocket"