diff options
Diffstat (limited to 'src/vs/workbench/contrib/feedback/browser/feedback.ts')
| -rw-r--r-- | src/vs/workbench/contrib/feedback/browser/feedback.ts | 103 |
1 files changed, 52 insertions, 51 deletions
diff --git a/src/vs/workbench/contrib/feedback/browser/feedback.ts b/src/vs/workbench/contrib/feedback/browser/feedback.ts index 46fc36b304e..77be54e32c4 100644 --- a/src/vs/workbench/contrib/feedback/browser/feedback.ts +++ b/src/vs/workbench/contrib/feedback/browser/feedback.ts @@ -4,15 +4,15 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/feedback'; -import * as nls from 'vs/nls'; +import { localize } from 'vs/nls'; import { IDisposable, DisposableStore, Disposable } from 'vs/base/common/lifecycle'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import * as dom from 'vs/base/browser/dom'; import { ICommandService } from 'vs/platform/commands/common/commands'; import { IIntegrityService } from 'vs/workbench/services/integrity/common/integrity'; import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { attachButtonStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { editorWidgetBackground, editorWidgetForeground, widgetShadow, inputBorder, inputForeground, inputBackground, inputActiveOptionBorder, editorBackground, textLinkForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { append, $, addDisposableListener, EventType, EventHelper, prepend } from 'vs/base/browser/dom'; import { IAnchor } from 'vs/base/browser/ui/contextview/contextview'; import { Button } from 'vs/base/browser/ui/button/button'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; @@ -114,25 +114,26 @@ export class FeedbackWidget extends Disposable { container.classList.add('monaco-menu-container'); // Form - this.feedbackForm = dom.append<HTMLFormElement>(container, dom.$('form.feedback-form')); + this.feedbackForm = append<HTMLFormElement>(container, $('form.feedback-form')); this.feedbackForm.setAttribute('action', 'javascript:void(0);'); // Title - dom.append(this.feedbackForm, dom.$('h2.title')).textContent = nls.localize("label.sendASmile", "Tweet us your feedback."); + append(this.feedbackForm, $('h2.title')).textContent = localize("label.sendASmile", "Tweet us your feedback."); // Close Button (top right) - const closeBtn = dom.append(this.feedbackForm, dom.$('div.cancel' + Codicon.close.cssSelector)); + const closeBtn = append(this.feedbackForm, $(`div.cancel${Codicon.close.cssSelector}`)); closeBtn.tabIndex = 0; closeBtn.setAttribute('role', 'button'); - closeBtn.title = nls.localize('close', "Close"); + closeBtn.title = localize('close', "Close"); - disposables.add(dom.addDisposableListener(container, dom.EventType.KEY_DOWN, keyboardEvent => { + disposables.add(addDisposableListener(container, EventType.KEY_DOWN, keyboardEvent => { const standardKeyboardEvent = new StandardKeyboardEvent(keyboardEvent); if (standardKeyboardEvent.keyCode === KeyCode.Escape) { this.hide(); } })); - disposables.add(dom.addDisposableListener(closeBtn, dom.EventType.MOUSE_OVER, () => { + + disposables.add(addDisposableListener(closeBtn, EventType.MOUSE_OVER, () => { const theme = this.themeService.getColorTheme(); let darkenFactor: number | undefined; switch (theme.type) { @@ -155,47 +156,47 @@ export class FeedbackWidget extends Disposable { } })); - disposables.add(dom.addDisposableListener(closeBtn, dom.EventType.MOUSE_OUT, () => { + disposables.add(addDisposableListener(closeBtn, EventType.MOUSE_OUT, () => { closeBtn.style.backgroundColor = ''; })); this.invoke(closeBtn, disposables, () => this.hide()); // Content - const content = dom.append(this.feedbackForm, dom.$('div.content')); + const content = append(this.feedbackForm, $('div.content')); // Sentiment Buttons - const sentimentContainer = dom.append(content, dom.$('div')); + const sentimentContainer = append(content, $('div')); if (!this.isPure) { - dom.append(sentimentContainer, dom.$('span')).textContent = nls.localize("patchedVersion1", "Your installation is corrupt."); + append(sentimentContainer, $('span')).textContent = localize("patchedVersion1", "Your installation is corrupt."); sentimentContainer.appendChild(document.createElement('br')); - dom.append(sentimentContainer, dom.$('span')).textContent = nls.localize("patchedVersion2", "Please specify this if you submit a bug."); + append(sentimentContainer, $('span')).textContent = localize("patchedVersion2", "Please specify this if you submit a bug."); sentimentContainer.appendChild(document.createElement('br')); } - dom.append(sentimentContainer, dom.$('span')).textContent = nls.localize("sentiment", "How was your experience?"); + append(sentimentContainer, $('span')).textContent = localize("sentiment", "How was your experience?"); - const feedbackSentiment = dom.append(sentimentContainer, dom.$('div.feedback-sentiment')); + const feedbackSentiment = append(sentimentContainer, $('div.feedback-sentiment')); // Sentiment: Smiley - this.smileyInput = dom.append(feedbackSentiment, dom.$('div.sentiment')); + this.smileyInput = append(feedbackSentiment, $('div.sentiment')); this.smileyInput.classList.add('smile'); this.smileyInput.setAttribute('aria-checked', 'false'); - this.smileyInput.setAttribute('aria-label', nls.localize('smileCaption', "Happy Feedback Sentiment")); + this.smileyInput.setAttribute('aria-label', localize('smileCaption', "Happy Feedback Sentiment")); this.smileyInput.setAttribute('role', 'checkbox'); - this.smileyInput.title = nls.localize('smileCaption', "Happy Feedback Sentiment"); + this.smileyInput.title = localize('smileCaption', "Happy Feedback Sentiment"); this.smileyInput.tabIndex = 0; this.invoke(this.smileyInput, disposables, () => this.setSentiment(true)); // Sentiment: Frowny - this.frownyInput = dom.append(feedbackSentiment, dom.$('div.sentiment')); + this.frownyInput = append(feedbackSentiment, $('div.sentiment')); this.frownyInput.classList.add('frown'); this.frownyInput.setAttribute('aria-checked', 'false'); - this.frownyInput.setAttribute('aria-label', nls.localize('frownCaption', "Sad Feedback Sentiment")); + this.frownyInput.setAttribute('aria-label', localize('frownCaption', "Sad Feedback Sentiment")); this.frownyInput.setAttribute('role', 'checkbox'); - this.frownyInput.title = nls.localize('frownCaption', "Sad Feedback Sentiment"); + this.frownyInput.title = localize('frownCaption', "Sad Feedback Sentiment"); this.frownyInput.tabIndex = 0; this.invoke(this.frownyInput, disposables, () => this.setSentiment(false)); @@ -209,23 +210,23 @@ export class FeedbackWidget extends Disposable { } // Contact Us Box - const contactUsContainer = dom.append(content, dom.$('div.contactus')); + const contactUsContainer = append(content, $('div.contactus')); - dom.append(contactUsContainer, dom.$('span')).textContent = nls.localize("other ways to contact us", "Other ways to contact us"); + append(contactUsContainer, $('span')).textContent = localize("other ways to contact us", "Other ways to contact us"); - const channelsContainer = dom.append(contactUsContainer, dom.$('div.channels')); + const channelsContainer = append(contactUsContainer, $('div.channels')); // Contact: Submit a Bug - const submitBugLinkContainer = dom.append(channelsContainer, dom.$('div')); + const submitBugLinkContainer = append(channelsContainer, $('div')); - const submitBugLink = dom.append(submitBugLinkContainer, dom.$('a')); + const submitBugLink = append(submitBugLinkContainer, $('a')); submitBugLink.setAttribute('target', '_blank'); submitBugLink.setAttribute('href', '#'); - submitBugLink.textContent = nls.localize("submit a bug", "Submit a bug"); + submitBugLink.textContent = localize("submit a bug", "Submit a bug"); submitBugLink.tabIndex = 0; - disposables.add(dom.addDisposableListener(submitBugLink, 'click', e => { - dom.EventHelper.stop(e); + disposables.add(addDisposableListener(submitBugLink, 'click', e => { + EventHelper.stop(e); const actionId = 'workbench.action.openIssueReporter'; this.commandService.executeCommand(actionId); this.hide(); @@ -234,57 +235,57 @@ export class FeedbackWidget extends Disposable { // Contact: Request a Feature if (!!this.requestFeatureLink) { - const requestFeatureLinkContainer = dom.append(channelsContainer, dom.$('div')); + const requestFeatureLinkContainer = append(channelsContainer, $('div')); - const requestFeatureLink = dom.append(requestFeatureLinkContainer, dom.$('a')); + const requestFeatureLink = append(requestFeatureLinkContainer, $('a')); requestFeatureLink.setAttribute('target', '_blank'); requestFeatureLink.setAttribute('href', this.requestFeatureLink); - requestFeatureLink.textContent = nls.localize("request a missing feature", "Request a missing feature"); + requestFeatureLink.textContent = localize("request a missing feature", "Request a missing feature"); requestFeatureLink.tabIndex = 0; - disposables.add(dom.addDisposableListener(requestFeatureLink, 'click', e => this.hide())); + disposables.add(addDisposableListener(requestFeatureLink, 'click', e => this.hide())); } // Remaining Characters - const remainingCharacterCountContainer = dom.append(this.feedbackForm, dom.$('h3')); - remainingCharacterCountContainer.textContent = nls.localize("tell us why", "Tell us why?"); + const remainingCharacterCountContainer = append(this.feedbackForm, $('h3')); + remainingCharacterCountContainer.textContent = localize("tell us why", "Tell us why?"); - this.remainingCharacterCount = dom.append(remainingCharacterCountContainer, dom.$('span.char-counter')); + this.remainingCharacterCount = append(remainingCharacterCountContainer, $('span.char-counter')); this.remainingCharacterCount.textContent = this.getCharCountText(0); // Feedback Input Form - this.feedbackDescriptionInput = dom.append<HTMLTextAreaElement>(this.feedbackForm, dom.$('textarea.feedback-description')); + this.feedbackDescriptionInput = append<HTMLTextAreaElement>(this.feedbackForm, $('textarea.feedback-description')); this.feedbackDescriptionInput.rows = 3; this.feedbackDescriptionInput.maxLength = this.maxFeedbackCharacters; this.feedbackDescriptionInput.textContent = this.feedback; this.feedbackDescriptionInput.required = true; - this.feedbackDescriptionInput.setAttribute('aria-label', nls.localize("feedbackTextInput", "Tell us your feedback")); + this.feedbackDescriptionInput.setAttribute('aria-label', localize("feedbackTextInput", "Tell us your feedback")); this.feedbackDescriptionInput.focus(); - disposables.add(dom.addDisposableListener(this.feedbackDescriptionInput, 'keyup', () => this.updateCharCountText())); + disposables.add(addDisposableListener(this.feedbackDescriptionInput, 'keyup', () => this.updateCharCountText())); // Feedback Input Form Buttons Container - const buttonsContainer = dom.append(this.feedbackForm, dom.$('div.form-buttons')); + const buttonsContainer = append(this.feedbackForm, $('div.form-buttons')); // Checkbox: Hide Feedback Smiley - const hideButtonContainer = dom.append(buttonsContainer, dom.$('div.hide-button-container')); + const hideButtonContainer = append(buttonsContainer, $('div.hide-button-container')); - this.hideButton = dom.append(hideButtonContainer, dom.$('input.hide-button')) as HTMLInputElement; + this.hideButton = append(hideButtonContainer, $('input.hide-button')) as HTMLInputElement; this.hideButton.type = 'checkbox'; this.hideButton.checked = true; this.hideButton.id = 'hide-button'; - const hideButtonLabel = dom.append(hideButtonContainer, dom.$('label')); + const hideButtonLabel = append(hideButtonContainer, $('label')); hideButtonLabel.setAttribute('for', 'hide-button'); - hideButtonLabel.textContent = nls.localize('showFeedback', "Show Feedback Icon in Status Bar"); + hideButtonLabel.textContent = localize('showFeedback', "Show Feedback Icon in Status Bar"); // Button: Send Feedback this.sendButton = new Button(buttonsContainer); this.sendButton.enabled = false; - this.sendButton.label = nls.localize('tweet', "Tweet"); - dom.prepend(this.sendButton.element, dom.$('span' + Codicon.twitter.cssSelector)); + this.sendButton.label = localize('tweet', "Tweet"); + prepend(this.sendButton.element, $(`span${Codicon.twitter.cssSelector}`)); this.sendButton.element.classList.add('send'); - this.sendButton.element.title = nls.localize('tweetFeedback', "Tweet Feedback"); + this.sendButton.element.title = localize('tweetFeedback', "Tweet Feedback"); disposables.add(attachButtonStyler(this.sendButton, this.themeService)); this.sendButton.onDidClick(() => this.onSubmit()); @@ -326,8 +327,8 @@ export class FeedbackWidget extends Disposable { private getCharCountText(charCount: number): string { const remaining = this.maxFeedbackCharacters - charCount; const text = (remaining === 1) - ? nls.localize("character left", "character left") - : nls.localize("characters left", "characters left"); + ? localize("character left", "character left") + : localize("characters left", "characters left"); return `(${remaining} ${text})`; } @@ -370,9 +371,9 @@ export class FeedbackWidget extends Disposable { } private invoke(element: HTMLElement, disposables: DisposableStore, callback: () => void): HTMLElement { - disposables.add(dom.addDisposableListener(element, 'click', callback)); + disposables.add(addDisposableListener(element, 'click', callback)); - disposables.add(dom.addDisposableListener(element, 'keypress', e => { + disposables.add(addDisposableListener(element, 'keypress', e => { if (e instanceof KeyboardEvent) { const keyboardEvent = <KeyboardEvent>e; if (keyboardEvent.keyCode === 13 || keyboardEvent.keyCode === 32) { // Enter or Spacebar |