Updated LoveWidget layout (#7103)

2024-12-22 11:01:54 +03:00 · 2024-11-05 06:54:23 +03:00 · 2024-11-05 06:54:23 +03:00 · 585b3f40e7
commit 585b3f40e7
parent 3ea2659d9e
19 changed files with 50 additions and 60 deletions
--- 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;
  }
--- 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;
 }

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

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