Fixed layouts for ListView and Section (#8703)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
2025-05-10 17:30:51 +00:00 · 2025-04-25 05:37:38 +03:00 · 2025-04-25 05:37:38 +03:00 · 1959b9f107
commit 1959b9f107
parent d112acd6e2
11 changed files with 232 additions and 181 deletions
--- a/packages/theme/styles/common.scss
+++ b/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;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    font-size: .75rem;
-    color: var(--dark-color);
-    border: 1px dashed var(--divider-color);
-    border-radius: 0.75rem;
-
+    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 {
--- a/packages/theme/styles/components.scss
+++ b/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 {
--- a/packages/ui/src/components/Section.svelte
+++ b/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'} />
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@ -252,45 +252,54 @@
  $: 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}
-        <div class="ml-1">
-          <Spinner size="small" />
-        </div>
-      {/if}
-      <ActivityFilter
-        messages={allMessages}
-        {object}
-        on:update={(e) => {
-          filteredMessages = e.detail
-        }}
-        bind:isNewestFirst
-      />
-    </svelte:fragment>
+<Section label={activity.string.Activity} icon={activity.icon.Activity}>
+  <svelte:fragment slot="header">
+    {#if isLoading}
+      <div class="ml-1">
+        <Spinner size="small" />
+      </div>
+    {/if}
+    <ActivityFilter
+      messages={allMessages}
+      {object}
+      on:update={(e) => {
+        filteredMessages = e.detail
+      }}
+      bind:isNewestFirst
+    />
+  </svelte:fragment>

-    <svelte:fragment slot="content">
-      {#if isNewestFirst && showCommenInput}
-        <div class="ref-input newest-first">
-          <ActivityExtensionComponent
-            kind="input"
-            {extensions}
-            props={{ object, boundary, focusIndex, withTypingInfo: true }}
-          />
-        </div>
-      {/if}
-      <div
-        class="p-activity select-text"
-        id={activity.string.Activity}
-        class:newest-first={isNewestFirst}
-        bind:this={activityBox}
-      >
-        {#if filteredMessages.length}
-          <Grid column={1} rowGap={0}>
-            {#each filteredMessages as message, index}
-              {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
-              {#if selectedMessageId}
+  <svelte:fragment slot="content">
+    {#if isNewestFirst && showCommenInput}
+      <div class="ref-input newest-first">
+        <ActivityExtensionComponent
+          kind="input"
+          {extensions}
+          props={{ object, boundary, focusIndex, withTypingInfo: true }}
+        />
+      </div>
+    {/if}
+    <div
+      class="p-activity select-text"
+      id={activity.string.Activity}
+      class:newest-first={isNewestFirst}
+      bind:this={activityBox}
+    >
+      {#if filteredMessages.length}
+        <Grid column={1} rowGap={0}>
+          {#each filteredMessages as message, index}
+            {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
+            {#if selectedMessageId}
+              <ActivityMessagePresenter
+                value={message}
+                doc={object}
+                hideLink={true}
+                type={canGroup ? 'short' : 'default'}
+                isHighlighted={selectedMessageId === message._id}
+                withShowMore
+              />
+            {:else}
+              <Lazy>
                <ActivityMessagePresenter
                  value={message}
                  doc={object}
@ -299,34 +308,23 @@
                  isHighlighted={selectedMessageId === message._id}
                  withShowMore
                />
-              {:else}
-                <Lazy>
-                  <ActivityMessagePresenter
-                    value={message}
-                    doc={object}
-                    hideLink={true}
-                    type={canGroup ? 'short' : 'default'}
-                    isHighlighted={selectedMessageId === message._id}
-                    withShowMore
-                  />
-                </Lazy>
-              {/if}
-            {/each}
-          </Grid>
-        {/if}
-      </div>
-      {#if showCommenInput && !isNewestFirst}
-        <div class="ref-input oldest-first">
-          <ActivityExtensionComponent
-            kind="input"
-            {extensions}
-            props={{ object, boundary, focusIndex, withTypingInfo: true }}
-          />
-        </div>
+              </Lazy>
+            {/if}
+          {/each}
+        </Grid>
      {/if}
-    </svelte:fragment>
-  </Section>
-</div>
+    </div>
+    {#if showCommenInput && !isNewestFirst}
+      <div class="ref-input oldest-first">
+        <ActivityExtensionComponent
+          kind="input"
+          {extensions}
+          props={{ object, boundary, focusIndex, withTypingInfo: true }}
+        />
+      </div>
+    {/if}
+  </svelte:fragment>
+</Section>

 <style lang="scss">
  .ref-input {
--- a/plugins/activity-resources/src/components/NewActivity.svelte
+++ b/plugins/activity-resources/src/components/NewActivity.svelte
@ -74,34 +74,32 @@
  })
 </script>

-<div class="step-tb-6">
-  <Section label={activity.string.Activity} icon={activity.icon.Activity}>
-    <svelte:fragment slot="header">
-      {#if isLoading}
-        <div class="ml-1">
-          <Spinner size="small" />
-        </div>
-      {/if}
-    </svelte:fragment>
-
-    <svelte:fragment slot="content">
-      <div class="p-activity select-text" id={activity.string.Activity}>
-        {#if messages.length}
-          <Grid column={1} rowGap={1}>
-            {#each messages as message (message.id)}
-              <MessagePresenter {message} card={object} />
-            {/each}
-          </Grid>
-        {/if}
+<Section label={activity.string.Activity} icon={activity.icon.Activity}>
+  <svelte:fragment slot="header">
+    {#if isLoading}
+      <div class="ml-1">
+        <Spinner size="small" />
      </div>
-      {#if showInput}
-        <div class="ref-input oldest-first">
-          <MessageInput cardId={object._id} cardType={object._class} placeholder={activity.string.Message} />
-        </div>
+    {/if}
+  </svelte:fragment>
+
+  <svelte:fragment slot="content">
+    <div class="p-activity select-text" id={activity.string.Activity}>
+      {#if messages.length}
+        <Grid column={1} rowGap={1}>
+          {#each messages as message (message.id)}
+            <MessagePresenter {message} card={object} />
+          {/each}
+        </Grid>
      {/if}
-    </svelte:fragment>
-  </Section>
-</div>
+    </div>
+    {#if showInput}
+      <div class="ref-input oldest-first">
+        <MessageInput cardId={object._id} cardType={object._class} placeholder={activity.string.Message} />
+      </div>
+    {/if}
+  </svelte:fragment>
+</Section>

 <style lang="scss">
  .ref-input {
--- a/plugins/card-resources/src/components/Childs.svelte
+++ b/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">
-    <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
-    {#if !$restrictionStore.readonly && !readonly}
-      <Button
-        id="add-child-card"
-        icon={IconAdd}
-        label={card.string.CreateChild}
-        kind={'ghost'}
-        showTooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
-        on:click={() => {
-          void createCard()
-        }}
-      />
-    {/if}
+    <div class="buttons-group xsmall-gap">
+      <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
+      {#if !$restrictionStore.readonly && !readonly}
+        <ModernButton
+          id="add-child-card"
+          icon={IconAdd}
+          label={card.string.CreateChild}
+          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}>
--- a/plugins/process-resources/src/components/ProcessesExtension.svelte
+++ b/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,10 +146,8 @@
          }}
        />
        {#if docsProvided && docs.length === 0}
-          <div class="flex-col-center">
-            <div class="caption-color">
-              <Label label={process.string.NoProcesses} />
-            </div>
+          <div class="flex-center content-color">
+            <Label label={process.string.NoProcesses} />
          </div>
        {/if}
      {/if}
--- a/plugins/setting-resources/src/components/Backup.svelte
+++ b/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}
--- a/plugins/survey-resources/src/components/EditSurvey.svelte
+++ b/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,53 +144,47 @@
      }}
    />
  </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>
-    {#each questionList as question, index (index)}
-      {@const isNewQuestion = index === questionList.length - 1}
-      <div
-        role="listitem"
-        on:dragover={(ev) => {
-          onQuestionDragOver(ev, index)
-        }}
-        on:dragleave={(ev) => {
-          onQuestionDragLeave(ev, index)
-        }}
-        on:drop={onQuestionDrop}
-        class:dragged-over={draggedIndex !== undefined &&
-          draggedOverIndex === index &&
-          draggedOverIndex !== draggedIndex &&
-          draggedOverIndex !== draggedIndex + 1}
-      >
-        <EditQuestion
-          bind:this={questionComponents[index]}
-          {question}
-          {isNewQuestion}
-          on:delete={() => {
-            deleteQuestion(index)
+  <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
+          role="listitem"
+          on:dragover={(ev) => {
+            onQuestionDragOver(ev, index)
          }}
-          on:change={(e) => {
-            isNewQuestion ? handleNewQuestionChange(e.detail) : handleQuestionChange(index, e.detail)
+          on:dragleave={(ev) => {
+            onQuestionDragLeave(ev, index)
          }}
-          {readonly}
-          on:dragStart={() => {
-            draggedIndex = index
-          }}
-          on:dragEnd={() => {
-            draggedIndex = undefined
-            draggedOverIndex = undefined
-          }}
-        />
-      </div>
-    {/each}
-  </div>
+          on:drop={onQuestionDrop}
+          class:dragged-over={draggedIndex !== undefined &&
+            draggedOverIndex === index &&
+            draggedOverIndex !== draggedIndex &&
+            draggedOverIndex !== draggedIndex + 1}
+        >
+          <EditQuestion
+            bind:this={questionComponents[index]}
+            {question}
+            {isNewQuestion}
+            on:delete={() => {
+              deleteQuestion(index)
+            }}
+            on:change={(e) => {
+              isNewQuestion ? handleNewQuestionChange(e.detail) : handleQuestionChange(index, e.detail)
+            }}
+            {readonly}
+            on:dragStart={() => {
+              draggedIndex = index
+            }}
+            on:dragEnd={() => {
+              draggedIndex = undefined
+              draggedOverIndex = undefined
+            }}
+          />
+        </div>
+      {/each}
+    </svelte:fragment>
+  </Section>
 {/if}

 <style lang="scss">
--- a/plugins/view-resources/src/components/list/ListCategory.svelte
+++ b/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}
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/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>