ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Hiding description tooltip on escape key. (#19741)

Browse Source 
* Hiding text tooltip on escape

* Fixing hover event
This commit is contained in:
Aasim Khan
2022-06-15 18:23:18 -07:00
committed by GitHub
parent 40532d9cac
commit b980fe1106
1 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -19,6 +19,8 @@ import * as DOM from 'vs/base/browser/dom';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { errorForeground } from 'vs/platform/theme/common/colorRegistry'; import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
export enum TextType { export enum TextType {
Normal = 'Normal', Normal = 'Normal',
@@ -49,7 +51,7 @@ const errorTextClass = 'error-text';
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p> <p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
<div #textContainer id="textContainer"></div> <div #textContainer id="textContainer"></div>
<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span> <span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img"> <div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div> <div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div> </div>
</div> </div>
@@ -226,6 +228,29 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
element.style.fontWeight = this.CSSStyles['font-weight']?.toString(); element.style.fontWeight = this.CSSStyles['font-weight']?.toString();
return element; return element;
} }
public showTooltip(e: Event): void {
const descriptionDiv = <HTMLElement>e.target;
const tooltip = <HTMLElement>(descriptionDiv.querySelector('.modelview-text-tooltip-content'));
tooltip.style.display = '';
}
public onDescriptionKeyDown(e: Event): void {
if (e instanceof KeyboardEvent) {
let event = new StandardKeyboardEvent(e);
const descriptionDiv = <HTMLElement>e.target;
const tooltip = <HTMLElement>(descriptionDiv.querySelector('.modelview-text-tooltip-content'));
if (event.equals(KeyCode.Escape)) {
tooltip.style.display = 'none';
event.stopPropagation();
event.preventDefault();
} else if (event.equals(KeyCode.Enter)) {
tooltip.style.display = '';
event.stopPropagation();
event.preventDefault();
}
}
}
} }
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {