feat: vertical and horizontal layout support

This commit is contained in:
liyasthomas
2021-09-20 10:17:31 +05:30
parent 49741875bd
commit dcbb17b164
13 changed files with 72 additions and 14 deletions

View File

@@ -5,7 +5,11 @@
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -156,6 +160,7 @@ export default defineComponent({
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
}
},
data() {

View File

@@ -5,7 +5,11 @@
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -176,6 +180,7 @@ export default defineComponent({
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
}
},
data() {

View File

@@ -1,5 +1,9 @@
<template>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="space-x-2 flex-1 inline-flex">
@@ -91,9 +95,15 @@ import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import debounce from "lodash/debounce"
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { useSetting } from "~/newstore/settings"
export default defineComponent({
components: { Splitpanes, Pane },
setup() {
return {
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
}
},
data() {
return {
connectionSSEState: false,

View File

@@ -5,7 +5,11 @@
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -216,6 +220,7 @@ export default defineComponent({
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
}
},
data() {