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

refactor: use pane layout component in pages

Browse Source
This commit is contained in:
liyasthomas
2022-03-02 07:57:05 +05:30
parent 6e59ae6424
commit 4b6581934e
9 changed files with 583 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/hoppscotch-app/components/app/PaneLayout.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<Splitpanes
class="smart-splitter"
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<slot name="primary" />
</Pane>
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="flex flex-col hide-scrollbar !overflow-auto"
>
<slot name="secondary" />
</Pane>
</Splitpanes>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<slot name="sidebar" />
</Pane>
</Splitpanes>
</template>
<script setup lang="ts">
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { useSetting } from "~/newstore/settings"
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
const SIDEBAR = useSetting("SIDEBAR")
</script>

58
packages/hoppscotch-app/components/realtime/Mqtt.vue
View File

@@ -1,22 +1,6 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
> >
@@ -37,9 +21,7 @@
:disabled="!validUrl" :disabled="!validUrl"
class="w-32" class="w-32"
:label=" :label="
connectionState connectionState ? $t('action.disconnect') : $t('action.connect')
? $t('action.disconnect')
: $t('action.connect')
" "
:loading="connectingState" :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
@@ -64,21 +46,11 @@
/> />
</div> </div>
</div> </div>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('mqtt.log')" :log="log" /> <RealtimeLog :title="$t('mqtt.log')" :log="log" />
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex items-center justify-between p-4"> <div class="flex items-center justify-between p-4">
<label for="pub_topic" class="font-semibold text-secondaryLight"> <label for="pub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }} {{ $t("mqtt.topic") }}
@@ -146,19 +118,15 @@
@click.native="toggleSubscription" @click.native="toggleSubscription"
/> />
</div> </div>
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import Paho from "paho-mqtt" import Paho from "paho-mqtt"
import debounce from "lodash/debounce" import debounce from "lodash/debounce"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings"
import { import {
MQTTEndpoint$, MQTTEndpoint$,
setMQTTEndpoint, setMQTTEndpoint,
@@ -177,16 +145,8 @@ import {
import { useStream } from "~/helpers/utils/composables" import { useStream } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
url: useStream(MQTTEndpoint$, "", setMQTTEndpoint), url: useStream(MQTTEndpoint$, "", setMQTTEndpoint),
connectionState: useStream( connectionState: useStream(
MQTTConnectionState$, MQTTConnectionState$,

59
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -1,22 +1,6 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
> >
@@ -80,9 +64,7 @@
name="connect" name="connect"
class="w-32" class="w-32"
:label=" :label="
!connectionState !connectionState ? $t('action.connect') : $t('action.disconnect')
? $t('action.connect')
: $t('action.disconnect')
" "
:loading="connectingState" :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
@@ -216,21 +198,11 @@
</div> </div>
</div> </div>
</div> </div>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('socketio.log')" :log="log" /> <RealtimeLog :title="$t('socketio.log')" :log="log" />
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex items-center justify-between p-4"> <div class="flex items-center justify-between p-4">
<label for="events" class="font-semibold text-secondaryLight"> <label for="events" class="font-semibold text-secondaryLight">
{{ $t("socketio.events") }} {{ $t("socketio.events") }}
@@ -297,24 +269,19 @@
</div> </div>
</div> </div>
</div> </div>
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script> <script>
import { defineComponent, ref } from "@nuxtjs/composition-api" import { defineComponent, ref } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
// All Socket.IO client version imports // All Socket.IO client version imports
import ClientV2 from "socket.io-client-v2" import ClientV2 from "socket.io-client-v2"
import { io as ClientV3 } from "socket.io-client-v3" import { io as ClientV3 } from "socket.io-client-v3"
import { io as ClientV4 } from "socket.io-client-v4" import { io as ClientV4 } from "socket.io-client-v4"
import wildcard from "socketio-wildcard" import wildcard from "socketio-wildcard"
import debounce from "lodash/debounce" import debounce from "lodash/debounce"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings"
import { import {
SIOEndpoint$, SIOEndpoint$,
setSIOEndpoint, setSIOEndpoint,
@@ -341,16 +308,8 @@ const socketIoClients = {
} }
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
socketIoClients, socketIoClients,
url: useStream(SIOEndpoint$, "", setSIOEndpoint), url: useStream(SIOEndpoint$, "", setSIOEndpoint),
clientVersion: useStream(SIOVersion$, "", setSIOVersion), clientVersion: useStream(SIOVersion$, "", setSIOVersion),

22
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT"> <AppPaneLayout>
<Pane <template #primary>
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
> >
@@ -48,23 +45,18 @@
/> />
</div> </div>
</div> </div>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('sse.log')" :log="log" /> <RealtimeLog :title="$t('sse.log')" :log="log" />
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css" import "splitpanes/dist/splitpanes.css"
import debounce from "lodash/debounce" import debounce from "lodash/debounce"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings"
import { import {
SSEEndpoint$, SSEEndpoint$,
setSSEEndpoint, setSSEEndpoint,
@@ -83,10 +75,8 @@ import {
import { useStream } from "~/helpers/utils/composables" import { useStream } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
return { return {
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
connectionSSEState: useStream( connectionSSEState: useStream(
SSEConnectionState$, SSEConnectionState$,
false, false,

58
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -1,22 +1,6 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div <div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
> >
@@ -39,9 +23,7 @@
class="w-32" class="w-32"
name="connect" name="connect"
:label=" :label="
!connectionState !connectionState ? $t('action.connect') : $t('action.disconnect')
? $t('action.connect')
: $t('action.disconnect')
" "
:loading="connectingState" :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
@@ -138,21 +120,11 @@
{{ $t("empty.protocols") }} {{ $t("empty.protocols") }}
</span> </span>
</div> </div>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<RealtimeLog :title="$t('websocket.log')" :log="log" /> <RealtimeLog :title="$t('websocket.log')" :log="log" />
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex items-center justify-between p-4"> <div class="flex items-center justify-between p-4">
<label <label
for="websocket-message" for="websocket-message"
@@ -183,18 +155,14 @@
@click.native="sendMessage" @click.native="sendMessage"
/> />
</div> </div>
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import debounce from "lodash/debounce" import debounce from "lodash/debounce"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics" import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings"
import { import {
setWSEndpoint, setWSEndpoint,
WSEndpoint$, WSEndpoint$,
@@ -217,16 +185,8 @@ import {
import { useStream } from "~/helpers/utils/composables" import { useStream } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
url: useStream(WSEndpoint$, "", setWSEndpoint), url: useStream(WSEndpoint$, "", setWSEndpoint),
protocols: useStream(WSProtocols$, [], setWSProtocols), protocols: useStream(WSProtocols$, [], setWSProtocols),
connectionState: useStream( connectionState: useStream(

2
packages/hoppscotch-app/layouts/default.vue
View File

@@ -23,7 +23,7 @@
horizontal 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" role="main">
<nuxt class="flex flex-1" /> <nuxt class="flex flex-1" />
</main> </main>
</Pane> </Pane>

59
packages/hoppscotch-app/pages/documentation.vue
View File

@@ -1,22 +1,6 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex items-start justify-between p-4"> <div class="flex items-start justify-between p-4">
<label> <label>
{{ $t("documentation.generate_message") }} {{ $t("documentation.generate_message") }}
@@ -69,11 +53,8 @@
@click.native="getDoc" @click.native="getDoc"
/> />
</div> </div>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
v-if="items.length === 0" v-if="items.length === 0"
@@ -111,22 +92,12 @@
/> />
</span> </span>
</div> </div>
<div <div v-for="(collection, index) in items" :key="`collection-${index}`">
v-for="(collection, index) in items"
:key="`collection-${index}`"
>
<DocsCollection :collection="collection" /> <DocsCollection :collection="collection" />
</div> </div>
</div> </div>
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<aside> <aside>
<Collections <Collections
:selected="selected" :selected="selected"
@@ -135,35 +106,23 @@
@remove-collection="removeSelectedCollection($event)" @remove-collection="removeSelectedCollection($event)"
/> />
</aside> </aside>
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script> <script>
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import Mustache from "mustache" import Mustache from "mustache"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { currentUser$ } from "~/helpers/fb/auth" import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md" import DocsTemplate from "~/assets/md/docs.md"
import folderContents from "~/assets/md/folderContents.md" import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md" import folderBody from "~/assets/md/folderBody.md"
import { useSetting } from "~/newstore/settings"
import { useReadonlyStream } from "~/helpers/utils/composables" import { useReadonlyStream } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
currentUser: useReadonlyStream(currentUser$, null), currentUser: useReadonlyStream(currentUser$, null),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
} }
}, },
data() { data() {

54
packages/hoppscotch-app/pages/graphql.vue
View File

@@ -1,55 +1,24 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<GraphqlRequest :conn="gqlConn" /> <GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" /> <GraphqlRequestOptions :conn="gqlConn" />
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<GraphqlResponse :conn="gqlConn" /> <GraphqlResponse :conn="gqlConn" />
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<GraphqlSidebar :conn="gqlConn" /> <GraphqlSidebar :conn="gqlConn" />
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, watch } from "@nuxtjs/composition-api" import { defineComponent, watch } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { useSetting } from "~/newstore/settings"
import { GQLConnection } from "~/helpers/GQLConnection" import { GQLConnection } from "~/helpers/GQLConnection"
import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables" import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
beforeRouteLeave(_to, _from, next) { beforeRouteLeave(_to, _from, next) {
if (this.gqlConn.connected$.value) { if (this.gqlConn.connected$.value) {
this.gqlConn.disconnect() this.gqlConn.disconnect()
@@ -68,14 +37,7 @@ export default defineComponent({
else nuxt.value.$loading.finish() else nuxt.value.$loading.finish()
}) })
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
gqlConn, gqlConn,
} }
}, },

59
packages/hoppscotch-app/pages/index.vue
View File

@@ -1,22 +1,6 @@
<template> <template>
<Splitpanes <AppPaneLayout>
class="smart-splitter" <template #primary>
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!mdAndLarger"
>
<Pane
size="75"
min-size="65"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane
:size="COLUMN_LAYOUT ? 45 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<HttpRequest /> <HttpRequest />
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10"> <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
<SmartTab <SmartTab
@@ -40,10 +24,7 @@
<HttpHeaders /> <HttpHeaders />
</SmartTab> </SmartTab>
<SmartTab <SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
:id="'authorization'"
:label="`${$t('tab.authorization')}`"
>
<HttpAuthorization /> <HttpAuthorization />
</SmartTab> </SmartTab>
@@ -65,21 +46,11 @@
<HttpTests /> <HttpTests />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</Pane> </template>
<Pane <template #secondary>
:size="COLUMN_LAYOUT ? 65 : 50"
class="flex flex-col hide-scrollbar !overflow-auto flex flex-col"
>
<HttpResponse ref="response" /> <HttpResponse ref="response" />
</Pane> </template>
</Splitpanes> <template #sidebar>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<SmartTabs styles="sticky bg-primary z-10 top-0" vertical> <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
<SmartTab <SmartTab
:id="'history'" :id="'history'"
@@ -106,8 +77,8 @@
<Environments /> <Environments />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</Pane> </template>
</Splitpanes> </AppPaneLayout>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -121,8 +92,6 @@ import {
useContext, useContext,
watch, watch,
} from "@nuxtjs/composition-api" } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { map } from "rxjs/operators" import { map } from "rxjs/operators"
import { Subscription } from "rxjs" import { Subscription } from "rxjs"
import isEqual from "lodash/isEqual" import isEqual from "lodash/isEqual"
@@ -131,8 +100,6 @@ import {
HoppRESTAuthOAuth2, HoppRESTAuthOAuth2,
safelyExtractRESTRequest, safelyExtractRESTRequest,
} from "@hoppscotch/data" } from "@hoppscotch/data"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { useSetting } from "~/newstore/settings"
import { import {
restActiveParamsCount$, restActiveParamsCount$,
restActiveHeadersCount$, restActiveHeadersCount$,
@@ -227,7 +194,6 @@ function setupRequestSync(
} }
export default defineComponent({ export default defineComponent({
components: { Splitpanes, Pane },
setup() { setup() {
const requestForSync = ref<HoppRESTRequest | null>(null) const requestForSync = ref<HoppRESTRequest | null>(null)
@@ -271,11 +237,7 @@ export default defineComponent({
setupRequestSync(confirmSync, requestForSync) setupRequestSync(confirmSync, requestForSync)
bindRequestToURLParams() bindRequestToURLParams()
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return { return {
mdAndLarger,
newActiveParamsCount$: useReadonlyStream( newActiveParamsCount$: useReadonlyStream(
restActiveParamsCount$.pipe( restActiveParamsCount$.pipe(
map((e) => { map((e) => {
@@ -294,9 +256,6 @@ export default defineComponent({
), ),
null null
), ),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
confirmSync, confirmSync,
syncRequest, syncRequest,
oAuthURL, oAuthURL,