Planner: updated ToDos layout (#6651)

Signed-off-by: Alexander Platov <[email protected]>
hcengineering · Sep 20, 2024 · 4165163 · 4165163
1 parent 2a9e991
commit 4165163
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -577,9 +577,12 @@
   }
   &.second:not(.isOpen),
   &.border,
-  &.default:not(.nested:last-child) {
+  &.default:not(.nested) {
     border-bottom: 1px solid var(--theme-navpanel-divider); // var(--global-surface-01-BorderColor);
   }
+  &.default.nested:not(:last-child) {
+    border-bottom: 1px dashed var(--theme-navpanel-divider);
+  }
   .hulyAccordionItem-header {
     display: flex;
     justify-content: space-between;
@@ -790,6 +793,12 @@
         }
       }
     }
+    &.hiddenHeader {
+      display: none;
+      visibility: hidden;
+
+      &.nested + .hulyAccordionItem-content { padding-top: var(--spacing-1); }
+    }
     &:hover .hulyAccordionItem-header__chevron {
       color: var(--button-subtle-IconColor);
       background-color: var(--global-ui-hover-BackgroundColor);
@@ -806,6 +815,9 @@
       &.medium.bottomSpace + .hulyAccordionItem-content {
         padding-bottom: var(--spacing-2);
       }
+      &.medium.nested.bottomSpace + .hulyAccordionItem-content {
+        padding-bottom: var(--spacing-1);
+      }
       &.large.bottomSpace + .hulyAccordionItem-content {
         padding-bottom: var(--spacing-2);
       }

diff --git a/packages/ui/src/components/AccordionItem.svelte b/packages/ui/src/components/AccordionItem.svelte
@@ -39,6 +39,7 @@
   export let duration: number | boolean = false
   export let fixHeader: boolean = false
   export let categoryHeader: boolean = false
+  export let hiddenHeader: boolean = false
   export let background: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
@@ -74,6 +75,7 @@
     class:selectable
     class:scroller-header={fixHeader}
     class:categoryHeader
+    class:hiddenHeader
     style:background-color={background ?? 'transparent'}
     on:click|stopPropagation={handleClick}
   >

diff --git a/plugins/time-resources/src/components/ToDoProjectGroup.svelte b/plugins/time-resources/src/components/ToDoProjectGroup.svelte
@@ -81,7 +81,7 @@
   }
 </script>
 
-<AccordionItem {id} {icon} {iconProps} {title} {label} size={'medium'} nested>
+<AccordionItem {id} {icon} {iconProps} {title} {label} size={'medium'} nested hiddenHeader={project === false}>
   {#each todos as todo, index}
     <ToDoDraggable {todo} {index} {groupName} {projectId} on:drop={handleDrop}>
       <ToDoElement {todo} planned={mode !== 'unplanned'} />

diff --git a/plugins/time-resources/src/components/ToDos.svelte b/plugins/time-resources/src/components/ToDos.svelte
@@ -237,9 +237,9 @@
     active: WithLookup<ToDo>[]
   ): [IntlString, WithLookup<ToDo>[]][] {
     const groups = new Map<IntlString, WithLookup<ToDo>[]>([
+      [time.string.Scheduled, []],
       [time.string.Unplanned, unplanned],
       [time.string.ToDos, []],
-      [time.string.Scheduled, []],
       [time.string.Done, done]
     ])
     const now = Date.now()