Modal: large centered spinner + kebab z-index fix #81
@@ -47,12 +47,17 @@
|
|||||||
<v-icon size="32">mdi-chevron-right</v-icon>
|
<v-icon size="32">mdi-chevron-right</v-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- Large centered loading spinner (operator-flagged 2026-06-07: the old
|
||||||
|
size-36 one sat tiny in the top-left). Dual counter-rotating accent
|
||||||
|
rings, centered over the whole modal. pointer-events:none so the
|
||||||
|
close/nav controls underneath stay clickable. -->
|
||||||
|
<div v-if="modal.loading" class="fc-viewer__loading">
|
||||||
|
<div class="fc-viewer__spinner" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="fc-viewer__body">
|
<div class="fc-viewer__body">
|
||||||
<div class="fc-viewer__media">
|
<div class="fc-viewer__media">
|
||||||
<v-progress-circular
|
<template v-if="modal.current">
|
||||||
v-if="modal.loading" indeterminate color="accent" size="36"
|
|
||||||
/>
|
|
||||||
<template v-else-if="modal.current">
|
|
||||||
<ImageCanvas
|
<ImageCanvas
|
||||||
v-if="!isVideo" :src="modal.current.image_url" :alt="`Image ${modal.current.id}`"
|
v-if="!isVideo" :src="modal.current.image_url" :alt="`Image ${modal.current.id}`"
|
||||||
@close-request="$emit('close')"
|
@close-request="$emit('close')"
|
||||||
@@ -259,6 +264,34 @@ function nextFrame() {
|
|||||||
right: calc(var(--fc-side-w) + 16px);
|
right: calc(var(--fc-side-w) + 16px);
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
/* Centered loading overlay — sits over the media band; non-interactive so the
|
||||||
|
close/nav controls underneath keep working. */
|
||||||
|
.fc-viewer__loading {
|
||||||
|
position: absolute; inset: 0; z-index: 2;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
/* Two concentric accent rings counter-rotating, each lit on a different arc —
|
||||||
|
reads as one orbiting object. ~108px so it's unmistakably the focal point. */
|
||||||
|
.fc-viewer__spinner {
|
||||||
|
width: 108px; height: 108px; border-radius: 50%;
|
||||||
|
border: 5px solid rgb(var(--v-theme-accent), 0.16);
|
||||||
|
border-top-color: rgb(var(--v-theme-accent));
|
||||||
|
animation: fc-viewer-spin 0.95s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 24px rgb(var(--v-theme-accent), 0.18);
|
||||||
|
}
|
||||||
|
.fc-viewer__spinner::after {
|
||||||
|
content: ''; position: absolute; inset: 14px; border-radius: 50%;
|
||||||
|
border: 5px solid rgb(var(--v-theme-accent), 0.10);
|
||||||
|
border-bottom-color: rgb(var(--v-theme-accent));
|
||||||
|
animation: fc-viewer-spin 1.5s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite reverse;
|
||||||
|
}
|
||||||
|
@keyframes fc-viewer-spin { to { transform: rotate(360deg); } }
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.fc-viewer__spinner, .fc-viewer__spinner::after { animation-duration: 3s; }
|
||||||
|
}
|
||||||
|
|
||||||
.fc-viewer__body {
|
.fc-viewer__body {
|
||||||
flex: 1; display: flex; min-height: 0;
|
flex: 1; display: flex; min-height: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -37,6 +37,7 @@
|
|||||||
/>
|
/>
|
||||||
<v-menu
|
<v-menu
|
||||||
v-model="menuOpen" activator="parent" :open-on-click="false"
|
v-model="menuOpen" activator="parent" :open-on-click="false"
|
||||||
|
:z-index="2400"
|
||||||
>
|
>
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item @click="$emit('alias', suggestion)">
|
<v-list-item @click="$emit('alias', suggestion)">
|
||||||
|
|||||||
@@ -21,7 +21,11 @@
|
|||||||
:aria-label="`More actions for ${tag.name}`"
|
:aria-label="`More actions for ${tag.name}`"
|
||||||
@click.stop="menuOpen = !menuOpen"
|
@click.stop="menuOpen = !menuOpen"
|
||||||
/>
|
/>
|
||||||
<v-menu v-model="menuOpen" activator="parent" :open-on-click="false">
|
<!-- :z-index above the modal's 2000 — the teleported menu otherwise lands
|
||||||
|
BEHIND .fc-viewer and gets blurred by its backdrop-filter (operator
|
||||||
|
saw it ghosted behind the sidebar, 2026-06-07). THIS is what made the
|
||||||
|
kebab look dead the whole time: it opened, just underneath. -->
|
||||||
|
<v-menu v-model="menuOpen" activator="parent" :open-on-click="false" :z-index="2400">
|
||||||
<v-list density="compact">
|
<v-list density="compact">
|
||||||
<v-list-item @click="$emit('rename', tag)">
|
<v-list-item @click="$emit('rename', tag)">
|
||||||
<v-list-item-title>Rename…</v-list-item-title>
|
<v-list-item-title>Rename…</v-list-item-title>
|
||||||
|
|||||||
Reference in New Issue
Block a user