fix: minor ui issues

2023-12-07 17:12:33 +05:30
parent 6063c633ee
commit 87395a4553
8 changed files with 59 additions and 65 deletions
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -164,6 +164,12 @@ declare module 'vue' {
    IconLucideUsers: typeof import('~icons/lucide/users')['default']
    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
    IconLucideX: typeof import('~icons/lucide/x')['default']
+    ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
+    ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']
+    ImportExportImportExportSourcesList: typeof import('./components/importExport/ImportExportSourcesList.vue')['default']
+    ImportExportImportExportStepsFileImport: typeof import('./components/importExport/ImportExportSteps/FileImport.vue')['default']
+    ImportExportImportExportStepsMyCollectionImport: typeof import('./components/importExport/ImportExportSteps/MyCollectionImport.vue')['default']
+    ImportExportImportExportStepsUrlImport: typeof import('./components/importExport/ImportExportSteps/UrlImport.vue')['default']
    InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -305,10 +305,9 @@ watch(isOnline, () => {
  if (!isOnline.value) {
    bannerID = banner.showBanner(offlineBanner)
    return
-  } else {
-    if (banner.content && bannerID) {
-      banner.removeBanner(bannerID)
-    }
+  }
+  if (banner.content && bannerID) {
+    banner.removeBanner(bannerID)
  }
 })

--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/packages/hoppscotch-common/src/components/embeds/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1">
    <header
-      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+      class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
    >
-      <div class="flex flex-1 items-center justify-between space-x-2">
+      <div class="flex items-center justify-between flex-1 space-x-2">
        <HoppButtonSecondary
          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
          :label="t('app.name')"
-          to="https://hoppscotch.io/"
+          to="https://hoppscotch.io"
          blank
        />
        <div class="flex">
-          <HoppSmartItem
+          <HoppButtonSecondary
            :label="t('app.open_in_hoppscotch')"
            :to="sharedRequestURL"
            blank
@@ -19,63 +19,57 @@
        </div>
      </div>
    </header>
-
-    <div class="flex-1">
+    <div class="sticky top-0 z-10 flex-1">
      <div
-        class="flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
+        class="flex-none flex-shrink-0 p-4 bg-primary sm:flex sm:flex-shrink-0 sm:space-x-2"
      >
        <div
-          class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
+          class="flex flex-1 overflow-hidden border divide-x rounded text-secondaryDark divide-divider min-w-[12rem] overflow-x-auto border-divider"
        >
-          <div class="relative flex">
-            <span
-              class="flex justify-center items-center w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
-            >
-              {{ tab.document.request.method }}
-            </span>
-          </div>
-          <div
-            class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
+          <span
+            class="flex items-center justify-center px-4 py-2 font-semibold transition rounded-l"
          >
-            <input
-              name="method"
-              :value="tab.document.request.endpoint"
-              class="flex-1 px-4 bg-primary"
-              disabled
-            />
+            {{ tab.document.request.method }}
+          </span>
+          <div
+            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
+          >
+            {{ tab.document.request.endpoint }}
          </div>
        </div>
-        <div class="mt-2 flex sm:mt-0">
+        <div class="flex mt-2 space-x-2 sm:mt-0">
          <HoppButtonPrimary
            id="send"
            :title="`${t(
              'action.send'
            )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
            :label="`${!loading ? t('action.send') : t('action.cancel')}`"
-            class="min-w-20 flex-1"
+            class="flex-1 min-w-20"
+            outline
            @click="!loading ? newSendRequest() : cancelRequest()"
          />
-          <HoppButtonSecondary
-            :title="`${t(
-              'request.save'
-            )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
-            :label="t('request.save')"
-            filled
-            :icon="IconSave"
-            class="flex-1 rounded rounded-r-none"
-            blank
-            :to="sharedRequestURL"
-          />
+          <div class="flex">
+            <HoppButtonSecondary
+              :title="`${t(
+                'request.save'
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
+              :label="t('request.save')"
+              filled
+              :icon="IconSave"
+              class="flex-1 rounded"
+              blank
+              outline
+              :to="sharedRequestURL"
+            />
+          </div>
        </div>
      </div>
    </div>
-
    <HttpRequestOptions
      v-model="tab.document.request"
      v-model:option-tab="selectedOptionTab"
      :properties="properties"
    />
-
    <HttpResponse :document="tab.document" :is-embed="true" />
  </div>
 </template>
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
@@ -306,9 +306,8 @@ const embedThemeIcon = computed(() => {
    return IconMonitor
  } else if (embedOptions.value.theme === "light") {
    return IconSun
-  } else {
-    return IconMoon
  }
+  return IconMoon
 })

 const removeEmbedOption = (option: EmbedTabs) => {
@@ -392,9 +391,8 @@ const copyButton = (

  if (type === "markdown") {
    return `[![Run in Hoppscotch](${baseURL}/${badge})](${baseURL}/r/${props.request?.id})`
-  } else {
-    return `<a href="${baseURL}/r/${props.request?.id}"><img src="${baseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
  }
+  return `<a href="${baseURL}/r/${props.request?.id}"><img src="${baseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
 }

 const copyLink = (variationID: string) => {
@@ -402,9 +400,8 @@ const copyLink = (variationID: string) => {
    return `${baseURL}/r/${props.request?.id}`
  } else if (variationID === "link2") {
    return `<a href="${baseURL}/r/${props.request?.id}">Run in Hoppscotch</a>`
-  } else {
-    return `[Run in Hoppscotch](${baseURL}/r/${props.request?.id})`
  }
+  return `[Run in Hoppscotch](${baseURL}/r/${props.request?.id})`
 }

 const copyContent = ({
--- a/packages/hoppscotch-common/src/components/share/Modal.vue
+++ b/packages/hoppscotch-common/src/components/share/Modal.vue
@@ -29,17 +29,15 @@
        @copy-shared-request="copySharedRequest"
      />
    </template>
-
-    <template #footer>
+    <template v-if="step === 1" #footer>
      <div class="flex justify-start flex-1">
        <HoppButtonPrimary
-          v-if="step === 1"
          :label="t('action.create')"
          :loading="loading"
          @click="createSharedRequest"
        />
        <HoppButtonSecondary
-          :label="step === 1 ? t('action.cancel') : t('action.close')"
+          :label="t('action.cancel')"
          class="ml-2"
          filled
          outline
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/packages/hoppscotch-common/src/components/share/index.vue
@@ -446,13 +446,12 @@ const resolveConfirmModal = (title: string | null) => {
 const getErrorMessage = (err: GQLError<string>) => {
  if (err.type === "network_error") {
    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "shortcode/not_found":
-        return t("shared_request.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "shortcode/not_found":
+      return t("shared_request.not_found")
+    default:
+      return t("error.something_went_wrong")
  }
 }

--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
@@ -11,7 +11,9 @@
        'bg-accentContrast': isEmbedThemeLight,
      }"
    >
-      <span class="flex items-center min-w-0 border rounded border-divider">
+      <span
+        class="flex items-center flex-1 min-w-0 border rounded border-divider"
+      >
        <span
          class="flex max-w-[4rem] rounded-l h-full items-center justify-center border-r border-divider text-tiny"
          :class="{
--- a/packages/hoppscotch-common/src/services/banner.service.ts
+++ b/packages/hoppscotch-common/src/services/banner.service.ts
@@ -26,10 +26,9 @@ export type Banner = {
 const getBannerWithHighestScore = (list: Banner[]) => {
  if (list.length === 0) return null
  else if (list.length === 1) return list[0]
-  else {
-    const highestScore = Math.max(...list.map((banner) => banner.content.score))
-    return list.find((banner) => banner.content.score === highestScore)
-  }
+
+  const highestScore = Math.max(...list.map((banner) => banner.content.score))
+  return list.find((banner) => banner.content.score === highestScore)
 }

 /**