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

feat: vertical and horizontal layout support

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -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,

7
packages/hoppscotch-app/components/realtime/Mqtt.vue
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() {

7
packages/hoppscotch-app/components/realtime/Socketio.vue
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() {

12
packages/hoppscotch-app/components/realtime/Sse.vue
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,

7
packages/hoppscotch-app/components/realtime/Websocket.vue
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() {