mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-02 18:54:27 +02:00
AMAZING now command prompt is looking badass
This commit is contained in:
parent
23ee6944e2
commit
986a2162af
3 changed files with 63 additions and 9 deletions
|
@ -3,13 +3,28 @@ var CommandPromptView = Backbone.View.extend({
|
|||
this.collection = options.collection;
|
||||
this.commands = [];
|
||||
this.index = -1;
|
||||
|
||||
this.commandSpan = this.$('#prompt span.command')[0];
|
||||
|
||||
// this is evil, but we will refer to HTML outside the document
|
||||
// and attach a click event listener
|
||||
$(document).delegate('#commandLineHistory', 'click', _.bind(function() {
|
||||
this.focus();
|
||||
}, this));
|
||||
},
|
||||
|
||||
events: {
|
||||
'keyup #commandTextField': 'keyUp'
|
||||
},
|
||||
|
||||
focus: function() {
|
||||
this.$('#commandTextField').focus();
|
||||
},
|
||||
|
||||
keyUp: function(e) {
|
||||
var el = e.srcElement;
|
||||
this.updatePrompt(el)
|
||||
|
||||
// we need to capture some of these events.
|
||||
// WARNING: this key map is not internationalized :(
|
||||
var keyMap = {
|
||||
|
@ -30,9 +45,24 @@ var CommandPromptView = Backbone.View.extend({
|
|||
if (keyMap[e.which] !== undefined) {
|
||||
e.preventDefault();
|
||||
keyMap[e.which]();
|
||||
this.updatePrompt(el);
|
||||
}
|
||||
},
|
||||
|
||||
updatePrompt: function(el) {
|
||||
// i WEEEPPPPPPpppppppppppp that this reflow takes so long. it adds this
|
||||
// super annoying delay to every keystroke... I have tried everything
|
||||
// to make this more performant. getting the srcElement from the event,
|
||||
// getting the value directly from the dom, etc etc. yet still,
|
||||
// there's a very annoying and sightly noticeable command delay.
|
||||
// try.github.com also has this, so I'm assuming those engineers gave up as
|
||||
// well...
|
||||
|
||||
var val = el.value;
|
||||
this.commandSpan.innerText = val;
|
||||
//console.log(val, el.selectionStart, el.selectionEnd);
|
||||
},
|
||||
|
||||
commandSelectChange: function(delta) {
|
||||
this.index += delta;
|
||||
|
||||
|
@ -103,7 +133,6 @@ var CommandView = Backbone.View.extend({
|
|||
},
|
||||
|
||||
clicked: function(e) {
|
||||
console.log('was clicked');
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
|
|
|
@ -41,12 +41,16 @@
|
|||
<div id="commandDisplay" class="box vertical flex1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="commandLineBar" class="box vertical flex0">
|
||||
<div id="prompt">
|
||||
<span class="promptSign">$</span>
|
||||
<span class="command"></span>
|
||||
</div>
|
||||
<textarea id="commandTextField"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="canvasWrapper" class="box flex1 horizontal">
|
||||
</div>
|
||||
|
|
|
@ -85,7 +85,6 @@ div.horizontal {
|
|||
|
||||
#controls {
|
||||
max-width: 400px;
|
||||
/* background: #4183C4; */
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
|
@ -253,13 +252,16 @@ p.commandError, p.errorResult {
|
|||
color: red;
|
||||
}
|
||||
|
||||
#commandLineBar #prompt span.promptSign,
|
||||
p.commandLine span.prompt {
|
||||
color: greenyellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#commandLineBar {
|
||||
text-align: center;
|
||||
#commandLineBar #commandTextField {
|
||||
position:fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#commandLineHistory {
|
||||
|
@ -268,11 +270,30 @@ p.commandLine span.prompt {
|
|||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#prompt {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#commandLineBar,
|
||||
#terminal {
|
||||
background: #424242;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3) inset;
|
||||
}
|
||||
|
||||
#terminal {
|
||||
border: 1px solid #6287A4;
|
||||
border-radius: 0 0 5px 5px;
|
||||
border-bottom: 0;
|
||||
|
||||
-webkit-box-align: start;
|
||||
}
|
||||
|
||||
#commandLineBar {
|
||||
border: 1px solid #6287A4;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#commandLineBar {
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue