Merge pull request #6419 from opf/timeline-improvements

Timeline fixes/improvements

[ci skip]

frontend/npm-shrinkwrap.json

@@ -7520,11 +7520,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7537,15 +7539,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7648,7 +7653,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7658,6 +7664,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7670,17 +7677,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -7697,6 +7707,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7769,7 +7780,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7779,6 +7791,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7884,6 +7897,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts

@@ -26,14 +26,17 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {AfterViewInit, Component, ElementRef, Inject, Injector, OnDestroy} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Injector, OnDestroy} from '@angular/core';
+import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
+import {INotification, NotificationsService} from 'core-app/modules/common/notifications/notifications.service';
+import {TypeDmService} from 'core-app/modules/hal/dm-services/type-dm.service';
+import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
 import {TableState} from 'core-components/wp-table/table-state/table-state';
+import * as moment from 'moment';
 import {Moment} from 'moment';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
 import {filter, map, take, takeUntil, withLatestFrom} from 'rxjs/operators';
-import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 import {debugLog, timeOutput} from '../../../../helpers/debug_output';
-import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
 import {States} from '../../../states.service';
 import {WorkPackageNotificationService} from '../../../wp-edit/wp-notification.service';
 import {RenderedRow} from '../../../wp-fast-table/builders/primary-render-pass';
@@ -50,17 +53,10 @@ import {
   calculateDaySpan,
   getPixelPerDayForZoomLevel,
   timelineElementCssClass,
-  timelineLeftSpacingInDays,
   timelineMarkerSelectionStartClass,
   TimelineViewParameters,
   zoomLevelOrder
 } from '../wp-timeline';
-import {TypeDmService} from 'core-app/modules/hal/dm-services/type-dm.service';
-import {
-  INotification,
-  NotificationsService
-} from 'core-app/modules/common/notifications/notifications.service';
-import * as moment from 'moment';
 
 @Component({
   selector: 'wp-timeline-container',
@@ -88,7 +84,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
 
   public timelineBody:JQuery;
 
-  private selectionParams: { notification: INotification|null } = {
+  private selectionParams:{ notification:INotification | null } = {
     notification: null
   };
 
@@ -399,10 +395,15 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
     });
 
     // left spacing
-    newParams.dateDisplayStart.subtract(timelineLeftSpacingInDays, 'days');
+    newParams.dateDisplayStart.subtract(currentParams.dayCountForMarginLeft, 'days');
 
     // right spacing
-    const width = this.$element.width();
+    // RR: kept both variants for documentation purpose.
+    // A: calculate the minimal width based on the width of the timeline view
+    // B: calculate the minimal width based on the window width
+    const width = this.$element.children().width(); // A
+    // const width = jQuery('body').width(); // B
+
     const pixelPerDay = currentParams.pixelPerDay;
     const visibleDays = Math.ceil((width / pixelPerDay) * 1.5);
     newParams.dateDisplayEnd.add(visibleDays, 'days');
@@ -431,7 +432,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
   }
 
   private applyAutoZoomLevel() {
-    const daysSpan = calculateDaySpan(this.workPackageIdOrder, this.states.workPackages);
+    const daysSpan = calculateDaySpan(this.workPackageIdOrder, this.states.workPackages, this._viewParameters);
     const timelineWidthInPx = this.outerContainer.width();
 
     for (let zoomLevel of zoomLevelOrder) {

frontend/src/app/components/wp-table/timeline/header/wp-timeline-header.directive.ts

@@ -27,11 +27,11 @@
 // ++
 
 import {Component, ElementRef, OnInit} from '@angular/core';
+import {TimelineZoomLevel} from 'core-app/modules/hal/resources/query-resource';
 import {WorkPackageTimelineTableController} from 'core-components/wp-table/timeline/container/wp-timeline-container.directive';
 import * as moment from 'moment';
 import {calculatePositionValueForDayCount, getTimeSlicesForHeader, TimelineViewParameters} from '../wp-timeline';
 import Moment = moment.Moment;
-import {TimelineZoomLevel} from 'core-app/modules/hal/resources/query-resource';
 
 
 export const timelineHeaderCSSClass = 'wp-timeline--header-element';

frontend/src/app/components/wp-table/timeline/wp-timeline.ts

@@ -1,3 +1,6 @@
+import {TimelineZoomLevel} from 'core-app/modules/hal/resources/query-resource';
+import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
+import {WorkPackageChangeset} from 'core-components/wp-edit-form/work-package-changeset';
 // -- copyright
 // OpenProject is a project management system.
 // Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
@@ -29,9 +32,6 @@ import * as moment from 'moment';
 import {InputState, MultiInputState} from 'reactivestates';
 import {RenderedRow} from '../../wp-fast-table/builders/primary-render-pass';
 import Moment = moment.Moment;
-import {TimelineZoomLevel} from 'core-app/modules/hal/resources/query-resource';
-import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
-import {WorkPackageChangeset} from 'core-components/wp-edit-form/work-package-changeset';
 
 export const timelineElementCssClass = 'timeline-element';
 export const timelineGridElementCssClass = 'wp-timeline--grid-element';
@@ -64,12 +64,13 @@ export function getPixelPerDayForZoomLevel(zoomLevel:TimelineZoomLevel) {
     case 'years':
       return 0.5;
   }
+  throw new Error('invalid zoom level: ' + zoomLevel);
 }
 
 /**
- * Number of days to display before the earliest workpackage in view
+ * Number of pixels to display before the earliest workpackage in view
  */
-export const timelineLeftSpacingInDays = 3;
+export const requiredPixelMarginLeft = 120;
 
 /**
  *
@@ -105,6 +106,10 @@ export class TimelineViewParameters {
     return this.dateDisplayEnd.diff(this.dateDisplayStart, 'days');
   }
 
+  get dayCountForMarginLeft(): number {
+    return Math.ceil(requiredPixelMarginLeft / this.pixelPerDay);
+  }
+
 }
 
 /**
@@ -174,7 +179,8 @@ export function getTimeSlicesForHeader(vp:TimelineViewParameters,
 }
 
 export function calculateDaySpan(visibleWorkPackages:RenderedRow[],
-                                 loadedWorkPackages:MultiInputState<WorkPackageResource>):number {
+                                 loadedWorkPackages:MultiInputState<WorkPackageResource>,
+                                 viewParameters:TimelineViewParameters):number {
   let earliest:Moment = moment();
   let latest:Moment = moment();
 
@@ -199,5 +205,5 @@ export function calculateDaySpan(visibleWorkPackages:RenderedRow[],
   });
 
   const daysSpan = latest.diff(earliest, 'days') + 1;
-  return daysSpan + timelineLeftSpacingInDays;
+  return daysSpan + viewParameters.dayCountForMarginLeft;
 }