Minor fixes in Office (#5775)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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 />

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'

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>

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">

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

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>

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>
 

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