From 1b9ff1b0e2571e79cc2caa1587878ae66f4bb708 Mon Sep 17 00:00:00 2001
From: Shawn Bruce <kantlivelong@gmail.com>
Date: Sun, 9 Jul 2017 22:58:35 -0400
Subject: [PATCH] Move terminal command below terminal output and fill the row
 Clicking terminal output (excluding highlighting) will set focus to terminal
 command Change fancy functionality style from muted to warning so that it
 stands out more

---
 .../static/js/app/viewmodels/terminal.js        | 10 ++++++++++
 src/octoprint/templates/tabs/terminal.jinja2    | 17 ++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/octoprint/static/js/app/viewmodels/terminal.js b/src/octoprint/static/js/app/viewmodels/terminal.js
index 4fdd47e7..d154beb4 100644
--- a/src/octoprint/static/js/app/viewmodels/terminal.js
+++ b/src/octoprint/static/js/app/viewmodels/terminal.js
@@ -272,6 +272,16 @@ $(function() {
             }
         };
 
+        self.gotoTerminalCommand = function() {
+            // skip if user highlights text.
+            var sel = getSelection().toString();
+            if (sel) {
+                return;
+            }
+
+            $("#terminal-command").focus();
+        };
+
         self.toggleAutoscroll = function() {
             self.autoscrollEnabled(!self.autoscrollEnabled());
         };
diff --git a/src/octoprint/templates/tabs/terminal.jinja2 b/src/octoprint/templates/tabs/terminal.jinja2
index b1fd588f..6f8df141 100644
--- a/src/octoprint/templates/tabs/terminal.jinja2
+++ b/src/octoprint/templates/tabs/terminal.jinja2
@@ -1,9 +1,15 @@
 <div class="terminal">
-    <pre id="terminal-output" class="pre-scrollable pre-output" data-bind="foreach: displayedLines, visible: fancyFunctionality()"><span data-bind="text: line, css: {muted: type == 'filtered' || type == 'cut'}"></span></pre>
+    <pre id="terminal-output" class="pre-scrollable pre-output" data-bind="foreach: displayedLines, visible: fancyFunctionality(), click: function(){ gotoTerminalCommand(); }"><span data-bind="text: line, css: {muted: type == 'filtered' || type == 'cut'}"></span></pre>
     <pre id="terminal-output-lowfi" style="display: none" class="pre-scrollable" data-bind="text: plainLogOutput, visible: !fancyFunctionality()"></pre>
+    <div class="row" id="terminal-sendpanel" style="display: none;" data-bind="visible: loginState.isUser">
+        <div class="input-append">
+            <input type="text" id="terminal-command" style="width:516px" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()" autocomplete="off">
+            <button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
+        </div>
+    </div>
     <small class="pull-left" data-bind="visible: fancyFunctionality()"><button class="btn btn-mini" data-bind="click: toggleAutoscroll, css: {active: autoscrollEnabled}">{{ _('Autoscroll') }}</button> <span data-bind="text: lineCount, visible: enableFancyFunctionality"></span></small>
     <small class="pull-right" data-bind="visible: fancyFunctionality()"><a href="#" data-bind="click: scrollToEnd">{{ _("Scroll to end") }}</a>&nbsp;|&nbsp;<a href="#" data-bind="click: selectAll">{{ _("Select all") }}</a></small>
-    <small class="pull-left muted" data-bind="visible: !fancyFunctionality()" style="display: none">{{ _('For performance reasons only a limited amount of terminal functionality is enabled right now.') }}</small>
+    <small class="pull-left text-warning" data-bind="visible: !fancyFunctionality()" style="display: none">{{ _('For performance reasons only a limited amount of terminal functionality is enabled right now.') }}</small>
 </div>
 
 <div class="row-fluid">
@@ -14,13 +20,6 @@
             </label>
         </div>
     </div>
-    <div class="span6" id="terminal-sendpanel" style="display: none;" data-bind="visible: loginState.isUser">
-        <div class="input-append">
-            <input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()" autocomplete="off">
-            <button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
-        </div>
-        <small class="muted">{{ _('Hint: Use the arrow up/down keys to recall commands sent previously') }}</small>
-    </div>
 </div>
 
 <div>