Fixed layouts for ListView and Section (#8703)

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

packages/theme/styles/common.scss

@@ -598,6 +598,9 @@
       height: 3.5rem;
       min-height: 3.5rem;
     }
+    &.spaceBeforeContent {
+      margin-bottom: .75rem;
+    }
     &__icon {
       display: flex;
       justify-content: center;
@@ -657,14 +660,22 @@
   .invisible { display: none; }
   &-empty {
     display: flex;
+    min-width: 0;
+    min-height: 0;
+    
+    &:not(.none-appearance) {
       justify-content: center;
       align-items: center;
+      flex-wrap: wrap;
       padding: 1rem;
       font-size: .75rem;
       color: var(--dark-color);
       border: 1px dashed var(--divider-color);
       border-radius: 0.75rem;
-
+    }
+    &.none-appearance {
+      flex-direction: column;
+    }
     &.solid { border-style: solid; }
     &.items {
       justify-content: start;
@@ -677,6 +688,9 @@
     }
   }
 }
+:is(.antiSection, .step-tb-6, .mt-6) + :is(.antiSection, .step-tb-6) {
+  margin-top: 1.5rem;
+}
 
 // Button on selected card in Kanban
 .card-container.checked .button.inline.link-bordered {

packages/theme/styles/components.scss

@@ -2276,7 +2276,8 @@
     border-bottom: 1px solid var(--theme-list-subheader-divider);
   }
   &.row.lastCat {
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
     border-bottom: 1px solid var(--theme-list-border-color);
   }
 
@@ -2401,12 +2402,24 @@
 }
 
 /* ListView - global style */
+.category-container.disableHeader .listGrid.row:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  border-top: 1px solid var(--theme-list-border-color);
+}
+.list-container .category-container.collapsed:not(.category-last, .category-one) .categoryHeader.subLevel,
+.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .listGrid.last.lastCat,
+.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .categoryHeader.subLevel.lastCat {
+  border-radius: 0;
+}
 .list-container .category-container .categoryHeader.subLevel.closed {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
   border-bottom: 1px solid var(--theme-list-border-color);
 }
 .list-container .category-container .categoryHeader.closed:not(.subLevel) {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 
   &::before,
   &::after {

packages/ui/src/components/Section.svelte

@@ -24,13 +24,14 @@
   export let icon: Asset | AnySvelteComponent | undefined = undefined
 
   export let showHeader: boolean = true
+  export let spaceBeforeContent: boolean = false
   export let high: boolean = false
   export let invisible: boolean = false
 </script>
 
 <div class="antiSection" {id}>
   {#if showHeader}
-    <div class="antiSection-header" class:high class:invisible>
+    <div class="antiSection-header" class:high class:invisible class:spaceBeforeContent>
       {#if icon}
         <div class="antiSection-header__icon">
           <Icon {icon} size={'small'} />

plugins/activity-resources/src/components/Activity.svelte

@@ -252,7 +252,6 @@
   $: void updateActivityMessages(object._id, isNewestFirst ? SortingOrder.Descending : SortingOrder.Ascending)
 </script>
 
-<div class="step-tb-6">
 <Section label={activity.string.Activity} icon={activity.icon.Activity}>
   <svelte:fragment slot="header">
     {#if isLoading}
@@ -326,7 +325,6 @@
     {/if}
   </svelte:fragment>
 </Section>
-</div>
 
 <style lang="scss">
   .ref-input {

plugins/activity-resources/src/components/NewActivity.svelte

@@ -74,7 +74,6 @@
   })
 </script>
 
-<div class="step-tb-6">
 <Section label={activity.string.Activity} icon={activity.icon.Activity}>
   <svelte:fragment slot="header">
     {#if isLoading}
@@ -101,7 +100,6 @@
     {/if}
   </svelte:fragment>
 </Section>
-</div>
 
 <style lang="scss">
   .ref-input {

plugins/card-resources/src/components/Childs.svelte

@@ -19,7 +19,7 @@
   import {
     Label,
     Scroller,
-    Button,
+    ModernButton,
     getCurrentLocation,
     IconAdd,
     navigate,
@@ -142,21 +142,24 @@
   const selection = listProvider.selection
 </script>
 
-<Section label={card.string.Children} icon={card.icon.Card}>
+<Section label={card.string.Children} icon={card.icon.Card} spaceBeforeContent>
   <svelte:fragment slot="header">
+    <div class="buttons-group xsmall-gap">
       <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
       {#if !$restrictionStore.readonly && !readonly}
-      <Button
+        <ModernButton
           id="add-child-card"
           icon={IconAdd}
           label={card.string.CreateChild}
-        kind={'ghost'}
-        showTooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
+          size={'small'}
+          kind={'tertiary'}
+          tooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
           on:click={() => {
             void createCard()
           }}
         />
       {/if}
+    </div>
   </svelte:fragment>
   <svelte:fragment slot="content">
     {#if (object?.children ?? 0) > 0 && viewOptions !== undefined && viewlet}
@@ -194,7 +197,7 @@
         </div>
       </Scroller>
     {:else if !readonly}
-      <div class="antiSection-empty solid clear-mins mt-3">
+      <div class="antiSection-empty solid">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <span class="over-underline content-color" on:click={createCard}>

plugins/process-resources/src/components/ProcessesExtension.svelte

@@ -102,7 +102,7 @@
   let docsProvided = false
 </script>
 
-<Section icon={process.icon.Process} label={process.string.Processes}>
+<Section icon={process.icon.Process} label={process.string.Processes} spaceBeforeContent>
   <svelte:fragment slot="header">
     <div class="buttons-group xsmall-gap">
       <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
@@ -112,7 +112,7 @@
 
   <svelte:fragment slot="content">
     <div
-      class="antiSection-empty solid flex-col flex-gap-2 mt-3"
+      class="antiSection-empty {docsProvided && docs.length === 0 ? 'solid' : 'none-appearance flex-gap-2'}"
       use:resizeObserver={(evt) => {
         listWidth = evt.clientWidth
       }}
@@ -146,11 +146,9 @@
           }}
         />
         {#if docsProvided && docs.length === 0}
-          <div class="flex-col-center">
-            <div class="caption-color">
+          <div class="flex-center content-color">
             <Label label={process.string.NoProcesses} />
           </div>
-          </div>
         {/if}
       {/if}
     </div>

plugins/setting-resources/src/components/Backup.svelte

@@ -148,12 +148,12 @@
   $: snapshots = backupInfo?.info?.snapshots ?? []
 </script>
 
-<div class="hulyComponent p-2 flex-no-shrink">
+<div class="hulyComponent flex-no-shrink">
   <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Setting} label={setting.string.Backup} size={'large'} isCurrent />
   </Header>
 
-  <Scroller noStretch>
+  <Scroller padding={'1.5rem'} noStretch>
     {#if loading}
       <Loading size={'small'} />
     {:else if backupInfo == null}

plugins/survey-resources/src/components/EditSurvey.svelte

@@ -17,7 +17,7 @@
 <script lang="ts">
   import { MessageBox } from '@hcengineering/presentation'
   import { Question, QuestionKind, Survey } from '@hcengineering/survey'
-  import { createFocusManager, EditBox, FocusHandler, Icon, Label, showPopup } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, showPopup, Section } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import survey from '../plugin'
   import EditQuestion from './EditQuestion.svelte'
@@ -144,15 +144,8 @@
       }}
     />
   </div>
-  <div class="antiSection step-tb-6">
-    <div class="antiSection-header mb-3">
-      <div class="antiSection-header__icon">
-        <Icon icon={IconQuestion} size={'small'} />
-      </div>
-      <span class="antiSection-header__title">
-        <Label label={survey.string.Questions} />
-      </span>
-    </div>
+  <Section label={survey.string.Questions} icon={IconQuestion} spaceBeforeContent>
+    <svelte:fragment slot="content">
       {#each questionList as question, index (index)}
         {@const isNewQuestion = index === questionList.length - 1}
         <div
@@ -190,7 +183,8 @@
           />
         </div>
       {/each}
-  </div>
+    </svelte:fragment>
+  </Section>
 {/if}
 
 <style lang="scss">

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -441,7 +441,11 @@
   in:fade|local={{ duration: 50 }}
   bind:this={div}
   class="category-container"
+  class:collapsed
+  class:category-one={oneCat}
+  class:category-last={lastCat}
   class:zero-container={level === 0}
+  class:disableHeader
   on:drop|preventDefault={drop}
   on:dragover={dragOverCat}
   on:dragenter={dragEnterCat}

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -93,6 +93,7 @@
 
   $: selectionIds = new Set($selection.map((it) => it._id))
   $: selected = items.filter((it) => selectionIds.has(it._id))
+  // $: if (itemsProj.length === 0 && !collapsed) collapsed = true
 </script>
 
 {#if headerComponent || groupByKey === noCategory}
@@ -104,7 +105,7 @@
     class="flex-between categoryHeader row"
     class:flat
     class:noDivide={showColors}
-    class:collapsed
+    class:collapsed={collapsed || itemsProj.length === 0}
     class:subLevel={level !== 0}
     class:lastCat
     class:cursor-pointer={items.length > 0}
@@ -124,7 +125,11 @@
   >
     <div class="flex-row-center flex-grow" style:color={headerComponent ? headerTextColor : 'inherit'}>
       <!-- {#if level === 0} -->
-      <div class="chevron"><IconCollapseArrow size={level === 0 ? 'small' : 'tiny'} /></div>
+      <div class="chevron" class:empty={itemsProj.length === 0}>
+        {#if itemsProj.length > 0}
+          <IconCollapseArrow size={level === 0 ? 'small' : 'tiny'} />
+        {/if}
+      </div>
       <!-- {/if} -->
       {#if groupByKey === noCategory}
         <span class="fs-bold content-color overflow-label pointer-events-none">
@@ -217,20 +222,42 @@
     min-height: 2.75rem;
     min-width: 0;
     background: var(--theme-bg-color);
-    border-radius: 0.25rem 0.25rem 0 0;
 
+    &:not(.subLevel) {
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
+    }
     .on-hover {
       visibility: hidden;
     }
 
     .chevron {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       flex-shrink: 0;
-      min-width: 0;
+      min-width: 1rem;
+      min-height: 1rem;
       margin-right: 0.75rem;
       color: var(--theme-caption-color);
       transform-origin: center;
       transform: rotate(90deg);
       transition: transform 0.15s ease-in-out;
+
+      &.empty {
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0.375rem;
+          left: 0.375rem;
+          width: 0.25rem;
+          height: 0.25rem;
+          background-color: var(--theme-dark-color);
+          border-radius: 50%;
+        }
+      }
     }
     &::before,
     &::after {
@@ -240,7 +267,8 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border-radius: 0.25rem 0.25rem 0 0;
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
       pointer-events: none;
     }
     &::after {
@@ -291,9 +319,9 @@
     &.flat {
       background: var(--header-bg-color);
       background-blend-mode: darken;
-      min-height: 2.25rem;
-      height: 2.25rem;
-      padding: 0 0.25rem 0 0.25rem;
+      min-height: 2.5rem;
+      height: 2.5rem;
+      padding: 0 0.375rem 0 0.75rem;
     }
   }
 </style>