fix: i#3133 improve sidebar drag usability

kaleidos-ventures · Sep 19, 2023 · 3fb920e · 3fb920e
1 parent 92b909c
commit 3fb920e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/...ect/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.css b/...ect/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/...ct/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.html b/...ct/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/...ject/feature-story-wrapper-side-view/project-feature-story-wrapper-side-view.component.ts b/...ject/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/...dules/project/feature-story-wrapper-side-view/story-wrapper-side-view-resize.directive.ts b/...dules/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))