chore: minor ui improvements (#3274)

2023-08-22 22:22:43 +05:30
parent ac60843183
commit 008eb6b77b
20 changed files with 42 additions and 42 deletions
--- a/packages/hoppscotch-common/src/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-common/src/components/app/PaneLayout.vue
@@ -18,13 +18,18 @@
        :horizontal="COLUMN_LAYOUT"
        @resize="setPaneEvent($event, 'horizontal')"
      >
-        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
+        <Pane
+          :size="PANE_MAIN_TOP_SIZE"
+          class="flex flex-col !overflow-auto"
+          min-size="25"
+        >
          <slot name="primary" />
        </Pane>
        <Pane
          v-if="hasSecondary"
          :size="PANE_MAIN_BOTTOM_SIZE"
          class="flex flex-col !overflow-auto"
+          min-size="25"
        >
          <slot name="secondary" />
        </Pane>
@@ -33,7 +38,7 @@
    <Pane
      v-if="SIDEBAR && hasSidebar"
      :size="PANE_SIDEBAR_SIZE"
-      min-size="20"
+      min-size="25"
      class="flex flex-col !overflow-auto bg-primaryContrast"
    >
      <slot name="sidebar" />
@@ -78,10 +83,10 @@ type PaneEvent = {
  size: number
 }

-const PANE_MAIN_SIZE = ref(74)
-const PANE_SIDEBAR_SIZE = ref(26)
-const PANE_MAIN_TOP_SIZE = ref(42)
-const PANE_MAIN_BOTTOM_SIZE = ref(58)
+const PANE_MAIN_SIZE = ref(70)
+const PANE_SIDEBAR_SIZE = ref(30)
+const PANE_MAIN_TOP_SIZE = ref(35)
+const PANE_MAIN_BOTTOM_SIZE = ref(65)

 if (!COLUMN_LAYOUT.value) {
  PANE_MAIN_TOP_SIZE.value = 50
--- a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
+++ b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex pb-4 my-4 space-x-2">
+    <div class="flex mb-4 space-x-2">
      <div class="flex flex-col items-end space-y-4 text-right">
        <span class="flex items-center flex-1">
          {{ t("shortcut.request.send_request") }}
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -81,7 +81,6 @@
            <HoppButtonSecondary
              :label="`${t('add.new')}`"
              filled
-              class="mb-4"
              @click="addEnvironmentVariable"
            />
          </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -42,7 +42,6 @@
        :label="`${t('add.new')}`"
        filled
        outline
-        class="mb-4"
        @click="displayModalAdd(true)"
      />
    </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -86,13 +86,11 @@
              disabled
              :label="`${t('add.new')}`"
              filled
-              class="mb-4"
            />
            <HoppButtonSecondary
              v-else
              :label="`${t('add.new')}`"
              filled
-              class="mb-4"
              @click="addEnvironmentVariable"
            />
          </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -54,7 +54,6 @@
        v-tippy="{ theme: 'tooltip' }"
        disabled
        filled
-        class="mb-4"
        :icon="IconPlus"
        :title="t('team.no_access')"
        :label="t('action.new')"
@@ -64,7 +63,6 @@
        :label="`${t('add.new')}`"
        filled
        outline
-        class="mb-4"
        @click="displayModalAdd(true)"
      />
    </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -127,7 +127,6 @@
        blank
        :icon="IconExternalLink"
        reverse
-        class="mb-4"
      />
    </HoppSmartPlaceholder>
    <div v-else class="flex flex-1 border-b border-dividerLight">
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -166,7 +166,6 @@
        :label="`${t('add.new')}`"
        filled
        :icon="IconPlus"
-        class="mb-4"
        @click="addHeader"
      />
    </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -126,7 +126,6 @@
        blank
        :icon="IconExternalLink"
        reverse
-        class="mb-4"
      />
    </HoppSmartPlaceholder>
    <div v-else class="flex flex-1 border-b border-dividerLight">
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -117,7 +117,6 @@
        blank
        :icon="IconExternalLink"
        reverse
-        class="mb-4"
      />
    </HoppSmartPlaceholder>
  </div>
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -162,7 +162,6 @@
        :label="`${t('add.new')}`"
        filled
        :icon="IconPlus"
-        class="mb-4"
        @click="addBodyParam"
      />
    </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -213,7 +213,6 @@
          filled
          :label="`${t('add.new')}`"
          :icon="IconPlus"
-          class="mb-4"
          @click="addHeader"
        />
      </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -161,7 +161,6 @@
          :label="`${t('add.new')}`"
          :icon="IconPlus"
          filled
-          class="mb-4"
          @click="addParam"
        />
      </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -153,7 +153,6 @@
          filled
          :label="`${t('add.new')}`"
          :icon="IconPlus"
-          class="mb-4"
          @click="addUrlEncodedParam"
        />
      </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -71,7 +71,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>

      const selectedEnvType = getSelectedEnvironmentType()

-      const envTypeIcon = `<span class="inline-flex -my-2 -mx-0.5 opacity-65 items-center text-base font-icon">${
+      const envTypeIcon = `<span class="inline-flex items-center opacity-65 -mx-0.5 text-base font-icon">${
        selectedEnvType === "TEAM_ENV" ? "group" : "person"
      }</span>`

@@ -88,7 +88,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
            variableName: parsedEnvKey,
          })
        })
-        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 -my-2 text-base font-icon">edit</span>`
+        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 text-base font-icon">edit</span>`
        tooltip.appendChild(editIcon)
      }

--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -16,7 +16,6 @@
        >
          <HoppButtonPrimary
            :label="t('auth.login')"
-            class="mb-4"
            @click="invokeAction('modals.login.toggle')"
          />
        </HoppSmartPlaceholder>
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
@@ -203,7 +203,6 @@
              blank
              :icon="IconExternalLink"
              reverse
-              class="mb-4"
            />
          </HoppSmartPlaceholder>
          <div
--- a/packages/hoppscotch-ui/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Modal.vue
@@ -44,7 +44,6 @@
              </h3>
              <span class="flex items-center">
                <slot name="actions"></slot>
-                <kbd class="mr-2 shortcut-key">ESC</kbd>
                <HoppButtonSecondary
                  v-if="dimissible"
                  v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -109,21 +108,22 @@ const { t, onModalOpen, onModalClose } =

 withDefaults(
  defineProps<{
-    dialog: boolean,
-    title: string,
-    dimissible: boolean,
-    placement: string,
-    fullWidth: boolean,
-    styles: string,
-    closeText: string | null,
-  }>(), {
+    dialog: boolean
+    title: string
+    dimissible: boolean
+    placement: string
+    fullWidth: boolean
+    styles: string
+    closeText: string | null
+  }>(),
+  {
    dialog: false,
    title: "",
    dimissible: true,
    placement: "top",
    fullWidth: false,
    styles: "sm:max-w-lg",
-    closeText: null
+    closeText: null,
  }
 )

--- a/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
@@ -4,7 +4,7 @@
      v-if="src"
      :src="src"
      loading="lazy"
-      class="inline-flex flex-col object-contain object-center my-4"
+      class="inline-flex flex-col object-contain object-center mb-4"
      :class="large ? 'w-32 h-32' : 'w-16 h-16'"
      :alt="alt"
    />
--- a/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
+++ b/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
@@ -1,17 +1,28 @@
 <template>
  <div>
    <Transition name="fade" appear>
-      <div v-if="show" class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
-        <div class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none" tabindex="0" @click="close()"></div>
+      <div
+        v-if="show"
+        class="fixed inset-0 z-20 transition-opacity"
+        @keydown.esc="close()"
+      >
+        <div
+          class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none"
+          tabindex="0"
+          @click="close()"
+        ></div>
      </div>
    </Transition>
    <Transition name="slide" appear>
-      <aside v-if="show"
-        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96">
-        <div class="flex items-center justify-between p-2 border-b border-dividerLight">
+      <aside
+        v-if="show"
+        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
+      >
+        <div
+          class="flex items-center justify-between p-2 border-b border-dividerLight"
+        >
          <h3 class="ml-4 heading">{{ title }}</h3>
          <span class="flex items-center">
-            <kbd class="mr-2 shortcut-key">ESC</kbd>
            <HoppButtonSecondary :icon="IconX" @click="close()" />
          </span>
        </div>