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

refactor: composables for breakpoints

Browse Source
This commit is contained in:
liyasthomas
2022-02-01 13:20:40 +05:30
parent 98b01b016d
commit aaecba043b
11 changed files with 72 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
<template>
<Splitpanes
class="smart-splitter"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -140,19 +140,22 @@ import { defineComponent } from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import Mustache from "mustache"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md"
import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md"
import { useSetting } from "~/newstore/settings"
import { useReadonlyStream } from "~/helpers/utils/composables"
import useWindowSize from "~/helpers/utils/useWindowSize"
export default defineComponent({
components: { Splitpanes, Pane },
setup() {
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return {
windowInnerWidth: useWindowSize(),
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
currentUser: useReadonlyStream(currentUser$, null),

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

@@ -1,11 +1,11 @@
<template>
<Splitpanes
class="smart-splitter"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -39,10 +39,10 @@
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"
import useWindowSize from "~/helpers/utils/useWindowSize"
export default defineComponent({
components: { Splitpanes, Pane },
@@ -64,8 +64,11 @@ export default defineComponent({
else nuxt.value.$loading.finish()
})
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return {
windowInnerWidth: useWindowSize(),
mdAndLarger,
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),

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

@@ -1,11 +1,11 @@
<template>
<Splitpanes
class="smart-splitter"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
:horizontal="!mdAndLarger"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -127,6 +127,7 @@ import {
HoppRESTAuthOAuth2,
safelyExtractRESTRequest,
} from "@hoppscotch/data"
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { useSetting } from "~/newstore/settings"
import {
restActiveParamsCount$,
@@ -150,7 +151,6 @@ import {
import { loadRequestFromSync, startRequestSync } from "~/helpers/fb/request"
import { onLoggedIn } from "~/helpers/fb/auth"
import { oauthRedirect } from "~/helpers/oauth"
import useWindowSize from "~/helpers/utils/useWindowSize"
function bindRequestToURLParams() {
const { route } = useContext()
@@ -267,8 +267,11 @@ export default defineComponent({
setupRequestSync(confirmSync, requestForSync)
bindRequestToURLParams()
const breakpoints = useBreakpoints(breakpointsTailwind)
const mdAndLarger = breakpoints.greater("md")
return {
windowInnerWidth: useWindowSize(),
mdAndLarger,
newActiveParamsCount$: useReadonlyStream(
restActiveParamsCount$.pipe(
map((e) => {