Merge pull request #7440 from opf/housekeeping/remove-pointer-events-hack

Remove pointer events hack in WP table

[ci skip]

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

@@ -125,24 +125,18 @@ html:not(.-browser-mobile)
 
 .wp-table--cell-container
   @extend .ellipsis
-  display: block
-  // Because of the display: block the elements now
-  // take up the whole of the cell. This would block
-  // the user from using click (to select) or double-click (to open full screen)
-  // on the cell. Hence we disable events on this element but have to reenable them
-  // for the inplace-edit fields.
-  // The ID field is an exception because there the link needs to capture the pointer-events not the span.
-  // Otherwise there would be a small area where nothing happens on click.
-  pointer-events: none
+  .wp-table--cell-td.-editing &
+    display: block
 
   .inplace-edit
     display: initial
-    pointer-events: all
+
 
   &.id .inplace-edit
-    pointer-events: none
-    a
-      pointer-events: all
+//  pointer-events: none
+
+  a
+    pointer-events: all
 
 // Some padding for the inner cells of the display fields
 .wp-table--cell-span

frontend/src/app/components/wp-edit-form/table-row-edit-context.ts

@@ -39,6 +39,7 @@ import {FocusHelperService} from 'core-app/modules/common/focus/focus-helper';
 import {WorkPackageTable} from 'core-components/wp-fast-table/wp-fast-table';
 import {WorkPackageEditingPortalService} from "core-app/modules/fields/edit/editing-portal/wp-editing-portal-service";
 import {IFieldSchema} from "core-app/modules/fields/field.base";
+import {editModeClassName} from "core-app/modules/fields/edit/edit-field.component";
 
 export class TableRowEditContext implements WorkPackageEditContext {
 
@@ -77,6 +78,7 @@ export class TableRowEditContext implements WorkPackageEditContext {
         // Forcibly set the width since the edit field may otherwise
         // be given more width. Thereby preserve a minimum width of 120.
         const td = this.findCell(fieldName);
+        td.addClass(editModeClassName);
         var width = td.css('width');
         width = parseInt(width) > 150 ? width : '150px';
         td.css('max-width', width);
@@ -95,11 +97,13 @@ export class TableRowEditContext implements WorkPackageEditContext {
 
   public reset(workPackage:WorkPackageResource, fieldName:string, focus?:boolean) {
     const cell = this.findContainer(fieldName);
+    const td = this.findCell(fieldName);
 
     if (cell.length) {
       this.findCell(fieldName).css('width', '');
       this.findCell(fieldName).css('max-width', '');
       this.cellBuilder.refresh(cell[0], workPackage, fieldName);
+      td.removeClass(editModeClassName);
 
       if (focus) {
         this.FocusHelper.focusElement(cell);

frontend/src/app/components/wp-fast-table/handlers/row/double-click-handler.ts

@@ -3,7 +3,7 @@ import {StateService} from '@uirouter/core';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
 import {debugLog} from '../../../../helpers/debug_output';
 import {States} from '../../../states.service';
-import {tdClassName} from '../../builders/cell-builder';
+import {tdClassName, wpCellTdClassName} from '../../builders/cell-builder';
 import {tableRowClassName} from '../../builders/rows/single-row-builder';
 import {WorkPackageTableSelection} from '../../state/wp-table-selection.service';
 import {WorkPackageTable} from '../../wp-fast-table';
@@ -27,7 +27,7 @@ export class RowDoubleClickHandler implements TableEventHandler {
   }
 
   public get SELECTOR() {
-    return `.${tableRowClassName}`;
+    return `.${wpCellTdClassName}`;
   }
 
   public eventScope(table:WorkPackageTable) {
@@ -50,7 +50,7 @@ export class RowDoubleClickHandler implements TableEventHandler {
     }
 
     // Locate the row from event
-    let element = target.closest(this.SELECTOR);
+    let element = target.closest(this.SELECTOR).closest(`.${tableRowClassName}`);
     let wpId = element.data('workPackageId');
 
     // Ignore links

frontend/src/app/components/wp-fast-table/handlers/table-handler-registry.ts

@@ -47,7 +47,7 @@ export class TableHandlerRegistry {
     t => new WorkPackageStateLinksHandler(this.injector, t),
     // Clicking on the row (not within a cell)
     t => new RowClickHandler(this.injector, t),
-    // Double Clicking on the row (not within a cell)
+    // Double Clicking on the cell within the row
     t => new RowDoubleClickHandler(this.injector, t),
     // Clicking on group headers
     t => new GroupRowHandler(this.injector, t),

frontend/src/app/modules/fields/edit/edit-field.component.ts

@@ -51,6 +51,8 @@ export const OpEditingPortalChangesetToken = new InjectionToken('wp-editing-port
 export const overflowingContainerSelector = '.__overflowing_element_container';
 export const overflowingContainerAttribute = 'overflowingIdentifier';
 
+export const editModeClassName = '-editing';
+
 @Component({
   template: ''
 })