public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): click left pill scrolls to and highlights right preview

Browse source
This commit is contained in:
Thorsten Bus 2026-03-29 17:42:55 +02:00
parent b8b92f094e
commit 63f40f8364
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
resources/js/Components/ArrangementDialog.vue
View file

@ -141,10 +141,30 @@ const currentArrangement = computed(() => {
const arrangementGroups = ref([]) const arrangementGroups = ref([])
const hoveredIndex = ref(null) const hoveredIndex = ref(null)
const clickedIndex = ref(null)
let clickedTimeout = null
const rightItems = ref([])
function setRightItemRef(el, index) {
if (el) rightItems.value[index] = el
}
function scrollToRight(index) {
const el = rightItems.value[index]
if (!el) return
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
clickedIndex.value = index
if (clickedTimeout) clearTimeout(clickedTimeout)
clickedTimeout = setTimeout(() => {
clickedIndex.value = null
}, 1500)
}
watch( watch(
currentArrangementId, currentArrangementId,
(id) => { (id) => {
rightItems.value = []
clickedIndex.value = null
if (id === MASTER_ID) { if (id === MASTER_ID) {
arrangementGroups.value = props.availableGroups.map((g, i) => ({ ...g, slides: g.slides ?? [], _uid: `${g.id}-master-${i}-${Date.now()}` })) arrangementGroups.value = props.availableGroups.map((g, i) => ({ ...g, slides: g.slides ?? [], _uid: `${g.id}-master-${i}-${Date.now()}` }))
return return
@ -555,15 +575,16 @@ function closeOnBackdrop(e) {
v-for="(element, index) in arrangementGroups" v-for="(element, index) in arrangementGroups"
:key="element._uid" :key="element._uid"
data-testid="arrangement-pill" data-testid="arrangement-pill"
class="flex items-center gap-2 rounded-lg border-2 px-3 py-2" class="flex items-center gap-2 rounded-lg border-2 px-3 py-2 transition-shadow"
:class="[ :class="[
{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index }, { 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index || clickedIndex === index },
isMasterSelected ? 'cursor-default' : 'cursor-grab', isMasterSelected ? 'cursor-default' : 'cursor-grab',
]" ]"
:style="{ :style="{
borderColor: element.color ?? '#6b7280', borderColor: element.color ?? '#6b7280',
backgroundColor: (element.color ?? '#6b7280') + '20', backgroundColor: (element.color ?? '#6b7280') + '20',
}" }"
@click="scrollToRight(index)"
> >
<!-- Group name --> <!-- Group name -->
<span class="flex-1 text-sm font-medium"> <span class="flex-1 text-sm font-medium">
@ -652,8 +673,9 @@ function closeOnBackdrop(e) {
<div <div
v-for="(element, index) in arrangementGroups" v-for="(element, index) in arrangementGroups"
:key="element._uid" :key="element._uid"
:ref="(el) => setRightItemRef(el, index)"
class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm transition-shadow" class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm transition-shadow"
:class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index }" :class="{ 'ring-2 ring-indigo-400 ring-offset-1': hoveredIndex === index || clickedIndex === index }"
:style="{ borderColor: element.color ?? '#6b7280' }" :style="{ borderColor: element.color ?? '#6b7280' }"
@mouseenter="hoveredIndex = index" @mouseenter="hoveredIndex = index"
@mouseleave="hoveredIndex = null" @mouseleave="hoveredIndex = null"