diff --git a/frontend/src/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component.ts b/frontend/src/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component.ts index f498bbde11..35aeed90a2 100644 --- a/frontend/src/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component.ts +++ b/frontend/src/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.component.ts @@ -83,7 +83,7 @@ export class WorkPackageTimelineButtonComponent extends AbstractWorkPackageButto return this.wpTableTimeline.isVisible; } - public isAutoZoomEnabled():boolean { + public isAutoZoomEnabled() { return this.wpTableTimeline.isAutoZoomEnabled(); } diff --git a/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts b/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts index b03fafa53b..19ff858141 100644 --- a/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts +++ b/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts @@ -74,6 +74,18 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic public toggle() { let currentState = this.current; this.setVisible(!currentState.visible); + + if (this.isAutoZoomEnabled() === undefined) { + this.toggleAutoZoomEnabled(true); + } + + /** + * On first opening, activate auto zoom. + * Afterwards keep the zoom level. + */ + if (!currentState.visible && this.isAutoZoomEnabled()) { + this.toggleAutoZoom(true); + } } public setVisible(value:boolean) { @@ -140,8 +152,12 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic this.modify({ autoZoom: value }); } - public isAutoZoomEnabled():boolean { - return this.current.autoZoom; + public isAutoZoomEnabled():boolean|undefined { + return this.current.autoZoomEnabled; + } + + public toggleAutoZoomEnabled(val = !this.current.autoZoomEnabled) { + this.modify({ autoZoomEnabled: val }); } public get current():WorkPackageTableTimelineState { @@ -166,7 +182,8 @@ export class WorkPackageTableTimelineService extends WorkPackageQueryStateServic private get defaultState():WorkPackageTableTimelineState { return { - autoZoom: true, + autoZoom: false, + autoZoomEnabled: undefined, zoomLevel: 'days', visible: false, labels: this.defaultLabels diff --git a/frontend/src/app/components/wp-fast-table/wp-table-timeline.ts b/frontend/src/app/components/wp-fast-table/wp-table-timeline.ts index 4bec9a0113..346f1bcc9c 100644 --- a/frontend/src/app/components/wp-fast-table/wp-table-timeline.ts +++ b/frontend/src/app/components/wp-fast-table/wp-table-timeline.ts @@ -33,6 +33,7 @@ import { export interface WorkPackageTableTimelineState { autoZoom:boolean; + autoZoomEnabled:boolean|undefined; visible:boolean; zoomLevel:TimelineZoomLevel; labels:TimelineLabels; diff --git 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 index ce46e2308c..d33b31cb67 100644 --- 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 @@ -124,9 +124,6 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest // Refresh on changes to work packages this.updateOnWorkPackageChanges(); - // Set initial auto zoom level, if applicable - this.applyAutoZoomLevel(); - // Refresh timeline rendering callback this.setupRefreshListener(); @@ -217,8 +214,11 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest return; } - // Update autozoom level - this.applyAutoZoomLevel(); + if (this.wpTableTimeline.isAutoZoomEnabled()) { + // Update autozoom level + this.applyAutoZoomLevel(); + } + // Require dynamic CSS to be visible this.dynamicCssService.requireHighlighting(); @@ -431,6 +431,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest return; } + this.wpTableTimeline.toggleAutoZoomEnabled(false); const daysSpan = calculateDaySpan(this.workPackageIdOrder, this.states.workPackages, this._viewParameters); const timelineWidthInPx = this.$element.parent().width()! - (2 * requiredPixelMarginLeft); @@ -451,5 +452,4 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest } } } - } diff --git a/spec/features/work_packages/timeline/timeline_navigation_spec.rb b/spec/features/work_packages/timeline/timeline_navigation_spec.rb index e5bf15bc24..73438f0fec 100644 --- a/spec/features/work_packages/timeline/timeline_navigation_spec.rb +++ b/spec/features/work_packages/timeline/timeline_navigation_spec.rb @@ -145,8 +145,8 @@ RSpec.feature 'Work package timeline navigation', js: true, selenium: true do wp_timeline.expect_timeline!(open: true) wp_timeline.expect_timeline_element(work_package) - # Expect zoom at days - expect(page).to have_selector('#work-packages-timeline-zoom-auto-button.-disabled') + # Expect zoom at weeks + wp_timeline.expect_zoom_at :weeks end describe 'with a hierarchy being shown' do