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

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

@@ -1,55 +1,24 @@
<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"
>
<GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" />
</Pane>
<Pane
:size="COLUMN_LAYOUT ? 65 : 50"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<GraphqlResponse :conn="gqlConn" />
</Pane>
</Splitpanes>
</Pane>
<Pane
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto flex flex-col"
>
<AppPaneLayout>
<template #primary>
<GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" />
</template>
<template #secondary>
<GraphqlResponse :conn="gqlConn" />
</template>
<template #sidebar>
<GraphqlSidebar :conn="gqlConn" />
</Pane>
</Splitpanes>
</template>
</AppPaneLayout>
</template>
<script lang="ts">
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 { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
export default defineComponent({
components: { Splitpanes, Pane },
beforeRouteLeave(_to, _from, next) {
if (this.gqlConn.connected$.value) {
this.gqlConn.disconnect()
@@ -68,14 +37,7 @@ export default defineComponent({
else nuxt.value.$loading.finish()
})
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return {
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
gqlConn,
}
},