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

1
packages/hoppscotch-app/assets/icons/columns.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

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() {

17
packages/hoppscotch-app/layouts/default.vue
View File

@@ -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() {

2
packages/hoppscotch-app/locales/en.json
View File

@@ -219,6 +219,8 @@
"title": "Import"
},
"layout": {
"column": "Column layout",
"row": "Row layout",
"zen_mode": "Zen mode"
},
"modal": {

2
packages/hoppscotch-app/newstore/settings.ts
View File

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

7
packages/hoppscotch-app/pages/documentation.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="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),
}
},

7
packages/hoppscotch-app/pages/graphql.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">
<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,
}
},

7
packages/hoppscotch-app/pages/index.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">
<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,

1
packages/hoppscotch-app/pages/settings.vue
View File

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