ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

handle the keyboard event properly in hyperlink (#16508)

Browse Source 
* handle the keyboard event properly in hyperlink

* fix a couple more issues
This commit is contained in:
Alan Ren
2021-08-02 10:39:36 -07:00
committed by GitHub
parent 373a519f25
commit 748bb53173
6 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sql/workbench/browser/modelComponents/declarativeTable.component.html
View File

@@ -45,7 +45,7 @@
<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
</model-component-wrapper>
<button *ngIf="isContextMenuColumn(c)" [title]="contextMenuButtonTitle" [attr.aria-label]="contextMenuButtonTitle" class="codicon toggle-more" (click)="onContextMenuRequested($event,r,c)">
<button *ngIf="isContextMenuColumn(c)" [title]="contextMenuButtonTitle" [attr.aria-label]="contextMenuButtonTitle" class="codicon toggle-more" (click)="onContextMenuButtonClick($event,r,c)" (keydown)="onContextMenuButtonKeyDown($event,r,c)">
</button>
</td>
</ng-container>

15
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -361,7 +361,20 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
return localize('declarativeTable.showActions', "Show Actions");
}
public onContextMenuRequested(event: MouseEvent, row: number, column: number) {
public onContextMenuButtonKeyDown(event: KeyboardEvent, row: number, column: number): void {
const keyboardEvent = new StandardKeyboardEvent(event);
if (keyboardEvent.keyCode === KeyCode.Space ||
keyboardEvent.keyCode === KeyCode.Enter) {
this.showContextMenu(event, row, column);
}
}
public onContextMenuButtonClick(event: MouseEvent, row: number, column: number): void {
this.showContextMenu(event, row, column);
}
private showContextMenu(event: MouseEvent | KeyboardEvent, row: number, column: number): void {
EventHelper.stop(event, true);
const cellValue = this.data[row][column].value as azdata.DeclarativeTableMenuCellValue;
const actions: IAction[] = [];
let addSeparator = false;

2
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

@@ -27,7 +27,7 @@ class DivItem {
@Component({
template: `
<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keydown)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>

17
src/sql/workbench/browser/modelComponents/hyperlink.component.ts
View File

@@ -18,6 +18,10 @@ import { textLinkForeground, textLinkActiveForeground, focusBorder } from 'vs/pl
import { IOpenerService } from 'vs/platform/opener/common/opener';
import * as DOM from 'vs/base/browser/dom';
import { ILogService } from 'vs/platform/log/common/log';
import { domEvent } from 'vs/base/browser/event';
import { Event } from 'vs/base/common/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
@Component({
selector: 'modelview-hyperlink',
@@ -37,7 +41,16 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
}
ngAfterViewInit(): void {
this._register(DOM.addDisposableListener(this._el.nativeElement, 'click', (e: MouseEvent) => this.onClick(e)));
const onClick = domEvent(this._el.nativeElement, 'click');
const onEnter = Event.chain(domEvent(this._el.nativeElement, 'keydown'))
.map(e => new StandardKeyboardEvent(e))
.filter(e => e.keyCode === KeyCode.Enter)
.event;
const onOpen = Event.any<DOM.EventLike>(onClick, onEnter);
this._register(onOpen(e => {
this.open(e);
}));
this.baseInit();
}
@@ -77,7 +90,7 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
return this.title || this.url || '';
}
public onClick(e: MouseEvent): void {
public open(e: DOM.EventLike): void {
this.fireEvent({
eventType: ComponentEventType.onDidClick,
args: undefined

4
src/sql/workbench/browser/modelComponents/media/declarativeTable.css
View File

@@ -28,6 +28,10 @@
cursor: pointer;
}
.declarative-table .declarative-table-cell .codicon.toggle-more:focus {
outline-style: solid;
}
.declarative-table checkbox input[type='checkbox'] {
margin: 3px;
}