From bee769e79ace7b50670dd74ecb0f11c1c4641393 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Tue, 19 Sep 2023 13:48:59 +0200
Subject: [PATCH] fix: i#3133 improve sidebar drag usability

---
 ...t-feature-story-wrapper-side-view.component.css | 14 +++++++++-----
 ...-feature-story-wrapper-side-view.component.html |  4 ++--
 ...ct-feature-story-wrapper-side-view.component.ts | 12 +++++++++---
 .../story-wrapper-side-view-resize.directive.ts    |  2 +-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.css b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.css
index 579b6aabd..dd7cd29db 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.css
+++ b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.css
@@ -33,17 +33,21 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .dragbar {
-  block-size: 4rem;
-  border: solid 3px transparent;
+  border: solid 6px transparent;
+  display: flex;
+  flex-direction: column;
   inline-size: 1px;
-  inset-block-start: 50%;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  justify-content: center;
   position: absolute;
 
   &::after {
     background: var(--color-gray40);
-    block-size: 100%;
+    block-size: 4rem;
+    border-radius: 2px;
     content: "";
-    inline-size: 1px;
+    inline-size: 2px;
     inset-inline-start: -1px;
     position: absolute;
     transition: background-color 0.3s ease-in;
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.html b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.html
index 4e8c2eac6..a156b7745 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.html
+++ b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.html
@@ -28,8 +28,8 @@
         *ngIf="showDragbar()"
         class="dragbar"
         tgStoryWrapperSideViewResize
-        (tgResizeStart)="isDragging(true)"
-        (tgResizeEnd)="isDragging(false)"
+        (tgResizeStart)="isDragging($event, true)"
+        (tgResizeEnd)="isDragging($event, false)"
         (tgResizeMove)="dragMove(dragHandle, $event)"></div>
     </div>
   </ng-container>
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.ts
index 2f4e06cac..a7bd62ac8 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.ts
@@ -73,6 +73,7 @@ export class ProjectFeatureStoryWrapperSideViewComponent implements OnChanges {
   public minWidthCollapsed = 440;
   public minWidthUncollapsed = 500;
   public widthToForceCollapse = 500;
+  public dragInitialPosition = 0;
 
   constructor(
     private store: Store,
@@ -84,14 +85,19 @@ export class ProjectFeatureStoryWrapperSideViewComponent implements OnChanges {
   }
 
   public dragMove(dragHandle: HTMLElement, event: MouseEvent) {
-    this.sidepanelWidth = window.innerWidth - event.clientX;
+    this.sidepanelWidth =
+      window.innerWidth - event.clientX - this.dragInitialPosition;
     dragHandle.style.transform = 'translate(0, 0)';
   }
 
-  public isDragging(isDragging: boolean) {
+  public isDragging(event: MouseEvent, isDragging: boolean) {
     this.dragging = isDragging;
 
-    if (!isDragging) {
+    if (isDragging && this.sidepanel) {
+      this.dragInitialPosition =
+        this.sidepanel.nativeElement.getBoundingClientRect().x - event.clientX;
+    } else {
+      this.dragInitialPosition = 0;
       this.localStorage.set('story_width', this.sidepanelWidth);
     }
   }
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/story-wrapper-side-view-resize.directive.ts b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/story-wrapper-side-view-resize.directive.ts
index 2e92b99a1..51c7de2f4 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/story-wrapper-side-view-resize.directive.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-story-wrapper-side-view/story-wrapper-side-view-resize.directive.ts
@@ -39,7 +39,7 @@ export class StoryWrapperSideViewDirective {
     }
 
     this.disableEditorPointerEvents();
-    this.tgResizeStart.emit();
+    this.tgResizeStart.emit(event);
 
     this.subscriptionMousemove = fromEvent(document.body, 'mousemove')
       .pipe(untilDestroyed(this), throttleTime(0, animationFrameScheduler))