Merge pull request #6419 from opf/timeline-improvements

Timeline fixes/improvements [ci skip]
6 years ago · 1290eb6da7
parent bd74d13e54 b7bae721b5
commit 1290eb6da7
4 changed files with 50 additions and 29 deletions
--- a/frontend/npm-shrinkwrap.json
+++ b/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",
--- a/frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts
+++ b/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) {
--- a/frontend/src/app/components/wp-table/timeline/header/wp-timeline-header.directive.ts
+++ b/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';
--- a/frontend/src/app/components/wp-table/timeline/wp-timeline.ts
+++ b/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;
 }