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)`}