Add PREVIEW label, change up text

ddyyff · May 21, 2018 · abc22a9 · abc22a9
1 parent 4ed9641
commit abc22a9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
@@ -32,6 +32,16 @@
 	display: inline;
 }
 
+.settings-editor > .settings-header > .settings-preview-header > .settings-preview-warning {
+	text-align: right;
+	text-transform: uppercase;
+	background: rgba(136, 136, 136, 0.3);
+	border-radius: 2px;
+	font-size: 0.8em;
+	padding: 0 3px;
+	margin-right: 7px;
+}
+
 .settings-editor > .settings-header > .search-container {
 	position: relative;
 }

diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
@@ -204,15 +204,19 @@ export class SettingsEditor2 extends BaseEditor {
 		this.headerContainer = DOM.append(parent, $('.settings-header'));
 
 		const previewHeader = DOM.append(this.headerContainer, $('.settings-preview-header'));
-		const previewLabel = DOM.append(previewHeader, $('span.settings-preview-label'));
-		previewLabel.textContent = localize('previewLabel', "This is a preview of our new settings editor. To open the original editor, ");
+
+		const previewAlert = DOM.append(previewHeader, $('span.settings-preview-warning'));
+		previewAlert.textContent = localize('previewWarning', "Preview");
+
+		const previewTextLabel = DOM.append(previewHeader, $('span.settings-preview-label'));
+		previewTextLabel.textContent = localize('previewLabel', "This is a preview of our new settings editor. You can also ");
 		const openSettingsButton = this._register(new Button(previewHeader, { title: true, buttonBackground: null, buttonHoverBackground: null }));
 		this._register(attachButtonStyler(openSettingsButton, this.themeService, {
 			buttonBackground: Color.transparent.toString(),
 			buttonHoverBackground: Color.transparent.toString(),
 			buttonForeground: 'foreground'
 		}));
-		openSettingsButton.label = localize('openSettingsLabel', "click here");
+		openSettingsButton.label = localize('openSettingsLabel', "open the original editor.");
 		openSettingsButton.element.classList.add('open-settings-button');
 
 		this._register(openSettingsButton.onDidClick(() => this.openSettingsFile()));