left right view

This commit is contained in:
Peter Cottle 2012-12-20 12:09:42 -08:00
parent fa91c18567
commit ff809dd85f
7 changed files with 234 additions and 129 deletions

View file

@ -8440,10 +8440,11 @@ var Q = require('q');
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ModalTerminal = require('../views').ModalTerminal;
var BaseView = require('../views').BaseView;
var ContainedBase = require('../views').ContainedBase;
var ConfirmCancelView = require('../views').ConfirmCancelView;
var LeftRightView = require('../views').LeftRightView;
var InteractiveRebaseView = BaseView.extend({
var InteractiveRebaseView = ContainedBase.extend({
tagName: 'div',
template: _.template($('#interactive-rebase-template').html()),
@ -8542,6 +8543,11 @@ var InteractiveRebaseView = BaseView.extend({
destination: this.$('.confirmCancel'),
deferred: deferred
});
new LeftRightView({
destination: this.$('.confirmCancel'),
deferred: deferred
});
}
});
@ -8596,13 +8602,41 @@ var _ = require('underscore');
// horrible hack to get localStorage Backbone plugin
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ConfirmCancelView = Backbone.View.extend({
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.destination || this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
}
});
var PosNegBase = BaseView.extend({
positive: function() {
this.deferred.resolve();
},
negative: function() {
this.deferred.reject();
}
});
var ContainedBase = BaseView.extend({
show: function() {
this.container.show();
},
hide: function() {
this.container.hide();
}
});
var ConfirmCancelView = PosNegBase.extend({
tagName: 'div',
className: 'box horizontal justify',
className: 'confirmCancelView box horizontal justify',
template: _.template($('#confirm-cancel-template').html()),
events: {
'click .confirmButton': 'confirmed',
'click .cancelButton': 'cancel'
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
initialize: function(options) {
@ -8618,35 +8652,28 @@ var ConfirmCancelView = Backbone.View.extend({
};
this.render();
},
confirmed: function() {
this.deferred.resolve();
},
cancel: function() {
this.deferred.reject();
},
render: function() {
this.$el.html(this.template(this.JSON));
$(this.destination).append(this.el);
}
});
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
var LeftRightView = PosNegBase.extend({
tagName: 'div',
className: 'leftRightView box horizontal center',
template: _.template($('#left-right-template').html()),
events: {
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
show: function() {
this.container.show();
},
initialize: function(options) {
if (!options.destination || !options.deferred) {
throw new Error('needmore');
}
hide: function() {
this.container.hide();
this.destination = options.destination;
this.deferred = options.deferred;
this.JSON = {};
this.render();
}
});
@ -8697,7 +8724,7 @@ var ModalView = Backbone.View.extend({
}
});
var ModalTerminal = BaseView.extend({
var ModalTerminal = ContainedBase.extend({
tagName: 'div',
className: 'box flex1',
template: _.template($('#terminal-window-template').html()),
@ -8718,7 +8745,7 @@ var ModalTerminal = BaseView.extend({
}
});
var ModalAlert = BaseView.extend({
var ModalAlert = ContainedBase.extend({
tagName: 'div',
template: _.template($('#modal-alert-template').html()),
@ -8739,8 +8766,9 @@ var ModalAlert = BaseView.extend({
exports.ModalView = ModalView;
exports.ModalTerminal = ModalTerminal;
exports.ModalAlert = ModalAlert;
exports.BaseView = BaseView;
exports.ContainedBase = ContainedBase;
exports.ConfirmCancelView = ConfirmCancelView;
exports.LeftRightView = LeftRightView;
});
@ -9235,7 +9263,7 @@ var CommandPromptView = Backbone.View.extend({
this.commandSpan = this.$('#prompt span.command')[0];
this.commandCursor = this.$('#prompt span.cursor')[0];
// this is evil, but we will refer to HTML outside the document
// this is evil, but we will refer to HTML outside the view
// and attach a click event listener so we can focus / unfocus
$(document).delegate('#commandLineHistory', 'click', _.bind(function() {
this.focus();
@ -9470,14 +9498,12 @@ var CommandView = Backbone.View.extend({
wasChanged: function(model, changeEvent) {
// for changes that are just comestic, we actually only want to toggle classes
// with jquery rather than brutally delete a html of HTML
// with jquery rather than brutally delete a html. doing so allows us
// to nicely fade things
var changes = changeEvent.changes;
var changeKeys = _.keys(changes);
if (_.difference(changeKeys, ['status']) === 0) {
if (_.difference(changeKeys, ['status']).length === 0) {
this.updateStatus();
} else if (_.difference(changeKeys, ['error']) === 0) {
// the above will
this.render();
} else {
this.render();
}
@ -14116,7 +14142,7 @@ var CommandPromptView = Backbone.View.extend({
this.commandSpan = this.$('#prompt span.command')[0];
this.commandCursor = this.$('#prompt span.cursor')[0];
// this is evil, but we will refer to HTML outside the document
// this is evil, but we will refer to HTML outside the view
// and attach a click event listener so we can focus / unfocus
$(document).delegate('#commandLineHistory', 'click', _.bind(function() {
this.focus();
@ -14351,14 +14377,12 @@ var CommandView = Backbone.View.extend({
wasChanged: function(model, changeEvent) {
// for changes that are just comestic, we actually only want to toggle classes
// with jquery rather than brutally delete a html of HTML
// with jquery rather than brutally delete a html. doing so allows us
// to nicely fade things
var changes = changeEvent.changes;
var changeKeys = _.keys(changes);
if (_.difference(changeKeys, ['status']) === 0) {
if (_.difference(changeKeys, ['status']).length === 0) {
this.updateStatus();
} else if (_.difference(changeKeys, ['error']) === 0) {
// the above will
this.render();
} else {
this.render();
}
@ -14469,13 +14493,41 @@ var _ = require('underscore');
// horrible hack to get localStorage Backbone plugin
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ConfirmCancelView = Backbone.View.extend({
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.destination || this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
}
});
var PosNegBase = BaseView.extend({
positive: function() {
this.deferred.resolve();
},
negative: function() {
this.deferred.reject();
}
});
var ContainedBase = BaseView.extend({
show: function() {
this.container.show();
},
hide: function() {
this.container.hide();
}
});
var ConfirmCancelView = PosNegBase.extend({
tagName: 'div',
className: 'box horizontal justify',
className: 'confirmCancelView box horizontal justify',
template: _.template($('#confirm-cancel-template').html()),
events: {
'click .confirmButton': 'confirmed',
'click .cancelButton': 'cancel'
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
initialize: function(options) {
@ -14491,35 +14543,28 @@ var ConfirmCancelView = Backbone.View.extend({
};
this.render();
},
confirmed: function() {
this.deferred.resolve();
},
cancel: function() {
this.deferred.reject();
},
render: function() {
this.$el.html(this.template(this.JSON));
$(this.destination).append(this.el);
}
});
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
var LeftRightView = PosNegBase.extend({
tagName: 'div',
className: 'leftRightView box horizontal center',
template: _.template($('#left-right-template').html()),
events: {
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
show: function() {
this.container.show();
},
initialize: function(options) {
if (!options.destination || !options.deferred) {
throw new Error('needmore');
}
hide: function() {
this.container.hide();
this.destination = options.destination;
this.deferred = options.deferred;
this.JSON = {};
this.render();
}
});
@ -14570,7 +14615,7 @@ var ModalView = Backbone.View.extend({
}
});
var ModalTerminal = BaseView.extend({
var ModalTerminal = ContainedBase.extend({
tagName: 'div',
className: 'box flex1',
template: _.template($('#terminal-window-template').html()),
@ -14591,7 +14636,7 @@ var ModalTerminal = BaseView.extend({
}
});
var ModalAlert = BaseView.extend({
var ModalAlert = ContainedBase.extend({
tagName: 'div',
template: _.template($('#modal-alert-template').html()),
@ -14612,8 +14657,9 @@ var ModalAlert = BaseView.extend({
exports.ModalView = ModalView;
exports.ModalTerminal = ModalTerminal;
exports.ModalAlert = ModalAlert;
exports.BaseView = BaseView;
exports.ContainedBase = ContainedBase;
exports.ConfirmCancelView = ConfirmCancelView;
exports.LeftRightView = LeftRightView;
});
@ -14780,10 +14826,11 @@ var Q = require('q');
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ModalTerminal = require('../views').ModalTerminal;
var BaseView = require('../views').BaseView;
var ContainedBase = require('../views').ContainedBase;
var ConfirmCancelView = require('../views').ConfirmCancelView;
var LeftRightView = require('../views').LeftRightView;
var InteractiveRebaseView = BaseView.extend({
var InteractiveRebaseView = ContainedBase.extend({
tagName: 'div',
template: _.template($('#interactive-rebase-template').html()),
@ -14882,6 +14929,11 @@ var InteractiveRebaseView = BaseView.extend({
destination: this.$('.confirmCancel'),
deferred: deferred
});
new LeftRightView({
destination: this.$('.confirmCancel'),
deferred: deferred
});
}
});

View file

@ -159,6 +159,15 @@
</div>
</script>
<script type="text/html" id="left-right-template">
<div class="box left">
<i class="icon-circle-arrow-left"></i>
</div>
<div class="box right">
<i class="icon-circle-arrow-right"></i>
</div>
</script>
<script type="text/html" id="confirm-cancel-template">
<a class="box cancelButton uiButton uiButtonRed">
<%= cancel %>

View file

@ -40,7 +40,7 @@ var CommandPromptView = Backbone.View.extend({
this.commandSpan = this.$('#prompt span.command')[0];
this.commandCursor = this.$('#prompt span.cursor')[0];
// this is evil, but we will refer to HTML outside the document
// this is evil, but we will refer to HTML outside the view
// and attach a click event listener so we can focus / unfocus
$(document).delegate('#commandLineHistory', 'click', _.bind(function() {
this.focus();
@ -275,14 +275,12 @@ var CommandView = Backbone.View.extend({
wasChanged: function(model, changeEvent) {
// for changes that are just comestic, we actually only want to toggle classes
// with jquery rather than brutally delete a html of HTML
// with jquery rather than brutally delete a html. doing so allows us
// to nicely fade things
var changes = changeEvent.changes;
var changeKeys = _.keys(changes);
if (_.difference(changeKeys, ['status']) === 0) {
if (_.difference(changeKeys, ['status']).length === 0) {
this.updateStatus();
} else if (_.difference(changeKeys, ['error']) === 0) {
// the above will
this.render();
} else {
this.render();
}

View file

@ -3,13 +3,41 @@ var _ = require('underscore');
// horrible hack to get localStorage Backbone plugin
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ConfirmCancelView = Backbone.View.extend({
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.destination || this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
}
});
var PosNegBase = BaseView.extend({
positive: function() {
this.deferred.resolve();
},
negative: function() {
this.deferred.reject();
}
});
var ContainedBase = BaseView.extend({
show: function() {
this.container.show();
},
hide: function() {
this.container.hide();
}
});
var ConfirmCancelView = PosNegBase.extend({
tagName: 'div',
className: 'box horizontal justify',
className: 'confirmCancelView box horizontal justify',
template: _.template($('#confirm-cancel-template').html()),
events: {
'click .confirmButton': 'confirmed',
'click .cancelButton': 'cancel'
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
initialize: function(options) {
@ -25,35 +53,28 @@ var ConfirmCancelView = Backbone.View.extend({
};
this.render();
},
confirmed: function() {
this.deferred.resolve();
},
cancel: function() {
this.deferred.reject();
},
render: function() {
this.$el.html(this.template(this.JSON));
$(this.destination).append(this.el);
}
});
var BaseView = Backbone.View.extend({
render: function() {
var destination = this.container.getInsideElement();
this.$el.html(this.template(this.JSON));
$(destination).append(this.el);
var LeftRightView = PosNegBase.extend({
tagName: 'div',
className: 'leftRightView box horizontal center',
template: _.template($('#left-right-template').html()),
events: {
'click .confirmButton': 'positive',
'click .cancelButton': 'negative'
},
show: function() {
this.container.show();
},
initialize: function(options) {
if (!options.destination || !options.deferred) {
throw new Error('needmore');
}
hide: function() {
this.container.hide();
this.destination = options.destination;
this.deferred = options.deferred;
this.JSON = {};
this.render();
}
});
@ -104,7 +125,7 @@ var ModalView = Backbone.View.extend({
}
});
var ModalTerminal = BaseView.extend({
var ModalTerminal = ContainedBase.extend({
tagName: 'div',
className: 'box flex1',
template: _.template($('#terminal-window-template').html()),
@ -125,7 +146,7 @@ var ModalTerminal = BaseView.extend({
}
});
var ModalAlert = BaseView.extend({
var ModalAlert = ContainedBase.extend({
tagName: 'div',
template: _.template($('#modal-alert-template').html()),
@ -146,6 +167,7 @@ var ModalAlert = BaseView.extend({
exports.ModalView = ModalView;
exports.ModalTerminal = ModalTerminal;
exports.ModalAlert = ModalAlert;
exports.BaseView = BaseView;
exports.ContainedBase = ContainedBase;
exports.ConfirmCancelView = ConfirmCancelView;
exports.LeftRightView = LeftRightView;

View file

@ -5,10 +5,11 @@ var Q = require('q');
var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
var ModalTerminal = require('../views').ModalTerminal;
var BaseView = require('../views').BaseView;
var ContainedBase = require('../views').ContainedBase;
var ConfirmCancelView = require('../views').ConfirmCancelView;
var LeftRightView = require('../views').LeftRightView;
var InteractiveRebaseView = BaseView.extend({
var InteractiveRebaseView = ContainedBase.extend({
tagName: 'div',
template: _.template($('#interactive-rebase-template').html()),
@ -107,6 +108,11 @@ var InteractiveRebaseView = BaseView.extend({
destination: this.$('.confirmCancel'),
deferred: deferred
});
new LeftRightView({
destination: this.$('.confirmCancel'),
deferred: deferred
});
}
});

View file

@ -352,10 +352,6 @@ li.rebaseEntry,
margin-top: 30%;
}
.iRebaseDialog #confirmButton {
cursor: pointer;
}
.iRebaseDialog p.helperText {
color: #999;
font-size: 10px;
@ -409,9 +405,9 @@ li.rebaseEntry a#toggleButton {
li.rebaseEntry.notPicked {
opacity: 0.2;
}
/* Modal Views */
/* General Dialog Holder Jazz */
#dialogHolder, .modalView {
.modalView {
width: 100%;
height: 100%;
position: fixed;
@ -425,13 +421,6 @@ li.rebaseEntry.notPicked {
opacity: 0;
}
#dialogHolder.shown {
z-index: 100;
opacity: 1;
}
/* Modal Views */
.modalView.inFront {
z-index: 100;
}
@ -462,6 +451,35 @@ li.rebaseEntry.notPicked {
-webkit-transform: translate3d(0,0,0);
}
/* LeftRightView */
.leftRightView div i {
font-size: 45px;
cursor: pointer;
}
.leftRightView div {
margin: 0 20px;
}
.leftRightView div.left {
color: rgb(253, 50, 50);
text-shadow: -1px 1px 3px rgba(0,0,0,0.7);
}
.leftRightView div.right {
color: rgb(82, 255, 82);
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.leftRightView div.right:hover {
color: #74FC74;
}
.leftRightView div.left:hover {
color: #FF6969;
}
/* button stuff from liquidGraph */
.uiButton {
border-top: 1px solid #96d1f8;

View file

@ -8,8 +8,6 @@ Big Graphic things:
Medium things:
~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ ] check animation for command entry fading nicely wtf
[ ] no more CSS ids
Small things to implement:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@ -29,6 +27,8 @@ Big Bugs to fix:
Done things:
(I only started this on Dec 17th 2012 to get a better sense of what was done)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[x] check animation for command entry fading nicely wtf
[x] no more CSS ids in views
[x] promise-based confirm cnacel
[x] rebase buttons view & styling
[x] rebase entries styling