get rid off modal window for issue create/edit

app/assets/javascripts/issues.js

+function switchToNewIssue(form){
+  $("#issues-table-holder").hide("slide", { direction: "left" }, 150, function(){
+    $(".project-content").append(form);
+    $('select#issue_assignee_id').chosen();
+    $("#new_issue_dialog").show("slide", { direction: "right" }, 150);
+  });
+}
+
+function switchToEditIssue(form){
+  $("#issues-table-holder").hide("slide", { direction: "left" }, 150, function(){
+    $(".project-content").append(form);
+    $('select#issue_assignee_id').chosen();
+    $("#edit_issue_dialog").show("slide", { direction: "right" }, 150);
+  });
+}
+
+function switchFromNewIssue(){
+  backToIssues();
+}
+
+function switchFromEditIssue(){
+  backToIssues();
+}
+
+function backToIssues(){
+  $("#edit_issue_dialog, #new_issue_dialog").hide("slide", { direction: "right" }, 150, function(){
+    $("#issues-table-holder").show("slide", { direction: "left" }, 150, function() { 
+      $("#edit_issue_dialog").remove();
+      $("#new_issue_dialog").remove();
+    });
+  });
+}

app/assets/stylesheets/application.css

@@ -40,3 +40,6 @@
 .prepend-top-10 {
   margin-top:10px;
 }
+.no-borders { 
+  border:none;
+}

app/assets/stylesheets/issues.css.scss

@@ -48,3 +48,21 @@
   width:100%;
   .data p { font-size:16px }
 }
+
+#issue_assignee_id {
+  width:300px;
+}
+
+.issue-form-holder .ui-box .data { 
+  margin: 0;
+  padding: 0;
+}
+
+body.project-page .issue-form-holder table.no-borders tr,
+body.project-page .issue-form-holder table.no-borders td
+{
+  &:hover { 
+    background:none;
+  }
+}
+

app/assets/stylesheets/projects.css.scss

@@ -387,3 +387,10 @@ body.dashboard.project-page .news-feed .project-updates a.project-update span.up
 body.project-page .team_member_new .span-6, .team_member_edit .span-6{ padding:10px 0; }
 
 body.projects-page input.text.git-url.project_list_url { width:165px; }
+
+
+
+body.project-page table.no-borders tr,
+body.project-page table.no-borders td{ 
+  border:none;
+}

app/views/issues/_form.html.haml

-%div
-  = form_for [@project, @issue], :remote => "true" do |f|
-    -if @issue.errors.any?
-      %ul
-        - @issue.errors.full_messages.each do |msg|
-          %li= msg
+%div.issue-form-holder
+  .issue-show-holder.ui-box
+    %h3
+      = @issue.new_record? ? "New issue" : "Edit Issue ##{@issue.id}"
+      - unless @issue.new_record?
+        .right
+          - if @issue.closed
+            %span.tag.high Resolved
+          - else 
+            %span.tag.today Open
+    = form_for [@project, @issue], :remote => "true" do |f|
+      .data
+        %table.no-borders
+          -if @issue.errors.any?
+            %tr 
+              %td Errors
+              %td
+                #error_explanation
+                  - @issue.errors.full_messages.each do |msg|
+                    %span= msg
+                    %br
 
-    .form-row
-      = f.label :title
-      = f.text_area :title, :style => "width:450px; height:100px", :maxlength => 255
-    .form-row
-      = f.label :assignee_id
-      = f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { :include_blank => "Select user" })
-    .form-row
-      = f.label :critical, "Critical"
-      %br
-      = f.check_box :critical
-    - unless @issue.new_record?
-      .form-row
-        = f.label :closed
-        %br
-        = f.check_box :closed
-    .form-row
-      = f.submit 'Save', :class => "grey-button"
+          %tr
+            %td= f.label :title
+            %td= f.text_area :title, :style => "width:450px; height:100px", :maxlength => 255
+
+          %tr
+            %td= f.label :assignee_id
+            %td= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { :include_blank => "Select user" })
+
+          %tr
+            %td= f.label :critical, "Critical"
+            %td= f.check_box :critical
+          
+          - unless @issue.new_record?
+            %tr
+              %td= f.label :closed
+              %td= f.check_box :closed
+      .buttons 
+        = f.submit 'Save', :class => "grey-button"
+        .right
+          - if request.xhr? 
+            = link_to_function "Back", "backToIssues();", :class => "grey-button"
+          - else 
+            = link_to "Back", [@project, @issue], :class => "grey-button"

app/views/issues/create.js.haml

 - if @issue.valid?
   :plain
-    $("#new_issue_dialog").dialog("close");
+    switchFromNewIssue();
     $("#issues-table").prepend("#{escape_javascript(render(:partial => 'show', :locals => {:issue => @issue} ))}");
     $.ajax({type: "GET", url: location.href, dataType: "script"});
 - else
   :plain
     $("#new_issue_dialog").empty();
     $("#new_issue_dialog").append("#{escape_javascript(render('form'))}");
-    $('select#issue_assignee_id').selectmenu({width:300});
+    $('select#issue_assignee_id').chosen();

app/views/issues/edit.html.haml

-%div.issue-form-holder
-  = form_for [@project, @issue] do |f|
-    -if @issue.errors.any?
-      %ul
-        - @issue.errors.full_messages.each do |msg|
-          %li= msg
-
-    %table
-      %thead
-        %th Name
-        %th Value
-      %tr
-        %td= f.label :title
-        %td= f.text_area :title, :style => "width:450px; height:100px", :maxlength => 255
-      %tr
-        %td= f.label :assignee_id
-        %td= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { :include_blank => "Select user" })
-      -#%tr
-        %td= f.label :branch_name
-        %td= f.select(:branch_name, @project.heads.map(&:name), { :include_blank => "Select git branch" })
-      %tr
-        %td
-          = f.label :critical, "Critical"
-          %br
-        %td= f.check_box :critical
-      - unless @issue.new_record?
-        %tr
-          %td= f.label :closed
-          %td= f.check_box :closed
-    = f.submit 'Save', :class => "grey-button"
+= render "form"
 
 :javascript 
   $(function(){ 
-    $('select#issue_branch_name').selectmenu({width:300});
-    $('select#issue_assignee_id').selectmenu({width:300});
+    $('select#issue_assignee_id').chosen();
   });
 

app/views/issues/edit.js.haml

 :plain
   var edit_issue_dialog = $("<div id='edit_issue_dialog'></div>");
   edit_issue_dialog.html("#{escape_javascript(render('form'))}");
-  $(edit_issue_dialog).dialog({
-    width: 500,
-    resizable: false,
-    draggable: false,
-    title: "Issue ##{@issue.id} #{"[CLOSED]" if @issue.closed}",
-    close: function(event, ui) { $("#edit_issue_dialog").remove();},
-    modal: true
-  });
-  $('select#issue_assignee_id').selectmenu({width:300});
+  switchToEditIssue(edit_issue_dialog);
+

app/views/issues/new.html.haml

+= render "form"
+
+:javascript 
+  $(function(){ 
+    $('select#issue_assignee_id').chosen();
+  });
+

app/views/issues/new.js.haml

 :plain
   var new_issue_dialog = $("<div id='new_issue_dialog'></div>");
   new_issue_dialog.html("#{escape_javascript(render('form'))}");
-  $(new_issue_dialog).dialog({
-    width: 500,
-    resizable: false,
-    draggable: false,
-    title: "Add new issue",
-    modala: true,
-    close: function(event, ui) { $("#new_issue_dialog").remove();}
-  });
-  $('select#issue_assignee_id').selectmenu({width:300});
+  switchToNewIssue(new_issue_dialog);

app/views/issues/update.js.haml

@@ -5,10 +5,10 @@
 - else
   - if @issue.valid?
     :plain
-      $("#edit_issue_dialog").dialog("close");
       updatePage();
+      switchFromEditIssue();
   - else
     :plain
       $("#edit_issue_dialog").empty();
       $("#edit_issue_dialog").append("#{escape_javascript(render('form'))}");
-      $('select#issue_assignee_id').selectmenu({width:300});
+      $('select#issue_assignee_id').chosen();

spec/requests/issues_spec.rb

@@ -95,18 +95,16 @@ describe "Issues" do
       click_link "New Issue"
     end
 
-    it "should open new issue popup" do
-      page.should have_content("Add new issue")
+    it "should open new issue form" do
+      page.should have_content("New issue")
     end
 
     describe "fill in" do
       describe 'assign to me' do
         before do
           fill_in "issue_title", :with => "bug 345"
-          click_link "Select user"
-          within "#issue_assignee_id-menu" do
-            click_link @user.name
-          end
+          page.execute_script("$('#issue_assignee_id').show();")
+          select @user.name, :from => "issue_assignee_id" 
         end
 
         it { expect { click_button "Save" }.to change {Issue.count}.by(1) }
@@ -129,10 +127,8 @@ describe "Issues" do
       describe 'assign to other' do
         before do
           fill_in "issue_title", :with => "bug 345"
-          click_link "Select user"
-          within "#issue_assignee_id-menu" do
-            click_link @user2.name
-          end
+          page.execute_script("$('#issue_assignee_id').show();")
+          select @user2.name, :from => "issue_assignee_id" 
         end
 
         it { expect { click_button "Save" }.to change {Issue.count}.by(1) }