From 9be4dbfe9d5f579119e76336dacc96f116a4d8fb Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 11 Jun 2024 06:58:17 +0300
Subject: [PATCH] Minor fixes in Office (#5775)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
packages/ui/src/components/NavItem.svelte | 4 +-
packages/ui/src/index.ts | 1 +
.../src/components/EventPresenter.svelte | 2 +-
.../src/components/ControlBar.svelte | 59 +++++++++++++++++--
.../src/components/ControlExt.svelte | 8 ---
.../src/components/FloorConfigure.svelte | 4 +-
.../love-resources/src/components/Room.svelte | 2 +-
.../src/components/RoomConfigure.svelte | 2 -
8 files changed, 63 insertions(+), 19 deletions(-)
diff --git a/packages/ui/src/components/NavItem.svelte b/packages/ui/src/components/NavItem.svelte
index 96290098e5..cbd490bbc3 100644
--- a/packages/ui/src/components/NavItem.svelte
+++ b/packages/ui/src/components/NavItem.svelte
@@ -78,7 +78,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button
- class="hulyNavItem-container {type} {type === 'type-anchor-link' || isSecondary
+ class="hulyNavItem-container line-height-auto {type} {type === 'type-anchor-link' || isSecondary
? 'font-regular-12'
: 'font-regular-14'}"
class:selected
@@ -128,7 +128,7 @@
style:color={type === 'type-tag' && selected ? color : null}
>
{#if description}
- <span class="hulyNavItem-label font-medium-12 mr-0-5">
+ <span class="hulyNavItem-label font-medium-12 line-height-auto mr-0-5">
{#if label}<Label {label} />{/if}
{#if title}{title}{/if}
<slot />
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index beef9bc0c7..582ecab56d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -106,6 +106,7 @@ export { default as Chip } from './components/Chip.svelte'
export { default as Loading } from './components/Loading.svelte'
export { default as Spinner } from './components/Spinner.svelte'
export { default as Popup } from './components/Popup.svelte'
+export { default as PopupInstance } from './components/PopupInstance.svelte'
export { default as CircleButton } from './components/CircleButton.svelte'
export { default as Link } from './components/Link.svelte'
export { default as LinkWrapper } from './components/LinkWrapper.svelte'
diff --git a/plugins/calendar-resources/src/components/EventPresenter.svelte b/plugins/calendar-resources/src/components/EventPresenter.svelte
index 8b2d5999b4..1a9040b88f 100644
--- a/plugins/calendar-resources/src/components/EventPresenter.svelte
+++ b/plugins/calendar-resources/src/components/EventPresenter.svelte
@@ -52,7 +52,7 @@
{#if value.allDay}
<DatePresenter value={value.date} />
{:else}
- <div class="flex-row-center">
+ <div class="flex-row-center flex-no-shrink">
<DateTimeRangePresenter value={value.date} /> <span class="p-1">-</span>
<DateRangePresenter value={value.dueDate} mode={DateRangeMode.TIME} editable={false} />
</div>
diff --git a/plugins/love-resources/src/components/ControlBar.svelte b/plugins/love-resources/src/components/ControlBar.svelte
index 2c3216b17a..1ed3bd6998 100644
--- a/plugins/love-resources/src/components/ControlBar.svelte
+++ b/plugins/love-resources/src/components/ControlBar.svelte
@@ -18,7 +18,16 @@
import login from '@hcengineering/login'
import { getResource } from '@hcengineering/platform'
import { copyTextToClipboard, getClient } from '@hcengineering/presentation'
- import { IconUpOutline, ModernButton, SplitButton, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+ import {
+ IconUpOutline,
+ ModernButton,
+ SplitButton,
+ eventToHTMLElement,
+ showPopup,
+ PopupInstance,
+ type CompAndProps,
+ type AnySvelteComponent
+ } from '@hcengineering/ui'
import view from '@hcengineering/view'
import love, { Room, RoomType, isOffice, roomAccessIcon } from '@hcengineering/love'
import plugin from '../plugin'
@@ -43,10 +52,12 @@
import RoomAccessPopup from './RoomAccessPopup.svelte'
export let room: Room
+ export let fullScreen: boolean = false
let allowCam: boolean = false
const allowShare: boolean = true
let allowLeave: boolean = false
+ let popup: CompAndProps | undefined = undefined
$: allowCam = $currentRoom?.type === RoomType.Video
$: allowLeave = $myInfo?.room !== ($myOffice?._id ?? plugin.ids.Reception)
@@ -67,17 +78,42 @@
await leaveRoom($myInfo, $myOffice)
}
+ function getPopup (component: AnySvelteComponent, e: MouseEvent, props: any = {}): CompAndProps {
+ return {
+ id: 'fsPopup',
+ is: component,
+ props,
+ element: eventToHTMLElement(e),
+ options: { category: 'popup', overlay: true },
+ close: () => {
+ popup = undefined
+ }
+ }
+ }
+
function micSettings (e: MouseEvent): void {
- showPopup(MicSettingPopup, {}, eventToHTMLElement(e))
+ if (fullScreen) {
+ popup = getPopup(MicSettingPopup, e)
+ } else {
+ showPopup(MicSettingPopup, {}, eventToHTMLElement(e))
+ }
}
function camSettings (e: MouseEvent): void {
- showPopup(CamSettingPopup, {}, eventToHTMLElement(e))
+ if (fullScreen) {
+ popup = getPopup(CamSettingPopup, e)
+ } else {
+ showPopup(CamSettingPopup, {}, eventToHTMLElement(e))
+ }
}
function setAccess (e: MouseEvent): void {
if (isOffice(room) && room.person !== me) return
- showPopup(RoomAccessPopup, { room }, eventToHTMLElement(e))
+ if (fullScreen) {
+ popup = getPopup(RoomAccessPopup, e, { room })
+ } else {
+ showPopup(RoomAccessPopup, { room }, eventToHTMLElement(e))
+ }
}
async function copyGuestLink (): Promise<void> {
@@ -191,6 +227,21 @@
/>
{/if}
</div>
+ {#if popup && fullScreen}
+ <PopupInstance
+ is={popup.is}
+ props={popup.props}
+ element={popup.element}
+ onClose={popup.onClose}
+ onUpdate={popup.onUpdate}
+ zIndex={1}
+ top={true}
+ close={popup.close}
+ overlay={popup.options.overlay}
+ contentPanel={undefined}
+ {popup}
+ />
+ {/if}
</div>
<style lang="scss">
diff --git a/plugins/love-resources/src/components/ControlExt.svelte b/plugins/love-resources/src/components/ControlExt.svelte
index 1e518aef3e..e4cefc9f43 100644
--- a/plugins/love-resources/src/components/ControlExt.svelte
+++ b/plugins/love-resources/src/components/ControlExt.svelte
@@ -65,7 +65,6 @@
isCurrentInstanceConnected,
isMicEnabled,
isSharingEnabled,
- isFullScreen,
leaveRoom,
screenSharing,
setCam,
@@ -393,13 +392,6 @@
size={'small'}
action={changeShare}
/>
- <ActionIcon
- icon={$isFullScreen ? love.icon.ExitFullScreen : love.icon.FullScreen}
- size={'small'}
- action={() => {
- $isFullScreen = !$isFullScreen
- }}
- />
{/if}
{#if allowLeave}
<ActionIcon
diff --git a/plugins/love-resources/src/components/FloorConfigure.svelte b/plugins/love-resources/src/components/FloorConfigure.svelte
index 3a604e9b4a..8c37d95a65 100644
--- a/plugins/love-resources/src/components/FloorConfigure.svelte
+++ b/plugins/love-resources/src/components/FloorConfigure.svelte
@@ -48,6 +48,7 @@
let resizeInitParams: ResizeInitParams | undefined = undefined
let floorContainer: HTMLDivElement
let floorRect: DOMRect
+ let floorOffsetInline: number
const floorSize: FloorSize = {
cols: GRID_WIDTH + 2,
rows: 5,
@@ -342,6 +343,7 @@
if (event.detail === undefined) return
const { room, size, offset } = event.detail
floorRect = floorContainer.getBoundingClientRect()
+ floorOffsetInline = floorRect.x - divScroll.getBoundingClientRect().x
dragged = {
x: size.x - floorRect.x + floorSize.cellRound,
y: size.y - floorRect.y + floorSize.cellRound,
@@ -363,7 +365,7 @@
room={locked.room}
cellSize={floorSize.cellSize}
top={dragged.y}
- left={dragged.x}
+ left={dragged.x + floorOffsetInline - floorSize.cellRound}
/>
{/if}
</Scroller>
diff --git a/plugins/love-resources/src/components/Room.svelte b/plugins/love-resources/src/components/Room.svelte
index 0f07518a8a..88be7fed7b 100644
--- a/plugins/love-resources/src/components/Room.svelte
+++ b/plugins/love-resources/src/components/Room.svelte
@@ -366,7 +366,7 @@
{/if}
</div>
{#if $currentRoom}
- <ControlBar room={$currentRoom} />
+ <ControlBar room={$currentRoom} fullScreen={$isFullScreen} />
{/if}
</div>
diff --git a/plugins/love-resources/src/components/RoomConfigure.svelte b/plugins/love-resources/src/components/RoomConfigure.svelte
index a229504b01..c1b44df9e9 100644
--- a/plugins/love-resources/src/components/RoomConfigure.svelte
+++ b/plugins/love-resources/src/components/RoomConfigure.svelte
@@ -179,8 +179,6 @@
style:--huly-floor-roomWidth={room.width}
style:--huly-floor-roomHeight={room.height}
style:--huly-floor-roomShadow={`var(--theme-popup-shadow), ${$shadow.x}px ${$shadow.y}px ${$shadow.r}px ${$shadow.s}px rgba(${$shadowColor.r}, ${$shadowColor.g}, ${$shadowColor.b}, ${$shadowColor.a})`}
- style:top={top ? `${top}px` : undefined}
- style:left={left ? `${left}px` : undefined}
style:grid-column={`${room.x + 2} / span ${room.width}`}
style:grid-row={`${room.y + 2} / span ${room.height}`}
style:grid-template-columns={`repeat(${room.width}, 1fr)`}