theming - initial "send a smile" work

microsoft · May 9, 2017 · 72e7b8e · 72e7b8e
1 parent bf53bb0
commit 72e7b8e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 42 deletions.
diff --git a/src/vs/workbench/parts/feedback/electron-browser/feedback.ts b/src/vs/workbench/parts/feedback/electron-browser/feedback.ts
@@ -17,6 +17,9 @@ import * as dom from 'vs/base/browser/dom';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import * as errors from 'vs/base/common/errors';
 import { IIntegrityService } from 'vs/platform/integrity/common/integrity';
+import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from "vs/platform/theme/common/themeService";
+import { attachStylerCallback } from "vs/platform/theme/common/styler";
+import { editorWidgetBackground, widgetShadow, inputBorder, inputForeground, inputBackground, inputActiveOptionBorder, editorBackground } from "vs/platform/theme/common/colorRegistry";
 
 export interface IFeedback {
 	feedback: string;
@@ -67,7 +70,8 @@ export class FeedbackDropdown extends Dropdown {
 		options: IFeedbackDropdownOptions,
 		@ITelemetryService protected telemetryService: ITelemetryService,
 		@ICommandService private commandService: ICommandService,
-		@IIntegrityService protected integrityService: IIntegrityService
+		@IIntegrityService protected integrityService: IIntegrityService,
+		@IThemeService private themeService: IThemeService
 	) {
 		super(container, {
 			contextViewProvider: options.contextViewProvider,
@@ -200,6 +204,17 @@ export class FeedbackDropdown extends Dropdown {
 			this.onSubmit();
 		});
 
+		this.toDispose.push(attachStylerCallback(this.themeService, { widgetShadow, editorWidgetBackground, inputBackground, inputForeground, inputBorder, editorBackground }, colors => {
+			$form.style('background-color', colors.editorWidgetBackground);
+			$form.style('box-shadow', colors.widgetShadow ? `0 2px 8px ${colors.widgetShadow}` : null);
+
+			this.feedbackDescriptionInput.style.backgroundColor = colors.inputBackground;
+			this.feedbackDescriptionInput.style.color = colors.inputForeground;
+			this.feedbackDescriptionInput.style.border = `1px solid ${colors.inputBorder || 'transparent'}`;
+
+			$contactUs.style('background-color', colors.editorBackground);
+		}));
+
 		return {
 			dispose: () => {
 				this.feedbackForm = null;
@@ -329,3 +344,12 @@ export class FeedbackDropdown extends Dropdown {
 		this.aliasEnabled = false;
 	}
 }
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+
+	// Sentiment Buttons
+	const inputActiveOptionBorderColor = theme.getColor(inputActiveOptionBorder);
+	if (inputActiveOptionBorderColor) {
+		collector.addRule(`.monaco-shell .feedback-form .sentiment.checked { border: 1px solid ${inputActiveOptionBorderColor}; }`);
+	}
+});
diff --git a/src/vs/workbench/parts/feedback/electron-browser/media/feedback.css b/src/vs/workbench/parts/feedback/electron-browser/media/feedback.css
@@ -36,17 +36,9 @@
 
 .monaco-shell .feedback-form .content .contactus {
 	padding: 10px;
-	border: solid 1px #B4BABF;
-	background-color: #EBF2F9;
 	float: right;
 }
 
-.monaco-shell.vs-dark .feedback-form .content .contactus {
-	border: solid 1px #44444C;
-	background-color: #333337;
-}
-
-
 .monaco-shell .feedback-form .content .channels {
 	margin-top: 5px;
 	font-size: 0.9em;
@@ -148,10 +140,6 @@
 	background-color: #eaeaea;
 }
 
-.monaco-shell .feedback-form .sentiment.checked {
-	border: 1px solid #39F;
-}
-
 /* Statusbar */
 .monaco-shell .statusbar-item > .dropdown.send-feedback {
 	display: inline-block;
@@ -163,11 +151,6 @@
 }
 
 /* Theming */
-.monaco-shell.vs .feedback-form {
-	color: black;
-	background: #F6F6F6;
-}
-
 .monaco-shell .feedback-form h2 {
 	color: #007ACC;
 }
@@ -224,11 +207,6 @@
 	background-color: #E51400;
 }
 
-.monaco-shell.vs-dark .feedback-form {
-	background: #252526;
-	box-shadow: 0 2px 8px #000;
-}
-
 .monaco-shell.vs-dark .feedback-form h2 {
 	color: #75BEFF;
 }
@@ -239,18 +217,11 @@
 }
 
 .monaco-shell.vs-dark .feedback-form .sentiment:hover {
-	background-color: #1e1e1e;
-}
-
-.monaco-shell.vs-dark .feedback-form .sentiment.checked {
-	border-color: #75BEFF;
+	background-color: rgba(30,30,30,0.8);
 }
 
 .monaco-shell.vs-dark .feedback-form .feedback-alias, .monaco-shell.vs-dark .feedback-form .feedback-description {
 	font-family: inherit;
-	border: 1px solid transparent;
-	background-color: #333337;
-	color: #D4D4D4;
 }
 
 .monaco-shell.vs-dark .feedback-form .cancel,
@@ -259,7 +230,7 @@
 }
 
 .monaco-shell.vs-dark .feedback-form .cancel:hover {
-	background-color: #1e1e1e;
+	background-color: rgba(30,30,30,0.8);
 }
 
 .monaco-shell .feedback-form .sentiment.smile {
@@ -312,9 +283,6 @@
 
 .monaco-shell.hc-black .feedback-form .feedback-alias, .monaco-shell.hc-black .feedback-form .feedback-description {
 	font-family: inherit;
-	border: 1px solid #6FC3DF;
-	background-color: #000;
-	color: #D4D4D4;
 }
 
 .monaco-shell.hc-black .feedback-form .content .contactus {
@@ -343,13 +311,6 @@
 	background-color: #0C141F;
 }
 
-.monaco-shell.hc-black .feedback-form .sentiment {
-	border: 1px solid transparent;
-}
-
-.monaco-shell.hc-black .feedback-form .sentiment.checked {
-	border: 1px solid #f38518;
-}
 
 .monaco-shell .feedback-form .infotip {
 	background: none;