From 71e069dec1d7c11e304a2bcef91b657755b1df79 Mon Sep 17 00:00:00 2001 From: Joe Walker Date: Mon, 13 Dec 2010 14:39:32 +0000 Subject: [PATCH] rename plain to cliView, have max height on console output and fix scroll to bottom --- plugins/cockpit/lib/index.js | 2 +- .../cockpit/lib/ui/{plain.css => cliView.css} | 12 +++---- .../cockpit/lib/ui/{plain.js => cliView.js} | 31 ++++++++++++++----- plugins/cockpit/lib/ui/requestView.js | 11 +++---- 4 files changed, 34 insertions(+), 22 deletions(-) rename plugins/cockpit/lib/ui/{plain.css => cliView.css} (96%) rename plugins/cockpit/lib/ui/{plain.js => cliView.js} (91%) diff --git a/plugins/cockpit/lib/index.js b/plugins/cockpit/lib/index.js index 7717e118..0691621e 100644 --- a/plugins/cockpit/lib/index.js +++ b/plugins/cockpit/lib/index.js @@ -42,7 +42,7 @@ exports.startup = function(data, reason) { window.testCli = require('cockpit/test/testCli'); require('cockpit/ui/settings').startup(data, reason); - require('cockpit/ui/plain').startup(data, reason); + require('cockpit/ui/cliView').startup(data, reason); }; /* diff --git a/plugins/cockpit/lib/ui/plain.css b/plugins/cockpit/lib/ui/cliView.css similarity index 96% rename from plugins/cockpit/lib/ui/plain.css rename to plugins/cockpit/lib/ui/cliView.css index dfb47463..28bdd72d 100644 --- a/plugins/cockpit/lib/ui/plain.css +++ b/plugins/cockpit/lib/ui/cliView.css @@ -4,6 +4,7 @@ border: none; outline: none; font-family: consolas, courier, monospace; font-size: 120%; + padding-left: 16px; } .cptOutput { @@ -14,7 +15,7 @@ padding: 10px; margin: 0 15px; background: #DDD; color: #000; - overflow: hidden; + overflow: auto; position: absolute; z-index: 999; font-family: consolas, courier, monospace; @@ -26,7 +27,7 @@ } .cptCompletion { - color: #666; + color: #999; padding: 0 0 5px 2px; position: absolute; z-index: -1000; @@ -65,6 +66,7 @@ .cptCompletion span.INCOMPLETE { color: #DDD; border-bottom: 2px dotted #F80; } .cptCompletion span.INVALID { color: #DDD; border-bottom: 2px dotted #F00; } +span.cptPrompt { color: #66F; font-weight: bold; } @@ -142,12 +144,6 @@ height: 25px; right: 0; bottom: 0; left: 0; } -.cptPrompt { - width: 40px; padding-left: 5px; - position: absolute; - top: 0; width: 40px; bottom: 0; left: 0; -} - .cptKbd { position: absolute; top: 0; right: 0; bottom: 0; left: 40px; diff --git a/plugins/cockpit/lib/ui/plain.js b/plugins/cockpit/lib/ui/cliView.js similarity index 91% rename from plugins/cockpit/lib/ui/plain.js rename to plugins/cockpit/lib/ui/cliView.js index fc4805d6..f207d58f 100644 --- a/plugins/cockpit/lib/ui/plain.js +++ b/plugins/cockpit/lib/ui/cliView.js @@ -38,7 +38,7 @@ define(function(require, exports, module) { -var editorCss = require("text!cockpit/ui/plain.css"); +var editorCss = require("text!cockpit/ui/cliView.css"); var dom = require("pilot/dom").dom; dom.importCssString(editorCss); @@ -61,7 +61,7 @@ var NO_HINT = new Hint(Status.VALID, '', 0, 0); * 2. Attach a set of events so the command line works */ exports.startup = function(data, reason) { - var plainUi = new CliView(data); + var cliView = new CliView(data); }; /** @@ -74,7 +74,7 @@ function CliView(data) { // TODO: we should have a better way to specify command lines??? this.element = this.doc.getElementById('cockpit'); if (!this.element) { - console.log('No element with an id of cockpit. Bailing on plain cli'); + console.log('No element with an id of cockpit. Bailing on cli'); return; } @@ -88,6 +88,7 @@ function CliView(data) { this.hints = []; this.createElements(); + this.update(); } CliView.prototype = { /** @@ -113,6 +114,12 @@ CliView.prototype = { this.outputDirection.addEventListener('change', this.resizer.bind(this)); this.resizer(); + var setMaxOutputHeight = function() { + this.output.style.maxHeight = this.outputHeight.get() + 'px'; + }.bind(this); + this.outputHeight.addEventListener('change', setMaxOutputHeight); + setMaxOutputHeight(); + canon.addEventListener('output', function(ev) { new RequestView(ev.request, this); }.bind(this)); @@ -125,6 +132,16 @@ CliView.prototype = { }.bind(this), false); }, + /** + * We need to see the output of the latest command entered + */ + scrollOutputToBottom: function() { + // Certain browsers have a bug such that scrollHeight is too small + // when content does not fill the client area of the element + var scrollHeight = Math.max(this.output.scrollHeight, this.output.clientHeight); + this.output.scrollTop = scrollHeight - this.output.clientHeight; + }, + /** * To be called on window resize or any time we want to align the elements * with the input box. @@ -146,7 +163,7 @@ CliView.prototype = { this.hinter.style.bottom = (this.win.innerHeight - rect.top) + 'px'; } this.hinter.style.left = (rect.left + 30) + 'px'; - this.hinter.style.maxWidth = (rect.width - 90) + 'px'; + this.hinter.style.maxWidth = (rect.width - 110) + 'px'; if (this.outputDirection.get() === 'below') { this.output.style.top = rect.bottom + 'px'; @@ -157,7 +174,7 @@ CliView.prototype = { this.output.style.bottom = (this.win.innerHeight - rect.top) + 'px'; } this.output.style.left = rect.left + 'px'; - this.output.style.width = (rect.width - 60) + 'px'; + this.output.style.width = (rect.width - 80) + 'px'; }, /** @@ -240,7 +257,7 @@ CliView.prototype = { this.hints = this.cli.getHints(); // Create a marked up version of the input - var highlightedInput = ''; + var highlightedInput = '> '; if (this.element.value.length > 0) { // 'scores' is an array which tells us what chars are errors // Initialize with everything VALID @@ -292,7 +309,7 @@ CliView.prototype = { var onTab = display.predictions[0]; onTab = onTab.name ? onTab.name : onTab; - this.completer.innerHTML = highlightedInput + '  → ' + onTab; + this.completer.innerHTML = highlightedInput + '  ⇥ ' + onTab; } else { this.completer.innerHTML = highlightedInput; diff --git a/plugins/cockpit/lib/ui/requestView.js b/plugins/cockpit/lib/ui/requestView.js index 83aa6c7c..1a3f8292 100644 --- a/plugins/cockpit/lib/ui/requestView.js +++ b/plugins/cockpit/lib/ui/requestView.js @@ -40,18 +40,18 @@ define(function(require, exports, module) { var util = require('pilot/util'); -var editorCss = require("text!cockpit/ui/requestView.css"); +var requestViewCss = require("text!cockpit/ui/requestView.css"); var dom = require("pilot/dom").dom; -dom.importCssString(editorCss); +dom.importCssString(requestViewCss); -var plainRow = require("text!cockpit/ui/requestView.html"); +var requestViewHtml = require("text!cockpit/ui/requestView.html"); var Templater = require("pilot/domtemplate").Templater; /** * Pull the HTML into the DOM, but don't add it to the document */ var templates = document.createElement('div'); -templates.innerHTML = plainRow; +templates.innerHTML = requestViewHtml; var row = templates.querySelector('.cptRow'); /** @@ -138,8 +138,7 @@ RequestView.prototype = { } this.output.appendChild(node); }, this); - // TODO: Fix this - // this.cliView.scrollToBottom(); + this.cliView.scrollOutputToBottom(); util.setClass(this.output, 'cmd_error', this.request.error);