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

fix: tabhead and scrolling issue (#2966)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-04-05 21:56:42 +06:00
committed by GitHub
parent 1d397af674
commit 62058d5dfe
6 changed files with 128 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/hoppscotch-common/src/components.d.ts vendored
View File

@@ -16,7 +16,6 @@ declare module '@vue/runtime-core' {
AppHeader: typeof import('./components/app/Header.vue')['default']
AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
AppLogo: typeof import('./components/app/Logo.vue')['default']
AppNavigation: typeof import('./components/app/Navigation.vue')['default']
AppOptions: typeof import('./components/app/Options.vue')['default']
AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
@@ -117,6 +116,7 @@ declare module '@vue/runtime-core' {
HttpTests: typeof import('./components/http/Tests.vue')['default']
HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideBrush: typeof import('~icons/lucide/brush')['default']
IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -125,6 +125,7 @@ declare module '@vue/runtime-core' {
IconLucideInfo: typeof import('~icons/lucide/info')['default']
IconLucideLayers: typeof import('~icons/lucide/layers')['default']
IconLucideMinus: typeof import('~icons/lucide/minus')['default']
IconLucideRss: typeof import('~icons/lucide/rss')['default']
IconLucideSearch: typeof import('~icons/lucide/search')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
IconLucideUsers: typeof import('~icons/lucide/users')['default']

34
packages/hoppscotch-common/src/pages/index.vue
View File

@@ -16,19 +16,33 @@
:key="tab.id"
:label="tab.document.request.name"
:is-removable="tabs.length > 1"
:close-visibility="'hover'"
>
<template #tabhead>
<span
class="font-semibold truncate text-tiny w-10"
:class="getMethodLabelColorClassOf(tab.document.request)"
<div
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
:title="tab.document.request.name"
class="truncate px-2"
>
{{ tab.document.request.method }}
</span>
<span class="text-green-600 mr-1" v-if="tab.document.isDirty">
•
</span>
<span class="truncate flex-1">
{{ tab.document.request.name }}
<span
class="font-semibold text-tiny"
:class="getMethodLabelColorClassOf(tab.document.request)"
>
{{ tab.document.request.method }}
</span>
<span class="leading-8 px-2">
{{ tab.document.request.name }}
</span>
</div>
</template>
<template #suffix>
<span
class="text-green-600 text-[8px] group-hover:hidden w-4"
v-if="tab.document.isDirty"
>
<svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
<circle cx="12" cy="12" r="10" fill="currentColor"></circle>
</svg>
</span>
</template>
<HttpRequestTab