Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue reporter responsive CSS #43007

Merged
merged 5 commits into from Feb 6, 2018
Merged

Issue reporter responsive CSS #43007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f559845
Fixes #42895
Feb 5, 2018
0c0faf6
Issue reporter responsive CSS
Feb 5, 2018
e5b2ee6
Move 'no' option over slightly
Feb 6, 2018
0279168
Increase width at which labels are hidden
Feb 6, 2018
19e7eaf
Increase the initial width of the reporter to 800
Feb 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 17 additions & 2 deletions src/vs/code/electron-browser/issue/issueReporterMain.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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