From 4b106d07d1f8ea34286c2d08a2ca0c6901fe7684 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 2 Mar 2019 14:37:12 -0500
Subject: [PATCH] get errors and warnings out of the way of the code, finally

---
 site/src/components/Repl/CodeMirror.svelte    | 35 +--------
 .../components/Repl/Input/ModuleEditor.svelte | 71 +++++++++++++++----
 site/src/components/Repl/Output/index.svelte  |  2 -
 site/src/components/Repl/index.svelte         |  4 +-
 4 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
index a607b51251..839665bbc6 100644
--- a/site/src/components/Repl/CodeMirror.svelte
+++ b/site/src/components/Repl/CodeMirror.svelte
@@ -20,9 +20,7 @@
 	export let mode;
 	export let code;
 	export let readonly = false;
-	export let error = null;
 	export let errorLoc = null;
-	export let warningCount = 0;
 	export let flex = false;
 	export let lineNumbers = true;
 	export let tab = true;
@@ -200,8 +198,7 @@
 		background-color: rgba(200, 0, 0, .05);
 	}
 
-	.loading,
-	.error {
+	.loading {
 		text-align: center;
 		color: #999;
 		font-weight: 400;
@@ -245,13 +242,6 @@
 	}
 </style>
 
-<!--
------------------------------------------------
-	syntax-highlighting [prism]
-	NOTE
-	- just started to transfer colors from prism to codemirror
------------------------------------------------
--->
 <div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
 	<textarea
 		tabindex='2'
@@ -260,29 +250,6 @@
 		value={code}
 	></textarea>
 
-	{#if error}
-		<p class='error message'>
-			{#if error.loc}
-				<strong>
-					{#if error.filename}
-						<span
-							class='filename'
-							on:click="{() => navigate({ filename: error.filename })}"
-						>{error.filename}</span>
-					{/if}
-
-					({error.loc.line}:{error.loc.column})
-				</strong>
-			{/if}
-
-			{error.message}
-		</p>
-	{:else if warningCount > 0}
-		<p class='warning message'>
-			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
-		</p>
-	{/if}
-
 	{#if !CodeMirror}
 		<pre style="position: absolute; left: 0; top: 0"
 		>{code}</pre>
diff --git a/site/src/components/Repl/Input/ModuleEditor.svelte b/site/src/components/Repl/Input/ModuleEditor.svelte
index 13a741732c..37e0461255 100644
--- a/site/src/components/Repl/Input/ModuleEditor.svelte
+++ b/site/src/components/Repl/Input/ModuleEditor.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte';
 	import CodeMirror from '../CodeMirror.svelte';
 
-	const { selected, handle_change } = getContext('REPL');
+	const { selected, handle_change, navigate } = getContext('REPL');
 
 	export let error;
 	export let errorLoc;
@@ -13,10 +13,49 @@
 	.editor-wrapper {
 		z-index: 5;
 		background: var(--back-light);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.editor {
+		height: 0;
+		flex: 1;
+	}
+
+	.info p {
+		position: relative;
+		color: white;
+		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
+		font: 400 1.2rem/1.7 var(--font);
+		margin: 0;
+		border-top: 1px solid white;
+	}
+
+	.info p::before {
+		content: '!';
+		position: absolute;
+		left: 1.2rem;
+		top: 1.1rem;
+		width: 1rem;
+		height: 1rem;
+		text-align: center;
+		line-height: 1;
+		padding: .4rem;
+		border-radius: 50%;
+		color: white;
+		border: .2rem solid white;
+	}
+
+	.error {
+		background-color: #da106e;
+	}
+
+	.warning {
+		background-color: #e47e0a;
 	}
 
 	@media (min-width: 600px) {
-		.editor-wrapper {
+		.editor-wrapper.columns {
 			/* make it easier to interact with scrollbar */
 			padding-right: 8px;
 			height: auto;
@@ -26,14 +65,22 @@
 </style>
 
 <div class="editor-wrapper">
-	{#if $selected}
-		<CodeMirror
-			mode="{$selected.type === 'js' ? 'javascript' : 'handlebars'}"
-			code={$selected.source}
-			{error}
-			{errorLoc}
-			{warningCount}
-			on:change={handle_change}
-		/>
-	{/if}
+	<div class="editor">
+		{#if $selected}
+			<CodeMirror
+				mode="{$selected.type === 'js' ? 'javascript' : 'handlebars'}"
+				code={$selected.source}
+				{errorLoc}
+				on:change={handle_change}
+			/>
+		{/if}
+	</div>
+
+	<div class="info">
+		{#if error}
+			<p class="error" on:click="{() => navigate(error)}">{error.message}</p>
+		{:else if warningCount > 0}
+			<p class="warning">Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details</p>
+		{/if}
+	</div>
 </div>
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
index 01086ede34..1af5f543c1 100644
--- a/site/src/components/Repl/Output/index.svelte
+++ b/site/src/components/Repl/Output/index.svelte
@@ -170,7 +170,6 @@
 	<CodeMirror
 		mode="javascript"
 		code="{view === 'js' ? js : css}"
-		error={sourceError}
 		errorLoc={sourceErrorLoc}
 		readonly
 	/>
@@ -180,7 +179,6 @@
 			<CodeMirror
 				mode="javascript"
 				code="{view === 'js' ? js : css}"
-				error={sourceError}
 				errorLoc={sourceErrorLoc}
 				readonly
 			/>
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index d26e2e542d..4f76a23267 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -11,7 +11,7 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
 	export let embedded = false;
-	export let orientation = 'auto';
+	export let orientation = 'columns';
 	export let show_props = true;
 
 	export function toJSON() {
@@ -262,7 +262,7 @@
 	}
 </style>
 
-<div class="container" bind:clientWidth={width}>
+<div class="container" class:orientation bind:clientWidth={width}>
 	<div class="repl-inner" class:offset="{show_output}">
 		<SplitPane
 			type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"