mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-27 08:28:50 +02:00
damn! all of git rebasing interactive barebones almost done
This commit is contained in:
Peter Cottle
parent
a5da6f76b8
commit
41d72793ea
5 changed files with 320 additions and 34 deletions
11
src/git.js
11
src/git.js
|
|
@ -864,11 +864,8 @@ GitEngine.prototype.rebaseInteractive = function(targetSource, currentLocation)
|
|||
});
|
||||
}
|
||||
|
||||
console.log(toRebase);
|
||||
|
||||
// now do stuff :D since all our validation checks have passed, we are going to defer animation
|
||||
// and actually launch the dialog
|
||||
|
||||
this.animationQueue.set('defer', true);
|
||||
|
||||
var callback = _.bind(function(userSpecifiedRebase) {
|
||||
|
|
@ -879,9 +876,11 @@ GitEngine.prototype.rebaseInteractive = function(targetSource, currentLocation)
|
|||
this.animationQueue.start();
|
||||
}, this);
|
||||
|
||||
setTimeout(function() {
|
||||
callback(toRebase);
|
||||
}, 2000);
|
||||
new InteractiveRebaseView({
|
||||
callback: callback,
|
||||
toRebase: toRebase,
|
||||
el: $('#dialogHolder')
|
||||
});
|
||||
};
|
||||
|
||||
GitEngine.prototype.rebaseFinish = function(toRebaseRough, stopSet, targetSource, currentLocation) {
|
||||
|
|
|
|||
|
|
@ -57,10 +57,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dialogHolder">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- *******************************************
|
||||
Scripts from here on out
|
||||
****************************************** -->
|
||||
<script src="../lib/jquery-1.8.0.min.js"></script>
|
||||
<script src="../lib/jquery-ui-1.9.0.custom.min.js"></script>
|
||||
<script src="../lib/underscore-min.js"></script>
|
||||
<script src="../lib/backbone-min.js"></script>
|
||||
<script src="../lib/backbone.localStorage-min.js"></script>
|
||||
|
|
@ -88,6 +93,34 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="interactive-rebase-template">
|
||||
<div id="iRebaseDialog" class="wrapper transitionAllSlow">
|
||||
Rebasing <%= num %> Commits
|
||||
<div id="entryHolders">
|
||||
<ul id="rebaseEntries">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a id="confirmButton" class="uiButton uiButtonYellow">
|
||||
Confirm
|
||||
</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="interactive-rebase-entry-template">
|
||||
<li id="<%= id %>">
|
||||
<div class="wrapper">
|
||||
<%= id %>
|
||||
<div>
|
||||
Options: Pick, Choose, Etc
|
||||
</div>
|
||||
|
||||
<i class="icon-align-justify"></i>
|
||||
</div>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<!-- My files! -->
|
||||
<script src="main.js"></script>
|
||||
|
||||
|
|
@ -95,6 +128,8 @@
|
|||
<script src="constants.js"></script>
|
||||
<script src="errors.js"></script>
|
||||
|
||||
<script src="miscViews.js"></script>
|
||||
|
||||
<!-- the beefy git engine -->
|
||||
<script src="git.js"></script>
|
||||
|
||||
|
|
|
|||
10
src/main.js
10
src/main.js
|
|
@ -59,11 +59,11 @@ $(document).ready(function(){
|
|||
setTimeout(windowResize, 50);
|
||||
|
||||
|
||||
/*
|
||||
setTimeout(function() {
|
||||
events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
|
||||
}, 500);*/
|
||||
|
||||
if (/\?demo/.test(window.location.href)) {
|
||||
setTimeout(function() {
|
||||
events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
function windowResize() {
|
||||
|
|
|
|||
121
src/miscViews.js
Normal file
121
src/miscViews.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
var InteractiveRebaseView = Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
template: _.template($('#interactive-rebase-template').html()),
|
||||
|
||||
events: {
|
||||
'click #confirmButton': 'confirmed'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
this.hasClicked = false;
|
||||
this.rebaseCallback = options.callback;
|
||||
|
||||
this.rebaseArray = options.toRebase;
|
||||
|
||||
this.rebaseEntries = new RebaseEntryCollection();
|
||||
this.rebaseMap = {};
|
||||
this.entryObjMap = {};
|
||||
|
||||
// make basic models for each commit
|
||||
_.each(this.rebaseArray, function(commit) {
|
||||
var id = commit.get('id');
|
||||
this.rebaseMap[id] = commit;
|
||||
this.entryObjMap[id] = new RebaseEntry({
|
||||
id: id
|
||||
});
|
||||
this.rebaseEntries.add(this.entryObjMap[id]);
|
||||
}, this);
|
||||
|
||||
// stuff
|
||||
this.render();
|
||||
},
|
||||
|
||||
confirmed: function() {
|
||||
// we hide the dialog anyways, but they might be fast clickers
|
||||
if (this.hasClicked) {
|
||||
return;
|
||||
}
|
||||
this.hasClicked = true;
|
||||
|
||||
// first of all hide
|
||||
this.$el.css('display', 'none');
|
||||
|
||||
// get our ordering
|
||||
var uiOrder = [];
|
||||
this.$('ul#rebaseEntries li').each(function(i, obj) {
|
||||
uiOrder.push(obj.id);
|
||||
});
|
||||
|
||||
// now get the real array
|
||||
var toRebase = [];
|
||||
_.each(uiOrder, function(id) {
|
||||
// the model
|
||||
if (this.entryObjMap[id].get('pick')) {
|
||||
toRebase.push(this.rebaseMap[id]);
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.rebaseCallback(toRebase);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var json = {
|
||||
num: this.rebaseArray.length
|
||||
};
|
||||
|
||||
this.$el.html(this.template(json));
|
||||
|
||||
// also render each entry
|
||||
var listHolder = this.$('ul#rebaseEntries');
|
||||
this.rebaseEntries.each(function(entry) {
|
||||
new RebaseEntryView({
|
||||
el: listHolder,
|
||||
model: entry
|
||||
});
|
||||
}, this);
|
||||
|
||||
// then make it reorderable..
|
||||
listHolder.sortable({
|
||||
distance: 5,
|
||||
placeholder: 'ui-state-highlight'
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
var RebaseEntry = Backbone.Model.extend({
|
||||
defaults: {
|
||||
pick: true
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
this.set('pick', !this.get('pick'));
|
||||
}
|
||||
});
|
||||
|
||||
var RebaseEntryCollection = Backbone.Collection.extend({
|
||||
model: RebaseEntry
|
||||
});
|
||||
|
||||
var RebaseEntryView = Backbone.View.extend({
|
||||
tagName: 'li',
|
||||
template: _.template($('#interactive-rebase-entry-template').html()),
|
||||
|
||||
events: {
|
||||
'click #toggleButton': 'toggle'
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
this.model.toggle();
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
this.model.on('change', this.render, this);
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.append(this.template(this.model.toJSON()));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -294,27 +294,6 @@ p.commandLine span.prompt {
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
from {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
49% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
99% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
#commandLineBar,
|
||||
#terminal {
|
||||
background: #424242;
|
||||
|
|
@ -334,7 +313,159 @@ p.commandLine span.prompt {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
#commandLineBar {
|
||||
|
||||
/* interactive rebase CSS */
|
||||
#iRebaseDialog.wrapper {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#iRebaseDialog #confirmButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* button stuff from liquidGraph */
|
||||
.uiButton {
|
||||
border-top: 1px solid #96d1f8;
|
||||
background: #65a9d7;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
|
||||
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
|
||||
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
|
||||
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
|
||||
background: -o-linear-gradient(top, #3e779d, #65a9d7);
|
||||
padding: 5px 10px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
text-shadow: rgba(0,0,0,.4) 0 1px 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: Georgia, serif;
|
||||
text-decoration: none;
|
||||
|
||||
vertical-align: middle;
|
||||
cursor:pointer;
|
||||
}
|
||||
.uiButton:hover {
|
||||
border-top-color: #28597a;
|
||||
background: #28597a;
|
||||
color: #ccc;
|
||||
}
|
||||
.uiButton:active {
|
||||
border-top-color: #1b435e;
|
||||
background: #1b435e;
|
||||
}
|
||||
|
||||
.uiButtonYellow {
|
||||
border-top: 1px solid #f4ffa1;
|
||||
background: #288708;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#e0e63c), to(#288708));
|
||||
background: -webkit-linear-gradient(top, #e0e63c, #288708);
|
||||
background: -moz-linear-gradient(top, #e0e63c, #288708);
|
||||
background: -ms-linear-gradient(top, #e0e63c, #288708);
|
||||
background: -o-linear-gradient(top, #e0e63c, #288708);
|
||||
}
|
||||
.uiButtonYellow:hover {
|
||||
border-top-color: #30f03d;
|
||||
background: #30f03d;
|
||||
color: #000000;
|
||||
}
|
||||
.uiButtonYellow:active {
|
||||
border-top-color: #5edb15;
|
||||
background: #5edb15;
|
||||
}
|
||||
|
||||
.uiButtonPink {
|
||||
padding: 5px 10px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
text-shadow: rgba(0,0,0,.4) 0 1px 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: Georgia, serif;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor:pointer;
|
||||
position:absolute;
|
||||
|
||||
|
||||
border-top: 1px solid #96d1f8;
|
||||
background: #80007c;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fa1ee0), to(#80007c));
|
||||
background: -webkit-linear-gradient(top, #fa1ee0, #80007c);
|
||||
background: -moz-linear-gradient(top, #fa1ee0, #80007c);
|
||||
background: -ms-linear-gradient(top, #fa1ee0, #80007c);
|
||||
background: -o-linear-gradient(top, #fa1ee0, #80007c);
|
||||
}
|
||||
.uiButtonPink:hover {
|
||||
border-top-color: #fa1ee0;
|
||||
background: #fa1ee0;
|
||||
color: #ccc;
|
||||
}
|
||||
.uiButtonPink:active {
|
||||
border-top-color: #80007c;
|
||||
background: #80007c;
|
||||
}
|
||||
|
||||
.uiButtonRed {
|
||||
border-top: 1px solid #ffebee;
|
||||
background: #cc1212;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#e08992), to(#cc1212));
|
||||
background: -webkit-linear-gradient(top, #e08992, #cc1212);
|
||||
background: -moz-linear-gradient(top, #e08992, #cc1212);
|
||||
background: -ms-linear-gradient(top, #e08992, #cc1212);
|
||||
background: -o-linear-gradient(top, #e08992, #cc1212);
|
||||
}
|
||||
|
||||
.uiButtonRed:hover {
|
||||
border-top-color: #cc102f;
|
||||
background: #cc102f;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.uiButtonRed:active {
|
||||
border-top-color: #ff0000;
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.uiButtonWhite {
|
||||
border-top: 1px solid #96d1f8;
|
||||
background: #449ad4;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#d1edff), to(#449ad4));
|
||||
background: -webkit-linear-gradient(top, #d1edff, #449ad4);
|
||||
background: -moz-linear-gradient(top, #d1edff, #449ad4);
|
||||
background: -ms-linear-gradient(top, #d1edff, #449ad4);
|
||||
background: -o-linear-gradient(top, #d1edff, #449ad4);
|
||||
padding: 5px 10px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
box-shadow: rgba(0,0,0,1) 0 1px 0;
|
||||
text-shadow: rgba(0,0,0,.4) 0 1px 0;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
font-family: Georgia, serif;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.uiButtonWhite:hover {
|
||||
border-top-color: #bae3ff;
|
||||
background: #bae3ff;
|
||||
color: #5c5c5c;
|
||||
}
|
||||
|
||||
.uiButtonWhite:active {
|
||||
border-top-color: #9bcbeb;
|
||||
background: #9bcbeb;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue