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

refactor(ui): better tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 00:39:05 +05:30
parent 08fe4ae71f
commit 0fb0ae1826
33 changed files with 394 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/smart/Tabs.vue
View File

@@ -1,25 +1,30 @@
<template>
<div class="flex flex-col flex-nowrap flex-1">
<div class="rounded-t tabs hide-scrollbar relative" :class="styles">
<div class="flex w-0">
<div class="inline-flex">
<button
v-for="(tab, index) in tabs"
:key="`tab-${index}`"
class="tab"
:class="{ active: tab.active }"
tabindex="0"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"
>
<i v-if="tab.icon" class="material-icons">
{{ tab.icon }}
</i>
<span v-if="tab.label">{{ tab.label }}</span>
<span v-if="tab.info" class="tab-info">
{{ tab.info }}
</span>
</button>
<div class="flex flex-1">
<div class="flex flex-1 justify-between">
<div class="flex">
<button
v-for="(tab, index) in tabs"
:key="`tab-${index}`"
class="tab"
:class="{ active: tab.active }"
tabindex="0"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"
>
<i v-if="tab.icon" class="material-icons">
{{ tab.icon }}
</i>
<span v-if="tab.label">{{ tab.label }}</span>
<span v-if="tab.info" class="tab-info">
{{ tab.info }}
</span>
</button>
</div>
<div class="flex">
<slot name="actions"></slot>
</div>
</div>
</div>
</div>
@@ -64,16 +69,16 @@ export default {
@apply overflow-auto;
@apply bg-primary;
&::after {
@apply absolute;
@apply inset-x-0;
@apply bottom-0;
@apply bg-dividerLight;
@apply z-1;
@apply h-0.5;
// &::after {
// @apply absolute;
// @apply inset-x-0;
// @apply bottom-0;
// @apply bg-dividerLight;
// @apply z-1;
// @apply h-0.5;
content: "";
}
// content: "";
// }
.tab {
@apply relative;
@@ -104,9 +109,10 @@ export default {
&::after {
@apply absolute;
@apply inset-x-0;
@apply left-4;
@apply right-4;
@apply bottom-0;
@apply bg-dividerLight;
@apply bg-primary;
@apply z-2;
@apply h-0.5;
@@ -122,8 +128,7 @@ export default {
}
&.active {
@apply text-accent;
@apply border-accent;
@apply text-secondaryDark;
.tab-info {
@apply text-secondary;