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

chore: improve tabs scrollbar & unsaved request indicator (#3003)

Browse Source
This commit is contained in:
Liyas Thomas
2023-04-21 20:08:43 +05:30
committed by GitHub
parent d6c706d0f9
commit 80da790a3c
2 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,10 +38,15 @@
<template #suffix> <template #suffix>
<span <span
v-if="tab.document.isDirty" v-if="tab.document.isDirty"
class="text-green-600 text-[8px] group-hover:hidden w-4" class="flex items-center justify-center text-secondary group-hover:hidden w-4"
> >
<svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <svg
<circle cx="12" cy="12" r="10" fill="currentColor"></circle> viewBox="0 0 24 24"
width="1.2em"
height="1.2em"
class="h-1.5 w-1.5"
>
<circle cx="12" cy="12" r="12" fill="currentColor"></circle>
</svg> </svg>
</span> </span>
</template> </template>

56
packages/hoppscotch-ui/src/components/smart/Windows.vue
View File

@@ -8,7 +8,7 @@
ref="scrollContainer" ref="scrollContainer"
> >
<div <div
class="flex justify-between divide-x divide-dividerLight" class="flex justify-between divide-x divide-divider"
@wheel.prevent="scroll" @wheel.prevent="scroll"
> >
<div class="flex"> <div class="flex">
@@ -50,7 +50,12 @@
<component :is="tabMeta.tabhead" /> <component :is="tabMeta.tabhead" />
</div> </div>
<component v-if="tabMeta.suffix" :is="tabMeta.suffix" /> <div
v-if="tabMeta.suffix"
class="flex items-center justify-center"
>
<component :is="tabMeta.suffix" />
</div>
<HoppButtonSecondary <HoppButtonSecondary
v-if="tabMeta.isRemovable" v-if="tabMeta.isRemovable"
@@ -67,7 +72,7 @@
}, },
'close', 'close',
]" ]"
class="!p-0.5" class="!p-0.25 rounded"
@click.stop="emit('removeTab', tabID)" @click.stop="emit('removeTab', tabID)"
/> />
</button> </button>
@@ -80,13 +85,13 @@
<slot name="actions"> <slot name="actions">
<span <span
v-if="canAddNewTab" v-if="canAddNewTab"
class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8 h-full" class="flex items-center justify-center px-3 bg-primaryLight z-8 h-full"
> >
<HoppButtonSecondary <HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="newText ?? t?.('action.new') ?? 'New'" :title="newText ?? t?.('action.new') ?? 'New'"
:icon="IconPlus" :icon="IconPlus"
class="rounded !p-1" class="rounded !text-secondaryDark !p-1"
filled filled
@click="addTab" @click="addTab"
/> />
@@ -340,43 +345,48 @@ watch(thumbPosition, (newVal) => {
@apply opacity-50; @apply opacity-50;
&.active { &.active {
@apply opacity-80; @apply opacity-100;
} }
} }
} }
} }
$slider-height: 4px; $slider-height: 4px;
.slider { .slider {
--thumb-width: 300px; --thumb-width: 0;
-webkit-appearance: none;
width: 100%;
height: $slider-height; height: $slider-height;
background: transparent;
outline: none; @apply appearance-none;
opacity: 0; @apply w-full;
-webkit-transition: 0.2s; @apply bg-transparent;
transition: opacity 0.2s; @apply outline-none;
@apply opacity-0;
@apply transition;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; @apply appearance-none;
appearance: none; @apply min-w-0;
min-width: 300px; @apply bg-dividerDark;
@apply hover:bg-secondaryLight;
width: var(--thumb-width); width: var(--thumb-width);
height: $slider-height; height: $slider-height;
background: gray;
cursor: pointer;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
min-width: 300px; @apply appearance-none;
@apply min-w-0;
@apply bg-dividerDark;
@apply hover:bg-secondaryLight;
width: var(--thumb-width); width: var(--thumb-width);
height: $slider-height; height: $slider-height;
background: gray;
cursor: pointer;
} }
} }
.group-tabs:hover .slider { .group-tabs:hover .slider {
opacity: 0.8; @apply opacity-100;
} }
</style> </style>