diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 3247cfbf48..54f7d76568 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -1053,6 +1053,7 @@ a.no-line { .bottom-divider { border-bottom: 1px solid var(--theme-divider-color); } .left-divider { border-left: 1px solid var(--theme-divider-color); } .right-divider { border-right: 1px solid var(--theme-divider-color); } +.right-navpanel-border { border-right: 1px solid var(--theme-navpanel-border); } .bottom-highlight-select { border-bottom: 1px solid var(--highlight-select); } diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte index 613177ce66..7ab8e37f72 100644 --- a/packages/ui/src/components/Separator.svelte +++ b/packages/ui/src/components/Separator.svelte @@ -38,6 +38,8 @@ let sState: SeparatorState $: sState = typeof float === 'string' ? SeparatorState.FLOAT : float ? SeparatorState.HIDDEN : SeparatorState.NORMAL + const checkFullWidth = (): boolean => + sState === SeparatorState.FLOAT && $deviceInfo.isMobile && $deviceInfo.isPortrait const direction: 'horizontal' | 'vertical' = 'horizontal' let separators: SeparatedItem[] | null = null @@ -67,6 +69,10 @@ let disabled: boolean = false let side: 'start' | 'end' | undefined = undefined + $: fs = $deviceInfo.fontSize + const remToPx = (rem: number): number => rem * fs + const pxToRem = (px: number): number => px / fs + const fetchSeparators = (): void => { const res = getSeparators(name, float) if (res !== null && !Array.isArray(res)) panel = res @@ -90,10 +96,6 @@ checkSizes() } - $: fs = $deviceInfo.fontSize - const remToPx = (rem: number): number => rem * fs - const pxToRem = (px: number): number => px / fs - const convertSize = (prop: TSeparatedItem): string => (typeof prop === 'number' ? `${prop}px` : '') const setSize = (element: HTMLElement, size: TSeparatedItem, next: boolean = false): void => { @@ -229,6 +231,12 @@ const checkSizes = (): void => { if (sState === SeparatorState.FLOAT) { + if (checkFullWidth() && panel != null) { + const s = pxToRem(window.innerWidth) + panel.size = s + panel.maxSize = s + panel.minSize = s + } if (parentElement != null && panel != null) initSize(parentElement, panel) } else if (sState === SeparatorState.NORMAL) { if (prevElement != null && prevElSize != null) initSize(prevElement, prevElSize) @@ -442,12 +450,13 @@ } } else if (sState === SeparatorState.FLOAT && parentElement != null) { parentElement.style.pointerEvents = 'all' - saveSeparator(name, float, panel) + if (!checkFullWidth()) saveSeparator(name, float, panel) } document.body.style.cursor = '' } function pointerDown (event: PointerEvent): void { + if (checkFullWidth()) return prepareSeparation(event) document.addEventListener('pointermove', pointerMove) document.addEventListener('pointerup', pointerUp) diff --git a/packages/ui/src/resize.ts b/packages/ui/src/resize.ts index 7ebae9e983..29fd80c43d 100644 --- a/packages/ui/src/resize.ts +++ b/packages/ui/src/resize.ts @@ -148,7 +148,7 @@ export function saveSeparator ( } export const panelSeparators: DefSeparators = [ - { minSize: 30, size: 'auto', maxSize: 'auto' }, + { minSize: 20, size: 'auto', maxSize: 'auto' }, { minSize: 17, size: 25, maxSize: 35, float: 'aside' } ] diff --git a/plugins/love-resources/src/components/ControlBar.svelte b/plugins/love-resources/src/components/ControlBar.svelte index c834f3b508..ef0541396c 100644 --- a/plugins/love-resources/src/components/ControlBar.svelte +++ b/plugins/love-resources/src/components/ControlBar.svelte @@ -28,7 +28,8 @@ getCurrentLocation, showPopup, type AnySvelteComponent, - type CompAndProps + type CompAndProps, + resizeObserver } from '@hcengineering/ui' import view from '@hcengineering/view' import plugin from '../plugin' @@ -51,6 +52,7 @@ import CamSettingPopup from './CamSettingPopup.svelte' import MicSettingPopup from './MicSettingPopup.svelte' import RoomAccessPopup from './RoomAccessPopup.svelte' + import { afterUpdate } from 'svelte' export let room: Room export let fullScreen: boolean = false @@ -59,6 +61,11 @@ const allowShare: boolean = true let allowLeave: boolean = false let popup: CompAndProps | undefined = undefined + let grow: HTMLElement + let leftPanel: HTMLElement + let leftPanelSize: number = 0 + let noLabel: boolean = false + let combinePanel: boolean = false $: allowCam = $currentRoom?.type === RoomType.Video $: allowLeave = $myInfo?.room !== ($myOffice?._id ?? plugin.ids.Reception) @@ -149,9 +156,22 @@ const camKeys = client.getModel().findAllSync(view.class.Action, { _id: plugin.action.ToggleVideo })?.[0]?.keyBinding const micKeys = client.getModel().findAllSync(view.class.Action, { _id: plugin.action.ToggleMic })?.[0]?.keyBinding + + const checkBar = (): void => { + if (grow === undefined || leftPanel === undefined) return + if (!noLabel && leftPanel.clientWidth > leftPanelSize) leftPanelSize = leftPanel.clientWidth + if (grow.clientWidth - 16 < leftPanel.clientWidth && !noLabel && !combinePanel) noLabel = true + else if (grow.clientWidth - 16 < leftPanel.clientWidth && noLabel && !combinePanel) combinePanel = true + else if (grow.clientWidth * 2 - 32 > leftPanel.clientWidth && noLabel && combinePanel) combinePanel = false + else if (grow.clientWidth - 32 >= leftPanelSize && noLabel && !combinePanel) noLabel = false + } + afterUpdate(() => { + checkBar() + }) -
+
+
{#if room._id !== plugin.ids.Reception} {/if} {/if} -
+
{#if $isConnected} {/if}
+
{#if popup && fullScreen} .bar { + overflow-x: auto; position: relative; padding: 1rem; border-top: 1px solid var(--theme-divider-color); @@ -270,5 +292,9 @@ right: 1rem; height: 100%; } + + &.combinePanel .bar__left-panel { + position: static; + } } diff --git a/plugins/love-resources/src/components/Room.svelte b/plugins/love-resources/src/components/Room.svelte index e1d2bd92d4..93f8f6d093 100644 --- a/plugins/love-resources/src/components/Room.svelte +++ b/plugins/love-resources/src/components/Room.svelte @@ -17,7 +17,7 @@ import { personByIdStore } from '@hcengineering/contact-resources' import { Room as TypeRoom } from '@hcengineering/love' import { getMetadata } from '@hcengineering/platform' - import { Label, Loading, resizeObserver } from '@hcengineering/ui' + import { Label, Loading, resizeObserver, deviceOptionsStore as deviceInfo } from '@hcengineering/ui' import { LocalParticipant, LocalTrackPublication, @@ -333,7 +333,7 @@ $: if (((document.fullscreenElement && !$isFullScreen) || $isFullScreen) && roomEl) toggleFullscreen() -
+
{#if $isConnected && !$isCurrentInstanceConnected}