Merge pull request #5967 from opf/feature/26219-manually-change-width-of-Gantt

[26219] Manually change width of Gantt

app/assets/stylesheets/content/work_packages/resizer/resizer.sass

@@ -2,6 +2,7 @@
   position: absolute
   top: 0
   bottom: 0
+  height: 100%
   left: -12px
   cursor: col-resize
   color: grey
@@ -10,4 +11,11 @@
   &:before
     position: relative
     top: 50%
-    right: -10px
+    left: 10px
+
+.work-packages--tabletimeline--timeline--resizer
+  .work-packages--resizer
+    left: initial
+    z-index: 10
+    &:before
+      left: initial

app/assets/stylesheets/layout/_print.sass

@@ -102,6 +102,7 @@
               .work-packages-tabletimeline--timeline-side
                   contain: initial // For printing in Chrome
                   border-left: none
+                  flex: 1 1
 
       .work-package-table--container,
       .generic-table--results-container

app/assets/stylesheets/layout/_work_package_table.sass

@@ -138,7 +138,7 @@
 // TIMELINE half of the tabletimeline flexbox
 .work-packages-tabletimeline--timeline-side
   @include varprop(border-left, timeline--separator)
-  flex: 1 1
+  flex-basis: 50%
   // Show the horizontal scrollbar _always_ (same as table)
   overflow-x: scroll
   // Show the vertical scrollbar when necessary

frontend/app/components/routing/wp-details/wp.list.details.html

@@ -57,7 +57,7 @@
       <wp-details-toolbar work-package='$ctrl.workPackage'></wp-details-toolbar>
     </div>
 
-    <div class="work-packages--details--resizer hidden-for-mobile">
-      <wp-resizer></wp-resizer>
+    <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
+      <wp-resizer element-class="'work-packages-split-view--details-side'" local-storage-key="'openProject-splitViewFlexBasis'"></wp-resizer>
     </div>
 </div

frontend/app/components/routing/wp-list/wp.list.new.html

@@ -28,8 +28,8 @@
       ></edit-actions-bar>
     </div>
 
-    <div class="work-packages--details--resizer hidden-for-mobile">
-      <wp-resizer></wp-resizer>
+    <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
+      <wp-resizer element-class="'work-packages-split-view--details-side'" local-storage-key="'openProject-splitViewFlexBasis'"></wp-resizer>
     </div>
   </wp-edit-field-group>
 </div>

frontend/app/components/wp-resizer/wp-resizer.directive.ts

@@ -28,21 +28,30 @@
 import {openprojectModule} from '../../angular-modules';
 
 export class WorkPackageResizerController {
-  private detailsSide:HTMLElement;
+  private resizingElement:HTMLElement;
   private elementFlex:number;
   private oldPosition:number;
   private mouseMoveHandler:any;
+  public elementClass: string;
+  public localStorageKey: string;
 
   constructor(public $element:ng.IAugmentedJQuery) {
     // Get element
-    this.detailsSide = <HTMLElement>document.getElementsByClassName('work-packages-split-view--details-side')[0];
+    this.resizingElement = <HTMLElement>document.getElementsByClassName(this.elementClass)[0];
 
     // Get inital width from local storage and apply
-    let localStorageValue = localStorage.getItem("detailsSideFlexBasis");
-    this.elementFlex = localStorageValue ? parseInt(localStorageValue, 10) : 582;
-    this.detailsSide.style.flexBasis = this.elementFlex + 'px';
+    let localStorageValue = localStorage.getItem(this.localStorageKey);
+    this.elementFlex = localStorageValue ? parseInt(localStorageValue, 10) : this.resizingElement.offsetWidth;
+
+    // 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 ) {
+      this.elementFlex = this.resizingElement.parentElement.offsetWidth / 2;
+    }
+    this.resizingElement.style.flexBasis = this.elementFlex + 'px';
+
     // Apply two column layout
-    this.detailsSide.classList.toggle('-columns-2', this.elementFlex > 700);
+    this.resizingElement.classList.toggle('-columns-2', this.elementFlex > 700);
 
     // Add event listener
     this.$element[0].addEventListener('mousedown', this.handleMouseDown.bind(this));
@@ -54,12 +63,12 @@ export class WorkPackageResizerController {
     e.stopPropagation();
 
     // Only on left mouse click the resizing is started
-    if(e.buttons === 1) {
+    if(e.buttons === 1 || e.which === 1) {
       // Gettig starting position
       this.oldPosition = e.clientX;
 
       // Necessary to encapsulate this to be able to remove the eventlistener later
-      this.mouseMoveHandler = this.resizeElement.bind(this, this.detailsSide);
+      this.mouseMoveHandler = this.resizeElement.bind(this, this.resizingElement);
 
       // Change cursor icon
       // This is handled via JS to ensure
@@ -84,7 +93,7 @@ export class WorkPackageResizerController {
     // Take care at the end that the elemntFlex-Value is the same as the acutal value
     // When the mouseup is outside the container these values will differ
     // which will cause problems at the next movement start
-    let localStorageValue = localStorage.getItem("detailsSideFlexBasis");
+    let localStorageValue = localStorage.getItem(this.localStorageKey);
     if(localStorageValue) { this.elementFlex = parseInt(localStorageValue, 10) };
   }
 
@@ -97,13 +106,13 @@ export class WorkPackageResizerController {
     this.oldPosition = e.clientX;
 
     // Get new value depending on the delta
-    // The detailsSide is not allowed to be smaller than 480px and greater than 1300px
+    // The resizingElement is not allowed to be smaller than 480px and greater than 1300px
     this.elementFlex = this.elementFlex + delta;
     let newValue = this.elementFlex < 480 ? 480 : this.elementFlex;
     newValue = newValue > 1300 ? 1300 : newValue;
 
     // Store item in local storage
-    localStorage.setItem("detailsSideFlexBasis", String(newValue));
+    localStorage.setItem(this.localStorageKey, String(newValue));
 
     // Apply two column layout
     element.classList.toggle('-columns-2', newValue > 700);
@@ -117,7 +126,10 @@ function wpResizer():any {
   return {
     restrict: 'E',
     templateUrl: '/components/wp-resizer/wp-resizer.directive.html',
-    scope: {},
+    scope: {
+      elementClass: '=',
+      localStorageKey: '='
+    },
 
     bindToController: true,
     controllerAs: '$ctrl',

frontend/app/components/wp-resizer/wp-resizer.service.ts

@@ -1,56 +0,0 @@
-// -- copyright
-// OpenProject is a project management system.
-// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See doc/COPYRIGHT.rdoc for more details.
-// ++
-
-
-import {opServicesModule} from '../../angular-modules';
-import {WorkPackageTableColumns} from '../wp-fast-table/wp-table-columns';
-
-export class WorkPackageResizerService {
-
-  public changeTimelineWidthOnColumnCountChange(columns:WorkPackageTableColumns, table:HTMLElement, timeline:HTMLElement) {
-    const colCount = columns.current.length;
-    if (colCount === 0) {
-      table.style.flex = `0 1 45px`;
-      timeline.style.flex = `1 1`;
-    } else if (colCount === 1) {
-      table.style.flex = `1 1`;
-      timeline.style.flex = `4 1`;
-    } else if (colCount === 2) {
-      table.style.flex = `1 1`;
-      timeline.style.flex = `3 1`;
-    } else if (colCount === 3) {
-      table.style.flex = `1 1`;
-      timeline.style.flex = `2 1`;
-    } else if (colCount === 4) {
-      table.style.flex = `2 1`;
-      timeline.style.flex = `3 1`;
-    }
-  }
-}
-
-opServicesModule.service('wpResizer', WorkPackageResizerService);

frontend/app/components/wp-table/wp-table.directive.html

@@ -63,6 +63,10 @@
     </table>
   </div>
 
+  <div class="work-packages--tabletimeline--timeline--resizer hidden-for-mobile hide-when-print">
+    <wp-resizer element-class="'work-packages-tabletimeline--timeline-side'" local-storage-key="'openProject-timelineFlexBasis'"></wp-resizer>
+  </div>
+
   <div class="work-packages-tabletimeline--timeline-side">
     <wp-timeline-container></wp-timeline-container>
   </div>

frontend/app/components/wp-table/wp-table.directive.ts

@@ -38,7 +38,6 @@ import {WorkPackageTable} from '../wp-fast-table/wp-fast-table';
 import {WorkPackageTableColumns} from '../wp-fast-table/wp-table-columns';
 import {KeepTabService} from '../wp-panels/keep-tab/keep-tab.service';
 import {WorkPackageTimelineTableController} from './timeline/container/wp-timeline-container.directive';
-import {WorkPackageResizerService} from '../wp-resizer/wp-resizer.service';
 import {WpTableHoverSync} from './wp-table-hover-sync';
 import {createScrollSync} from './wp-table-scroll-sync';
 
@@ -103,8 +102,7 @@ export class WorkPackagesTableController {
               I18n:op.I18n,
               wpTableGroupBy:WorkPackageTableGroupByService,
               wpTableTimeline:WorkPackageTableTimelineService,
-              wpTableColumns:WorkPackageTableColumnsService,
-              wpResizer:WorkPackageResizerService) {
+              wpTableColumns:WorkPackageTableColumnsService) {
     // Clear any old table subscribers
     states.table.stopAllSubscriptions.next();
 
@@ -160,11 +158,6 @@ export class WorkPackagesTableController {
     this.table = tableAndTimeline[0];
     this.timeline = tableAndTimeline[1];
 
-    // Subscribe to column changes and calculate how to
-    // partition the width between table and timeline
-    wpTableColumns.observeOnScope($scope)
-      .subscribe(c => wpResizer.changeTimelineWidthOnColumnCountChange(c, this.table, this.timeline));
-
     // sync hover from table to timeline
     const wpTableHoverSync = new WpTableHoverSync(this.$element);
     wpTableHoverSync.activate();