merge_requests restyle with forms

2011-12-13 23:24:31 +02:00 · 2011-12-13 23:24:31 +02:00 · 6f32ccf432
commit 6f32ccf432
parent 3a50b6cac9
6 changed files with 130 additions and 73 deletions
--- a/app/assets/stylesheets/projects.css.scss
+++ b/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;
+}
--- a/app/assets/stylesheets/style.scss
+++ b/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;
--- a/app/models/project.rb
+++ b/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
--- a/app/views/merge_requests/_form.html.haml
+++ b/app/views/merge_requests/_form.html.haml
@ -1,38 +1,48 @@
-%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
-        %table.no-borders
-          -if @merge_request.errors.any?
-            %tr 
-              %td Errors
-              %td
-                #error_explanation
-                  - @merge_request.errors.full_messages.each do |msg|
-                    %span= msg
-                    %br
+= 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{:colspan => 2}
+          #error_explanation
+            - @merge_request.errors.full_messages.each do |msg|
+              %span= msg
+              %br
+    %tr
+      %td= f.label :source_branch, "From"
+      %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" }, :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" }, :style => "width:250px")
+  = f.text_area :title, :style => "width:718px; height:100px", :maxlength => 255
+  %br
+  %br
+  .merge-tabs
+    = f.submit 'Save', :class => "grey-button"
+    &nbsp;
+    - unless @merge_request.new_record?
+      .right
+        = link_to 'Remove', [@project, @merge_request], :confirm => 'Are you sure?', :method => :delete, :class => "red-button"
+

-          %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" })
-          %tr
-            %td= f.label :target_branch, "To"
-            %td= f.select(:target_branch, @project.heads.map(&:name), { :include_blank => "Select branch" })
-          %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
-        = f.submit 'Save', :class => "grey-button"
-        &nbsp;
-        = 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"


 :javascript
--- a/app/views/merge_requests/show.html.haml
+++ b/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
      &rarr;
-      = 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

    &nbsp;
    &nbsp;
    = @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
--- a/spec/requests/merge_requests_spec.rb
+++ b/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