Skip to content

Commit

Permalink
Issue reporter responsive CSS (#43007)
Browse files Browse the repository at this point in the history
  • Loading branch information
Rachel Macfarlane authored Feb 6, 2018
1 parent 0f30344 commit 0c7afa8
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 56 deletions.
19 changes: 17 additions & 2 deletions src/vs/code/electron-browser/issue/issueReporterMain.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,15 +249,30 @@ export class IssueReporter extends Disposable {

document.getElementById('github-submit-btn').addEventListener('click', () => this.createIssue());

document.getElementById('disableExtensions').addEventListener('click', () => {
const disableExtensions = document.getElementById('disableExtensions');
disableExtensions.addEventListener('click', () => {
ipcRenderer.send('workbenchCommand', 'workbench.extensions.action.disableAll');
ipcRenderer.send('workbenchCommand', 'workbench.action.reloadWindow');
});

document.getElementById('showRunning').addEventListener('click', () => {
disableExtensions.addEventListener('keydown', (e) => {
if (e.keyCode === 13 || e.keyCode === 32) {
ipcRenderer.send('workbenchCommand', 'workbench.extensions.action.disableAll');
ipcRenderer.send('workbenchCommand', 'workbench.action.reloadWindow');
}
});

const showRunning = document.getElementById('showRunning');
showRunning.addEventListener('click', () => {
ipcRenderer.send('workbenchCommand', 'workbench.action.showRuntimeExtensions');
});

showRunning.addEventListener('keydown', (e) => {
if (e.keyCode === 13 || e.keyCode === 32) {
ipcRenderer.send('workbenchCommand', 'workbench.action.showRuntimeExtensions');
}
});

// Cmd+Enter or Mac or Ctrl+Enter on other platforms previews issue and closes window
if (platform.isMacintosh) {
let prevKeyWasCommand = false;
Expand Down
56 changes: 34 additions & 22 deletions src/vs/code/electron-browser/issue/issueReporterPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,11 @@ export default (): string => `
<div class="block block-system">
<details>
<summary>${escape(localize('systemInfo', "My System Info"))}
<input class="sendData" type="checkbox" id="includeSystemInfo" checked>
<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
<div class="include-data">
<input class="sendData" type="checkbox" id="includeSystemInfo" checked>
<label class="caption" for="includeSystemInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
Expand All @@ -47,9 +49,11 @@ export default (): string => `
<div class="block block-process">
<details>
<summary>${escape(localize('processes', "Currently Running Processes"))}
<input class="sendData" type="checkbox" id="includeProcessInfo" checked>
<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
<div class="include-data">
<input class="sendData" type="checkbox" id="includeProcessInfo" checked>
<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
Expand All @@ -59,9 +63,11 @@ export default (): string => `
<div class="block block-workspace">
<details>
<summary>${escape(localize('workspaceStats', "My Workspace Stats"))}
<input class="sendData" type="checkbox" id="includeWorkspaceInfo" checked>
<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
<div class="include-data">
<input class="sendData" type="checkbox" id="includeWorkspaceInfo" checked>
<label class="caption" for="includeWorkspaceInfo">${escape(localize('sendData', "Send my data"))}</label>
</input>
</div>
</summary>
<pre class="block-info">
<code>
Expand All @@ -73,9 +79,11 @@ export default (): string => `
<div class="block block-extensions">
<details>
<summary>${escape(localize('extensions', "My Extensions"))}
<input class="sendData" type="checkbox" id="includeExtensions" checked>
<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
</input>
<div class="include-data">
<input class="sendData" type="checkbox" id="includeExtensions" checked>
<label class="caption" for="includeExtensions">${escape(localize('sendData', "Send my data"))}</label>
</input>
</div>
</summary>
<div class="block-info">
<!-- To be dynamically filled -->
Expand All @@ -87,17 +95,21 @@ export default (): string => `
<div class="section">
<div id="disabledExtensions">
<label>${escape(localize('tryDisablingExtensions', "Is the problem reproducible when extensions are disabled?"))}</label>
<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 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>
<div class="instructions">Try to reproduce the problem after <button id="disableExtensions" class="workbenchCommand">${escape(localize('disableExtensions', "disabling all extensions and reloading the window"))}</button>.</div>
<div class="instructions">If you suspect it's an extension issue, <button id="showRunning" class="workbenchCommand">${escape(localize('showRunningExtensions', "see all running extensions"))}</button>.</div>
<div class="instructions">${escape(localize('disableExtensionsLabel', "Try to reproduce the problem after "))}<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('showRunningExtensionsLabel', "If you suspect it's an extension issue, "))}<span tabIndex=0 role="button"id="showRunning" class="workbenchCommand">${escape(localize('showRunningExtensions', "see all running extensions"))}</span>.</div>
</div>
</div>
Expand Down
116 changes: 85 additions & 31 deletions src/vs/code/electron-browser/issue/media/issueReporter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,8 @@ td {
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;
margin-left: 10%;
display: block;
}

Expand Down Expand Up @@ -183,13 +166,31 @@ button:disabled {
margin-bottom: 1em;
}

.choice {
display: inline-block;
margin: 0 5px;
.extensions-form {
display: flex;
}

.choice > label, .choice > input {
.extensions-form > .form-buttons {
display: flex;
margin-left: 20px;
}

.extensions-form > .form-buttons > .choice {
margin-right: 35px;
position: relative;
}

.extensions-form > .form-buttons > .choice > label, .extensions-form > .form-buttons > .choice > input {
cursor: pointer;
height: 100%;
margin-top: 1px;
}

.extensions-form > .form-buttons > .choice > label {
position: absolute;
top: 50%;
margin-top: -50%;
left: 20px;
}

.system-info {
Expand All @@ -212,11 +213,18 @@ summary {
margin-top: 1em;
}

.caption {
.include-data {
display: inline-block;
position: relative;
}

.include-data > .caption {
display: inline-block;
font-size: 12px;
vertical-align: middle;
height: 18px;
position: absolute;
width: 80px;
top: 2px;
left: 30px;
}

.sendData {
Expand Down Expand Up @@ -245,14 +253,9 @@ input:disabled {
margin-top: .5em;
}

.workbenchCommand {
padding: 0;
font-size: 12px;
background: transparent;
}

.workbenchCommand:disabled {
color: #868e96;
cursor: pointer;
}

.block-extensions .block-info {
Expand Down Expand Up @@ -281,4 +284,55 @@ a {
button {
background-color: #007ACC;
color: #fff;
}

#issue-type-label {
width: 95px;
}

#issue-type {
width: calc(100% - 100px);
}

#issue-title-label {
width: 80px;
display: inline-block;
}

#issue-title {
width: calc(100% - 85px);
}


@media (max-width: 950px) {
#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);
}
}

@media (max-width: 620px) {
#issue-title-label, #issue-type-label {
display: none !important;
}

#issue-type, #issue-title {
width: 100%;
}

#similar-issues {
margin-left: 0;
}
}
4 changes: 3 additions & 1 deletion src/vs/platform/issue/electron-main/issueService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export class IssueService implements IIssueService {
this._issueWindow = new BrowserWindow({
width: position.width,
height: position.height,
minWidth: 300,
minHeight: 200,
x: position.x,
y: position.y,
title: localize('issueReporter', "Issue Reporter"),
Expand Down Expand Up @@ -95,7 +97,7 @@ export class IssueService implements IIssueService {
}

let state = {
width: 750,
width: 800,
height: 900,
x: undefined,
y: undefined
Expand Down

0 comments on commit 0c7afa8

Please sign in to comment.