Updated ToDoElement layout (#5330)

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

packages/theme/styles/components.scss

@@ -591,10 +591,7 @@
     }
   }
 
-  .hulyToDoLine-statusPriority {
+  .hulyToDoLine-statusPriority,
-    display: flex;
-    gap: var(--spacing-0_25);
-  }
   .hulyToDoLine-dragbox,
   .hulyToDoLine-checkbox {
     display: flex;
@@ -602,8 +599,7 @@
     flex-shrink: 0;
   }
   .hulyToDoLine-dragbox {
-    position: relative;
+    display: none;
-    margin-right: var(--spacing-0_25);
     padding: 0;
     width: var(--global-min-Size);
     height: var(--global-min-Size);
@@ -611,28 +607,28 @@
     border: none;
     outline: none;
     cursor: grab;
+  }
+  .hulyToDoLine-statusPriority {
+    position: relative;
+    margin-right: var(--spacing-0_25);
+    padding-top: var(--spacing-0_5);
+    min-width: var(--global-min-Size);
 
     &.isNew::after {
       position: absolute;
       content: '';
-      top: var(--spacing-0_75);
+      top: var(--spacing-1_25);
-      right: var(--spacing-0_5);
+      right: calc(-1 * var(--spacing-0_75));
       width: var(--spacing-0_5);
       height: var(--spacing-0_5);
       background-color: var(--global-primary-LinkColor);
       border-radius: 50%;
     }
-    svg {
-      visibility: hidden;
-    }
   }
   .hulyToDoLine-checkbox {
+    display: none;
     width: var(--global-extra-small-Size);
     height: var(--global-extra-small-Size);
-
-    &.updating {
-      padding-top: var(--spacing-0_5);
-    }
   }
   .hulyToDoLine-top-align {
     color: var(--global-primary-TextColor);
@@ -677,24 +673,21 @@
   &:hover {
     background-color: var(--global-surface-01-hover-BackgroundColor);
 
-    .hulyToDoLine-dragbox {
+    .priority-container {
-      &.isNew::after {
+      display: none;
-        content: none;
+    }
-      }
+    .hulyToDoLine-dragbox,
-      svg {
+    .hulyToDoLine-checkbox {
-        visibility: visible;
+      display: flex;
-      }
     }
   }
 
   &.isDrag {
+    .priority-container {
+      display: flex;
+    }
     .hulyToDoLine-dragbox {
-      &.isNew::after {
+      display: none;
-        content: '';
-      }
-      svg {
-        visibility: hidden;
-      }
     }
   }
 }

plugins/time-resources/src/components/ToDoElement.svelte

@@ -77,20 +77,15 @@
   }}
 >
   <div class="flex-row-top flex-grow flex-gap-2">
-    <div class="flex-row-center flex-no-shrink">
+    <div class="hulyToDoLine-statusPriority" class:isNew>
-      <button class="hulyToDoLine-dragbox" class:isNew on:contextmenu={onMenuClick}>
+      {#if updating !== undefined}
-        <Icon icon={IconMoreV2} size={'small'} />
+        <Spinner size={'small'} />
-      </button>
+      {:else}
-      <div class="hulyToDoLine-statusPriority">
+        <button class="hulyToDoLine-dragbox" on:contextmenu={onMenuClick}>
-        <div class="hulyToDoLine-checkbox" class:updating>
+          <Icon icon={IconMoreV2} size={'small'} />
-          {#if updating !== undefined}
+        </button>
-            <Spinner size={'small'} />
-          {:else}
-            <ToDoCheckbox checked={isDone} priority={todo.priority} on:value={markDone} />
-          {/if}
-        </div>
         <ToDoPriorityPresenter value={todo.priority} muted={isDone} />
-      </div>
+      {/if}
     </div>
     <WorkItemPresenter {todo} kind={'todo-line'} withoutSpace />
     <div class="hulyToDoLine-title hulyToDoLine-top-align top-12 text-left font-regular-14 overflow-label">
@@ -117,4 +112,7 @@
       </span>
     {/if}
   </div>
+  <div class="hulyToDoLine-checkbox" class:updating>
+    <ToDoCheckbox checked={isDone} priority={todo.priority} on:value={markDone} />
+  </div>
 </button>

plugins/time-resources/src/components/ToDoPriorityPresenter.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#if value !== ToDoPriority.NoPriority}
-  <div class="flex-center flex-gap-1-5">
+  <div class="priority-container flex-center flex-gap-1-5">
     <Priority {value} {muted} />
     {#if showLabel}
       <span class="priority-label font-medium-12" style:color>

tests/sanity/tests/model/planning/planning-page.ts

@@ -236,7 +236,7 @@ export class PlanningPage extends CalendarPage {
     await this.page
       .locator('button.hulyToDoLine-container div[class$="overflow-label"]', { hasText: toDoName })
       .locator('xpath=..')
-      .locator('div.flex-row-center button.hulyToDoLine-dragbox')
+      .locator('div.hulyToDoLine-statusPriority button.hulyToDoLine-dragbox')
       .click({ button: 'right' })
     await this.buttonMenuDelete.click()
     await this.pressYesDeletePopup(this.page)
@@ -246,7 +246,7 @@ export class PlanningPage extends CalendarPage {
     await this.page
       .locator('button.hulyToDoLine-container div[class$="overflow-label"]', { hasText: toDoName })
       .locator('xpath=..')
-      .locator('div.flex-row-center div.hulyToDoLine-checkbox > label')
+      .locator('div.hulyToDoLine-checkbox > label')
       .click()
   }