bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Tab Styling and Highlight Animation in AreaTabs Component

Browse Source 
- Updated tab styling to include a relative positioning for better layout control.
- Introduced a new highlight animation for newly added tabs, replacing the previous background gradient with an opacity fade effect for improved visual feedback.
- Enhanced the tab-highlight class to include a pseudo-element for a more dynamic appearance during animations.
This commit is contained in:
Bastian Masanek
2025-11-05 02:48:19 +01:00
parent 4f49914d82
commit c6e7fcb43a
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/navigation/AreaTabs.vue
View File

@@ -214,7 +214,7 @@ function setTabRef(areaId: string, el: any) {
<TransitionGroup name="tab" tag="div" class="flex items-center gap-1"> <TransitionGroup name="tab" tag="div" class="flex items-center gap-1">
<TabsTrigger v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)" <TabsTrigger v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)"
:value="area.id" :disabled="!area.enabled" :class="[ :value="area.id" :disabled="!area.enabled" :class="[
'gap-2 py-3 md:py-4 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-300', 'relative gap-2 py-3 md:py-4 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-300',
!area.enabled && 'opacity-50 cursor-not-allowed', !area.enabled && 'opacity-50 cursor-not-allowed',
newlyAddedAreaIds.includes(area.id) && 'tab-highlight', newlyAddedAreaIds.includes(area.id) && 'tab-highlight',
]" @click="navigateToArea(area)"> ]" @click="navigateToArea(area)">
@@ -239,7 +239,7 @@ function setTabRef(areaId: string, el: any) {
<TransitionGroup name="tab" tag="div" class="inline-flex items-center gap-2"> <TransitionGroup name="tab" tag="div" class="inline-flex items-center gap-2">
<button v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)" <button v-for="area in visibleAreas" :key="area.id" :ref="(el) => setTabRef(area.id, el)"
:disabled="!area.enabled" :class="[ :disabled="!area.enabled" :class="[
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-3 text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 duration-300', 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-3 text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 duration-300',
currentArea === area.id currentArea === area.id
? 'bg-accent text-white shadow-md' ? 'bg-accent text-white shadow-md'
: 'text-white/70 hover:text-white', : 'text-white/70 hover:text-white',
@@ -327,6 +327,7 @@ function setTabRef(areaId: string, el: any) {
} }
@keyframes highlight-pulse { @keyframes highlight-pulse {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
@@ -337,35 +338,41 @@ function setTabRef(areaId: string, el: any) {
} }
} }
/* Background gradient - stay visible during blinks, then fade out slowly */ /* Opacity fade for background (Chrome-compatible workaround) */
@keyframes highlight-background { @keyframes highlight-opacity {
0% { 0% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2)); opacity: 1;
} }
/* Stay visible during first blink */ /* Stay visible during first blink */
25% { 25% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2)); opacity: 1;
} }
/* Start fading slowly after first blink (over 1s instead of 0.5s) */ /* Start fading slowly after first blink */
50% { 50% {
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2)); opacity: 1;
} }
/* Fade to transparent gradually */ /* Fade to transparent gradually */
100% { 100% {
background: transparent; opacity: 0;
} }
} }
.tab-highlight { .tab-highlight {
/* Initial background state (will be animated) */
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
/* Animations */ /* Animations */
animation: highlight-glow 2s ease-in-out 1 forwards, animation: highlight-glow 2s ease-in-out 1 forwards,
highlight-pulse 0.5s ease-in-out 2, highlight-pulse 0.5s ease-in-out 2;
highlight-background 2s ease-in-out 1 forwards; }
.tab-highlight::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
pointer-events: none;
animation: highlight-opacity 2s ease-in-out 1 forwards;
} }
</style> </style>