[56919] Make notification center split screen resizable (#16437)

* change width of split screen * make the content container flex * add an input for resizer to select the resizer element with its id * make the right side content resaizable with a grid parent Changes * select the split view as the resizer * Pass resizer class as input rather than override --------- Co-authored-by: Oliver Günther <[email protected]>
opf · Aug 15, 2024 · 105930d · 105930d
1 parent d35fddb
commit 105930d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/app/components/work_packages/split_view_component.html.erb b/app/components/work_packages/split_view_component.html.erb
@@ -18,6 +18,8 @@
           helpers.angular_component_tag "opce-wp-split-view",
                                         inputs: {
                                           work_package_id: params[:work_package_id] || @work_package.id,
+                                          resizerClass: "op-work-package-split-view",
+                                          resizeStyle: "width",
                                           activeTab: @tab
                                         }
         end

diff --git a/...end/src/app/features/work-packages/routing/wp-split-view/wp-split-view-entry.component.ts b/...end/src/app/features/work-packages/routing/wp-split-view/wp-split-view-entry.component.ts
@@ -26,12 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
 import {
   WorkPackageIsolatedQuerySpaceDirective,
 } from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
@@ -48,13 +43,17 @@ import { populateInputsFromDataset } from 'core-app/shared/components/dataset-in
       [workPackageId]="workPackageId"
       [activeTab]="activeTab"
       [showTabs]="false"
+      [resizeStyle]="resizeStyle"
+      [resizerClass]="resizerClass"
     ></op-wp-split-view>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WorkPackageSplitViewEntryComponent {
   @Input() workPackageId:string;
   @Input() activeTab:string;
+  @Input() resizerClass:string;
+  @Input() resizeStyle:string;
 
   constructor(readonly elementRef:ElementRef) {
     populateInputsFromDataset(this);

diff --git a/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.component.ts b/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.component.ts
@@ -75,6 +75,9 @@ export class WorkPackageSplitViewComponent extends WorkPackageSingleViewBase imp
   @Input() showTabs = true;
   @Input() activeTab?:string;
 
+  @Input() resizerClass = 'work-packages-partitioned-page--content-right';
+  @Input() resizeStyle:'flexBasis'|'width' = 'flexBasis';
+
   constructor(
     public injector:Injector,
     public states:States,

diff --git a/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html b/frontend/src/app/features/work-packages/routing/wp-split-view/wp-split-view.html
@@ -68,7 +68,8 @@
   </div>
 
   <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
-    <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
+    <wp-resizer [elementClass]="resizerClass"
+                [resizeStyle]="resizeStyle"
                 [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
   </div>
 </div>
diff --git a/frontend/src/app/shared/components/resizer/resizer/wp-resizer.component.ts b/frontend/src/app/shared/components/resizer/resizer/wp-resizer.component.ts
@@ -1,4 +1,4 @@
-//-- copyright
+// -- copyright
 // OpenProject is an open source project management software.
 // Copyright (C) the OpenProject GmbH
 //
@@ -73,10 +73,12 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
 
   public resizerClass = 'work-packages--resizer icon-resizer-vertical-lines';
 
-  constructor(readonly toggleService:MainMenuToggleService,
+  constructor(
+    readonly toggleService:MainMenuToggleService,
     private elementRef:ElementRef,
     readonly $transitions:TransitionService,
-    readonly browserDetector:BrowserDetector) {
+    readonly browserDetector:BrowserDetector,
+  ) {
     super();
   }
 
@@ -86,7 +88,7 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
     // to still work in case an element is duplicated by Angular.
     const elements = document.getElementsByClassName(this.elementClass);
     this.resizingElement = <HTMLElement>elements[elements.length - 1];
-
+    
     if (!this.resizingElement) {
       return;
     }