Issue Reporter: Differentiate between open and closed GitHub issues, m…

…icrosoft#43549
gushuro · Feb 14, 2018 · 875706b · 875706b
1 parent d917cc6
commit 875706b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/src/vs/code/electron-browser/issue/issueReporterMain.ts b/src/vs/code/electron-browser/issue/issueReporterMain.ts
@@ -39,12 +39,14 @@ import { ILocalExtension } from 'vs/platform/extensionManagement/common/extensio
 import { createSpdLogService } from 'vs/platform/log/node/spdlogService';
 import { LogLevelSetterChannelClient, FollowerLogService } from 'vs/platform/log/common/logIpc';
 import { ILogService, getLogLevel } from 'vs/platform/log/common/log';
+import { OcticonLabel } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
 
 const MAX_URL_LENGTH = 5400;
 
 interface SearchResult {
 	html_url: string;
 	title: string;
+	state?: string;
 }
 
 export interface IssueReporterConfiguration extends IWindowConfiguration {
@@ -142,7 +144,7 @@ export class IssueReporter extends Disposable {
 		const content: string[] = [];
 
 		if (styles.inputBackground) {
-			content.push(`input[type="text"], textarea, select { background-color: ${styles.inputBackground}; }`);
+			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state { background-color: ${styles.inputBackground}; }`);
 		}
 
 		if (styles.inputBorder) {
@@ -152,7 +154,7 @@ export class IssueReporter extends Disposable {
 		}
 
 		if (styles.inputForeground) {
-			content.push(`input[type="text"], textarea, select { color: ${styles.inputForeground}; }`);
+			content.push(`input[type="text"], textarea, select, .issues-container > .issue > .issue-state { color: ${styles.inputForeground}; }`);
 		}
 
 		if (styles.inputErrorBorder) {
@@ -513,18 +515,37 @@ export class IssueReporter extends Disposable {
 	private displaySearchResults(results: SearchResult[]) {
 		const similarIssues = document.getElementById('similar-issues');
 		if (results.length) {
-			const issues = $('ul.issues-container');
+			const hasIssueState = results.every(result => !!result.state);
+			const issues = hasIssueState ? $('div.issues-container') : $('ul.issues-container');
 			const issuesText = $('div.list-title');
 			issuesText.textContent = localize('similarIssues', "Similar issues");
 
 			const numResultsToDisplay = results.length < 5 ? results.length : 5;
 			for (let i = 0; i < numResultsToDisplay; i++) {
-				const link = $('a', { href: results[i].html_url });
-				link.textContent = results[i].title;
+				const issue = results[i];
+				const link = issue.state ? $('a.issue-link', { href: issue.html_url }) : $('a', { href: issue.html_url });
+				link.textContent = issue.title;
+				link.title = issue.title;
 				link.addEventListener('click', (e) => this.openLink(e));
 				link.addEventListener('auxclick', (e) => this.openLink(<MouseEvent>e));
 
-				const item = $('li.issue', {}, link);
+				let issueState: HTMLElement;
+				if (issue.state) {
+					issueState = $('span.issue-state');
+
+					const issueIcon = $('span.issue-icon');
+					const octicon = new OcticonLabel(issueIcon);
+					octicon.text = issue.state === 'open' ? '$(issue-opened)' : '$(issue-closed)';
+
+					const issueStateLabel = $('span.issue-state.label');
+					issueStateLabel.textContent = issue.state === 'open' ? localize('open', "Open") : localize('closed', "Closed");
+
+					issueState.title = issue.state === 'open' ? localize('open', "Open") : localize('closed', "Closed");
+					issueState.appendChild(issueIcon);
+					issueState.appendChild(issueStateLabel);
+				}
+
+				const item = issue.state ? $('div.issue', {}, issueState, link) : $('li.issue', {}, link);
 				issues.appendChild(item);
 			}
 

diff --git a/src/vs/code/electron-browser/issue/media/issueReporter.css b/src/vs/code/electron-browser/issue/media/issueReporter.css
@@ -362,6 +362,39 @@ button {
 	overflow-y: auto;
 }
 
-.issues-container > .issue {
+div.issues-container {
+	margin-left: 1.5em;
+}
+
+.issues-container > li.issue {
 	padding: 1px 0;
+}
+
+.issues-container > .issue {
+	padding: 4px 0;
+}
+
+.issues-container > .issue > .issue-link {
+	display: inline-block;
+	width: calc(100% - 82px);
+	height: 22px;
+	line-height: 22px;
+	overflow: hidden;
+}
+
+.issues-container > .issue > .issue-state {
+	width: 77px;
+	height: 22px;
+	padding: 3px 6px;
+	margin-right: 5px;
+	color: #CCCCCC;
+	background-color: #3c3c3c;
+	text-align: center;
+	border-radius: .25rem;
+	display: inline-block;
+	vertical-align: top;
+}
+
+.issues-container > .issue > .issue-state .octicon {
+	padding-right: 5px;
 }