[26006][25518] Replace details icon with context menu, open on first click (#5835)
* [26006] Replace details icon with context menu * [25518] Open details view on click in table * Show dropdown icons always for mobile * Move context menu column to the right * Add three icon with three horizontal dots * Change context menu icon for three horizontal dotspull/5847/head
Oliver Günther
7 years ago
committed by
Wieland Lindenthal
parent
77460e0146
commit
7878734e6b
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 387 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,35 @@ |
||||
import {$injectFields} from '../../angular/angular-injector-bridge.functions'; |
||||
import {opIconElement} from "../../../helpers/op-icon-builder"; |
||||
import {wpCellTdClassName} from "./cell-builder"; |
||||
|
||||
export const contextMenuTdClassName = 'wp-table--context-menu-column'; |
||||
export const contextMenuLinkClassName = 'wp-table-context-menu-link'; |
||||
|
||||
export class ContextLinkIconBuilder { |
||||
// Injections
|
||||
public I18n: op.I18n; |
||||
|
||||
public text: any; |
||||
|
||||
constructor() { |
||||
$injectFields(this, 'I18n'); |
||||
|
||||
this.text = { |
||||
button: this.I18n.t('js.button_open_details') |
||||
}; |
||||
} |
||||
|
||||
public build(): HTMLElement { |
||||
// Append details button
|
||||
let td = document.createElement('td'); |
||||
td.classList.add(wpCellTdClassName, contextMenuTdClassName, 'hide-when-print'); |
||||
|
||||
// Enter the context menu arrow
|
||||
let detailsLink = document.createElement('a'); |
||||
detailsLink.classList.add(contextMenuLinkClassName); |
||||
detailsLink.appendChild(opIconElement('icon', 'icon-show-more-horizontal')); |
||||
td.appendChild(detailsLink); |
||||
|
||||
return td; |
||||
} |
||||
} |
||||
@ -1,43 +0,0 @@ |
||||
import {WorkPackageResource} from './../../api/api-v3/hal-resources/work-package-resource.service'; |
||||
import {injectorBridge} from '../../angular/angular-injector-bridge.functions'; |
||||
import {UiStateLinkBuilder} from './ui-state-link-builder'; |
||||
import {opIconElement} from "../../../helpers/op-icon-builder"; |
||||
|
||||
export const detailsLinkTdClass = 'wp-table--details-column'; |
||||
export const detailsLinkClassName = 'wp-table--details-link'; |
||||
|
||||
export class DetailsLinkBuilder { |
||||
// Injections
|
||||
public I18n: op.I18n; |
||||
|
||||
public text: any; |
||||
private uiStatebuilder: UiStateLinkBuilder; |
||||
|
||||
constructor() { |
||||
injectorBridge(this); |
||||
this.text = { |
||||
button: this.I18n.t('js.button_open_details') |
||||
}; |
||||
this.uiStatebuilder = new UiStateLinkBuilder(); |
||||
} |
||||
|
||||
public build(workPackage: WorkPackageResource): HTMLElement { |
||||
// Append details button
|
||||
let td = document.createElement('td'); |
||||
td.classList.add(detailsLinkTdClass, 'hide-when-print'); |
||||
|
||||
let detailsLink = this.uiStatebuilder.linkToDetails( |
||||
workPackage.id, |
||||
this.text.button, |
||||
'' |
||||
); |
||||
|
||||
detailsLink.classList.add(detailsLinkClassName, 'hidden-for-sighted'); |
||||
detailsLink.appendChild(opIconElement('icon', 'icon-info2')); |
||||
td.appendChild(detailsLink); |
||||
|
||||
return td; |
||||
} |
||||
} |
||||
|
||||
DetailsLinkBuilder.$inject = ['I18n']; |
||||
@ -0,0 +1,43 @@ |
||||
import {debugLog} from "../../../../helpers/debug_output"; |
||||
import {WorkPackageTable} from "../../wp-fast-table"; |
||||
import {uiStateLinkClass} from "../../builders/ui-state-link-builder"; |
||||
import {ContextMenuHandler} from "./context-menu-handler"; |
||||
import {contextMenuLinkClassName} from "../../builders/context-link-icon-builder"; |
||||
|
||||
export class ContextMenuClickHandler extends ContextMenuHandler { |
||||
constructor(table: WorkPackageTable) { |
||||
super(table); |
||||
} |
||||
|
||||
public get EVENT() { |
||||
return 'click.table.contextmenu'; |
||||
} |
||||
|
||||
public get SELECTOR() { |
||||
return `.${contextMenuLinkClassName}`; |
||||
} |
||||
|
||||
public handleEvent(table: WorkPackageTable, evt:JQueryEventObject):boolean { |
||||
let target = jQuery(evt.target); |
||||
|
||||
// We want to keep the original context menu on hrefs
|
||||
// (currently, this is only the id
|
||||
if (target.closest(`.${uiStateLinkClass}`).length) { |
||||
debugLog('Allowing original context menu on state link'); |
||||
return true; |
||||
} |
||||
|
||||
evt.preventDefault(); |
||||
evt.stopPropagation(); |
||||
|
||||
// Locate the row from event
|
||||
const element = target.closest(this.rowSelector); |
||||
const wpId = element.data('workPackageId'); |
||||
|
||||
if (wpId) { |
||||
super.openContextMenu(evt, wpId); |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
import {debugLog} from "../../../../helpers/debug_output"; |
||||
import {$injectFields, injectorBridge} from "../../../angular/angular-injector-bridge.functions"; |
||||
import {WorkPackageTable} from "../../wp-fast-table"; |
||||
import {TableEventHandler} from "../table-handler-registry"; |
||||
import {tableRowClassName} from "../../builders/rows/single-row-builder"; |
||||
import {uiStateLinkClass} from "../../builders/ui-state-link-builder"; |
||||
import {ContextMenuService} from "../../../context-menus/context-menu.service"; |
||||
import {timelineCellClassName} from "../../builders/timeline/timeline-row-builder"; |
||||
|
||||
export abstract class ContextMenuHandler implements TableEventHandler { |
||||
// Injections
|
||||
public contextMenu:ContextMenuService; |
||||
|
||||
constructor(protected table: WorkPackageTable) { |
||||
$injectFields(this, 'contextMenu'); |
||||
} |
||||
|
||||
public get rowSelector() { |
||||
return `.${tableRowClassName}`; |
||||
} |
||||
|
||||
public abstract get EVENT():string; |
||||
|
||||
public abstract get SELECTOR():string; |
||||
|
||||
public eventScope(table:WorkPackageTable) { |
||||
return jQuery(table.container); |
||||
} |
||||
|
||||
public abstract handleEvent(table: WorkPackageTable, evt:JQueryEventObject):boolean; |
||||
|
||||
protected openContextMenu(evt:JQueryEventObject, workPackageId:string, positionArgs?:any):void { |
||||
let [index,] = this.table.findRenderedRow(workPackageId); |
||||
this.contextMenu.activate( |
||||
'WorkPackageContextMenu', |
||||
evt, |
||||
{ |
||||
workPackageId: workPackageId, |
||||
rowIndex: index, |
||||
table: this.table |
||||
} |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue