GIANT modal view update amazing

build/bundle.js

@@ -8438,7 +8438,10 @@ var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? Backbone = require('backbone') : Backbone = window.Backbone;
 
-var InteractiveRebaseView = Backbone.View.extend({
+var ModalTerminal = require('../views').ModalTerminal;
+var BaseView = require('../views').BaseView;
+
+var InteractiveRebaseView = BaseView.extend({
   tagName: 'div',
   template: _.template($('#interactive-rebase-template').html()),
 
@@ -8467,24 +8470,16 @@ var InteractiveRebaseView = Backbone.View.extend({
       this.rebaseEntries.add(this.entryObjMap[id]);
     }, this);
 
+    this.container = new ModalTerminal({
+      title: 'Interactive Rebase'
+    });
+
     this.render();
 
     // show the dialog holder
     this.show();
   },
 
-  show: function() {
-    this.toggleVisibility(true);
-  },
-
-  hide: function() {
-    this.toggleVisibility(false);
-  },
-
-  toggleVisibility: function(toggle) {
-    this.$el.toggleClass('shown', toggle);
-  },
-
   confirmed: function() {
     // we hide the dialog anyways, but they might be fast clickers
     if (this.hasClicked) {
@@ -8521,7 +8516,9 @@ var InteractiveRebaseView = Backbone.View.extend({
       num: this.rebaseArray.length
     };
 
+    var destination = this.container.getInsideElement();
     this.$el.html(this.template(json));
+    $(destination).append(this.el);
 
     // also render each entry
     var listHolder = this.$('ul#rebaseEntries');
@@ -8584,6 +8581,121 @@ var RebaseEntryView = Backbone.View.extend({
 
 exports.InteractiveRebaseView = InteractiveRebaseView;
 
+});
+
+require.define("/src/js/views/index.js",function(require,module,exports,__dirname,__filename,process,global){var GitError = require('../util/errors').GitError;
+var _ = require('underscore');
+// horrible hack to get localStorage Backbone plugin
+var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
+
+var BaseView = Backbone.View.extend({
+  render: function() {
+    var destination = this.container.getInsideElement();
+    this.$el.html(this.template(this.JSON));
+    $(destination).append(this.el);
+  },
+
+  show: function() {
+    this.container.show();
+  },
+
+  hide: function() {
+    this.container.hide();
+  }
+});
+
+var ModalView = Backbone.View.extend({
+  tagName: 'div',
+  className: 'modalView box horizontal center transitionOpacity',
+  template: _.template($('#modal-view-template').html()),
+
+  initialize: function(options) {
+    this.render();
+  },
+
+  render: function() {
+    // add ourselves to the DOM
+    this.$el.html(this.template({}));
+    $('body').append(this.el);
+  },
+
+  show: function() {
+    this.toggleZ(true);
+    this.toggleShow(true);
+  },
+
+  hide: function() {
+    this.toggleShow(false);
+    // TODO -- do this in a way where it wont
+    // bork if we call it back down. these views should
+    // be one-off though so...
+    setTimeout(_.bind(function() {
+      this.toggleZ(false);
+    }, this), 700);
+  },
+
+  getInsideElement: function() {
+    return this.$('.contentHolder');
+  },
+
+  toggleShow: function(value) {
+    this.$el.toggleClass('show', value);
+  },
+
+  toggleZ: function(value) {
+    this.$el.toggleClass('inFront', value);
+  },
+
+  tearDown: function() {
+    this.hide();
+  }
+});
+
+var ModalTerminal = BaseView.extend({
+  tagName: 'div',
+  className: 'box flex1',
+  template: _.template($('#terminal-window-template').html()),
+
+  initialize: function(options) {
+    options = options || {};
+
+    this.container = new ModalView();
+    this.JSON = {
+      title: options.title || 'Heed This Warning!'
+    };
+
+    this.render();
+  },
+
+  getInsideElement: function() {
+    return this.$('#inside');
+  }
+});
+
+var ModalAlert = BaseView.extend({
+  tagName: 'div',
+  template: _.template($('#modal-alert-template').html()),
+
+  initialize: function(options) {
+    options = options = {};
+    this.JSON = {
+      title: options.title || 'Something to say',
+      text: options.text || 'Here is a paragraph'
+    };
+
+    this.container = new ModalTerminal({
+      title: 'Alert!'
+    });
+    this.render();
+  }
+});
+
+exports.ModalView = ModalView;
+exports.ModalTerminal = ModalTerminal;
+exports.ModalAlert = ModalAlert;
+exports.BaseView = BaseView;
+
+
 });
 
 require.define("/src/js/models/commandModel.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore');
@@ -11318,70 +11430,6 @@ HeadlessGit.prototype.sendCommand = function(value) {
 exports.HeadlessGit = HeadlessGit;
 
 
-});
-
-require.define("/src/js/views/index.js",function(require,module,exports,__dirname,__filename,process,global){var GitError = require('../util/errors').GitError;
-var _ = require('underscore');
-// horrible hack to get localStorage Backbone plugin
-var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
-
-var ModalView = Backbone.View.extend({
-  tagName: 'div',
-  className: 'modalView box horizontal center transitionOpacity',
-  template: _.template($('#modal-view-template').html()),
-
-  initialize: function(options) {
-    this.render();
-  },
-
-  render: function() {
-    // add ourselves to the DOM
-    this.$el.html(this.template({}));
-    $('body').append(this.el);
-  },
-
-  show: function() {
-    this.display(true);
-  },
-
-  hide: function() {
-    this.display(false);
-  },
-
-  getInsideElement: function() {
-    return this.$('.contentHolder');
-  },
-
-  display: function(value) {
-    this.$el.toggleClass('show', value);
-  },
-
-  tearDown: function() {
-    this.hide();
-  }
-});
-
-var ModalAlert = Backbone.View.extend({
-  tagName: 'div',
-  className: 'ModalAlert box',
-
-  initialize: function(options) {
-    options = options || {};
-    this.text = options.text || 'alert!';
-    this.container = new ModalView();
-    this.render();
-  },
-
-  render: function() {
-    var destination = this.container.getInsideElement();
-    $(destination).html('<p> lol wut </p>');
-  }
-});
-
-exports.ModalView = ModalView;
-exports.ModalAlert = ModalAlert;
-
-
 });
 
 require.define("/src/js/app/index.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore');
@@ -14374,6 +14422,22 @@ var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
 
+var BaseView = Backbone.View.extend({
+  render: function() {
+    var destination = this.container.getInsideElement();
+    this.$el.html(this.template(this.JSON));
+    $(destination).append(this.el);
+  },
+
+  show: function() {
+    this.container.show();
+  },
+
+  hide: function() {
+    this.container.hide();
+  }
+});
+
 var ModalView = Backbone.View.extend({
   tagName: 'div',
   className: 'modalView box horizontal center transitionOpacity',
@@ -14390,45 +14454,80 @@ var ModalView = Backbone.View.extend({
   },
 
   show: function() {
-    this.display(true);
+    this.toggleZ(true);
+    this.toggleShow(true);
   },
 
   hide: function() {
-    this.display(false);
+    this.toggleShow(false);
+    // TODO -- do this in a way where it wont
+    // bork if we call it back down. these views should
+    // be one-off though so...
+    setTimeout(_.bind(function() {
+      this.toggleZ(false);
+    }, this), 700);
   },
 
   getInsideElement: function() {
     return this.$('.contentHolder');
   },
 
-  display: function(value) {
+  toggleShow: function(value) {
     this.$el.toggleClass('show', value);
   },
 
+  toggleZ: function(value) {
+    this.$el.toggleClass('inFront', value);
+  },
+
   tearDown: function() {
     this.hide();
   }
 });
 
-var ModalAlert = Backbone.View.extend({
+var ModalTerminal = BaseView.extend({
   tagName: 'div',
-  className: 'ModalAlert box',
+  className: 'box flex1',
+  template: _.template($('#terminal-window-template').html()),
 
   initialize: function(options) {
     options = options || {};
-    this.text = options.text || 'alert!';
+
     this.container = new ModalView();
+    this.JSON = {
+      title: options.title || 'Heed This Warning!'
+    };
+
     this.render();
   },
 
-  render: function() {
+  getInsideElement: function() {
-    var destination = this.container.getInsideElement();
+    return this.$('#inside');
-    $(destination).html('<p> lol wut </p>');
+  }
+});
+
+var ModalAlert = BaseView.extend({
+  tagName: 'div',
+  template: _.template($('#modal-alert-template').html()),
+
+  initialize: function(options) {
+    options = options = {};
+    this.JSON = {
+      title: options.title || 'Something to say',
+      text: options.text || 'Here is a paragraph'
+    };
+
+    this.container = new ModalTerminal({
+      title: 'Alert!'
+    });
+    this.render();
   }
 });
 
 exports.ModalView = ModalView;
+exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;
+exports.BaseView = BaseView;
 
 
 });
@@ -14593,7 +14692,10 @@ var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? Backbone = require('backbone') : Backbone = window.Backbone;
 
-var InteractiveRebaseView = Backbone.View.extend({
+var ModalTerminal = require('../views').ModalTerminal;
+var BaseView = require('../views').BaseView;
+
+var InteractiveRebaseView = BaseView.extend({
   tagName: 'div',
   template: _.template($('#interactive-rebase-template').html()),
 
@@ -14622,24 +14724,16 @@ var InteractiveRebaseView = Backbone.View.extend({
       this.rebaseEntries.add(this.entryObjMap[id]);
     }, this);
 
+    this.container = new ModalTerminal({
+      title: 'Interactive Rebase'
+    });
+
     this.render();
 
     // show the dialog holder
     this.show();
   },
 
-  show: function() {
-    this.toggleVisibility(true);
-  },
-
-  hide: function() {
-    this.toggleVisibility(false);
-  },
-
-  toggleVisibility: function(toggle) {
-    this.$el.toggleClass('shown', toggle);
-  },
-
   confirmed: function() {
     // we hide the dialog anyways, but they might be fast clickers
     if (this.hasClicked) {
@@ -14676,7 +14770,9 @@ var InteractiveRebaseView = Backbone.View.extend({
       num: this.rebaseArray.length
     };
 
+    var destination = this.container.getInsideElement();
     this.$el.html(this.template(json));
+    $(destination).append(this.el);
 
     // also render each entry
     var listHolder = this.$('ul#rebaseEntries');

src/index.html

@@ -11,6 +11,7 @@
 </head>
 <body>
 
+  <!-- The entire interface is within this div -->
   <div id="interfaceWrapper" class="box horizontal flex1">
     <div id="controls" class="box vertical flex1">
       <div id="hintsEtc" class="box vertical">
@@ -57,10 +58,6 @@
     </div>
   </div>
 
-  <div id="dialogHolder" class="transitionOpacity">
-
-  </div>
-
   <!-- *******************************************
        Scripts from here on out
        ****************************************** -->
@@ -94,35 +91,55 @@
   </script>
 
   <script type="text/html" id="modal-view-template">
-    <div class="contentHolder box vertical center">
+    <div class="contentHolder box vertical center flex1">
     </div>
   </script>
 
   <script type="text/html" id="terminal-window-template">
-    <div class="terminal-window">
+    <div class="terminal-window box horizontal flex3 transitionAll">
-      <div class="toolbar box vertical">
+      <div class="box flex1">
-        <div class="controls box horizontal">
+      </div>
-          <div class="box flex1">
+
-            <div class="close">
+      <div class="terminal-window-holder box flex3 vertical">
+        <div class="toolbar box vertical">
+          <div class="controls box horizontal">
+            <div class="box flex1">
+              <div class="close">
+              </div>
+            </div>
+            <div class="box flex1">
+              <div class="minimize">
+              </div>
+            </div>
+            <div class="box flex1">
+              <div class="plus">
+              </div>
             </div>
           </div>
-          <div class="box flex1">
+          <div>
-            <div class="minimize">
+            <i class="icon-cog"></i>
-            </div>
+            <%= title %>
           </div>
-          <div class="box flex1">
+        </div>
-            <div class="plus">
+
-            </div>
+        <div id="inside" class="">
-          </div>
-            <div>
-              <i class="icon-home"></i>
-              Learn Git Branching
-            </div>
         </div>
       </div>
+
+      <div class="box flex1">
+      </div>
     </div>
   </script>
 
+  <script type="text/html" id="modal-alert-template">
+    <h2>
+      <%= title %>
+    </h2>
+    <p>
+      <%= text %>
+    </p>
+  </script>
+
   <script type="text/html" id="interactive-rebase-template">
     <div id="iRebaseDialog" class="wrapper transitionAllSlow">
       <p>

src/js/views/index.js

@@ -3,6 +3,22 @@ var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
 
+var BaseView = Backbone.View.extend({
+  render: function() {
+    var destination = this.container.getInsideElement();
+    this.$el.html(this.template(this.JSON));
+    $(destination).append(this.el);
+  },
+
+  show: function() {
+    this.container.show();
+  },
+
+  hide: function() {
+    this.container.hide();
+  }
+});
+
 var ModalView = Backbone.View.extend({
   tagName: 'div',
   className: 'modalView box horizontal center transitionOpacity',
@@ -19,51 +35,78 @@ var ModalView = Backbone.View.extend({
   },
 
   show: function() {
-    this.display(true);
+    this.toggleZ(true);
+    this.toggleShow(true);
   },
 
   hide: function() {
-    this.display(false);
+    this.toggleShow(false);
+    // TODO -- do this in a way where it wont
+    // bork if we call it back down. these views should
+    // be one-off though so...
+    setTimeout(_.bind(function() {
+      this.toggleZ(false);
+    }, this), 700);
   },
 
   getInsideElement: function() {
     return this.$('.contentHolder');
   },
 
-  display: function(value) {
+  toggleShow: function(value) {
     this.$el.toggleClass('show', value);
   },
 
+  toggleZ: function(value) {
+    this.$el.toggleClass('inFront', value);
+  },
+
   tearDown: function() {
     this.hide();
   }
 });
 
-var ModalTerminal = Backbone.View.extend({
+var ModalTerminal = BaseView.extend({
   tagName: 'div',
-  className: 'ModalTerminal box',
+  className: 'box flex1',
+  template: _.template($('#terminal-window-template').html()),
 
   initialize: function(options) {
     options = options || {};
-    this.text = options.text || 'alert!';
+
     this.container = new ModalView();
+    this.JSON = {
+      title: options.title || 'Heed This Warning!'
+    };
+
     this.render();
   },
 
-  render: function() {
+  getInsideElement: function() {
-    var destination = this.container.getInsideElement();
+    return this.$('#inside');
-    $(destination).html('<p> lol wut </p>');
+  }
-  },
+});
 
-  show: function() {
+var ModalAlert = BaseView.extend({
-    this.container.show();
+  tagName: 'div',
-  },
+  template: _.template($('#modal-alert-template').html()),
 
-  hide: function() {
+  initialize: function(options) {
-    this.container.hide();
+    options = options = {};
+    this.JSON = {
+      title: options.title || 'Something to say',
+      text: options.text || 'Here is a paragraph'
+    };
+
+    this.container = new ModalTerminal({
+      title: 'Alert!'
+    });
+    this.render();
   }
 });
 
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
+exports.ModalAlert = ModalAlert;
+exports.BaseView = BaseView;
 

src/js/views/rebaseView.js

@@ -3,7 +3,10 @@ var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? Backbone = require('backbone') : Backbone = window.Backbone;
 
-var InteractiveRebaseView = Backbone.View.extend({
+var ModalTerminal = require('../views').ModalTerminal;
+var BaseView = require('../views').BaseView;
+
+var InteractiveRebaseView = BaseView.extend({
   tagName: 'div',
   template: _.template($('#interactive-rebase-template').html()),
 
@@ -32,24 +35,16 @@ var InteractiveRebaseView = Backbone.View.extend({
       this.rebaseEntries.add(this.entryObjMap[id]);
     }, this);
 
+    this.container = new ModalTerminal({
+      title: 'Interactive Rebase'
+    });
+
     this.render();
 
     // show the dialog holder
     this.show();
   },
 
-  show: function() {
-    this.toggleVisibility(true);
-  },
-
-  hide: function() {
-    this.toggleVisibility(false);
-  },
-
-  toggleVisibility: function(toggle) {
-    this.$el.toggleClass('shown', toggle);
-  },
-
   confirmed: function() {
     // we hide the dialog anyways, but they might be fast clickers
     if (this.hasClicked) {
@@ -86,7 +81,9 @@ var InteractiveRebaseView = Backbone.View.extend({
       num: this.rebaseArray.length
     };
 
+    var destination = this.container.getInsideElement();
     this.$el.html(this.template(json));
+    $(destination).append(this.el);
 
     // also render each entry
     var listHolder = this.$('ul#rebaseEntries');

src/style/main.css

@@ -78,6 +78,14 @@ body,
   transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+.transitionAll {
+  -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -ms-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -o-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
 .transitionAllSlow {
   -webkit-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -moz-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -120,7 +128,7 @@ div.toolbar {
   position: relative;
   text-align: center;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: 14px;
   color: black;
   -webkit-box-pack: center;
 }
@@ -307,19 +315,24 @@ p.commandLine span.prompt {
 }
 
 #commandLineBar,
+.terminal-window #inside,
 #terminal {
   background: #424242;
 }
 
-#terminal {
+#terminal,
-  border: 1px solid #6287A4;
+.terminal-window #inside,
-  border-bottom: 0;
+#commandLineBar {
+  border: 1px solid #303030;
+}
 
+#terminal {
+  border-bottom: 0;
   -webkit-box-align: start;
 }
 
-#commandLineBar {
+#commandLineBar,
-  border: 1px solid #6287A4;
+.terminal-window #inside {
   border-top: 0;
   border-radius: 0 0 5px 5px;
   padding: 3px;
@@ -327,19 +340,6 @@ p.commandLine span.prompt {
 
 /* interactive rebase CSS */
 #iRebaseDialog.wrapper {
-  background: #DDD;
-  color: black;
-  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 1);
-
-  margin-left: auto;
-  margin-right: auto;
-  width: 50%;
-  min-width: 400px;
-  margin-top: -30%;
-
-  opacity: 1;
-
-  -webkit-border-radius: 10px;
   padding: 20px;
 }
 
@@ -387,11 +387,43 @@ li.rebaseEntry.notPicked {
   opacity: 0;
 }
 
-#dialogHolder.shown, .modalView.show {
+#dialogHolder.shown {
   z-index: 100;
   opacity: 1;
 }
 
+/* Modal Views */
+
+.modalView.inFront {
+  z-index: 100;
+}
+
+.terminal-window #inside {
+  padding: 10px;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+}
+
+.terminal-window #inside h2 {
+  text-align: center;
+}
+
+.modalView.show {
+  opacity: 1;
+}
+
+.modalView .terminal-window-holder {
+  border-radius: 5px;
+}
+
+.modalView .terminal-window {
+  margin-top: 20%;
+  -webkit-transform: translate3d(0, -100%, 0);
+}
+
+.modalView.show .terminal-window {
+  -webkit-transform: translate3d(0,0,0);
+}
+
 /* button stuff from liquidGraph */
 .uiButton {
   border-top: 1px solid #96d1f8;

todo.txt

@@ -4,13 +4,13 @@ Big things:
 
 Big Graphic things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~
-[ ] better dialog support (above / below the fold)
 [ ] promise-based dialogs
 
 Medium things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
-[ ] view for anything above the fold (modal view)
+[x] view for anything above the fold (modal view)
-[ ] rebase styling (get it better. even cuter -- make it like a command window)
+[x] rebase styling (get it better. even cuter -- make it like a command window)
+[ ] rebase entries styling
 [ ] check animation for command entry fading nicely wtf
 
 Small things to implement: