Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-04 15:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Issue Reporter: UX issues, fixes #42856

Browse Source 
* Open issue reporter in same display as workbench

* Styling updates

* Increase url length limit

* normalize extension ids before checking isEnabled
This commit is contained in:
Rachel Macfarlane
2018-02-02 16:54:25 -08:00
committed by GitHub
parent 443fd7841b
commit 683fcaa92b
5 changed files with 102 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/code/electron-browser/issue/issueReporterMain.ts
+5 -8
View File
@@ -350,6 +350,7 @@ export class IssueReporter extends Disposable {
const descriptionTitle = document.getElementById('issue-description-label');
const descriptionSubtitle = document.getElementById('issue-description-subtitle');
if (issueType === IssueType.Bug) {
show(systemBlock);
hide(processBlock);
@@ -358,8 +359,7 @@ export class IssueReporter extends Disposable {
show(disabledExtensions);
descriptionTitle.innerHTML = `${localize('stepsToReproduce', "Steps to Reproduce")} <span class="required-input">*</span>`;
show(descriptionSubtitle);
descriptionSubtitle.innerHTML = localize('bugDescription', "How did you encounter this problem? What steps do you need to perform to reliably reproduce the problem? What did you expect to happen and what actually did happen?");
descriptionSubtitle.innerHTML = localize('bugDescription', "Share the steps needed to reliably reproduce the problem. Please include actual and expected results. We support GitHub-flavored Markdown. You will be able to edit your issue and add screenshots when we preview it on GitHub.");
} else if (issueType === IssueType.PerformanceIssue) {
show(systemBlock);
show(processBlock);
@@ -368,8 +368,7 @@ export class IssueReporter extends Disposable {
show(disabledExtensions);
descriptionTitle.innerHTML = `${localize('stepsToReproduce', "Steps to Reproduce")} <span class="required-input">*</span>`;
show(descriptionSubtitle);
descriptionSubtitle.innerHTML = localize('performanceIssueDesciption', "When did this performance issue happen? For example, does it occur on startup or after a specific series of actions? Any details you can provide help our investigation.");
descriptionSubtitle.innerHTML = localize('performanceIssueDesciption', "When did this performance issue happen? Does it occur on startup or after a specific series of actions? We support GitHub-flavored Markdown. You will be able to edit your issue and add screenshots when we preview it on GitHub.");
} else {
hide(systemBlock);
hide(processBlock);
@@ -378,18 +377,16 @@ export class IssueReporter extends Disposable {
hide(disabledExtensions);
descriptionTitle.innerHTML = `${localize('description', "Description")} <span class="required-input">*</span>`;
hide(descriptionSubtitle);
descriptionSubtitle.innerHTML = localize('featureRequestDescription', "Please describe the feature you would like to see. We support GitHub-flavored Markdown. You will be able to edit your issue and add screenshots when we preview it on GitHub.");
}
}
private validateInput(inputId: string): boolean {
const inputElement = (<HTMLInputElement>document.getElementById(inputId));
if (!inputElement.value) {
show(document.getElementById(`${inputId}-validation-error`));
inputElement.classList.add('invalid-input');
return false;
} else {
hide(document.getElementById(`${inputId}-validation-error`));
inputElement.classList.remove('invalid-input');
return true;
}
@@ -438,7 +435,7 @@ export class IssueReporter extends Disposable {
const url = baseUrl + encodeURIComponent(issueBody);
const lengthValidationElement = document.getElementById('url-length-validation-error');
if (url.length > 2081) {
if (url.length > 5400) {
lengthValidationElement.textContent = localize('urlLengthError', "The data exceeds the length limit of 2081. The data is length {0}.", url.length);
show(lengthValidationElement);
return false;
src/vs/code/electron-browser/issue/issueReporterPage.ts
+5 -21
View File
@@ -6,8 +6,6 @@
import { escape } from 'vs/base/common/strings';
import { localize } from 'vs/nls';
import * as os from 'os';
import pkg from 'vs/platform/node/package';
export default (): string => `
<div id="issue-reporter">
@@ -15,8 +13,8 @@ export default (): string => `
<div class="section">
<div class="input-group">
<label for="issue-type">${escape(localize('issueTypeLabel', "I want to submit a"))}</label>
<select id="issue-type" class="form-control">
<label id="issue-type-label" class="inline-form-control" for="issue-type">${escape(localize('issueTypeLabel', "This is a"))}</label>
<select id="issue-type" class="inline-form-control">
<option value="0">${escape(localize('bugReporter', "Bug Report"))}</option>
<option value="1">${escape(localize('performanceIssue', "Performance Issue"))}</option>
<option value="2">${escape(localize('featureRequest', "Feature Request"))}</option>
@@ -24,9 +22,8 @@ export default (): string => `
</div>
<div class="input-group">
<label for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
<div id="issue-title-validation-error" class="validation-error hidden" role="alert">${escape(localize('issueTitleRequired', "Please enter a title."))}</div>
<input id="issue-title" type="text" required>
<label id="issue-title-label" for="issue-title">${escape(localize('issueTitleLabel', "Title"))} <span class="required-input">*</span></label>
<input id="issue-title" type="text" class="inline-form-control" placeholder="${escape(localize('issueTitleRequired', "Please enter a title."))}" required>
<small id="similar-issues">
<!-- To be dynamically filled -->
</small>
@@ -34,17 +31,6 @@ export default (): string => `
</div>
<div class="system-info">
<div class="input-group">
<div class="two-col">
<label for="vscode-version">${escape(localize('vscodeVersion', "VS Code Version"))}</label>
<input id="vscode-version" type="text" value="${pkg.name} ${pkg.version}" disabled/>
</div>
<div class="two-col">
<label for="os">${escape(localize('osVersion', "OS Version"))}</label>
<input id="os" type="text" value="${os.type()} ${os.arch()} ${os.release()}" disabled/>
</div>
</div>
<div id="block-container">
<div class="block block-system">
<details>
@@ -123,9 +109,7 @@ export default (): string => `
<!-- To be dynamically filled -->
</div>
<div class="block-info-text">
<div class="instructions">${escape(localize('githubMarkdown', "We support GitHub-flavored Markdown. You will be able to edit your issue and add screenshots when we preview it on GitHub."))}</div>
<div id="description-validation-error" class="validation-error hidden" role="alert">${escape(localize('issueDescriptionRequired', "Please enter a description."))}</div>
<textarea name="description" id="description" cols="100" rows="15" required></textarea>
<textarea name="description" id="description" cols="100" rows="12" placeholder="${escape(localize('details', "Please enter details."))}" required></textarea>
</div>
</div>
src/vs/code/electron-browser/issue/media/issueReporter.css
+38 -7
View File
@@ -31,7 +31,29 @@ td {
}
.section {
margin-bottom: 2em;
margin-bottom: 1.5em;
}
#issue-type-label {
width: 12%;
}
#issue-type {
width: calc(88% - 5px);
}
#issue-title-label {
width: 10%;
display: inline-block
}
#issue-title {
width: calc(90% - 5px);
}
#similar-issues {
margin-left: 67px;
display: block;
}
/**
@@ -48,6 +70,11 @@ input[type="text"], textarea {
border-radius: .25rem;
border: 1px solid #ced4da;
}
.inline-form-control {
display: inline-block !important;
}
textarea {
overflow: auto;
resize: vertical;
@@ -73,10 +100,9 @@ button {
select {
height: calc(2.25rem + 2px);
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
display: inline-block;
padding: 3px 3px;
font-size: 14px;
line-height: 1.5;
color: #495057;
background-color: #fff;
@@ -87,6 +113,11 @@ select {
* {
box-sizing: border-box;
}
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
color: #CCCCCC;
@@ -107,7 +138,7 @@ body {
.block .block-info {
width: 100%;
font-family: 'Menlo', 'Courier New', 'Courier', monospace;
font-size: 14px;
font-size: 12px;
overflow: auto;
overflow-wrap: break-word;
}
@@ -172,7 +203,7 @@ select, input, textarea {
summary {
border: 1px solid transparent;
padding: 10px;
padding: 0 10px;
margin-bottom: 5px;
}