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

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

@@ -4,10 +4,11 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
:title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
svg="sidebar"
:class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
@click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
class="transform"
:class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@click.native="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -133,14 +134,21 @@
: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')"
svg="sidebar"
class="transform rotate-180"
:class="{ 'rotate-360': !RIGHT_SIDEBAR }"
@click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
/>
<span
class="transform transition"
:class="{
'rotate-180': SIDEBAR_ON_LEFT,
}"
>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
svg="sidebar"
class="transform"
:class="{ 'rotate-180': !SIDEBAR }"
@click.native="SIDEBAR = !SIDEBAR"
/>
</span>
</div>
</div>
<AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
@@ -168,10 +176,11 @@ export default defineComponent({
})
return {
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
SIDEBAR: useSetting("SIDEBAR"),
ZEN_MODE: useSetting("ZEN_MODE"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
navigatorShare: !!navigator.share,
@@ -181,7 +190,7 @@ export default defineComponent({
},
watch: {
ZEN_MODE() {
this.LEFT_SIDEBAR = !this.ZEN_MODE
this.EXPAND_NAVIGATION = !this.ZEN_MODE
},
},
methods: {

6
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -14,9 +14,9 @@
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
<tippy
v-if="!LEFT_SIDEBAR"
v-if="!EXPAND_NAVIGATION"
:placement="windowInnerWidth.x.value >= 768 ? 'right' : 'bottom'"
theme="tooltip"
:content="navigation.title"
@@ -35,7 +35,7 @@ export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
}
},
data() {

2
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -28,7 +28,7 @@
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
outline,
},
{ 'bg-primaryDark': filled },
{ '!bg-primaryDark': filled },
]"
:disabled="disabled"
tabindex="0"

19
packages/hoppscotch-app/components/realtime/Mqtt.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="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -60,8 +59,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -160,8 +158,9 @@ export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
}
},
data() {

19
packages/hoppscotch-app/components/realtime/Socketio.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="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -127,8 +126,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -233,8 +231,9 @@ export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
socketIoClients,
}
},

6
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -1,9 +1,5 @@
<template>
<Splitpanes
class="smart-splitter"
:dbl-click-splitter="false"
:horizontal="COLUMN_LAYOUT"
>
<Splitpanes class="smart-splitter" :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">

19
packages/hoppscotch-app/components/realtime/Websocket.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="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -175,8 +174,7 @@
</Splitpanes>
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="35"
v-if="SIDEBAR"
size="25"
min-size="20"
class="hide-scrollbar !overflow-auto"
@@ -231,8 +229,9 @@ export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
SIDEBAR: useSetting("SIDEBAR"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
}
},
data() {