Merge remote-tracking branch 'origin/master'

client/src/App.css

@@ -1,32 +1,6 @@
-
 .App {
-  width: 80%;
-  display: block;
-  margin: 100px auto;
+  max-width: 1000px;
+  height: 100%;
+  margin: auto;
+  padding: 1em;
 }
-
-.ChatHistory {
-  background-color: lightblue;
-  padding: 10px;
-  overflow-y: scroll;
-  height: 500px;
-}
-
-.ChatHistoryRow {
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 10pt;
-}
-
-.ChatHistoryRow.text {
-  white-space: pre-wrap;
-}
-
-.echo {
-  color: grey;
-  font-style: italic;
-}
-
-.mainInput {
-  width: 80%; 
-  margin-top: 10px;
-}

client/src/Editor.css

@@ -0,0 +1,21 @@
+.Editor {
+    flex: 1;
+}
+
+.Editor .header {
+    background: black;
+    color: white;
+    display: flex;
+    flex-direction: row;
+}
+
+.Editor .header h2 {
+    font-size: 11pt;
+    flex: 1;
+    margin: 2px 10px;
+    font-weight: normal;
+}
+
+.Editor .header button:last-child {
+    margin-left: 1em;
+}

client/src/Editor.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import MonacoEditor from 'react-monaco-editor';
+import './Editor.css';
 
 export type EditFile = {
   name: string,
@@ -10,9 +11,11 @@ type SaveCallback = () => void;
 
 type ChangeCallback = (content: string) => void;
 
-const Editor = (props: {editFile: EditFile, onSave: SaveCallback, onChange: ChangeCallback}) => {
+type CloseCallback = () => void;
+
+const Editor = (props: {editFile: EditFile, onSave: SaveCallback, onChange: ChangeCallback, onClose: CloseCallback}) => {
 
-    const { editFile, onSave, onChange } = props;
+    const { editFile, onSave, onChange, onClose } = props;
 
     const options = {
       selectOnLineNumbers: true
@@ -24,11 +27,13 @@ const Editor = (props: {editFile: EditFile, onSave: SaveCallback, onChange: Chan
 
     return (
       <div className="Editor">
-        <div className="header">Editing file {editFile.name}</div>
-        <button onClick={onSave}>Save</button>
+        <div className="header">
+          <h2>Editing file <strong>{editFile.name}</strong></h2>
+          <button onClick={onSave}>Save</button>
+          <button className="close" onClick={onClose}>Cancel</button>
+        </div>
         <MonacoEditor
-          width="800"
-          height="600"
+          height="100%"
           language="lua"
           theme="vs-dark"
           value={editFile.content}

client/src/InteractionPane.css

@@ -0,0 +1,44 @@
+.InteractionPane {
+    height: 100%;
+    display: flex;
+    flex-direction: column;  
+}
+
+.ChatHistory {
+  background-color: lightblue;
+  padding: 10px;
+  overflow-y: scroll;
+  flex: 1;
+}
+
+  .ChatHistoryRow, .input-bar, .mainInput, .input-bar button {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 10pt;
+  }
+
+  .ChatHistoryRow.text {
+    white-space: pre-wrap;
+  }
+
+  .echo {
+    color: grey;
+  }
+  .echo::before {
+      content: "> ";
+  }
+
+  .input-bar {
+      display: flex;
+      flex-direction: row;
+      background-color: lightblue;
+  }
+  .input-bar .mainInput {
+      flex: 1;
+      border: 0;
+      outline: 0;
+      background: transparent;
+  }
+  .input-bar button {
+      flex: 0 0 auto;
+  }
+

client/src/InteractionPane.tsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import ChatHistory from './ChatHistory';
 import { ToClientMessage, isTellMessage, isBacklogMessage, ChatRowContent, CommandMessage, ReloadCodeMessage, isLogMessage, SaveFileMessage, isEditFileMessage } from './Messages';
 import { ChatSocket } from './ChatSocket';
-import Editor, { EditFile } from './Editor'; 
+import Editor, { EditFile } from './Editor';
+import './InteractionPane.css';
 
 const InteractionPane = (props: {username: string}) => {
   const [text, setText] = useState("");
@@ -11,6 +12,8 @@ const InteractionPane = (props: {username: string}) => {
   const [socket, setSocket] = useState(null as ChatSocket | null);
   const [editFile, setEditFile] = useState(null as EditFile | null);
 
+  const mainInputRef:any = React.createRef();
+
   useEffect(() => {
     const loc = document.location;
     const protocol = loc.protocol === 'https:' ? 'wss' : 'ws';
@@ -69,6 +72,11 @@ const InteractionPane = (props: {username: string}) => {
     }
   }
 
+  const handleEditClose = () => {
+    setEditFile(null);
+    mainInputRef.current.focus();
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.keyCode === 38) {
       // up arrow
@@ -77,15 +85,27 @@ const InteractionPane = (props: {username: string}) => {
     }
   }
 
+  const handleHistoryClick = (e: React.MouseEvent) => {
+    // if the user clicks the chat history, focus the input box, UNLESS
+    // the user is trying to select text!
+    const selection = window.getSelection();
+    if (selection && selection.type === 'Range') return;
+    mainInputRef.current.focus();
+  }
+
   return (
     <div className="InteractionPane">
-      <ChatHistory rows={rows} /> 
-      <form onSubmit={handleSubmit}>
-        <input className="mainInput" autoFocus type="text" value={text} onChange={handleChange} onKeyDown={handleKeyDown} />
+      <ChatHistory rows={rows} onClick={handleHistoryClick} /> 
+      <form className="input-bar" onSubmit={handleSubmit}>
+        <div>&gt;&emsp;</div>
+        <input className="mainInput" autoFocus type="text" value={text} onChange={handleChange} onKeyDown={handleKeyDown} ref={mainInputRef} />
         <input type="submit" disabled={!socket} value="Send" />
       </form>
-      <button onClick={handleReload}>Reload System Code</button>
-      {editFile && <Editor editFile={editFile} onSave={handleEditSave} onChange={handleEditChange} /> }
+      <div className="tool-bar">
+        <button onClick={handleReload}>Reload System Code</button>
+      </div>
+
+      {editFile && <Editor editFile={editFile} onSave={handleEditSave} onChange={handleEditChange} onClose={handleEditClose} /> }
     </div>
   );
 }

client/src/index.css

@@ -1,5 +1,14 @@
-body {
+* {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  padding: 0;
   margin: 0;
+  height: 100%;
+}
+
+body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;