merge_requests restyle with forms

app/assets/stylesheets/projects.css.scss

@@ -555,44 +555,78 @@ h4.middle-panel {
 .merge-tabs { 
   margin: 0; 
   border: 1px solid #ccc; 
-  padding: 10px;
-  font-size: 11px;
-  font-weight: bold; text-transform: uppercase;
+  padding: 5px;
+  font-size: 12px;
   background: #F7F7F7;
   margin-bottom:20px;
+  height:26px;
 
-  a { 
-    margin-right:5px;
-    @include round-borders-all(4px);
-    border: 1px solid #ddd;
+  .tab { 
+    font-weight: bold;
+    text-transform: uppercase;
+    border-right: 1px solid #ddd;
     background:none;
-    padding: 4px 10px;
-    width:160px;
+    padding: 10px;
+    width:60px;
+    float:left;
+    position:relative;
+    top:-5px;
+    left:-5px;
+    height:16px;
+    padding-left:34px;
+
+    span { 
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      position: absolute;
+      left: 8px;
+      top: 8px;
+    }
 
     &.active {
       background: #eaeaea;
     }
   }
 }
-.merge-tabs .reopen-request { 
-  @include round-borders-all(4px);
-  padding:2px 4px;
-  border:1px solid #aaa;
-  text-shadow:none;
-  background: #D12F19;
-  color:white;
-}
 
-.merge-tabs .close-request { 
-  @include round-borders-all(4px);
-  padding:2px 4px;
-  border:1px solid #aaa;
-  text-shadow:none;
-  background: #44aa22;
-  color:white;
-}
+.merge-notes-tab span {  background: url("images.png") no-repeat -161px -1px; } 
+.merge-commits-tab span {  background: url("images.png") no-repeat -86px 1px; } 
+.merge-diffs-tab span {  background: url("images.png") no-repeat -118px 1px; } 
+.merge-tabs .dashboard-loader { padding:8px; }
 
 .user-mention { 
   color: #2FA0BB;
   font-weight: bold;
 }
+
+.author { 
+  color: #999;
+}
+
+
+.red-button{
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 5px 17px;
+  border: 1px solid #999;
+  color: #666;
+  display: inline-block;
+  box-shadow: 0 1px 2px rgba(0,0,0,.3);
+  background: #D12F19;
+  color: white;
+}
+
+.positive-button{
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 5px 17px;
+  border: 1px solid #999;
+  color: #666;
+  display: inline-block;
+  box-shadow: 0 1px 2px rgba(0,0,0,.3);
+  background: #4A2;
+  color: white;
+}

app/assets/stylesheets/style.scss

@@ -130,7 +130,7 @@ table  tr:hover, .listed_items tr.odd:hover{background-color:#FFFFCF}
   border-radius: 5px;
   font-size: 12px;
   font-weight: bold;
-  padding: 6px 20px;
+  padding: 5px 17px;
   border: 1px solid #999;
   color: #666;
   display: inline-block;

app/models/project.rb

@@ -90,6 +90,10 @@ class Project < ActiveRecord::Base
     users_projects.find_by_user_id(user.id) if user
   end
 
+  def team_member_by_id(user_id)
+    users_projects.find_by_user_id(user_id)
+  end
+
   def fresh_issues(n)
     issues.includes(:project, :author).order("created_at desc").first(n)
   end

app/views/merge_requests/_form.html.haml

-%div.merge-request-form-holder
-  .ui-box.width-100p
-    %h3
-      = @merge_request.new_record? ? "New Merge Request" : "Edit Merge Request ##{@merge_request.id}"
-    = form_for [@project, @merge_request] do |f|
-      .data
+= form_for [@project, @merge_request] do |f|
+  %div
+    %span.entity-info
+      - if @merge_request.new_record?
+        = link_to project_merge_requests_path(@project) do 
+          .entity-button
+            Back
+            %i
+      - else    
+        = link_to project_merge_request_path(@project, @merge_request) do 
+          .entity-button
+            Back
+            %i
+
+    %h2= @merge_request.new_record? ? "New Merge Request" : "Edit Merge Request ##{@merge_request.id}"
+
+    %hr
   %table.no-borders
     -if @merge_request.errors.any?
       %tr 
-              %td Errors
-              %td
+        %td{:colspan => 2}
           #error_explanation
             - @merge_request.errors.full_messages.each do |msg|
               %span= msg
               %br
-
-          %tr
-            %td= f.label :title
-            %td= f.text_field :title
     %tr
       %td= f.label :source_branch, "From"
-            %td= f.select(:source_branch, @project.heads.map(&:name), { :include_blank => "Select branch" })
+      %td= f.select(:source_branch, @project.heads.map(&:name), { :include_blank => "Select branch" }, :style => "width:250px")
     %tr
       %td= f.label :target_branch, "To"
-            %td= f.select(:target_branch, @project.heads.map(&:name), { :include_blank => "Select branch" })
+      %td= f.select(:target_branch, @project.heads.map(&:name), { :include_blank => "Select branch" }, :style => "width:250px")
     %tr
       %td= f.label :assignee_id, "Assign to"
-            %td= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { :include_blank => "Select user" })
-      .buttons
+      %td= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { :include_blank => "Select user" }, :style => "width:250px")
+  = f.text_area :title, :style => "width:718px; height:100px", :maxlength => 255
+  %br
+  %br
+  .merge-tabs
     = f.submit 'Save', :class => "grey-button"
      
-        = link_to 'Back', project_merge_requests_path(@project), :class => "grey-button"
     - unless @merge_request.new_record?
       .right
-            = link_to 'Remove', [@project, @merge_request], :confirm => 'Are you sure?', :method => :delete, :class => "grey-button"
+        = link_to 'Remove', [@project, @merge_request], :confirm => 'Are you sure?', :method => :delete, :class => "red-button"
+
+
 
 
 :javascript

app/views/merge_requests/show.html.haml

@@ -15,33 +15,42 @@
       .tag.commit.inline= @merge_request.target_branch
   %span.commit-author
     %strong
-      = link_to project_team_member_path(@project, @project.users_projects.find(@merge_request.author.id)) do 
-        = @merge_request.author_name
+      = link_to project_team_member_path(@project, @project.team_member_by_id(@merge_request.author.id)) do 
+        %span.author= @merge_request.author_name
       →
-      = link_to project_team_member_path(@project, @project.users_projects.find(@merge_request.assignee.id)) do 
-        = @merge_request.assignee_name
+      = link_to project_team_member_path(@project, @project.team_member_by_id(@merge_request.assignee.id)) do 
+        %span.author= @merge_request.assignee_name
 
      
      
     = @merge_request.created_at.stamp("Aug 21, 2011 9:23pm")
 
   %hr
-  %h3= @merge_request.title
+  %br
+  %h3
+    = simple_format @merge_request.title
 
 .clear
 %br
 %br
 
 .merge-tabs
-  = link_to "Notes", "#notes", :class => "merge-notes-tab active"
-  = link_to "Commits","#commits", "data-url" => commits_project_merge_request_path(@project, @merge_request), :class => "merge-commits-tab"
-  = link_to "Diff", "#diffs", "data-url" => diffs_project_merge_request_path(@project, @merge_request), :class => "merge-diffs-tab"
+  = link_to "#notes", :class => "merge-notes-tab active tab" do 
+    %span
+    Notes
+  = link_to "#commits", "data-url" => commits_project_merge_request_path(@project, @merge_request), :class => "merge-commits-tab tab" do 
+    %span
+    Commits
+  = link_to "#diffs", "data-url" => diffs_project_merge_request_path(@project, @merge_request), :class => "merge-diffs-tab tab" do
+    %span
+    Diff
+
   - if can?(current_user, :admin_project, @project) || @merge_request.author == current_user
     .right
       - if @merge_request.closed
-        = link_to 'Reopen', project_merge_request_path(@project, @merge_request, :merge_request => {:closed => false }, :status_only => true), :method => :put,  :class => "reopen-request"
+        = link_to 'Reopen', project_merge_request_path(@project, @merge_request, :merge_request => {:closed => false }, :status_only => true), :method => :put,  :class => "red-button"
       - else
-        = link_to 'Close', project_merge_request_path(@project, @merge_request, :merge_request => {:closed => true }, :status_only => true), :method => :put, :class => "close-request", :title => "Close merge request"
+        = link_to 'Close', project_merge_request_path(@project, @merge_request, :merge_request => {:closed => true }, :status_only => true), :method => :put, :class => "positive-button", :title => "Close merge request"
   %img{:src => "/assets/ajax-loader-facebook.gif", :class => "dashboard-loader"}
 
 .merge-request-notes

spec/requests/merge_requests_spec.rb

@@ -42,8 +42,8 @@ describe "MergeRequests" do
 
       it { should have_content(@merge_request.title) }
       it "Show page should inform user that merge request closed" do 
-        within ".merge-request-show-holder h3" do 
-          page.should have_content "Closed" 
+        within ".merge-tabs" do 
+          page.should have_content "Reopen" 
         end
       end
     end
@@ -62,7 +62,7 @@ describe "MergeRequests" do
     it { current_path.should == project_merge_request_path(project, project.merge_requests.last) }
 
     it "should create merge request" do
-      page.should have_content "Open"
+      page.should have_content "Close"
       page.should have_content @user.name
     end
   end