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

2021-11-04 09:58:15 +05:30
parent 45e508fc36
commit d3a1898dad
14 changed files with 107 additions and 111 deletions
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -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: {
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -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() {
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -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"
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -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() {
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -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,
    }
  },
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -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">
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -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() {
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -60,7 +60,7 @@ import { defineActionHandler } from "~/helpers/actions"
 import useWindowSize from "~/helpers/utils/useWindowSize"

 function appLayout() {
-  const rightSidebar = useSetting("RIGHT_SIDEBAR")
+  const rightSidebar = useSetting("SIDEBAR")
  const columnLayout = useSetting("COLUMN_LAYOUT")
  const windowInnerWidth = useWindowSize()

--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -330,6 +330,7 @@
    "account_name_description": "This is your display name.",
    "background": "Background",
    "black_mode": "Black",
+    "sidebar_on_left": "Sidebar on left",
    "change_font_size": "Change font size",
    "choose_language": "Choose language",
    "dark_mode": "Dark",
@@ -347,7 +348,7 @@
    "interceptor_description": "Middleware between application and APIs.",
    "language": "Language",
    "light_mode": "Light",
-    "navigation_sidebar": "Navigation sidebar",
+    "expand_navigation": "Expand navigation",
    "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
    "profile": "Profile",
    "profile_description": "Update you profile details",
--- a/packages/hoppscotch-app/newstore/settings.ts
+++ b/packages/hoppscotch-app/newstore/settings.ts
@@ -35,7 +35,6 @@ export type SettingsType = {

  PROXY_ENABLED: boolean
  PROXY_URL: string
-  PROXY_KEY: string
  EXTENSIONS_ENABLED: boolean
  URL_EXCLUDES: {
    auth: boolean
@@ -47,8 +46,9 @@ export type SettingsType = {
  THEME_COLOR: HoppAccentColor
  BG_COLOR: HoppBgColor
  TELEMETRY_ENABLED: boolean
-  LEFT_SIDEBAR: boolean
-  RIGHT_SIDEBAR: boolean
+  EXPAND_NAVIGATION: boolean
+  SIDEBAR: boolean
+  SIDEBAR_ON_LEFT: boolean
  ZEN_MODE: boolean
  FONT_SIZE: HoppFontSize
  COLUMN_LAYOUT: boolean
@@ -61,7 +61,6 @@ export const defaultSettings: SettingsType = {

  PROXY_ENABLED: false,
  PROXY_URL: "https://proxy.hoppscotch.io/",
-  PROXY_KEY: "",
  EXTENSIONS_ENABLED: true,
  URL_EXCLUDES: {
    auth: true,
@@ -73,8 +72,9 @@ export const defaultSettings: SettingsType = {
  THEME_COLOR: "indigo",
  BG_COLOR: "system",
  TELEMETRY_ENABLED: true,
-  LEFT_SIDEBAR: true,
-  RIGHT_SIDEBAR: true,
+  EXPAND_NAVIGATION: true,
+  SIDEBAR: true,
+  SIDEBAR_ON_LEFT: false,
  ZEN_MODE: false,
  FONT_SIZE: "small",
  COLUMN_LAYOUT: true,
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -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() {
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/packages/hoppscotch-app/pages/graphql.vue
@@ -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,
    }
  },
--- a/packages/hoppscotch-app/pages/index.vue
+++ b/packages/hoppscotch-app/pages/index.vue
@@ -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,
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -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)
      },
    },
  },