Ajax branch/tag switch for tree view

Dmitriy Zaporozhets
1 parent 97e97743
Showing 11 changed files with 151 additions and 110 deletions Show diff stats
app/assets/javascripts/tree.js
app/assets/stylesheets/common.scss
app/assets/stylesheets/projects.css.scss
app/assets/stylesheets/top_panel.scss
app/assets/stylesheets/tree.scss
app/controllers/refs_controller.rb
app/views/layouts/_head_panel.html.haml
app/views/layouts/_project_side.html.haml
app/views/layouts/_project_side_right.html.haml
app/views/layouts/_projects_side.html.haml
app/views/refs/_tree.html.haml
@@ -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"); } 
       });
@@ -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;
@@ -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;
+    }
+  }
+}
+
@@ -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;
@@ -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;
   }
 }
@@ -13,13 +13,22 @@ class RefsController &lt; ApplicationController
   layout "project"
   def switch 
-    new_path = if params[:destination] == "tree"
-                 tree_project_ref_path(@project, params[:ref]) 
-               else
-                 project_commits_path(@project, :ref => params[:ref])
-               end
+    respond_to do |format| 
+      format.html do 
+        new_path = if params[:destination] == "tree"
+                     tree_project_ref_path(@project, params[:ref]) 
+                   else
+                     project_commits_path(@project, :ref => params[:ref])
+                   end
-    redirect_to new_path
+        redirect_to new_path 
+      end
+      format.js do 
+        @ref = params[:ref]
+        define_tree_vars
+        render "tree"
+      end
+    end
   end
   #
@@ -11,7 +11,7 @@
           = truncate @project.name, :length => 28
         .git_url_wrapper
           %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
-        - if @project.repo_exists?
+        -#- if @project.repo_exists?
           .left{:style => "margin-left:5px;"}
             = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
         = yield :rss_icon
@@ -6,8 +6,8 @@
       - if @project.repo_exists?
         = link_to "Repository", project_repository_path(@project), :class => repository_tab_class
-        = link_to "Tree", tree_project_ref_path(@project, @ref || @project.root_ref), :class => tree_tab_class
-        = link_to "Commits", project_commits_path(@project, :ref => (@ref || @project.root_ref)), :class => (controller.controller_name == "commits") ? "current" : nil
+        = link_to "Tree", tree_project_ref_path(@project), :class => tree_tab_class
+        = link_to "Commits", project_commits_path(@project), :class => (controller.controller_name == "commits") ? "current" : nil
         = link_to "Network", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil
         = link_to  project_issues_filter_path(@project), :class => (controller.controller_name == "issues") ? "current" : nil do
           Issues
@@ -6,38 +6,41 @@
       = yield :sidebar_top_block
     - else
       - if can? current_user, :write_project, @project
-        %h4 Report
-        %ul
-          %li
-            = link_to new_project_issue_path(@project), :title => "New Issue", :class => "" do 
+        .alert-message.block-message.info
+          You have access to create new issue or merge request.
+          %div
+            = link_to new_project_issue_path(@project), :title => "New Issue", :class => "btn small" do 
               New Issue »
-          %li
-            = link_to new_project_merge_request_path(@project), :title => "New Merge Request", :class => "" do 
+          %div
+            = link_to new_project_merge_request_path(@project), :title => "New Merge Request", :class => "btn small" do 
               New Merge Request »
-    %h4
-      Recent Projects:
-    %ul
-      - current_user.projects.order("id DESC").limit(5).each do |project|
-        %li
-          = link_to project_path(project) do
-            = project.name
+  - if current_user.projects.count > 0
+    %div.entry
+      %h5
+        Recent Projects:
+      %ul
+        - current_user.projects.order("id DESC").limit(5).each do |project|
+          %li
+            = link_to project_path(project) do
+              = project.name
+      = link_to "More  » ", projects_path
-    %h4
-      Recent Issues:
-    %ul
-      - current_user.assigned_issues.order("id DESC").limit(5).each do |issue|
-        %li
-          = link_to project_issue_path(issue.project, issue) do
-            = truncate issue.title
+    -#%h4
+      -#Recent Issues:
+    -#%ul
+      -#- current_user.assigned_issues.order("id DESC").limit(5).each do |issue|
+        -#%li
+          -#= link_to project_issue_path(issue.project, issue) do
+            -#= truncate issue.title
-    %h4
-      Recent Requests:
-    %ul
-      - current_user.assigned_merge_requests.order("id DESC").limit(5).each do |issue|
-        %li
-          = link_to project_merge_request_path(issue.project, issue) do
-            = truncate issue.title
+    -#%h4
+      -#Recent Requests:
+    -#%ul
+      -#- current_user.assigned_merge_requests.order("id DESC").limit(5).each do |issue|
+        -#%li
+          -#= link_to project_merge_request_path(issue.project, issue) do
+            -#= truncate issue.title
@@ -7,29 +7,32 @@
       = link_to new_project_path, :class => "btn small" do 
         New Project
-  %h4
-    Recent Projects:
-  %ul
-    - current_user.projects.order("id DESC").limit(5).each do |project|
-      %li
-        = link_to project_path(project) do
-          = project.name
+  - if current_user.projects.count > 0
+    %div.entry
+      %h5
+        Recent Projects:
+      %ul
+        - current_user.projects.order("id DESC").limit(5).each do |project|
+          %li
+            = link_to project_path(project) do
+              = project.name
+      = link_to "More  » ", projects_path
-  %h4
-    Recent Issues:
-  %ul
-    - current_user.assigned_issues.order("id DESC").limit(5).each do |issue|
-      %li
-        = link_to project_issue_path(issue.project, issue) do
-          = truncate issue.title
+  -#%h5
+    -#Your Issues:
+  -#%ul
+    -#- current_user.assigned_issues.order("id DESC").limit(5).each do |issue|
+      -#%li
+        -#= link_to project_issue_path(issue.project, issue) do
+          -#= truncate issue.title
-  %h4
-    Recent Requests:
-  %ul
-    - current_user.assigned_merge_requests.order("id DESC").limit(5).each do |issue|
-      %li
-        = link_to project_merge_request_path(issue.project, issue) do
-          = truncate issue.title
+  -#%h5
+    -#Your Merge Requests:
+  -#%ul
+    -#- current_user.assigned_merge_requests.order("id DESC").limit(5).each do |issue|
+      -#%li
+        -#= link_to project_merge_request_path(issue.project, issue) do
+          -#= truncate issue.title
 %ul.breadcrumb
   %li
+    = form_tag switch_project_refs_path(@project), :method => :get, :class => "project-refs-form left", :remote => true do
+      = select_tag "ref", grouped_options_refs, :onchange => "$(this.form).trigger('submit');", :class => "project-refs-select"
+      = hidden_field_tag :destination, "tree"
+      = hidden_field_tag :path, params[:path]
+
+  %li
     = link_to tree_project_ref_path(@project, @ref, :path => nil), :remote => true do
       = @project.code
   - tree.breadcrumbs(6) do |link|
     \/
     %li= link
-  %span.tree_progress
 .clear
+%div.tree_progress
+  = image_tag "ajax-loader.gif"
 #tree-content-holder
   - if tree.is_blob?
     = render :partial => "refs/tree_file", :locals => { :name => tree.name, :content => tree.data, :file => tree }
@@ -42,12 +49,20 @@
           - else
             = simple_format(content.data)
+- if params[:path]
+  - history_path = tree_file_project_ref_path(@project, @ref, params[:path])
+- else
+  - history_path = tree_project_ref_path(@project, @ref)
 :javascript
   $(function(){
     $('select#branch').selectmenu({style:'popup', width:200});
     $('select#tag').selectmenu({style:'popup', width:200});
+    $('.project-refs-select').chosen();
+
+    history.pushState({ path: this.path }, '', "#{history_path}")
   });
+
 - if params[:path] && request.xhr?
   :javascript
     $(window).unbind('popstate');
	@@ -9,7 +9,7 @@ $active_bg_color:#79C3E0;		@@ -9,7 +9,7 @@ $active_bg_color:#79C3E0;
9	$active_bd_color: #2FA0BB;	9	$active_bd_color: #2FA0BB;
10	$border_color:#CCC;	10	$border_color:#CCC;
11	$lite_border_color:#EEE;	11	$lite_border_color:#EEE;
12	-$min_app_width:940px;	12	+$min_app_width:980px;
13	$max_app_width:980px;	13	$max_app_width:980px;
14	$app_padding:20px;	14	$app_padding:20px;
15	$bg_color: #FFF;	15	$bg_color: #FFF;
	@@ -15,17 +15,6 @@		@@ -15,17 +15,6 @@
15	.handle:hover {	15	.handle:hover {
16	cursor:move;	16	cursor:move;
17	}	17	}
18	-.project-refs-form {
19	- span {
20	- background:none !important;
21	- position:static !important;
22	- width:auto !important;
23	- height:auto !important;
24	- }
25	-}
26	-.project-refs-select {
27	- width:200px;
28	-}
29		18
30	/* Project Dashboard Page */	19	/* Project Dashboard Page */
31	.news-feed h2 {	20	.news-feed h2 {
	@@ -151,3 +140,54 @@ a.project-update.titled {		@@ -151,3 +140,54 @@ a.project-update.titled {
151	height: 70%;	140	height: 70%;
152	overflow: hidden;	141	overflow: hidden;
153	}	142	}
		143	+
		144	+
		145	+/ Branch/tag selector /
		146	+.project-refs-form {
		147	+ margin:0;
		148	+ span {
		149	+ background:none !important;
		150	+ position:static !important;
		151	+ width:auto !important;
		152	+ height:auto !important;
		153	+ }
		154	+}
		155	+.project-refs-select {
		156	+ width:120px;
		157	+}
		158	+
		159	+.project-refs-form .chzn-container {
		160	+ position:relative;
		161	+ top: -5px;
		162	+ left: -11px;
		163	+
		164	+ .chzn-drop {
		165	+ margin:7px 0;
		166	+ border: 1px solid #CCC;
		167	+ min-width: 300px;
		168	+
		169	+ .chzn-results {
		170	+ max-height:300px;
		171	+ }
		172	+
		173	+ .chzn-search input {
		174	+ min-width:200px;
		175	+ }
		176	+ }
		177	+
		178	+ .chzn-single {
		179	+ background:#ddd;
		180	+ //border:none;
		181	+ //box-shadow:none;
		182	+
		183	+ div {
		184	+ background:transparent;
		185	+ border-left:none;
		186	+ }
		187	+
		188	+ span {
		189	+ font-weight: normal;
		190	+ }
		191	+ }
		192	+}
		193	+
	@@ -105,35 +105,6 @@ body header {		@@ -105,35 +105,6 @@ body header {
105	}	105	}
106		106
107		107
108	-.top_panel_holder .chzn-container {
109	- position:relative;
110	-
111	- .chzn-drop {
112	- margin:7px 0;
113	- border: 1px solid #CCC;
114	- min-width: 300px;
115	-
116	- .chzn-results {
117	- max-height:300px;
118	- }
119	- }
120	-
121	- .chzn-single {
122	- background:transparent;
123	- -moz-border-radius: 4px;
124	- border-radius: 4px;
125	-
126	- div {
127	- background:transparent;
128	- border-left:none;
129	- }
130	-
131	- span {
132	- font-weight: normal;
133	- }
134	- }
135	-}
136	-
137	.rss-icon {	108	.rss-icon {
138	margin:0 15px;	109	margin:0 15px;
139	padding:3px;	110	padding:3px;
	@@ -13,13 +13,22 @@ class RefsController < ApplicationController		@@ -13,13 +13,22 @@ class RefsController < ApplicationController
13	layout "project"	13	layout "project"
14		14
15	def switch	15	def switch
16	- new_path = if params[:destination] == "tree"
17	- tree_project_ref_path(@project, params[:ref])
18	- else
19	- project_commits_path(@project, :ref => params[:ref])
20	- end	16	+ respond_to do \|format\|
		17	+ format.html do
		18	+ new_path = if params[:destination] == "tree"
		19	+ tree_project_ref_path(@project, params[:ref])
		20	+ else
		21	+ project_commits_path(@project, :ref => params[:ref])
		22	+ end
21		23
22	- redirect_to new_path	24	+ redirect_to new_path
		25	+ end
		26	+ format.js do
		27	+ @ref = params[:ref]
		28	+ define_tree_vars
		29	+ render "tree"
		30	+ end
		31	+ end
23	end	32	end
24		33
25	#	34	#
	@@ -11,7 +11,7 @@		@@ -11,7 +11,7 @@
11	= truncate @project.name, :length => 28	11	= truncate @project.name, :length => 28
12	.git_url_wrapper	12	.git_url_wrapper
13	%input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}	13	%input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
14	- - if @project.repo_exists?	14	+ -#- if @project.repo_exists?
15	.left{:style => "margin-left:5px;"}	15	.left{:style => "margin-left:5px;"}
16	= render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }	16	= render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
17	= yield :rss_icon	17	= yield :rss_icon