decent dialog showing stuff

src/index.html

@@ -57,7 +57,7 @@
     </div>
   </div>
 
-  <div id="dialogHolder">
+  <div id="dialogHolder" class="transitionOpacity">
 
   </div>
 

src/miscViews.js

@@ -27,8 +27,23 @@ var InteractiveRebaseView = Backbone.View.extend({
       this.rebaseEntries.add(this.entryObjMap[id]);
     }, this);
 
-    // stuff
     this.render();
+
+    // show the dialog holder
+    this.show();
+  },
+
+  show: function() {
+    this.toggleVisibility(true);
+  },
+
+  hide: function() {
+    this.toggleVisibility(false);
+  },
+
+  toggleVisibility: function(toggle) {
+    console.log('toggling');
+    $('#dialogHolder').toggleClass('shown', toggle);
   },
 
   confirmed: function() {
@@ -52,7 +67,7 @@ var InteractiveRebaseView = Backbone.View.extend({
     _.each(uiOrder, function(id) {
       // the model
       if (this.entryObjMap[id].get('pick')) {
-        toRebase.lshift(this.rebaseMap[id]);
+        toRebase.unshift(this.rebaseMap[id]);
       }
     }, this);
 

src/style/main.css

@@ -59,6 +59,14 @@ body,
 }
 
 .transitionOpacity {
+  -webkit-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -moz-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -ms-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -o-transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  transition: opacity 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+.transitionOpacitySlow {
   -webkit-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -moz-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -ms-transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -315,10 +323,24 @@ p.commandLine span.prompt {
 
 /* interactive rebase CSS */
 #iRebaseDialog.wrapper {
-  background: red;
-  position: absolute;
-  top: 0px;
-  left: 0px;
+  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;
+}
+
+#dialogHolder.shown #iRebaseDialog.wrapper {
+  margin-top: 30%;
 }
 
 #iRebaseDialog #confirmButton {
@@ -339,6 +361,26 @@ li.rebaseEntry.notPicked {
   opacity: 0.2;
 }
 
+/* General Dialog Holder Jazz */
+#dialogHolder {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.9);
+
+  z-index: -1;
+  opacity: 0;
+}
+
+#dialogHolder.shown {
+  z-index: 100;
+  opacity: 1;
+}
+
 /* button stuff from liquidGraph */
 .uiButton {
   border-top: 1px solid #96d1f8;

todo.txt

@@ -1,13 +1,13 @@
 Big things:
 ~~~~~~~~~~~~~~~~~~~~~~~~
+
 Big Graphic things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~
+- better dialog
 
 Medium things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
 - gitEngine loads from tree immediately, not the weird thing we have now!
-- tree comparator, both 100% and fuzzy levels (not caring about HEAD)
-
 
 Small things to implement:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -15,11 +15,9 @@ Small things to implement:
 Minor Bugs to fix:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+jQuery gets confused with ids like #C1''.... ?
+
 Big Bugs to fix:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 
-
-~~~~~~~~~~
-
-