Set a beautiful command prompt

Kozea · Mar 18, 2016 · 3c08597 · 3c08597
1 parent 0be8d94
commit 3c08597
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 32 deletions.
diff --git a/server/coffees/_console.coffee b/server/coffees/_console.coffee
diff --git a/server/coffees/_history.coffee b/server/coffees/_history.coffee
@@ -3,7 +3,7 @@ class History extends Log
     super
     @index = -1
     @current = ''
-    @currentPos = null
+    @currentPos = CodeMirror.Pos(0, 0)
 
     try
       @history = JSON.parse(localStorage['history'] or '[]')
@@ -40,4 +40,4 @@ class History extends Log
   reset: ->
     @index = -1
     @current = ''
-    @currentPos = null
+    @currentPos = CodeMirror.Pos(0, 0)
diff --git a/server/coffees/wdb.coffee b/server/coffees/wdb.coffee
@@ -358,7 +358,9 @@ specify a module like `logging.config`.
     $group = $('<div>', class: 'echoed scroll-line')
     @$scrollback.append($group)
     @code($group, data.for, ['for prompted'])
-    @code($group, data.val or '', ['val'], true, null, data.mode)
+    $result = $('<div>', class: 'result')
+    $group.append($result)
+    @code($result, data.val or '', ['val'], true, null, data.mode)
     @done()
 
   rawhtml: (data) ->

diff --git a/server/sass/material.sass b/server/sass/material.sass
@@ -4,13 +4,8 @@
 .source-editor .CodeMirror
   height: calc(50vh - 64px)
 
-.prompt .CodeMirror
-  height: auto
-  border-bottom: 1px solid rgba(0, 0, 0, .1)
-  &.CodeMirror-focused
-    border-bottom: 1px solid rgba(0, 0, 0, .2)
-
 .interpreter
+  position: relative
   height: calc(50vh - 40px)
   overflow: auto
   outline: 0
@@ -31,6 +26,26 @@
     text-decoration: none
     border-bottom: 1px solid rgba(0, 0, 0, .05)
 
+  .prompt, .for
+    margin-left: 26px
+
+    &::before
+      content: '>>>'
+      position: absolute
+      left: 0
+
+  .prompt
+    &:before
+      margin-top: 4px
+      font-family: "Roboto Mono"
+
+    .CodeMirror
+      height: auto
+      border-bottom: 1px solid rgba(0, 0, 0, .1)
+
+      &.CodeMirror-focused
+        border-bottom: 1px solid rgba(0, 0, 0, .2)
+
 .title
   white-space: pre
 
@@ -53,10 +68,6 @@ table
   tbody.closed
     display: none
 
-.prompt
-  width: 100%
-  padding: 0
-
 .duration
   float: right
 

diff --git a/server/wdb_server/static/javascripts/wdb.js b/server/wdb_server/static/javascripts/wdb.js
@@ -354,7 +354,7 @@ History = (function(superClass) {
     History.__super__.constructor.apply(this, arguments);
     this.index = -1;
     this.current = '';
-    this.currentPos = null;
+    this.currentPos = CodeMirror.Pos(0, 0);
     try {
       this.history = JSON.parse(localStorage['history'] || '[]');
     } catch (error) {
@@ -402,7 +402,7 @@ History = (function(superClass) {
   History.prototype.reset = function() {
     this.index = -1;
     this.current = '';
-    return this.currentPos = null;
+    return this.currentPos = CodeMirror.Pos(0, 0);
   };
 
   return History;
@@ -1045,13 +1045,17 @@ Wdb = (function(superClass) {
   };
 
   Wdb.prototype.echo = function(data) {
-    var $group;
+    var $group, $result;
     $group = $('<div>', {
       "class": 'echoed scroll-line'
     });
     this.$scrollback.append($group);
     this.code($group, data["for"], ['for prompted']);
-    this.code($group, data.val || '', ['val'], true, null, data.mode);
+    $result = $('<div>', {
+      "class": 'result'
+    });
+    $group.append($result);
+    this.code($result, data.val || '', ['val'], true, null, data.mode);
     return this.done();
   };
 

diff --git a/server/wdb_server/static/javascripts/wdb/wdb.min.js b/server/wdb_server/static/javascripts/wdb/wdb.min.js
diff --git a/server/wdb_server/static/stylesheets/material.css b/server/wdb_server/static/stylesheets/material.css
@@ -4,13 +4,8 @@
 .source-editor .CodeMirror {
   height: calc(50vh - 64px); }
 
-.prompt .CodeMirror {
-  height: auto;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-  .prompt .CodeMirror.CodeMirror-focused {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
-
 .interpreter {
+  position: relative;
   height: calc(50vh - 40px);
   overflow: auto;
   outline: 0; }
@@ -24,6 +19,20 @@
     display: inline-block;
     text-decoration: none;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
+  .interpreter .prompt, .interpreter .for {
+    margin-left: 26px; }
+    .interpreter .prompt::before, .interpreter .for::before {
+      content: '>>>';
+      position: absolute;
+      left: 0; }
+  .interpreter .prompt:before {
+    margin-top: 4px;
+    font-family: "Roboto Mono"; }
+  .interpreter .prompt .CodeMirror {
+    height: auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+    .interpreter .prompt .CodeMirror.CodeMirror-focused {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
 
 .title {
   white-space: pre; }
@@ -44,10 +53,6 @@ table {
   table tbody.closed {
     display: none; }
 
-.prompt {
-  width: 100%;
-  padding: 0; }
-
 .duration {
   float: right; }