Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-03 06:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use flexbox for issue reporter layout, fixes #44516

Browse Source
This commit is contained in:
Rachel Macfarlane
2018-03-02 15:50:05 -08:00
parent 99413dc9c6
commit 0c45c9b36d
3 changed files with 122 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/vs/code/electron-browser/issue/issueReporterMain.ts
View File

@@ -552,6 +552,7 @@ export class IssueReporter extends Disposable {
private renderBlocks(): void {
// Depending on Issue Type, we render different blocks and text
const { issueType } = this.issueReporterModel.getData();
const blockContainer = document.getElementById('block-container');
const systemBlock = document.querySelector('.block-system');
const processBlock = document.querySelector('.block-process');
const workspaceBlock = document.querySelector('.block-workspace');
@@ -564,6 +565,7 @@ export class IssueReporter extends Disposable {
const descriptionSubtitle = document.getElementById('issue-description-subtitle');
// Hide all by default
hide(blockContainer);
hide(systemBlock);
hide(processBlock);
hide(workspaceBlock);
@@ -573,6 +575,7 @@ export class IssueReporter extends Disposable {
hide(disabledExtensions);
if (issueType === IssueType.Bug) {
show(blockContainer);
show(systemBlock);
show(extensionsBlock);
show(disabledExtensions);
@@ -580,6 +583,7 @@ export class IssueReporter extends Disposable {
descriptionTitle.innerHTML = `${localize('stepsToReproduce', "Steps to Reproduce")} <span class="required-input">*</span>`;
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(blockContainer);
show(systemBlock);
show(processBlock);
show(workspaceBlock);
@@ -592,6 +596,7 @@ export class IssueReporter extends Disposable {
descriptionTitle.innerHTML = `${localize('description', "Description")} <span class="required-input">*</span>`;
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.");
} else if (issueType === IssueType.SettingsSearchIssue) {
show(blockContainer);
show(searchedExtensionsBlock);
show(settingsSearchResultsBlock);

188
src/vs/code/electron-browser/issue/issueReporterPage.ts
View File

@@ -29,116 +29,112 @@ export default (): string => `
</div>
</div>
<div class="system-info">
<div id="block-container">
<div class="block block-system">
<details>
<summary>${escape(localize('systemInfo', "My System Info"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSystemInfo" checked/>
<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
<div class="system-info" id="block-container">
<div class="block block-system">
<details>
<summary>${escape(localize('systemInfo', "My System Info"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSystemInfo" checked/>
<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</details>
</div>
<div class="block block-process">
<details>
<summary>${escape(localize('processes', "Currently Running Processes"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeProcessInfo" checked/>
<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<pre class="block-info">
<!-- To be dynamically filled -->
</pre>
</details>
</div>
<div class="block block-workspace">
<details>
<summary>${escape(localize('workspaceStats', "My Workspace Stats"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeWorkspaceInfo" checked/>
<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<pre class="block-info">
<code>
<!-- To be dynamically filled -->
</code>
</pre>
</details>
</div>
<div class="block block-extensions">
<details>
<summary>${escape(localize('extensions', "My Extensions"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeExtensions" checked/>
<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</div>
</details>
</div>
<div class="block block-process">
<details>
<summary>${escape(localize('processes', "Currently Running Processes"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeProcessInfo" checked/>
<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</details>
</div>
<div class="block block-searchedExtensions">
<details>
<summary>${escape(localize('searchedExtensions', "Searched Extensions"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSearchedExtensions" checked/>
<label class="caption" for="includeSearchedExtensions">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</summary>
<pre class="block-info">
<!-- To be dynamically filled -->
</pre>
</details>
</div>
<div class="block block-workspace">
<details>
<summary>${escape(localize('workspaceStats', "My Workspace Stats"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeWorkspaceInfo" checked/>
<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</details>
</div>
<div class="block block-settingsSearchResults">
<details>
<summary>${escape(localize('settingsSearchDetails', "Settings Search Details"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSettingsSearchDetails" checked/>
<label class="caption" for="includeSettingsSearchDetails">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
</summary>
<pre class="block-info">
<code>
<!-- To be dynamically filled -->
</code>
</pre>
</details>
</div>
<div class="block block-extensions">
<details>
<summary>${escape(localize('extensions', "My Extensions"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeExtensions" checked/>
<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
</div>
</details>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</div>
</details>
</div>
<div class="block block-searchedExtensions">
<details>
<summary>${escape(localize('searchedExtensions', "Searched Extensions"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSearchedExtensions" checked/>
<label class="caption" for="includeSearchedExtensions">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</div>
</details>
</div>
<div class="block block-settingsSearchResults">
<details>
<summary>${escape(localize('settingsSearchDetails', "Settings Search Details"))}
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSettingsSearchDetails" checked/>
<label class="caption" for="includeSettingsSearchDetails">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
</div>
</details>
</div>
</div>
<div class="section">
<div id="disabledExtensions">
<div class="extensions-form">
<label>${escape(localize('tryDisablingExtensions', "Is the problem reproducible when extensions are disabled?"))}</label>
<div class="form-buttons">
<div class="choice">
<input type="radio" id="reproducesWithoutExtensions" value=true name="reprosWithoutExtensions" />
<label for="reproducesWithoutExtensions">${escape(localize('yes', "Yes"))}</label>
</div>
<div class="choice">
<input type="radio" id="reproducesWithExtensions" value=false name="reprosWithoutExtensions" checked/>
<label for="reproducesWithExtensions">${escape(localize('no', "No"))}</label>
</div>
<div class="section" id="disabledExtensions">
<div class="extensions-form">
<label>${escape(localize('tryDisablingExtensions', "Is the problem reproducible when extensions are disabled?"))}</label>
<div class="form-buttons">
<div class="choice">
<input type="radio" id="reproducesWithoutExtensions" value=true name="reprosWithoutExtensions" />
<label for="reproducesWithoutExtensions">${escape(localize('yes', "Yes"))}</label>
</div>
<div class="choice">
<input type="radio" id="reproducesWithExtensions" value=false name="reprosWithoutExtensions" checked/>
<label for="reproducesWithExtensions">${escape(localize('no', "No"))}</label>
</div>
</div>
<div class="instructions">${escape(localize('disableExtensionsLabelText', "Try to reproduce the problem after {0}."))
</div>
<div class="instructions">${escape(localize('disableExtensionsLabelText', "Try to reproduce the problem after {0}."))
.replace('{0}', `<span tabIndex=0 role="button" id="disableExtensions" class="workbenchCommand">${escape(localize('disableExtensions', "disabling all extensions and reloading the window"))}</span>`)}
</div>
<div class="instructions">${escape(localize('showRunningExtensionsLabelText', "If you suspect it's an extension issue, {0} to report the issue on the extension."))
</div>
<div class="instructions">${escape(localize('showRunningExtensionsLabelText', "If you suspect it's an extension issue, {0} to report the issue on the extension."))
.replace('{0}', `<span tabIndex=0 role="button"id="showRunning" class="workbenchCommand">${escape(localize('showRunningExtensions', "view all running extensions"))}</span>`)}
</div>
</div>
</div>
<div class="input-group">
<div class="input-group description-section">
<label for="description" id="issue-description-label">
<!-- To be dynamically filled -->
</label>
@@ -146,7 +142,7 @@ export default (): string => `
<!-- To be dynamically filled -->
</div>
<div class="block-info-text">
<textarea name="description" id="description" cols="100" rows="12" placeholder="${escape(localize('details', "Please enter details."))}" required></textarea>
<textarea name="description" id="description" placeholder="${escape(localize('details', "Please enter details."))}" required></textarea>
</div>
</div>

31
src/vs/code/electron-browser/issue/media/issueReporter.css
View File

@@ -103,21 +103,19 @@ textarea {
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
color: #CCCCCC;
height: 100%;
}
body {
margin: 0;
overflow: scroll;
height: 100%;
}
.hidden {
display: none;
}
#block-container {
margin-top: 1em;
}
.block .block-info {
width: 100%;
font-family: 'Menlo', 'Courier New', 'Courier', monospace;
@@ -144,11 +142,32 @@ button:disabled {
max-width: 85vw;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
padding-top: 2em;
display: flex;
flex-direction: column;
height: 100%;
}
.description-section {
flex-grow: 1;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
textarea {
flex-grow: 1;
min-height: 150px;
}
.block-info-text {
display: flex;
flex-grow: 1;
}
#github-submit-btn {
float: right;
flex-shrink: 0;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
}