Merge pull request #349 from afshin/console-prompt

Reorganize and realign the console CSS.

src/console/base.css

@@ -0,0 +1,15 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2016, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-Console-panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+
+.p-Widget.jp-Console {
+  overflow: auto;
+}

src/console/widget.ts

@@ -409,6 +409,9 @@ class ConsoleWidget extends Widget {
     // Associate the new prompt with the completion handler.
     this._completionHandler.activeCell = prompt;
 
+    // Jump to the bottom of the node.
+    this.node.scrollTop = this.node.scrollHeight;
+
     prompt.focus();
   }
 

src/default-theme/completion.css

@@ -0,0 +1,33 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-Completion-item {
+  margin: 0;
+  min-width: 150px;
+  padding: 0 2px;
+}
+
+
+.jp-Completion-item:nth-child(odd) {
+  background: #FFFFFF;
+}
+
+
+.jp-Completion-item.jp-mod-active {
+  background: #BFBFBF;
+}
+
+
+.jp-Completion-item code {
+  font-size: 14px;
+  line-height: 25px;
+}
+
+
+.jp-Completion-item mark {
+  font-weight: bold;
+  text-decoration: underline;
+  background: inherit;
+  color: inherit;
+}

src/default-theme/console.css

@@ -0,0 +1,177 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-Console {
+  height: 100%;
+  padding: 0 10px 20px 10px;
+}
+
+
+.jp-Console .jp-Cell {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+
+.jp-Console .jp-InputArea-editor.jp-CellEditor {
+  background: transparent;
+  border-color: transparent;
+}
+
+
+.jp-Console-prompt {
+  border-color: #66BB6A;
+  border-left-width: 1px;
+  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-Console .jp-InputArea-prompt {
+  flex-basis: auto;
+  text-align: left;
+}
+
+
+.jp-Console .jp-Output-prompt {
+  flex-basis: auto;
+  text-align: left;
+}
+
+
+.jp-Console .jp-Output pre {
+  border: none;
+  margin: 1px 0 0 5px;
+  overflow-x: auto;
+  overflow-y: auto;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+
+.jp-Console .jp-Console-banner .jp-InputArea-prompt {
+  display: none;
+}
+
+
+.jp-ConsoleTooltip {
+  position: absolute;
+  background: #FFFFCA;
+  border: 1px solid #000000;
+  z-index: 10001;
+}
+
+.jp-ConsoleTooltip pre {
+  margin: 0;
+  padding: 2px;
+}
+
+
+/* ansi_up creates classed spans for console foregrounds and backgrounds. */
+.jp-ConsoleTooltip pre .ansi-black-fg { color: #3A3A3A; }
+
+
+.jp-ConsoleTooltip pre .ansi-red-fg { color: #DD948E; }
+
+
+.jp-ConsoleTooltip pre .ansi-green-fg { color: #B6D1AA; }
+
+
+.jp-ConsoleTooltip pre .ansi-yellow-fg { color: #F3D57C; }
+
+
+.jp-ConsoleTooltip pre .ansi-blue-fg { color: #8AA9D5; }
+
+
+.jp-ConsoleTooltip pre .ansi-magenta-fg { color: #CBAFD5; }
+
+
+.jp-ConsoleTooltip pre .ansi-cyan-fg { color: #9AD1D4; }
+
+
+.jp-ConsoleTooltip pre .ansi-white-fg { color: #EFEFEF; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-black-fg { color: #5E5D5E; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-red-fg { color: #E69B94; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-green-fg { color: #D1F0C3; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-yellow-fg { color: #F4D799; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-blue-fg { color: #A6CBFE; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-magenta-fg { color: #E8C8F3; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-cyan-fg { color: #B1F1F6; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-white-fg { color: #FFFFFF; }
+
+
+.jp-ConsoleTooltip pre .ansi-black-bg { background-color: #3B3B3B; }
+
+
+.jp-ConsoleTooltip pre .ansi-red-bg { background-color: #DE958F; }
+
+
+.jp-ConsoleTooltip pre .ansi-green-bg { background-color: #B7D2AB; }
+
+
+.jp-ConsoleTooltip pre .ansi-yellow-bg { background-color: #F4D67D; }
+
+
+.jp-ConsoleTooltip pre .ansi-blue-bg { background-color: #8BAAD6; }
+
+
+.jp-ConsoleTooltip pre .ansi-magenta-bg { background-color: #CCB0D6; }
+
+
+.jp-ConsoleTooltip pre .ansi-cyan-bg { background-color: #9BD2D5; }
+
+
+.jp-ConsoleTooltip pre .ansi-white-bg { background-color: #F0F0F0; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-black-bg { background-color: #5F5E5F; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-red-bg { background-color: #E79C95; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-green-bg { background-color: #D2F1C4; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-yellow-bg { background-color: #F5D89A; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-blue-bg { background-color: #A7CCFF; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-magenta-bg { background-color: #E8C8F3; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-cyan-bg { background-color: #B1F1F6; }
+
+
+.jp-ConsoleTooltip pre .ansi-bright-white-bg { background-color: #FFFFFF; }
+
+
+.jp-Completion {
+  background: #EEEEEE;
+  border: 1px solid #000000;
+  list-style-type: none;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  z-index: 10001;
+}

src/default-theme/index.css

@@ -2,6 +2,7 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+@import url('~jupyterlab/lib/console/base.css');
 @import url('~jupyterlab/lib/notebook/index.css');
 @import url('~jupyterlab/lib/notebook/theme.css');
 @import url('~jupyterlab/lib/index.css');
@@ -11,6 +12,8 @@
 
 @import './about.css';
 @import './commandpalette.css';
+@import './completion.css';
+@import './console.css';
 @import './help.css';
 @import './images.css';
 
@@ -389,13 +392,6 @@ body {
 }
 
 
-.jp-Console-prompt {
-  border-color: #66BB6A;
-  border-left-width: 1px;
-  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
-}
-
-
 .p-Widget.jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
   padding-left: 5px;
   padding-right: 5px;

src/notebook/index.css

@@ -110,15 +110,3 @@
   -webkit-user-select: text;
   -ms-user-select: text;
 }
-
-
-.jp-Console-panel {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-
-.p-Widget.jp-Console {
-  overflow: auto;
-}

src/notebook/theme.css

@@ -100,9 +100,9 @@
 }
 
 
-.jp-Output pre {
+.jp-Notebook .jp-Output pre {
   border: none;
-  margin: 0;
+  margin: 1px 0 0 5px;
   overflow-x: auto;
   overflow-y: auto;
   word-break: break-all;
@@ -310,198 +310,4 @@
   padding: 0;
   border: 0;
   border-radius: 0;
-}
-
-
-.jp-Console {
-  height: 100%;
-}
-
-
-.jp-Console .jp-Cell {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-
-.jp-Console .jp-InputArea-editor.jp-CellEditor {
-  background: transparent;
-  border-color: transparent;
-}
-
-
-.jp-Console .jp-InputArea-prompt {
-  flex-basis: auto;
-  text-align: left;
-}
-
-
-.jp-Console .jp-Output.jp-Output-executeResult > .jp-Output-prompt {
-  flex-basis: auto;
-  text-align: left;
-}
-
-
-.jp-Console .jp-OutputArea pre {
-  border: none;
-  line-height: 25px;
-  margin: 0;
-}
-
-
-.jp-Console .jp-Console-banner .jp-InputArea-prompt {
-  display: none;
-}
-
-
-.jp-ConsoleTooltip {
-  position: absolute;
-  background: #FFFFCA;
-  border: 1px solid #000000;
-  z-index: 10001;
-}
-
-.jp-ConsoleTooltip pre {
-  margin: 0;
-  padding: 2px;
-}
-
-
-/* ansi_up creates classed spans for console foregrounds and backgrounds. */
-.jp-ConsoleTooltip pre .ansi-black-fg { color: #3A3A3A; }
-
-
-.jp-ConsoleTooltip pre .ansi-red-fg { color: #DD948E; }
-
-
-.jp-ConsoleTooltip pre .ansi-green-fg { color: #B6D1AA; }
-
-
-.jp-ConsoleTooltip pre .ansi-yellow-fg { color: #F3D57C; }
-
-
-.jp-ConsoleTooltip pre .ansi-blue-fg { color: #8AA9D5; }
-
-
-.jp-ConsoleTooltip pre .ansi-magenta-fg { color: #CBAFD5; }
-
-
-.jp-ConsoleTooltip pre .ansi-cyan-fg { color: #9AD1D4; }
-
-
-.jp-ConsoleTooltip pre .ansi-white-fg { color: #EFEFEF; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-black-fg { color: #5E5D5E; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-red-fg { color: #E69B94; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-green-fg { color: #D1F0C3; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-yellow-fg { color: #F4D799; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-blue-fg { color: #A6CBFE; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-magenta-fg { color: #E8C8F3; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-cyan-fg { color: #B1F1F6; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-white-fg { color: #FFFFFF; }
-
-
-.jp-ConsoleTooltip pre .ansi-black-bg { background-color: #3B3B3B; }
-
-
-.jp-ConsoleTooltip pre .ansi-red-bg { background-color: #DE958F; }
-
-
-.jp-ConsoleTooltip pre .ansi-green-bg { background-color: #B7D2AB; }
-
-
-.jp-ConsoleTooltip pre .ansi-yellow-bg { background-color: #F4D67D; }
-
-
-.jp-ConsoleTooltip pre .ansi-blue-bg { background-color: #8BAAD6; }
-
-
-.jp-ConsoleTooltip pre .ansi-magenta-bg { background-color: #CCB0D6; }
-
-
-.jp-ConsoleTooltip pre .ansi-cyan-bg { background-color: #9BD2D5; }
-
-
-.jp-ConsoleTooltip pre .ansi-white-bg { background-color: #F0F0F0; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-black-bg { background-color: #5F5E5F; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-red-bg { background-color: #E79C95; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-green-bg { background-color: #D2F1C4; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-yellow-bg { background-color: #F5D89A; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-blue-bg { background-color: #A7CCFF; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-magenta-bg { background-color: #E8C8F3; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-cyan-bg { background-color: #B1F1F6; }
-
-
-.jp-ConsoleTooltip pre .ansi-bright-white-bg { background-color: #FFFFFF; }
-
-
-.jp-Completion {
-  background: #EEEEEE;
-  border: 1px solid #000000;
-  list-style-type: none;
-  margin: 0;
-  overflow: auto;
-  padding: 0;
-  position: absolute;
-  z-index: 10001;
-}
-
-
-.jp-Completion-item {
-  margin: 0;
-  min-width: 150px;
-  padding: 0 2px;
-}
-
-
-.jp-Completion-item:nth-child(odd) {
-  background: #FFFFFF;
-}
-
-
-.jp-Completion-item.jp-mod-active {
-  background: #BFBFBF;
-}
-
-
-.jp-Completion-item code {
-  font-size: 14px;
-  line-height: 25px;
-}
-
-
-.jp-Completion-item mark {
-  font-weight: bold;
-  text-decoration: underline;
-  background: inherit;
-  color: inherit;
-}
+}