From 585b3f40e7d916681dbc7ba2c93d3732d884746f Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 5 Nov 2024 06:54:23 +0300
Subject: [PATCH] Updated LoveWidget layout (#7103)

---
 packages/theme/styles/components.scss         |  4 +-
 packages/theme/styles/panel.scss              |  1 +
 .../src/components/LoveWidget.svelte          | 73 ++++++++-----------
 .../src/components/Settings.svelte            |  2 +-
 .../settings/NotificationSettings.svelte      |  2 +-
 .../src/components/ClassSetting.svelte        |  2 +-
 .../src/components/Configure.svelte           |  2 +-
 .../src/components/EnumSetting.svelte         |  2 +-
 .../src/components/General.svelte             |  2 +-
 .../src/components/Integrations.svelte        |  2 +-
 .../src/components/InviteSetting.svelte       |  2 +-
 .../src/components/Owners.svelte              |  2 +-
 .../src/components/Password.svelte            |  2 +-
 .../src/components/Profile.svelte             |  2 +-
 .../src/components/Spaces.svelte              |  2 +-
 .../spaceTypes/ManageSpaceTypeContent.svelte  |  2 +-
 .../src/components/Templates.svelte           |  2 +-
 .../components/SettingsRelatedTargets.svelte  |  2 +-
 .../src/components/Settings.svelte            |  2 +-
 19 files changed, 50 insertions(+), 60 deletions(-)

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 31d53ae85e..4b6a4671a1 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -461,9 +461,9 @@
 }
 .hulyModal-container {
   height: 100%;
-  border-top: 1px solid transparent;
   visibility: visible;
-
+  
+  &:not(.noTopIndent) { border-top: 1px solid transparent; }
   &.hidden {
     visibility: hidden;
   }
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 6740fc65b7..44e2af9301 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -220,6 +220,7 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
+  border-right: 1px solid var(--theme-divider-color);
   border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;
 }
 
diff --git a/plugins/love-resources/src/components/LoveWidget.svelte b/plugins/love-resources/src/components/LoveWidget.svelte
index 1d96d51c6f..fda8cfb3b0 100644
--- a/plugins/love-resources/src/components/LoveWidget.svelte
+++ b/plugins/love-resources/src/components/LoveWidget.svelte
@@ -15,9 +15,7 @@
 <script lang="ts">
   import { Floor, Room } from '@hcengineering/love'
   import { Ref } from '@hcengineering/core'
-  import { getEmbeddedLabel } from '@hcengineering/platform'
-  import ui, { Button, IconChevronLeft, ModernButton, Scroller } from '@hcengineering/ui'
-
+  import ui, { IconChevronLeft, ModernButton, Scroller } from '@hcengineering/ui'
   import FloorPreview from './FloorPreview.svelte'
   import { floors, rooms } from '../stores'
   import IconLayers from './icons/Layers.svelte'
@@ -44,26 +42,24 @@
   }
 </script>
 
-<div class="root">
-  {#if floorsSelector}
-    {#each $floors as floor, i}
-      <Button
-        kind={'ghost'}
-        size={'large'}
-        on:click={() => {
-          selectFloor(floor._id)
-        }}
-        justify={'left'}
-        label={getEmbeddedLabel(floor.name)}
-      />
-      {#if i !== $floors.length - 1}<div class="divider" />{/if}
-    {/each}
-    <div class="flex-row-center flex-reverse mt-4 w-full">
-      <ModernButton on:click={changeMode} icon={IconChevronLeft} label={ui.string.Back} />
-    </div>
-  {:else}
-    {#if selectedFloor}
-      <Scroller>
+<div class="hulyModal-container noTopIndent type-aside">
+  <div class="hulyModal-content">
+    <Scroller>
+      {#if floorsSelector}
+        {#each $floors as _floor}
+          <FloorPreview
+            showRoomName
+            floor={_floor}
+            rooms={getRooms($rooms, _floor._id)}
+            selected={selectedFloor?._id === _floor._id}
+            kind={'no-border'}
+            background={'var(--theme-panel-color)'}
+            on:select={() => {
+              selectFloor(_floor._id)
+            }}
+          />
+        {/each}
+      {:else if selectedFloor}
         <FloorPreview
           floor={selectedFloor}
           showRoomName
@@ -72,26 +68,19 @@
           isOpen
           disabled
           cropped
-          size={'small'}
           kind={'no-border'}
-          background={'var(--theme-popup-color)'}
+          background={'var(--theme-panel-color)'}
         />
-      </Scroller>
-    {/if}
-    {#if $floors.length > 1}
-      <div class="flex-row-center flex-reverse flex-no-shrink w-full mt-4 mr-2">
-        <ModernButton on:click={changeMode} icon={IconLayers} label={love.string.ChangeFloor} />
-      </div>
-    {/if}
+      {/if}
+    </Scroller>
+  </div>
+  {#if floorsSelector || $floors.length > 1}
+    <div class="hulyModal-footer">
+      <ModernButton
+        on:click={changeMode}
+        icon={floorsSelector ? IconChevronLeft : IconLayers}
+        label={floorsSelector ? ui.string.Back : love.string.ChangeFloor}
+      />
+    </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .root {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    padding-bottom: 1rem;
-  }
-</style>
diff --git a/plugins/love-resources/src/components/Settings.svelte b/plugins/love-resources/src/components/Settings.svelte
index 04fbd1dbda..6cd2172999 100644
--- a/plugins/love-resources/src/components/Settings.svelte
+++ b/plugins/love-resources/src/components/Settings.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={love.icon.Love} label={love.string.Settings} size={'large'} isCurrent />
   </Header>
   <div class="flex-row-stretch flex-grow p-10">
diff --git a/plugins/notification-resources/src/components/settings/NotificationSettings.svelte b/plugins/notification-resources/src/components/settings/NotificationSettings.svelte
index fb82757131..c8d2faa193 100644
--- a/plugins/notification-resources/src/components/settings/NotificationSettings.svelte
+++ b/plugins/notification-resources/src/components/settings/NotificationSettings.svelte
@@ -97,7 +97,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb
       icon={notification.icon.Notifications}
       label={notification.string.Notifications}
diff --git a/plugins/setting-resources/src/components/ClassSetting.svelte b/plugins/setting-resources/src/components/ClassSetting.svelte
index 8d5644a1af..447809776c 100644
--- a/plugins/setting-resources/src/components/ClassSetting.svelte
+++ b/plugins/setting-resources/src/components/ClassSetting.svelte
@@ -102,7 +102,7 @@
 
 <div class="hulyComponent">
   {#if !withoutHeader}
-    <Header>
+    <Header adaptive={'disabled'}>
       <Breadcrumb icon={setting.icon.Clazz} label={setting.string.ClassSetting} size={'large'} isCurrent />
     </Header>
   {/if}
diff --git a/plugins/setting-resources/src/components/Configure.svelte b/plugins/setting-resources/src/components/Configure.svelte
index 042c21ea78..cc9b8d8968 100644
--- a/plugins/setting-resources/src/components/Configure.svelte
+++ b/plugins/setting-resources/src/components/Configure.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Setting} label={setting.string.Configuration} size={'large'} isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">
diff --git a/plugins/setting-resources/src/components/EnumSetting.svelte b/plugins/setting-resources/src/components/EnumSetting.svelte
index db1e9e7f58..e775b207e2 100644
--- a/plugins/setting-resources/src/components/EnumSetting.svelte
+++ b/plugins/setting-resources/src/components/EnumSetting.svelte
@@ -55,7 +55,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Enums} label={setting.string.Enums} size={'large'} isCurrent />
     <svelte:fragment slot="actions">
       <ModernButton
diff --git a/plugins/setting-resources/src/components/General.svelte b/plugins/setting-resources/src/components/General.svelte
index 8808884c31..029bdce97f 100644
--- a/plugins/setting-resources/src/components/General.svelte
+++ b/plugins/setting-resources/src/components/General.svelte
@@ -117,7 +117,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Setting} label={setting.string.General} size={'large'} isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">
diff --git a/plugins/setting-resources/src/components/Integrations.svelte b/plugins/setting-resources/src/components/Integrations.svelte
index e43e891ba4..c935ab2b59 100644
--- a/plugins/setting-resources/src/components/Integrations.svelte
+++ b/plugins/setting-resources/src/components/Integrations.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Integrations} label={setting.string.Integrations} size={'large'} isCurrent />
   </Header>
 
diff --git a/plugins/setting-resources/src/components/InviteSetting.svelte b/plugins/setting-resources/src/components/InviteSetting.svelte
index 863a6ff86a..a9e04df7cd 100644
--- a/plugins/setting-resources/src/components/InviteSetting.svelte
+++ b/plugins/setting-resources/src/components/InviteSetting.svelte
@@ -57,7 +57,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.InviteSettings} label={setting.string.InviteSettings} size={'large'} isCurrent />
   </Header>
   <div class="form">
diff --git a/plugins/setting-resources/src/components/Owners.svelte b/plugins/setting-resources/src/components/Owners.svelte
index 9ff33e0364..bceb8ca385 100644
--- a/plugins/setting-resources/src/components/Owners.svelte
+++ b/plugins/setting-resources/src/components/Owners.svelte
@@ -52,7 +52,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Owners} label={setting.string.Owners} size={'large'} isCurrent />
     <svelte:fragment slot="search">
       <SearchInput bind:value={search} collapsed />
diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte
index 22f6c21eaf..63278e85eb 100644
--- a/plugins/setting-resources/src/components/Password.svelte
+++ b/plugins/setting-resources/src/components/Password.svelte
@@ -57,7 +57,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Password} label={setting.string.ChangePassword} size={'large'} isCurrent />
   </Header>
   <div class="flex-row-stretch flex-grow p-10">
diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte
index 2ddf94ceec..94a07608ac 100644
--- a/plugins/setting-resources/src/components/Profile.svelte
+++ b/plugins/setting-resources/src/components/Profile.svelte
@@ -77,7 +77,7 @@
 <FocusHandler {manager} />
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.AccountSettings} label={setting.string.AccountSettings} size={'large'} isCurrent />
   </Header>
   <div class="ac-body p-10">
diff --git a/plugins/setting-resources/src/components/Spaces.svelte b/plugins/setting-resources/src/components/Spaces.svelte
index 4ced7f5239..dce2227e7e 100644
--- a/plugins/setting-resources/src/components/Spaces.svelte
+++ b/plugins/setting-resources/src/components/Spaces.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Views} label={setting.string.Spaces} size="large" isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">
diff --git a/plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypeContent.svelte b/plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypeContent.svelte
index 5203cff415..c69df3be0e 100644
--- a/plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypeContent.svelte
+++ b/plugins/setting-resources/src/components/spaceTypes/ManageSpaceTypeContent.svelte
@@ -149,7 +149,7 @@
   }}
 >
   {#if type !== undefined && descriptor !== undefined}
-    <Header>
+    <Header adaptive={'disabled'}>
       <Breadcrumbs
         items={bcItems}
         size="large"
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 7605a9d882..a7de67bb96 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -151,7 +151,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb
       icon={templatesPlugin.icon.Templates}
       label={templatesPlugin.string.Templates}
diff --git a/plugins/tracker-resources/src/components/SettingsRelatedTargets.svelte b/plugins/tracker-resources/src/components/SettingsRelatedTargets.svelte
index 7a4602dd89..3c9c6a48e4 100644
--- a/plugins/tracker-resources/src/components/SettingsRelatedTargets.svelte
+++ b/plugins/tracker-resources/src/components/SettingsRelatedTargets.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={tracker.icon.Relations} label={tracker.string.RelatedIssues} size={'large'} isCurrent />
   </Header>
   <EditRelatedTargets {value} />
diff --git a/plugins/training-resources/src/components/Settings.svelte b/plugins/training-resources/src/components/Settings.svelte
index 2ecd3d8645..e4e2ff97de 100644
--- a/plugins/training-resources/src/components/Settings.svelte
+++ b/plugins/training-resources/src/components/Settings.svelte
@@ -83,7 +83,7 @@
 </script>
 
 <div class="hulyComponent">
-  <Header>
+  <Header adaptive={'disabled'}>
     <Breadcrumb icon={training.icon.Training} label={training.string.Trainings} size="large" isCurrent />
   </Header>
   <div class="hulyComponent-content__column content">