diff --git a/src/vs/code/electron-browser/issue/issueReporterMain.ts b/src/vs/code/electron-browser/issue/issueReporterMain.ts index 03f4c5650321ef2d0fe616d3383678a7fc21bb9b..310adb05cc5415a3f363d0a99cc170e459f3d462 100644 --- a/src/vs/code/electron-browser/issue/issueReporterMain.ts +++ b/src/vs/code/electron-browser/issue/issueReporterMain.ts @@ -41,6 +41,8 @@ import { LogLevelSetterChannelClient, FollowerLogService } from 'vs/platform/log import { ILogService, getLogLevel } from 'vs/platform/log/common/log'; import { OcticonLabel } from 'vs/base/browser/ui/octiconLabel/octiconLabel'; import { normalizeGitHubIssuesUrl } from 'vs/code/electron-browser/issue/issueReporterUtil'; +import { Button } from 'vs/base/browser/ui/button/button'; +import { Color } from 'vs/base/common/color'; const MAX_URL_LENGTH = platform.isWindows ? 2081 : 5400; @@ -72,6 +74,8 @@ export class IssueReporter extends Disposable { private receivedPerformanceInfo = false; private shouldQueueSearch = false; + private previewButton: Button; + constructor(configuration: IssueReporterConfiguration) { super(); @@ -86,6 +90,12 @@ export class IssueReporter extends Disposable { extensionsDisabled: this.environmentService.disableExtensions, }); + this.previewButton = new Button(document.getElementById('issue-reporter'), { + buttonBackground: Color.fromHex(configuration.data.styles.buttonBackground), + buttonForeground: Color.fromHex(configuration.data.styles.buttonForeground), + buttonHoverBackground: Color.fromHex(configuration.data.styles.buttonHoverBackground) + }); + ipcRenderer.on('issuePerformanceInfoResponse', (event, info) => { this.logService.trace('issueReporter: Received performance data'); this.issueReporterModel.update(info); @@ -171,18 +181,6 @@ export class IssueReporter extends Disposable { content.push(`a, .workbenchCommand { color: ${styles.textLinkColor}; }`); } - if (styles.buttonBackground) { - content.push(`button { background-color: ${styles.buttonBackground}; }`); - } - - if (styles.buttonForeground) { - content.push(`button { color: ${styles.buttonForeground}; }`); - } - - if (styles.buttonHoverBackground) { - content.push(`#github-submit-btn:hover:enabled, #github-submit-btn:focus:enabled { background-color: ${styles.buttonHoverBackground}; }`); - } - if (styles.textLinkColor) { content.push(`a { color: ${styles.textLinkColor}; }`); } @@ -385,7 +383,7 @@ export class IssueReporter extends Disposable { } }); - this.addEventListener('github-submit-btn', 'click', () => this.createIssue()); + this.previewButton.onDidClick(() => this.createIssue()); this.addEventListener('disableExtensions', 'click', () => { ipcRenderer.send('workbenchCommand', 'workbench.action.reloadWindowWithExtensionsDisabled'); @@ -421,13 +419,12 @@ export class IssueReporter extends Disposable { } private updatePreviewButtonState() { - const submitButton = document.getElementById('github-submit-btn'); if (this.isPreviewEnabled()) { - submitButton.disabled = false; - submitButton.textContent = localize('previewOnGitHub', "Preview on GitHub"); + this.previewButton.label = localize('previewOnGitHub', "Preview on GitHub"); + this.previewButton.enabled = true; } else { - submitButton.disabled = true; - submitButton.textContent = localize('loadingData', "Loading data..."); + this.previewButton.enabled = false; + this.previewButton.label = localize('loadingData', "Loading data..."); } } diff --git a/src/vs/code/electron-browser/issue/issueReporterPage.ts b/src/vs/code/electron-browser/issue/issueReporterPage.ts index af7bfd77a1247fbfdaf532486949909a006db9a4..c922c3fd8a5df4067ff8b09059fdc2da257d9e88 100644 --- a/src/vs/code/electron-browser/issue/issueReporterPage.ts +++ b/src/vs/code/electron-browser/issue/issueReporterPage.ts @@ -126,6 +126,4 @@ export default (): string => ` - - `; \ No newline at end of file diff --git a/src/vs/code/electron-browser/issue/media/issueReporter.css b/src/vs/code/electron-browser/issue/media/issueReporter.css index ff907fc88eb09cf7fa5773a773cd0cebd8410d72..00e61ad81830ab539fa4aa249f47a55d5fe6c180 100644 --- a/src/vs/code/electron-browser/issue/media/issueReporter.css +++ b/src/vs/code/electron-browser/issue/media/issueReporter.css @@ -48,7 +48,6 @@ input[type="text"], textarea { line-height: 1.5; color: #495057; background-color: #fff; - border-radius: .25rem; border: 1px solid #ced4da; } @@ -60,19 +59,12 @@ textarea { /** * Button */ -button { - display: inline-block; - font-weight: 400; - line-height: 1.25; - text-align: center; - white-space: nowrap; - vertical-align: middle; - user-select: none; - padding: .5rem 1rem; - font-size: 1rem; - border-radius: .25rem; - background: none; - border: 1px solid transparent; + +.monaco-text-button { + display: block; + width: auto; + padding: 4px 10px; + align-self: flex-end; } select { @@ -129,14 +121,6 @@ pre code { font-family: 'Menlo', 'Courier New', 'Courier', monospace; } -button:hover:enabled { - cursor: pointer; -} - -button:disabled { - cursor: auto; -} - #issue-reporter { max-width: 85vw; margin-left: auto; @@ -257,11 +241,6 @@ a { color: #be1100; } -button { - background-color: #007ACC; - color: #fff; -} - .section .input-group .validation-error { margin-left: 13%; }