Benjamin Ottensten
fc76fd9f4f
* Update header navigation Logo, share button color, breadcrumb colors, spacings * Updates to main button component Shadows, border on secondary button, less spacings to icons * Update spacings in dialog after bew button styling * Use secondary button in embed dialog * Update select inputs Spacing, icon, border on dropdown, smaller avatars * Update inputs to use the new styling * Various copy updates * Update icons Smaller icons, outline instead of solid, removed some icons that were unnecessary * Switch order of actions in Delete dialog * Update styling of inline New model action * Remove strange BG effect on comments component * Update styling of hide/isolate actions in viewer Was necessary after the button styling change. But new copy also makes it more usable. * Fix alignment issue in selection info panel * Align styling in Viewer panel component * Clean up measure usage tips A permanent "Right click to cancel measurement" tip isn't needed * Panel spacing * Update actions in the add model to viewer dialog * Update permissions input in new project dialog * Two minor things * Remove unnecessary flex classes --------- Co-authored-by: andrewwallacespeckle <andrew@speckle.systems>
107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="relative">
|
|
<button class="hidden sm:block pointer-events-auto group" @click="toggle(index)">
|
|
<div
|
|
v-show="!item.viewed"
|
|
class="animate-ping absolute bg-primary rounded-full h-8 w-8"
|
|
></div>
|
|
<div
|
|
class="sm:absolute bg-foundation group-hover:scale-125 scale transition rounded-full h-8 w-8 flex items-center justify-center text-primary cursor-pointer select-none text-sm font-bold"
|
|
>
|
|
<span>{{ index + 1 }}</span>
|
|
<!-- <span v-if="!expanded">{{ index + 1 }}</span>
|
|
<span v-else><XMarkIcon class="h-6 w-6" /></span> -->
|
|
</div>
|
|
</button>
|
|
<Transition
|
|
enter-from-class="opacity-0"
|
|
leave-to-class="opacity-0"
|
|
enter-active-class="transition duration-300"
|
|
leave-active-class="transition duration-300"
|
|
>
|
|
<div
|
|
v-show="item.expanded"
|
|
class="transition bg-foundation rounded-lg shadow-md mb-8 mx-2 px-4 py-4 gap-2 sm:gap-4 sm:ml-12 sm:max-w-xs pointer-events-auto"
|
|
>
|
|
<div
|
|
class="sm:hidden flex items-center justify-center w-full gap-3 mt-1 mb-3"
|
|
>
|
|
<div
|
|
class="bg-primary rounded-full"
|
|
:class="index === 0 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
|
|
></div>
|
|
<div
|
|
class="bg-primary rounded-full"
|
|
:class="index === 1 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
|
|
></div>
|
|
<div
|
|
class="bg-primary rounded-full"
|
|
:class="index === 2 ? 'h-3 w-3' : 'h-2 w-2 opacity-50'"
|
|
></div>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
|
|
<div class="flex items-center justify-between pointer-events-auto mt-4">
|
|
<slot name="actions">
|
|
<FormButton text outlined size="sm" @click="$emit('skip')">
|
|
Skip
|
|
</FormButton>
|
|
<div class="flex justify-center space-x-2">
|
|
<FormButton
|
|
v-show="index !== 0"
|
|
:icon-left="ArrowLeftIcon"
|
|
text
|
|
size="sm"
|
|
@click="prev(index)"
|
|
>
|
|
Previous
|
|
</FormButton>
|
|
<FormButton :icon-right="ArrowRightIcon" size="sm" @click="next(index)">
|
|
Next
|
|
</FormButton>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Vector3 } from 'three'
|
|
import { ArrowRightIcon, ArrowLeftIcon } from '@heroicons/vue/24/solid'
|
|
import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
|
|
import type { SlideshowItem } from '~~/lib/tour/slideshowItems'
|
|
|
|
const { next, prev, toggle } = inject('slideshowActions') as {
|
|
next: (currentIndex: number) => void
|
|
prev: (currentIndex: number) => void
|
|
toggle: (i: number) => void
|
|
}
|
|
|
|
defineEmits(['skip', 'previous', 'next'])
|
|
|
|
const props = defineProps<{
|
|
index: number
|
|
item: SlideshowItem
|
|
}>()
|
|
|
|
const {
|
|
ui: {
|
|
camera: { position, target }
|
|
}
|
|
} = useInjectedViewerState()
|
|
|
|
watchEffect(() => {
|
|
if (props.item.expanded) setView()
|
|
})
|
|
|
|
function setView() {
|
|
const camPos = props.item.camPos
|
|
position.value = new Vector3(camPos[0], camPos[1], camPos[2])
|
|
target.value = new Vector3(camPos[3], camPos[4], camPos[5])
|
|
}
|
|
</script>
|