Ajax branch/tag switch for tree view

app/assets/javascripts/tree.js

@@ -5,13 +5,16 @@
 var Tree = { 
   init: 
     function() { 
-      (new Image).src = "/assets/ajax-loader-facebook.gif";
-
-      $('#tree-slider .tree-item-file-name a, .breadcrumb a').live("click", function() {
-        history.pushState({ path: this.path }, '', this.href)
+      $('#tree-slider .tree-item-file-name a, .breadcrumb li > a').live("click", function() {
         $("#tree-content-holder").hide("slide", { direction: "left" }, 150)
       })
 
+      $('.project-refs-form').live({
+        "ajax:beforeSend": function() { 
+          $("#tree-content-holder").hide("slide", { direction: "left" }, 150); 
+        }
+      })
+
       $("#tree-slider .tree-item").live('click', function(e){
         if(e.target.nodeName != "A") {
           link = $(this).find(".tree-item-file-name a");
@@ -19,7 +22,7 @@ var Tree = {
         }
       });
 
-      $('#tree-slider td.tree-item-file-name a, .breadcrumb a').live({ 
+      $('#tree-slider .tree-item-file-name a, .breadcrumb a, .project-refs-form').live({ 
         "ajax:beforeSend": function() { $('.tree_progress').addClass("loading"); },
         "ajax:complete": function() { $('.tree_progress').removeClass("loading"); } 
       });

app/assets/stylesheets/common.scss

@@ -9,7 +9,7 @@ $active_bg_color:#79C3E0;
 $active_bd_color: #2FA0BB;
 $border_color:#CCC;
 $lite_border_color:#EEE;
-$min_app_width:940px;
+$min_app_width:980px;
 $max_app_width:980px;
 $app_padding:20px;
 $bg_color: #FFF;

app/assets/stylesheets/projects.css.scss

@@ -15,17 +15,6 @@
 .handle:hover {
   cursor:move;
 }
-.project-refs-form {
-  span {
-    background:none !important;
-    position:static !important;
-    width:auto !important;
-    height:auto !important;
-  }
-}
-.project-refs-select {
-  width:200px;
-}
 
 /* Project Dashboard Page */
 .news-feed h2 {
@@ -151,3 +140,54 @@ a.project-update.titled {
   height: 70%;
   overflow: hidden;
 }
+
+
+/** Branch/tag selector **/
+.project-refs-form {
+  margin:0;
+  span {
+    background:none !important;
+    position:static !important;
+    width:auto !important;
+    height:auto !important;
+  }
+}
+.project-refs-select {
+  width:120px;
+}
+
+.project-refs-form .chzn-container { 
+  position:relative;
+  top: -5px;
+  left: -11px;
+
+  .chzn-drop { 
+    margin:7px 0;
+    border: 1px solid #CCC;
+    min-width: 300px;
+
+    .chzn-results { 
+      max-height:300px;
+    }
+
+    .chzn-search input {
+      min-width:200px;
+    }
+  }
+
+  .chzn-single { 
+    background:#ddd;
+    //border:none;
+    //box-shadow:none;
+
+    div { 
+      background:transparent;
+      border-left:none;
+    }
+
+    span { 
+      font-weight: normal;
+    }
+  }
+}
+

app/assets/stylesheets/top_panel.scss

@@ -105,35 +105,6 @@ body header {
 }
 
 
-.top_panel_holder .chzn-container { 
-  position:relative;
-
-  .chzn-drop { 
-    margin:7px 0;
-    border: 1px solid #CCC;
-    min-width: 300px;
-
-    .chzn-results { 
-      max-height:300px;
-    }
-  }
-
-  .chzn-single { 
-    background:transparent;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-
-    div { 
-      background:transparent;
-      border-left:none;
-    }
-
-    span { 
-      font-weight: normal;
-    }
-  }
-}
-
 .rss-icon { 
   margin:0 15px;
   padding:3px;

app/assets/stylesheets/tree.scss

@@ -8,13 +8,10 @@
 }
 
 .tree_progress { 
-  float:left;
-  width:16px;
-  height:16px;
-  margin:2px 6px;
+  display:none;
+  margin:20px;
   &.loading { 
-    background-position: 0px 0px;
-    background: url("ajax-loader-facebook.gif") no-repeat;
+    display:block;
   }
 }