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

feat: support to move sidebar to left - fixed #1933

Browse Source
This commit is contained in:
liyasthomas
2021-11-04 09:58:15 +05:30
parent 45e508fc36
commit d3a1898dad
14 changed files with 107 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,14 @@
<template>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="import">
<div class="flex p-4 items-start justify-between">
@@ -157,8 +156,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -193,9 +191,10 @@ export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
currentUser: useReadonlyStream(currentUser$, null),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
}
},
data() {

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

@@ -1,15 +1,14 @@
<template>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<GraphqlRequest :conn="gqlConn" />
<GraphqlRequestOptions :conn="gqlConn" />
@@ -20,8 +19,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -62,8 +60,9 @@ export default defineComponent({
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
gqlConn,
}
},

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

@@ -1,15 +1,14 @@
<template>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
:class="{
'!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
}"
:horizontal="!(windowInnerWidth.x.value >= 768)"
>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
<Pane class="hide-scrollbar !overflow-auto">
<HttpRequest />
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -59,8 +58,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -296,8 +294,9 @@ export default defineComponent({
),
null
),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
confirmSync,
syncRequest,
oAuthURL,

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

@@ -72,28 +72,27 @@
<div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
{{ $t("settings.telemetry") }}
{{
TELEMETRY_ENABLED
? $t("state.enabled")
: $t("state.disabled")
}}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="LEFT_SIDEBAR"
@change="toggleSetting('LEFT_SIDEBAR')"
:on="EXPAND_NAVIGATION"
@change="toggleSetting('EXPAND_NAVIGATION')"
>
{{ $t("settings.navigation_sidebar") }}
{{
LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
}}
{{ $t("settings.expand_navigation") }}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="SIDEBAR_ON_LEFT"
@change="toggleSetting('SIDEBAR_ON_LEFT')"
>
{{ $t("settings.sidebar_on_left") }}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
{{ $t("layout.zen_mode") }}
{{ ZEN_MODE ? $t("state.enabled") : $t("state.disabled") }}
</SmartToggle>
</div>
</div>
@@ -258,11 +257,10 @@ export default defineComponent({
return {
PROXY_ENABLED: useSetting("PROXY_ENABLED"),
PROXY_URL: useSetting("PROXY_URL"),
PROXY_KEY: useSetting("PROXY_KEY"),
EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
ZEN_MODE: useSetting("ZEN_MODE"),
}
},
@@ -287,22 +285,20 @@ export default defineComponent({
}
},
computed: {
proxySettings(): { url: string; key: string } {
proxySettings(): { url: string } {
return {
url: this.PROXY_URL,
key: this.PROXY_KEY,
}
},
},
watch: {
ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
this.applySetting("EXPAND_NAVIGATION", !ZEN_MODE)
},
proxySettings: {
deep: true,
handler({ url, key }) {
handler({ url }) {
this.applySetting("PROXY_URL", url)
this.applySetting("PROXY_KEY", key)
},
},
},