huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Minor embed fixes (#5513)

Browse Source
This commit is contained in:
Mike
2025-09-23 09:55:31 +02:00
committed by GitHub
parent 7dab328dcc
commit 2e55bb0777
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend-2/components/viewer/Sidebar.vue
+13 -4
View File
@@ -2,20 +2,27 @@
<template>
<div
ref="resizableElement"
class="relative sm:absolute z-10 right-0 overflow-hidden w-screen bottom-0 sm:bottom-auto sm:top-[3.5rem] lg:top-[3rem] sm:right-2 lg:right-0 h-[40dvh] sm:h-[calc(100dvh-8rem)] lg:h-[calc(100dvh-3rem)] sm:max-w-[264px]"
class="relative sm:absolute z-10 right-0 overflow-hidden w-screen bottom-0 sm:bottom-auto sm:right-2 h-[40dvh] sm:max-w-[276px]"
:style="isLgOrLarger ? { maxWidth: width + 'px' } : {}"
:class="[open ? '' : 'pointer-events-none']"
:class="[
open ? '' : 'pointer-events-none',
isEmbedEnabled
? 'sm:top-2 sm:h-[calc(100dvh-8rem)]'
: 'sm:top-[3.5rem] lg:h-[calc(100dvh-3rem)] lg:top-[3rem] lg:right-0 sm:h-[calc(100dvh-8rem)]'
]"
>
<div class="flex h-full" :class="open ? '' : 'sm:translate-x-[100%]'">
<!-- Resize Handle -->
<div
v-if="!isEmbedEnabled"
ref="resizeHandle"
class="absolute h-full max-h-[calc(100dvh-3rem)] w-4 transition border-l sm:rounded-lg lg:rounded-none hover:border-l-[2px] border-outline-2 hover:border-primary hidden lg:flex items-center cursor-ew-resize z-30"
@mousedown="startResizing"
/>
<div
class="flex flex-col w-full h-full relative z-20 overflow-hidden sm:rounded-lg lg:rounded-none border-l border-t sm:border lg:border-0 lg:border-l border-outline-2 bg-foundation"
class="flex flex-col w-full h-full relative z-20 overflow-hidden sm:rounded-lg border-l border-t sm:border border-outline-2 bg-foundation"
:class="!isEmbedEnabled ? 'lg:rounded-none lg:border-0 lg:border-l' : ''"
>
<div
class="h-10 pl-4 pr-2 flex items-center justify-between border-b border-outline-2"
@@ -39,6 +46,7 @@
import { ref, onMounted } from 'vue'
import { useEventListener, useBreakpoints } from '@vueuse/core'
import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
import { useEmbed } from '~/lib/viewer/composables/setup/embed'
defineProps<{
open: boolean
@@ -52,12 +60,13 @@ const emit = defineEmits<{
const resizableElement = ref(null)
const resizeHandle = ref(null)
const isResizing = ref(false)
const width = ref(280)
const width = ref(276)
let startWidth = 0
let startX = 0
const breakpoints = useBreakpoints(TailwindBreakpoints)
const isLgOrLarger = breakpoints.greaterOrEqual('lg')
const { isEnabled: isEmbedEnabled } = useEmbed()
const startResizing = (event: MouseEvent) => {
event.preventDefault()
packages/frontend-2/components/viewer/controls/Left.vue
+4 -4
View File
@@ -1,11 +1,11 @@
<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
<template>
<aside
class="absolute left-2 lg:left-0 z-50 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible lg:h-full focus-visible:outline-none"
class="absolute left-2 z-50 flex rounded-lg border border-outline-2 bg-foundation px-1 overflow-visible focus-visible:outline-none"
:class="[
isEmbedEnabled
? 'top-[0.5rem]'
: 'top-[3.5rem] lg:top-[3rem] lg:rounded-none lg:px-2 lg:max-h-[calc(100dvh-3rem)] lg:border-l-0 lg:border-t-0 lg:border-b-0',
: 'top-[3.5rem] lg:top-[3rem] lg:rounded-none lg:px-2 lg:max-h-[calc(100dvh-3rem)] lg:border-l-0 lg:border-t-0 lg:border-b-0 lg:h-full lg:left-0',
hasActivePanel && 'h-full max-h-[calc(100dvh-8rem)] rounded-r-none'
]"
>
@@ -121,7 +121,7 @@
<!-- Resize handle -->
<div
v-if="activePanel !== 'none'"
v-if="activePanel !== 'none' && !isEmbedEnabled"
ref="resizeHandle"
class="absolute h-full max-h-[calc(100dvh-3rem)] w-4 transition border-l hover:border-l-[2px] border-outline-2 hover:border-primary hidden lg:flex items-center cursor-ew-resize z-30"
:style="`left:${width + 52}px;`"
@@ -289,7 +289,7 @@ const throttledHandleMouseMove = useThrottleFn((event: MouseEvent) => {
)
panelExtensionWidth.value = newWidth
}
}, 150)
}, 50)
if (import.meta.client) {
useResizeObserver(scrollableControlsContainer, (entries) => {