From b766ddf6dec80b1ee89123d2997dceb35f4af512 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Thu, 6 Apr 2023 10:54:27 +0600
Subject: [PATCH] Inbox attriubute bar (#2907)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 packages/theme/styles/panel.scss              |   8 +-
 packages/ui/src/components/Panel.svelte       | 113 +++++++++---------
 .../src/components/Inbox.svelte               |  46 ++++---
 3 files changed, 94 insertions(+), 73 deletions(-)

diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 69ea0720cd..af721a13e1 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -88,9 +88,11 @@
       min-width: 0;
       min-height: 3rem;
       background-color: var(--board-card-bg-color);
-      border: 1px solid var(--divider-color);
-      border-bottom: none;
-      border-radius: .5rem .5rem 0 0;
+      &:not(.embedded) {
+        border: 1px solid var(--divider-color);
+        border-bottom: none;
+        border-radius: .5rem .5rem 0 0;
+      }
     }
     &__content {
       flex-grow: 1;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 553da4fd34..04a67315a9 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -86,70 +86,73 @@
     checkPanel()
   }}
 >
-  {#if !embedded}
-    <div class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}">
-      <div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
-        {#if allowClose}
+  <div
+    class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}"
+    class:embedded
+  >
+    <div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
+      {#if allowClose && !embedded}
+        <Button
+          icon={IconClose}
+          kind={'transparent'}
+          size={'medium'}
+          on:click={() => {
+            dispatch('close')
+          }}
+        />
+      {/if}
+      {#if !embedded}
+        {#if $$slots.navigator}<slot name="navigator" />{/if}
+      {/if}
+      <div class="popupPanel-title__content">
+        {#if !twoRows && !withoutTitle}<slot name="title" />{/if}
+      </div>
+      <div class="buttons-group xsmall-gap">
+        <slot name="utils" />
+        {#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
+          <div class="buttons-divider" />
+        {/if}
+        {#if $$slots.aside && isAside}
           <Button
-            icon={IconClose}
+            icon={IconDetails}
             kind={'transparent'}
             size={'medium'}
+            selected={asideShown}
             on:click={() => {
-              dispatch('close')
+              asideShown = !asideShown
+            }}
+          />
+        {/if}
+        {#if useMaxWidth !== undefined}
+          <Button
+            icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
+            kind={'transparent'}
+            size={'medium'}
+            selected={useMaxWidth}
+            on:click={() => {
+              useMaxWidth = !useMaxWidth
+              dispatch('maxWidth', useMaxWidth)
+            }}
+          />
+        {/if}
+        {#if isFullSize}
+          <Button
+            icon={fullSize ? IconScale : IconScaleFull}
+            kind={'transparent'}
+            size={'medium'}
+            selected={fullSize}
+            on:click={() => {
+              fullSize = !fullSize
+              dispatch('fullsize')
             }}
           />
         {/if}
-        {#if $$slots.navigator}<slot name="navigator" />{/if}
-        <div class="popupPanel-title__content">
-          {#if !twoRows && !withoutTitle}<slot name="title" />{/if}
-        </div>
-        <div class="buttons-group xsmall-gap">
-          <slot name="utils" />
-          {#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
-            <div class="buttons-divider" />
-          {/if}
-          {#if $$slots.aside && isAside}
-            <Button
-              icon={IconDetails}
-              kind={'transparent'}
-              size={'medium'}
-              selected={asideShown}
-              on:click={() => {
-                asideShown = !asideShown
-              }}
-            />
-          {/if}
-          {#if useMaxWidth !== undefined}
-            <Button
-              icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
-              kind={'transparent'}
-              size={'medium'}
-              selected={useMaxWidth}
-              on:click={() => {
-                useMaxWidth = !useMaxWidth
-                dispatch('maxWidth', useMaxWidth)
-              }}
-            />
-          {/if}
-          {#if isFullSize}
-            <Button
-              icon={fullSize ? IconScale : IconScaleFull}
-              kind={'transparent'}
-              size={'medium'}
-              selected={fullSize}
-              on:click={() => {
-                fullSize = !fullSize
-                dispatch('fullsize')
-              }}
-            />
-          {/if}
-        </div>
       </div>
-      {#if twoRows && !withoutTitle}
-        <div class="popupPanel-title row-bottom"><slot name="title" /></div>
-      {/if}
     </div>
-  {/if}
+    {#if twoRows && !withoutTitle}
+      <div class="popupPanel-title row-bottom"><slot name="title" /></div>
+    {/if}
+  </div>
   <div class="popupPanel-body {$deviceInfo.isMobile ? 'mobile' : 'main'}" class:asideShown class:embedded>
     {#if $deviceInfo.isMobile}
       <Scroller horizontal padding={'.5rem .75rem'}>
diff --git a/plugins/notification-resources/src/components/Inbox.svelte b/plugins/notification-resources/src/components/Inbox.svelte
index 6638d2032b..45479f3631 100644
--- a/plugins/notification-resources/src/components/Inbox.svelte
+++ b/plugins/notification-resources/src/components/Inbox.svelte
@@ -22,6 +22,8 @@
   import view from '@hcengineering/view'
   import NotificationView from './NotificationView.svelte'
 
+  export let visibileNav: boolean
+
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const query = createQuery()
@@ -73,25 +75,39 @@
 </script>
 
 <div class="flex h-full">
-  <div class="antiPanel-component border-right filled indent aside">
-    <div class="antiNav-header bottom-divider">
-      <span class="fs-title overflow-label">
-        <Label label={notification.string.Inbox} />
-      </span>
+  {#if visibileNav}
+    <div class="antiPanel-component border-right filled indent aside">
+      <div class="header">
+        <span class="fs-title overflow-label">
+          <Label label={notification.string.Inbox} />
+        </span>
+      </div>
+      <div class="top-divider">
+        <Scroller>
+          {#if loading}
+            <Loading />
+          {:else}
+            {#each docs as doc}
+              <NotificationView value={doc} selected={doc.attachedTo === _id} {viewlets} on:click={selectHandler} />
+            {/each}
+          {/if}
+        </Scroller>
+      </div>
     </div>
-    <Scroller>
-      {#if loading}
-        <Loading />
-      {:else}
-        {#each docs as doc}
-          <NotificationView value={doc} selected={doc.attachedTo === _id} {viewlets} on:click={selectHandler} />
-        {/each}
-      {/if}
-    </Scroller>
-  </div>
+  {/if}
   {#if loading}
     <Loading />
   {:else if component && _id && _class}
     <Component is={component} props={{ embedded: true, _id, _class }} />
   {/if}
 </div>
+
+<style lang="scss">
+  .header {
+    min-height: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1.5rem;
+  }
+</style>