Merge pull request #8096 from opf/bim/feature/32436-Add-resizer-to-table-and-split-view-next-to-IFC-viewer

[32436] Add resizer to table and split view next to IFC viewer

app/assets/stylesheets/layout/work_packages/_table_embedded.sass

@@ -70,6 +70,9 @@ $table-timeline--compact-row-height: 28px
     .wp-cards-container.-horizontal
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
 
+    &.-with-resizer
+      padding-left: 10px
+
   &.-compact-tables
     .wp-table--row
       border-bottom: none !important

frontend/src/app/components/resizer/wp-resizer.component.ts

@@ -45,7 +45,7 @@ export class WpResizerDirective implements OnInit, OnDestroy {
   @Input() resizeStyle:'flexBasis'|'width' = 'flexBasis';
 
   private resizingElement:HTMLElement;
-  private elementFlex:number;
+  private elementWidth:number;
   private oldPosition:number;
   private mouseMoveHandler:any;
   private element:HTMLElement;
@@ -64,22 +64,19 @@ export class WpResizerDirective implements OnInit, OnDestroy {
 
     // Get initial width from local storage and apply
     let localStorageValue = this.parseLocalStorageValue();
-    this.elementFlex = localStorageValue || this.resizingElement.offsetWidth;
+    this.elementWidth = localStorageValue || this.resizingElement.offsetWidth;
-
-    // ToDo:
-    // Rename variables to width
 
     // This case only happens when the timeline is loaded but not displayed.
     // Therefor the flexbasis will be set to 50%, just in px
-    if (this.elementFlex === 0 && this.resizingElement.parentElement) {
+    if (this.elementWidth === 0 && this.resizingElement.parentElement) {
-      this.elementFlex = this.resizingElement.parentElement.offsetWidth / 2;
+      this.elementWidth = this.resizingElement.parentElement.offsetWidth / 2;
     }
-    this.resizingElement.style[this.resizeStyle] = this.elementFlex + 'px';
+    this.resizingElement.style[this.resizeStyle] = this.elementWidth + 'px';
 
     // Wait until dom content is loaded and initialize column layout
     // Otherwise function will be executed with empty list
     jQuery(document).ready(() => {
-      this.applyColumnLayout(this.resizingElement, this.elementFlex);
+      this.applyColumnLayout(this.resizingElement, this.elementWidth);
     });
 
     // Add event listener
@@ -117,6 +114,14 @@ export class WpResizerDirective implements OnInit, OnDestroy {
 
       this.moving = true;
 
+      // In case we dragged the resizer farther than the element can actually grow,
+      // we reset it to the actual width at the start of the new resizing
+      let localStorageValue = this.parseLocalStorageValue();
+      let actualElementWidth = this.resizingElement.offsetWidth;
+      if (localStorageValue && localStorageValue > actualElementWidth) {
+        this.elementWidth = actualElementWidth;
+      }
+
       // Necessary to encapsulate this to be able to remove the eventlistener later
       this.mouseMoveHandler = this.resizeElement.bind(this, this.resizingElement);
 
@@ -137,7 +142,7 @@ export class WpResizerDirective implements OnInit, OnDestroy {
     window.removeEventListener('touchmove', this.mouseMoveHandler);
     let localStorageValue = this.parseLocalStorageValue();
     if (localStorageValue) {
-      this.elementFlex = localStorageValue;
+      this.elementWidth = localStorageValue;
     }
   }
 
@@ -153,12 +158,12 @@ export class WpResizerDirective implements OnInit, OnDestroy {
     // Change cursor icon back
     document.body.style.cursor = 'auto';
 
-    // Take care at the end that the elementFlex-Value is the same as the actual value
+    // Take care at the end that the elementWidth-Value is the same as the actual value
     // When the mouseup is outside the container these values will differ
     // which will cause problems at the next movement start
     let localStorageValue = this.parseLocalStorageValue();
     if (localStorageValue) {
-      this.elementFlex = localStorageValue;
+      this.elementWidth = localStorageValue;
     }
 
     this.moving = false;
@@ -191,8 +196,8 @@ export class WpResizerDirective implements OnInit, OnDestroy {
 
     // Get new value depending on the delta
     // The resizingElement is not allowed to be smaller than 530px
-    this.elementFlex = this.elementFlex + delta;
+    this.elementWidth = this.elementWidth + delta;
-    let newValue = this.elementFlex < 530 ? 530 : this.elementFlex;
+    let newValue = this.elementWidth < 530 ? 530 : this.elementWidth;
 
     // Store item in local storage
     window.OpenProject.guardedLocalStorage(this.localStorageKey, String(newValue));

frontend/src/app/components/wp-new/wp-new-split-view.html

@@ -29,8 +29,7 @@
 
     <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
       <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
-                  [localStorageKey]="'openProject-splitViewFlexBasis'"
+                  [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
-                  resizeStyle="width"></wp-resizer>
     </div>
   </edit-form>
 </div>

frontend/src/app/components/wp-table/embedded/wp-embedded-table.component.ts

@@ -23,6 +23,9 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
   @Input('queryProps') public queryProps:any = {};
   @Input() public tableActions:OpTableActionFactory[] = [];
   @Input() public externalHeight:boolean = false;
+  @Input() public showResizer:boolean = false;
+  @Input() public resizerClass:string = '';
+  @Input() public resizerStorageKey:string = '';
 
   /** Inform about loading errors */
   @Output() public onError = new EventEmitter<string>();

frontend/src/app/components/wp-table/embedded/wp-embedded-table.html

@@ -19,10 +19,17 @@
               class="work-packages-split-view--tabletimeline-content"></wp-table>
 
     <!-- GRID representation of the WP -->
-    <div class="work-packages-embedded-view--grid-view">
+    <div class="work-packages-embedded-view--grid-view"
+         [ngClass]="{ '-with-resizer': showResizer }" >
       <wp-grid *ngIf="configuration.isCardView"
                [configuration]="configuration">
       </wp-grid>
+
+      <div *ngIf="showResizer"
+           class="hidden-for-mobile hide-when-print">
+        <wp-resizer [elementClass]="resizerClass"
+                    [localStorageKey]="resizerStorageKey"></wp-resizer>
+      </div>
     </div>
 
     <!-- Footer -->

frontend/src/app/modules/ifc_models/bcf/container/bcf-container.component.html

@@ -1,4 +1,7 @@
 <wp-embedded-table [queryProps]="queryProps"
                    [configuration]="configuration"
-                   [externalHeight]="true">
+                   [externalHeight]="true"
+                   [showResizer]="true"
+                   resizerClass="work-packages-partitioned-page--content-right"
+                   resizerStorageKey="openProject-splitViewFlexBasis">
 </wp-embedded-table>

frontend/src/app/modules/work_packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.html

@@ -28,6 +28,7 @@
 
   <filter-container *ngIf="filterAllowed"></filter-container>
 
+  <div class="work-packages-partitioned-page--content-container">
     <!-- Left content view -->
     <div class="work-packages-partitioned-page--content-left loading-indicator--location"
          data-indicator-name="table"
@@ -37,4 +38,5 @@
     <!-- Right content view -->
     <div class="work-packages-partitioned-page--content-right"
          ui-view="content-right"></div>
+  </div>
 </div>

frontend/src/app/modules/work_packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.sass

@@ -16,24 +16,24 @@
   height: 100%
   overflow: hidden
   display: grid
-  grid-template-columns: 1fr auto
+  grid-template-columns: 1fr
   grid-template-rows: auto auto minmax(200px, 1fr)
 
-  &.-split
-    grid-template-areas: "header header" "filter filter" "content-left content-right"
   &.-right-only
-    grid-template-areas: "header header" "filter filter" "content-right content-right"
+    .work-packages-partitioned-page--content-left
+      display: none
+
   &.-left-only
-    grid-template-areas: "header header" "filter filter" "content-left content-left"
+    .work-packages-partitioned-page--content-right
+      display: none
 
-  .toolbar-container
+  .work-packages-partitioned-page--content-container
-    grid-area: header
+    display: flex
 
-  filter-container
+  .work-packages-partitioned-page--content-left,
-    grid-area: filter
+  .work-packages-partitioned-page--content-right
+    position: relative
+    min-width: 580px
 
   .work-packages-partitioned-page--content-left
-    grid-area: content-left
+    flex: 1
-
-  .work-packages-partitioned-page--content-right
-    grid-area: content-right

frontend/src/app/modules/work_packages/routing/work-packages-routes.ts

@@ -149,7 +149,8 @@ export const WORK_PACKAGES_ROUTES:Ng2StateDeclaration[] = [
     },
     data: {
       bodyClasses: 'router--work-packages-list-view',
-      menuItem: menuItemClass
+      menuItem: menuItemClass,
+      partition: '-left-only'
     }
   },
   {
@@ -163,7 +164,8 @@ export const WORK_PACKAGES_ROUTES:Ng2StateDeclaration[] = [
       allowMovingInEditMode: true,
       bodyClasses: 'router--work-packages-split-view-new',
       menuItem: menuItemClass,
-      parent: 'work-packages.partitioned.list'
+      parent: 'work-packages.partitioned.list',
+      partition: '-split'
     },
   },
   {
@@ -177,7 +179,8 @@ export const WORK_PACKAGES_ROUTES:Ng2StateDeclaration[] = [
       allowMovingInEditMode: true,
       bodyClasses: 'router--work-packages-partitioned-split-view',
       menuItem: menuItemClass,
-      parent: 'work-packages.partitioned.list'
+      parent: 'work-packages.partitioned.list',
+      partition: '-split'
     },
   },
   ...makeSplitViewRoutes(

frontend/src/app/modules/work_packages/routing/wp-split-view/wp-split-view.html

@@ -60,7 +60,6 @@
 
     <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
       <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
-                  [localStorageKey]="'openProject-splitViewFlexBasis'"
+                  [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
-                  resizeStyle="width"></wp-resizer>
     </div>
 </div>

modules/bim/app/assets/stylesheets/bim/ifc_viewer/generic.sass

@@ -60,6 +60,8 @@
 // -------------------------- XEOKIT specific rules for BUTTONS --------------------------
 .xeokit-btn-group
   vertical-align: middle
+
+  &:not(:last-of-type)
     margin-right: .5rem
 
 .xeokit-btn