USER-79: fixed the sidebar in the Panel. Update IssuePreview layout.

packages/panel/src/components/Panel.svelte

@@ -165,9 +165,11 @@
     {#if $$slots.actions}
       <div class="popupPanel-body__aside-header">
         {#if $$slots['actions-label']}
-          <span class="fs-bold w-27 mr-6"><slot name="actions-label" /></span>
+          <span class="fs-bold w-27 mr-4"><slot name="actions-label" /></span>
+        {:else if $$slots.actions}
+          <span class="fs-bold w-27 mr-4" />
         {/if}
-        <div class="buttons-group xsmall-gap flex flex-grow">
+        <div class="buttons-group xsmall-gap">
           <slot name="actions" />
         </div>
       </div>
@@ -177,7 +179,7 @@
         <slot name="custom-attributes" direction="column" />
       {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
       {#if $$slots.aside}<slot name="aside" />{/if}
-      <div class="h-2 min-h-2 max-h-2" />
+      <div class="space-divider bottom" />
     </Scroller>
   </svelte:fragment>
 

packages/presentation/src/components/AttributesBar.svelte

@@ -32,7 +32,7 @@
   export let justify: 'left' | 'center' = 'left'
 </script>
 
-<div class="popupPanel-body__aside-grid">
+<div class="popupPanel-body__aside-grid inCollapsed">
   {#each keys as key (typeof key === 'string' ? key : key.key)}
     <AttributeBarEditor {key} {_class} {object} {showHeader} {readonly} {draft} on:update />
   {/each}

packages/presentation/src/components/icons/Forward.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
   const fill: string = 'currentColor'
 </script>
 

packages/presentation/src/index.ts

@@ -38,6 +38,7 @@ export { default as IndexedDocumentPreview } from './components/IndexedDocumentP
 export { default as IndexedDocumentCompare } from './components/IndexedDocumentCompare.svelte'
 export { default as DraggableList } from './components/DraggableList.svelte'
 export { default as NavLink } from './components/NavLink.svelte'
+export { default as IconForward } from './components/icons/Forward.svelte'
 export { default } from './plugin'
 export * from './types'
 export * from './utils'

packages/theme/styles/_layouts.scss

@@ -496,7 +496,9 @@ input.search {
 .pl-2 { padding-left: .5rem; }
 .pl-3 { padding-left: .75rem; }
 .pl-4 { padding-left: 1rem; }
+.pl-7 { padding-left: 1.75rem; }
 .pl-8 { padding-left: 2rem; }
+.pl-9 { padding-left: 2.25rem; }
 .pl-10 { padding-left: 2.5rem; }
 .pr-1 { padding-right: .25rem; }
 .pr-2 { padding-right: .5rem; }
@@ -602,6 +604,7 @@ input.search {
 .h-7 { height: 1.75rem; }
 .h-8 { height: 2rem; }
 .h-9 { height: 2.25rem; }
+.h-12 { height: 3rem; }
 .h-14 { height: 3.5rem; }
 .h-16 { height: 4rem; }
 .h-18 { height: 4.5rem; }

packages/theme/styles/dialogs.scss

@@ -31,7 +31,7 @@
   min-height: 0;
   background: var(--theme-popup-color);
   border-radius: .5rem;
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--theme-popup-shadow);
 
   .antiCard-header {
     position: relative;

packages/theme/styles/panel.scss

@@ -18,18 +18,38 @@
   overflow: hidden;
   min-width: 400px;
 
-  background: var(--body-accent);
-  border: 1px solid var(--divider-color);
+  background-color: var(--theme-popup-color);
+  border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   flex-direction: row;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--theme-popup-shadow);
   // left: 1rem;
 
+  &.float {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 5rem;
+    right: .5rem;
+    width: 42rem;
+    height: fit-content;
+    min-height: 0;
+    max-height: 32rem;
+    z-index: 500;
+
+    .ap-header {
+      flex-shrink: 0;
+      padding: 1.5rem 1.75rem .5rem;
+      width: 100%;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+
   .ac-header {
     &.highlight { background-color: var(--accent-bg-color); }
     &.divide { border-bottom: 1px solid var(--divider-color); }
   }
-
   .ad-section-50 {
     display: flex;
     flex-direction: column;
@@ -39,7 +59,6 @@
 
     &.divide { border-right: 1px solid var(--divider-color); }
   }
-
   .ad-tools {
     position: absolute;
     display: flex;
@@ -58,18 +77,16 @@
 .popupPanel {
   overflow: hidden;
   display: flex;
-  flex-direction: column;
   min-height: 0;
   height: 100%;
-
-  &.embedded {
+  
+  &.rowContent {
     width: 100%;
+    min-width: 0;
   }
-
-  &:not(.embedded) {
-    border-radius: .5rem;
-    // box-shadow: var(--popup-panel-shadow);
-  }
+  &:not(.rowContent) { flex-direction: column; }
+  &.embedded { width: 100%; }
+  &:not(.embedded) { border-radius: .5rem; }
 
   .popupPanel-title {
     display: flex;
@@ -258,27 +275,29 @@
         display: flex;
         align-items: center;
         flex-shrink: 0;
-        padding: .75rem 2rem;
         height: 3.5rem;
         min-height: 3.5rem;
         border-bottom: 1px solid var(--theme-divider-color);
       }
-      &-tabsheader {
-        padding: 0 2rem;
+      &-tabsheader { padding: 0 2rem; }
+      &-header {
+        justify-content: space-between;
+        padding: .75rem .75rem .75rem 2rem;
       }
 
       &-grid {
         display: grid;
         grid-template-columns: 1fr 1.5fr;
-        grid-auto-flow: row;
+        grid-auto-rows: minmax(2rem, max-content);
         justify-content: start;
         align-items: center;
         row-gap: .25rem;
         column-gap: 1rem;
-        margin: .5rem 2rem;
+        margin: .25rem 2rem 0;
         width: calc(100% - 4rem);
         height: min-content;
 
+        &.inCollapsed { margin: 1rem 2rem; }
         .divider {
           grid-column: 1 / 3;
           margin: .75rem -2rem;
@@ -289,9 +308,24 @@
         .labelTop { color: var(--theme-dark-color); }
         .labelTop {
           align-self: start;
-          margin-top: 0.385rem;
-        }      
-      }    
+          margin-top: 0.625rem;
+        }
+        .textPadding { margin-left: .875rem; }
+      }
+      &-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-width: 0;
+        min-height: 0;
+        padding: 1.25rem 2rem;
+      }
+      .space-divider {
+        flex-shrink: 0;
+        height: .75rem;
+
+        &.bottom { height: 1.25rem; }
+      }
     }
 
     // &.asideShown .popupPanel-body__main {

packages/ui/src/components/Panel.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <div
-  class="popupPanel"
+  class="popupPanel panel"
   class:embedded
   use:resizeObserver={(element) => {
     panelWidth = element.clientWidth

packages/ui/src/components/Scroller.svelte

@@ -32,6 +32,7 @@
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
+  export let gap: 'gap-1' | 'gap-1-5' | 'gap-2' | 'gap-3' | 'gap-around-2' | 'gap-around-4' | undefined = undefined
   export let noStretch: boolean = autoscroll
   export let buttons: 'normal' | 'union' | false = false
   export let shrink: boolean = false
@@ -497,7 +498,7 @@
     >
       <div
         bind:this={divBox}
-        class="box"
+        class="box{gap ? ` ${gap}` : ''}"
         class:align-center={contentDirection === 'horizontal'}
         style:padding
         style:flex-direction={contentDirection === 'vertical'
@@ -689,9 +690,9 @@
     &.vertical {
       min-width: 1.5rem 0;
     }
-    &.horizontal {
-      margin-right: 2rem;
-    }
+    // &.horizontal {
+    //   margin-right: 2rem;
+    // }
     &.buttons.vertical {
       margin: 1.5rem 0;
     }

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -232,18 +232,18 @@
     &.link {
       justify-content: flex-start;
       padding: 0 0.875rem;
-      height: 2rem;
+      color: var(--theme-dark-color);
       border-radius: 0.25rem;
 
       .btn-icon {
-        margin-right: 0.5rem;
+        color: var(--theme-darker-color);
       }
       &:hover {
-        color: var(--theme-caption-color);
-        background-color: var(--theme-button-hovered);
+        color: var(--theme-content-color);
+        background-color: var(--theme-bg-color);
         border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--theme-caption-color);
+          color: var(--theme-content-color);
         }
       }
     }

plugins/attachment-resources/src/components/AttachmentList.svelte

@@ -15,18 +15,17 @@
 <script lang="ts">
   import { Attachment } from '@hcengineering/attachment'
   import { Ref } from '@hcengineering/core'
+  import { Scroller } from '@hcengineering/ui'
   import AttachmentPreview from './AttachmentPreview.svelte'
 
   export let attachments: Attachment[] = []
   export let savedAttachmentsIds: Ref<Attachment>[] = []
 </script>
 
 {#if attachments.length}
-  <div class="flex flex-wrap">
+  <Scroller contentDirection={'horizontal'} horizontal gap={'gap-3'}>
     {#each attachments as attachment}
-      <div class="p-2">
-        <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
-      </div>
+      <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
     {/each}
-  </div>
+  </Scroller>
 {/if}

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -379,7 +379,8 @@
     }
 
     tbody tr:not(:last-child),
-    thead th:first-child .fullfill {
+    thead th:first-child .fullfill,
+    tfoot tr {
       border-bottom: 1px solid var(--theme-bg-divider-color);
     }
     tfoot tr,

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -120,21 +120,19 @@
         </div>
       {/if}
     </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+      <Button
+        icon={IconMixin}
+        kind={'transparent'}
+        shape={'round'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      />
+    </svelte:fragment>
     <svelte:fragment slot="attributes" let:direction={dir}>
-      <div class="flex flex-reverse flex-no-shrink clear-mins">
-        <Button
-          kind={'transparent'}
-          shape={'round'}
-          selected={showAllMixins}
-          on:click={() => {
-            showAllMixins = !showAllMixins
-          }}
-        >
-          <svelte:fragment slot="content">
-            <IconMixin size={'small'} />
-          </svelte:fragment>
-        </Button>
-      </div>
       {#if dir === 'column'}
         <DocAttributeBar
           {object}

plugins/task-resources/src/components/DueDateEditor.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
-  import { DueDatePresenter } from '@hcengineering/ui'
+  import { DueDatePresenter, ButtonSize, ButtonKind } from '@hcengineering/ui'
   import { WithLookup } from '@hcengineering/core'
   import { Task } from '@hcengineering/task'
 
   export let object: WithLookup<Task>
+  export let width: string | undefined = undefined
+  export let size: ButtonSize = 'medium'
+  export let kind: ButtonKind = 'link'
+  export let editable: boolean = true
 
   const client = getClient()
   $: shouldIgnoreOverdue = object.doneState != null
@@ -28,9 +32,11 @@
 
 {#if object}
   <DueDatePresenter
-    kind={'link'}
+    {kind}
+    {width}
+    {size}
     value={object.dueDate}
-    editable
+    {editable}
     onChange={(e) => handleDueDateChanged(e)}
     {shouldIgnoreOverdue}
   />