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

simplify the preview information feature (#12606)

Browse Source
This commit is contained in:
Alan Ren
2020-09-24 21:58:29 -07:00
committed by GitHub
parent 49de1f80cf
commit 28c7188984
2 changed files with 3 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
View File

@@ -6,6 +6,8 @@
import { escape } from 'vs/base/common/strings'; import { escape } from 'vs/base/common/strings';
import { localize } from 'vs/nls'; import { localize } from 'vs/nls';
const previewImgDescription = escape(localize('welcomePage.previewBody', "This feature page is in preview. Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."));
export default () => ` export default () => `
<div class="welcomePageContainer"> <div class="welcomePageContainer">
<div class="welcomePage"> <div class="welcomePage">
@@ -13,21 +15,7 @@ export default () => `
<div class="gradient"> <div class="gradient">
<div class="ads-homepage-section tool-tip"> <div class="ads-homepage-section tool-tip">
<div class="tool-tip-container" id="tool-tip-container-wide"> <div class="tool-tip-container" id="tool-tip-container-wide">
<a role="button" class="ads-welcome-page-link" aria-describedby="tooltip-text-wide" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>Preview</p><i class="icon-info themed-icon"></i></a> <a role="img" tabindex=0 class="ads-welcome-page-link" aria-label="${previewImgDescription}" title="${previewImgDescription}" id="preview-link-wide" class="preview-link" tabindex="0" name="preview"><p>Preview</p><i class="icon-info themed-icon"></i></a>
<span role="tooltip" id="tooltip-text-wide" class="tool-tip-text" aria-hidden="true">
<h3 tabindex="0" class="preview-tooltip-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
<p tabindex="0" class="preview-tooltip-body">${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}</p>
</span>
</div>
<div class="tool-tip-container" id="tool-tip-container-narrow">
<a role="button" class="ads-welcome-page-link" aria-haspopup="true" class="preview-link" tabindex="0" id="preview-link-narrow" name="previewNarrow"><p>Preview</p><i class="icon-info themed-icon"></i></a>
</div>
</div>
<div id="preview-modal" class="modal" aria-modal="true" aria-hidden="true">
<div class="modal-content">
<span class="close-icon">x</span>
<h3 tabindex="0" class="preview-modal-header">${escape(localize('welcomePage.previewHeader', "This page is in preview"))}</h3>
<p tabindex="0" class="preview-modal-body">${escape(localize('welcomePage.previewBody', "Preview features introduce new functionalities that are on track to becoming a permanent part the product. They are stable, but need additional accessibility improvements. We welcome your early feedback while they are under development."))}</p>
</div> </div>
</div> </div>
<div class="ads-homepage-section section header hero"> <div class="ads-homepage-section section header hero">

117
src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
View File

@@ -50,7 +50,6 @@ import { GuidedTour } from 'sql/workbench/contrib/welcome/page/browser/gettingSt
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { Button } from 'sql/base/browser/ui/button/button'; import { Button } from 'sql/base/browser/ui/button/button';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
const configurationKey = 'workbench.startupEditor'; const configurationKey = 'workbench.startupEditor';
const oldConfigurationKey = 'workbench.welcome.enabled'; const oldConfigurationKey = 'workbench.welcome.enabled';
const telemetryFrom = 'welcomePage'; const telemetryFrom = 'welcomePage';
@@ -330,8 +329,6 @@ class WelcomePage extends Disposable {
})); }));
this.createButtons(); this.createButtons();
this.createDropDown(); this.createDropDown();
this.createWidePreviewToolTip();
this.createPreviewModal();
} }
private createButtons(): void { private createButtons(): void {
@@ -457,60 +454,6 @@ class WelcomePage extends Disposable {
}, 3000); }, 3000);
} }
private createWidePreviewToolTip(): void {
const container = document.querySelector('.ads-homepage .tool-tip');
const previewLink = container.querySelector('#tool-tip-container-wide') as HTMLElement;
const tooltip = container.querySelector('#tooltip-text-wide') as HTMLElement;
const previewModalBody = container.querySelector('.preview-tooltip-body') as HTMLElement;
const previewModalHeader = container.querySelector('.preview-tooltip-header') as HTMLElement;
addStandardDisposableListener(previewLink, 'mouseover', () => {
tooltip.setAttribute('aria-hidden', 'true');
tooltip.classList.toggle('show');
});
addStandardDisposableListener(previewLink, 'mouseout', () => {
tooltip.setAttribute('aria-hidden', 'false');
tooltip.classList.remove('show');
});
addStandardDisposableListener(previewLink, 'keydown', event => {
if (event.equals(KeyCode.Escape)) {
if (tooltip.classList.contains('show')) {
tooltip.setAttribute('aria-hidden', 'true');
tooltip.classList.remove('show');
}
}
else if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
tooltip.setAttribute('aria-hidden', 'false');
tooltip.classList.toggle('show');
previewModalHeader.focus();
}
});
addStandardDisposableListener(tooltip, 'keydown', event => {
if (event.equals(KeyCode.Escape)) {
if (tooltip.classList.contains('show')) {
tooltip.setAttribute('aria-hidden', 'true');
tooltip.classList.remove('show');
}
}
else if (event.equals(KeyCode.Tab)) {
EventHelper.stop(event);
if (event.target === previewModalBody) {
previewModalHeader.focus();
} else {
previewModalBody.focus();
}
}
});
window.addEventListener('click', (event) => {
const target = event.target as HTMLTextAreaElement;
if (!target.matches('.tooltip')) {
if (tooltip.classList.contains('show')) {
tooltip.classList.remove('show');
}
}
});
}
private createDropDown(): void { private createDropDown(): void {
const container = document.querySelector('.ads-homepage .hero'); const container = document.querySelector('.ads-homepage .hero');
const dropdownBtn = container.querySelector('#dropdown-btn') as HTMLElement; const dropdownBtn = container.querySelector('#dropdown-btn') as HTMLElement;
@@ -579,66 +522,6 @@ class WelcomePage extends Disposable {
}); });
} }
private createPreviewModal(): void {
const container = document.querySelector('.ads-homepage');
const modal = container.querySelector('#preview-modal') as HTMLElement;
const btn = container.querySelector('#tool-tip-container-narrow') as HTMLElement;
const span = container.querySelector('.close-icon') as HTMLElement;
const previewModalHeader = container.querySelector('.preview-modal-header') as HTMLElement;
btn.addEventListener('click', function () {
modal.classList.toggle('show');
});
span.addEventListener('click', function () {
modal.classList.remove('show');
});
window.addEventListener('click', (e: MouseEvent) => {
if (e.target === modal && modal.classList.contains('show')) {
modal.classList.remove('show');
}
});
btn.addEventListener('keydown', (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
modal.classList.toggle('show');
modal.setAttribute('aria-hidden', 'false');
previewModalHeader.focus();
}
if (event.equals(KeyCode.Escape)) {
if (modal.classList.contains('show')) {
modal.setAttribute('aria-hidden', 'true');
modal.classList.remove('show');
}
}
});
window.addEventListener('keydown', (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
const target = e.target as HTMLTextAreaElement;
if (!target.matches('.modal') && event.equals(KeyCode.Escape)) {
if (modal.classList.contains('show')) {
modal.setAttribute('aria-hidden', 'true');
modal.classList.remove('show');
}
}
});
modal.addEventListener('keydown', function (e: KeyboardEvent) {
const previewModalBody = container.querySelector('.preview-modal-body') as HTMLElement;
const previewModalHeader = container.querySelector('.preview-modal-header') as HTMLElement;
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Tab)) {
e.preventDefault();
if (e.target === previewModalBody) {
previewModalHeader.focus();
} else {
previewModalBody.focus();
}
}
});
}
private async createListEntries(container: HTMLElement, fileService: IFileService, fullPath: URI, windowOpenable: IWindowOpenable, relativePath: string): Promise<HTMLElement[]> { private async createListEntries(container: HTMLElement, fileService: IFileService, fullPath: URI, windowOpenable: IWindowOpenable, relativePath: string): Promise<HTMLElement[]> {
let result: HTMLElement[] = []; let result: HTMLElement[] = [];
const value = await fileService.resolve(fullPath); const value = await fileService.resolve(fullPath);