From dcbb17b1642d07da0a22ef3171e4572dd82dd93d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 20 Sep 2021 10:17:31 +0530
Subject: [PATCH] feat: vertical and horizontal layout support

---
 .../hoppscotch-app/assets/icons/columns.svg     |  1 +
 .../hoppscotch-app/components/app/Footer.vue    |  9 +++++++++
 .../hoppscotch-app/components/realtime/Mqtt.vue |  7 ++++++-
 .../components/realtime/Socketio.vue            |  7 ++++++-
 .../hoppscotch-app/components/realtime/Sse.vue  | 12 +++++++++++-
 .../components/realtime/Websocket.vue           |  7 ++++++-
 packages/hoppscotch-app/layouts/default.vue     | 17 +++++++++++------
 packages/hoppscotch-app/locales/en.json         |  2 ++
 packages/hoppscotch-app/newstore/settings.ts    |  2 ++
 packages/hoppscotch-app/pages/documentation.vue |  7 ++++++-
 packages/hoppscotch-app/pages/graphql.vue       |  7 ++++++-
 packages/hoppscotch-app/pages/index.vue         |  7 ++++++-
 packages/hoppscotch-app/pages/settings.vue      |  1 -
 13 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/columns.svg

diff --git a/packages/hoppscotch-app/assets/icons/columns.svg b/packages/hoppscotch-app/assets/icons/columns.svg
new file mode 100644
index 000000000..46ba287c4
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/columns.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path></svg>
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index c5ea81d19..01e1f137b 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -118,6 +118,14 @@
           :title="$t('request.share')"
           @click.native="nativeShare()"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
+          svg="columns"
+          class="transform"
+          :class="{ 'rotate-90': !COLUMN_LAYOUT }"
+          @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
@@ -156,6 +164,7 @@ export default defineComponent({
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
 
       navigatorShare: !!navigator.share,
 
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 5cc5f0b7f..8ee1edb8d 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -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() {
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 42d6c3623..5f12433b0 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -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() {
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index ca78d4b1a..e5af74b02 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -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,
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index 2bacf97e5..00a063a84 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -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() {
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index d62ffee96..cf4267667 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -61,19 +61,24 @@ import useWindowSize from "~/helpers/utils/useWindowSize"
 
 function appLayout() {
   const rightSidebar = useSetting("RIGHT_SIDEBAR")
+  const columnLayout = useSetting("COLUMN_LAYOUT")
   const windowInnerWidth = useWindowSize()
 
   // Initially apply
   onBeforeMount(() => {
-    if (windowInnerWidth.x.value < 768) rightSidebar.value = false
+    if (windowInnerWidth.x.value < 768) {
+      rightSidebar.value = false
+      columnLayout.value = true
+    }
   })
 
   // Listen for updates
-  watch(windowInnerWidth.x, () =>
-    windowInnerWidth.x.value >= 768
-      ? (rightSidebar.value = true)
-      : (rightSidebar.value = false)
-  )
+  watch(windowInnerWidth.x, () => {
+    if (windowInnerWidth.x.value < 768) {
+      rightSidebar.value = false
+      columnLayout.value = true
+    }
+  })
 }
 
 function updateThemes() {
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 7ddf68ced..63e4471a9 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -219,6 +219,8 @@
     "title": "Import"
   },
   "layout": {
+    "column": "Column layout",
+    "row": "Row layout",
     "zen_mode": "Zen mode"
   },
   "modal": {
diff --git a/packages/hoppscotch-app/newstore/settings.ts b/packages/hoppscotch-app/newstore/settings.ts
index 56fe72a72..b0735d10b 100644
--- a/packages/hoppscotch-app/newstore/settings.ts
+++ b/packages/hoppscotch-app/newstore/settings.ts
@@ -52,6 +52,7 @@ export type SettingsType = {
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
   FONT_SIZE: HoppFontSize
+  COLUMN_LAYOUT: boolean
 }
 
 export const defaultSettings: SettingsType = {
@@ -78,6 +79,7 @@ export const defaultSettings: SettingsType = {
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,
   FONT_SIZE: "small",
+  COLUMN_LAYOUT: true,
 }
 
 const validKeys = Object.keys(defaultSettings)
diff --git a/packages/hoppscotch-app/pages/documentation.vue b/packages/hoppscotch-app/pages/documentation.vue
index 2feb14210..f581d0412 100644
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -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="import">
             <div class="flex p-4 items-start justify-between">
@@ -190,6 +194,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),
     }
   },
diff --git a/packages/hoppscotch-app/pages/graphql.vue b/packages/hoppscotch-app/pages/graphql.vue
index 5a7a4ce20..8675863b8 100644
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/packages/hoppscotch-app/pages/graphql.vue
@@ -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">
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
@@ -59,6 +63,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       gqlConn,
     }
   },
diff --git a/packages/hoppscotch-app/pages/index.vue b/packages/hoppscotch-app/pages/index.vue
index 4054d6280..fc161f8c7 100644
--- a/packages/hoppscotch-app/pages/index.vue
+++ b/packages/hoppscotch-app/pages/index.vue
@@ -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">
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -279,6 +283,7 @@ export default defineComponent({
         null
       ),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       confirmSync,
       syncRequest,
       oAuthURL,
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index 2495c7b61..27bad3436 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -417,7 +417,6 @@ export default defineComponent({
   watch: {
     ZEN_MODE(ZEN_MODE) {
       this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
     },
     proxySettings: {
       deep: true,