raphael and canvas resizing

src/index.html

@@ -48,8 +48,7 @@
       </div>
     </div>
 
-    <div id="canvasWrapper" class="box flex1">
-      <canvas id="treeCanvas" class="box"></canvas>
+    <div id="canvasWrapper" class="box flex1 horizontal">
     </div>
   </div>
 
@@ -66,7 +65,7 @@
       <p class="commandLine transitionBackground <%= status %>">
         <span class="prompt">$</span>
         <%= rawStr %>
-        <span class="icons transitionOpacity">
+        <span class="icons transitionAllSlow">
           <i class="icon-exclamation-sign"></i>
           <i class="icon-check-empty"></i>
           <i class="icon-retweet"></i>

src/main.js

@@ -9,6 +9,8 @@ var gitVisuals = null;
 var commandCollection = null;
 var commandBuffer = null;
 
+var paper = null;
+
 $(document).ready(function(){
   // the two major collections that affect everything
   var commitCollection = new CommitCollection();  
@@ -37,12 +39,28 @@ $(document).ready(function(){
 
   $('#commandTextField').focus();
 
+  // make the canvas for us
+  paper = Raphael(10, 10, 200, 200);
+
   $(window).resize(windowResize);
   windowResize();
   setTimeout(windowResize, 50);
 });
 
 function windowResize() {
+  if (paper && paper.canvas) {
     var el = $('#canvasWrapper')[0];
-  $('#treeCanvas').height(el.clientHeight - 10).width(el.clientWidth - 10);
+
+    var left = el.offsetLeft;
+    var top = el.offsetTop;
+    var width = el.clientWidth;
+    var height = el.clientHeight;
+
+    $(paper.canvas).css({
+      left: left + 'px',
+      top: top + 'px'
+    });
+    paper.setSize(width, height);
+  }
+  events.trigger('windowResize');
 }

src/style/main.css

@@ -66,9 +66,16 @@ div.horizontal {
   transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-#treeCanvas {
+.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);
+  -ms-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  -o-transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+  transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+#canvasWrapper {
   box-shadow: 0px 0px 3px black inset;
-  position: absolute;
 }
 
 #interfaceWrapper {
@@ -165,15 +172,21 @@ div.controls div.box.flex1 div.plus {
 p.commandLine, p.commandLineResult {
   opacity: 1;
   font-size: 16px;
-  margin: 2px;
-  background-color: black;
+  margin: 0px;
 }
 
 p.commandLine span.icons {
   float: right;
+}
+
+p.commandLine span.icons i:last-child {
   margin-right: 5px;
 }
 
+p.commandLine span.icons i:first-child {
+  margin-left: 5px;
+}
+
 p.commandLine span.icons i {
   opacity: 0;
 }
@@ -185,23 +198,23 @@ p.commandLine.finished span.icons i.icon-check {
   opacity: 1;
 }
 
-p.commandLine.error {
-  background-color: red;
-}
-
-p.commandLine.inqueue {
+p.commandLine.inqueue span.icons {
   background-color: #EBEB24;
   color: black;
 }
 
-p.commandLine.processing {
-  background-color: #36AD49;
+p.commandLine.processing span.icons {
+  background-color: #88E748;
+  color: black;
+}
+
+p.commandLine.finished span.icons {
+  background-color: #0066cc;
   color: white;
 }
 
-p.commandLine.finished {
-  background-color: #0066cc;
-  color: white;
+p.commandLine.error span.icons {
+  background-color: red;
 }
 
 p.commandResult {
@@ -217,10 +230,6 @@ p.commandLine span.prompt {
   font-weight: bold;
 }
 
-p.commandLine.inqueue span.prompt {
-  color: black;
-}
-
 #commandLineBar {
   text-align: center;
 }