Issue reporter sys info/extensions drop down UX issues, #42564

This commit is contained in:
Rachel Macfarlane
2018-02-06 17:01:01 -08:00
parent b54b329625
commit 153ffd21e6
3 changed files with 28 additions and 12 deletions
@@ -245,6 +245,24 @@ export class IssueReporter extends Disposable {
});
});
const labelElements = document.getElementsByClassName('caption');
for (let i = 0; i < labelElements.length; i++) {
const label = labelElements.item(i);
label.addEventListener('click', (e) => {
e.stopPropagation();
// Stop propgagation not working as expected in this case https://bugs.chromium.org/p/chromium/issues/detail?id=809801
// preventDefault does prevent outer details tag from toggling, so use that and manually toggle the checkbox
e.preventDefault();
const containingDiv = (<HTMLLabelElement>e.target).parentElement;
const checkbox = <HTMLInputElement>containingDiv.firstElementChild;
if (checkbox) {
checkbox.checked = !checkbox.checked;
this.issueReporterModel.update({ [checkbox.id]: !this.issueReporterModel.getData()[checkbox.id] });
}
});
}
document.getElementById('reproducesWithoutExtensions').addEventListener('click', (e) => {
this.issueReporterModel.update({ reprosWithoutExtensions: true });
});
@@ -36,9 +36,8 @@ export default (): string => `
<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>
</input>
<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">
@@ -50,9 +49,8 @@ export default (): string => `
<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>
</input>
<input class="sendData" type="checkbox" id="includeProcessInfo" checked/>
<label class="caption" for="includeProcessInfo">${escape(localize('sendData', "Send my data"))}</label>
</div>
</summary>
<div class="block-info">
@@ -64,9 +62,8 @@ export default (): string => `
<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>
</input>
<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">
@@ -80,9 +77,8 @@ export default (): string => `
<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>
</input>
<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">
@@ -225,6 +225,7 @@ summary {
width: 80px;
top: 2px;
left: 30px;
cursor: pointer;
}
.sendData {
@@ -236,6 +237,7 @@ input[type="checkbox"] {
display: inline-block;
margin-top: 0;
vertical-align: middle;
cursor: pointer;
}
input:disabled {