From 9e2b1014d52105547820ccce5fff083c5920feba Mon Sep 17 00:00:00 2001 From: Henriette Dinger Date: Tue, 2 Jul 2019 11:06:23 +0200 Subject: [PATCH] Remove pointer events hack --- .../content/work_packages/_table_content.sass | 20 +++++++------------ .../wp-edit-form/table-row-edit-context.ts | 4 ++++ .../handlers/row/double-click-handler.ts | 6 +++--- .../handlers/table-handler-registry.ts | 2 +- .../fields/edit/edit-field.component.ts | 2 ++ 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/content/work_packages/_table_content.sass b/app/assets/stylesheets/content/work_packages/_table_content.sass index 13b16d3895..aabb1c1046 100644 --- a/app/assets/stylesheets/content/work_packages/_table_content.sass +++ b/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 diff --git a/frontend/src/app/components/wp-edit-form/table-row-edit-context.ts b/frontend/src/app/components/wp-edit-form/table-row-edit-context.ts index 3bda6ea3d2..c05c1cc893 100644 --- a/frontend/src/app/components/wp-edit-form/table-row-edit-context.ts +++ b/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); diff --git a/frontend/src/app/components/wp-fast-table/handlers/row/double-click-handler.ts b/frontend/src/app/components/wp-fast-table/handlers/row/double-click-handler.ts index b7128c0a8c..8e56f5a5d0 100644 --- a/frontend/src/app/components/wp-fast-table/handlers/row/double-click-handler.ts +++ b/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 diff --git a/frontend/src/app/components/wp-fast-table/handlers/table-handler-registry.ts b/frontend/src/app/components/wp-fast-table/handlers/table-handler-registry.ts index feec2a86c0..606f7e10f7 100644 --- a/frontend/src/app/components/wp-fast-table/handlers/table-handler-registry.ts +++ b/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), diff --git a/frontend/src/app/modules/fields/edit/edit-field.component.ts b/frontend/src/app/modules/fields/edit/edit-field.component.ts index b5cfd98270..82d2ae052b 100644 --- a/frontend/src/app/modules/fields/edit/edit-field.component.ts +++ b/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: '' })