roc-lang/roc
1
1
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2024-09-21 15:59:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

repl_www: Improved UI for multiline input

Browse Source
This commit is contained in:
Brian Carroll 2022-03-03 23:13:56 +00:00
parent 485cbb4bd1
commit 79b65347fa
3 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
repl_www/public/repl.css
View File

@ -64,9 +64,7 @@ section.source {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
section.source textarea { section.source textarea {
height: 32px;
padding: 8px; padding: 8px;
margin-bottom: 16px; margin-bottom: 16px;
} }

6
repl_www/public/repl.js
View File

@ -82,7 +82,9 @@ function onInputKeyup(event) {
break; break;
case ENTER: case ENTER:
if (!event.shiftKey) {
onInputChange({ target: repl.elemSourceInput }); onInputChange({ target: repl.elemSourceInput });
}
break; break;
default: default:
@ -168,8 +170,8 @@ function createHistoryEntry(inputText) {
const historyIndex = repl.inputHistory.length; const historyIndex = repl.inputHistory.length;
repl.inputHistory.push(inputText); repl.inputHistory.push(inputText);
const inputElem = document.createElement("div"); const inputElem = document.createElement("pre");
inputElem.textContent = "> " + inputText; inputElem.textContent = inputText;
inputElem.classList.add("input"); inputElem.classList.add("input");
const historyItem = document.createElement("div"); const historyItem = document.createElement("div");

18
repl_www/public/repl/index.html
View File

@ -1,13 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Roc REPL</title> <title>Roc REPL</title>
<link rel="stylesheet" href="/repl.css" /> <link rel="stylesheet" href="/repl.css" />
</head> </head>
<body> <body>
<div class="body-wrapper"> <div class="body-wrapper">
<section class="text"> <section class="text">
<h1>The rockin' Roc REPL</h1> <h1>The rockin' Roc REPL</h1>
@ -20,10 +19,15 @@
</section> </section>
<section class="source"> <section class="source">
<textarea autofocus id="source-input" class="code" placeholder="Type some Roc code and press Enter"></textarea> <textarea
rows="5"
autofocus
id="source-input"
class="code"
placeholder="Type some Roc code and press Enter"
></textarea>
</section> </section>
</div> </div>
<script type="module" src="/repl.js"></script> <script type="module" src="/repl.js"></script>
</body> </body>
</html> </html>