Improve UI for Issue/MR

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Improve UI for Issue/MR
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent 7e42084f
Showing 7 changed files with 50 additions and 31 deletions Show diff stats
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/generic/issue_box.scss
app/helpers/issues_helper.rb
app/helpers/merge_requests_helper.rb
app/views/projects/issues/show.html.haml
app/views/projects/merge_requests/show/_mr_box.html.haml
app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -88,11 +88,15 @@ pre.well-pre {
 /** Big Labels **/
 .state-label {
   font-size: 14px;
-  padding: 6px 25px;
+  padding: 9px 25px;
   text-align: center;
-  @include border-radius(4px);
   text-shadow: none;
-  margin-left: 10px;
+  margin-right: 20px;
+
+  &.state-label-blue {
+    background: #31708f;
+    color: #FFF;
+  }
   &.state-label-green {
     background: #4A4;
@@ -17,11 +17,10 @@
     margin-bottom: 0;
   }
-  .creator {
-    padding: 8px 25px;
-    background: #eee;
+  .state {
+    height: 34px;
     border-bottom: 1px solid #DDD;
-    color: #777;
+    line-height: 32px;
   }
   .title {
@@ -84,4 +84,12 @@ module IssuesHelper
   def milestone_options object
     options_from_collection_for_select(@project.milestones.active, 'id', 'title', object.milestone_id)
   end
+
+  def issue_alert_class(issue)
+    if issue.closed?
+      'alert-danger'
+    else
+      'alert-success'
+    end
+  end
 end
@@ -41,4 +41,14 @@ module MergeRequestsHelper
       "Branches: #{@merge_request.source_branch} #{separator} #{@merge_request.target_branch}"
     end
   end
+
+  def merge_request_alert_class(merge_request)
+    if merge_request.merged?
+      'alert-info'
+    elsif merge_request.closed?
+      'alert-danger'
+    else
+      'alert-success'
+    end
+  end
 end
 %h3.page-title
   Issue ##{@issue.iid}
-  - if @issue.closed?
-    %span.state-label.state-label-red Closed
-  - else
-    %span.state-label.state-label-green Open
-
   %span.pull-right
     - if can?(current_user, :write_issue, @project)
       = link_to new_project_issue_path(@project), class: "btn grouped", title: "New Issue", id: "new_issue_link" do
@@ -35,8 +30,14 @@
         = @issue.milestone.title
 .issue-box
-  .creator
-    Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
+  .state{ class: issue_alert_class(@issue) }
+    - if @issue.closed?
+      %span.state-label.state-label-red Closed
+    - else
+      %span.state-label.state-label-green Open
+
+    %span.creator
+      Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
   %h4.title
     = gfm escape_once(@issue.title)
 .issue-box
-  .creator
-    Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
+  .state{ class: merge_request_alert_class(@merge_request) }
+    - if @merge_request.merged?
+      %span.state-label.state-label-blue
+        Merged
+    - elsif @merge_request.closed?
+      %span.state-label.state-label-red
+        Closed
+    - else
+      %span.state-label.state-label-green
+        Open
+    %span.creator
+      Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
   %h4.title
     = gfm escape_once(@merge_request.title)
@@ -16,13 +26,13 @@
           = markdown @merge_request.description
   - if @merge_request.closed?
-    .description.alert-danger
+    .description
       %span
         %i.icon-remove
         Closed by #{link_to_member(@project, @merge_request.closed_event.author)}
         #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}.
   - if @merge_request.merged?
-    .description.alert-success
+    .description
       %span
         %i.icon-ok
         Merged by #{link_to_member(@project, @merge_request.merge_event.author)}
 %h3.page-title
   = "Merge Request ##{@merge_request.iid}"
-  - if @merge_request.merged?
-    %span.state-label.state-label-green
-      %i.icon-ok
-      Merged
-  - elsif @merge_request.closed?
-    %span.state-label.state-label-red
-      Closed
-  - else
-    %span.state-label.state-label-green
-      Open
-
-
-
   %span.pull-right
     - if can?(current_user, :modify_merge_request, @merge_request)
       - if @merge_request.opened?
	@@ -84,4 +84,12 @@ module IssuesHelper		@@ -84,4 +84,12 @@ module IssuesHelper
84	def milestone_options object	84	def milestone_options object
85	options_from_collection_for_select(@project.milestones.active, 'id', 'title', object.milestone_id)	85	options_from_collection_for_select(@project.milestones.active, 'id', 'title', object.milestone_id)
86	end	86	end
		87	+
		88	+ def issue_alert_class(issue)
		89	+ if issue.closed?
		90	+ 'alert-danger'
		91	+ else
		92	+ 'alert-success'
		93	+ end
		94	+ end
87	end	95	end
	@@ -41,4 +41,14 @@ module MergeRequestsHelper		@@ -41,4 +41,14 @@ module MergeRequestsHelper
41	"Branches: #{@merge_request.source_branch} #{separator} #{@merge_request.target_branch}"	41	"Branches: #{@merge_request.source_branch} #{separator} #{@merge_request.target_branch}"
42	end	42	end
43	end	43	end
		44	+
		45	+ def merge_request_alert_class(merge_request)
		46	+ if merge_request.merged?
		47	+ 'alert-info'
		48	+ elsif merge_request.closed?
		49	+ 'alert-danger'
		50	+ else
		51	+ 'alert-success'
		52	+ end
		53	+ end
44	end	54	end
1	%h3.page-title	1	%h3.page-title
2	= "Merge Request ##{@merge_request.iid}"	2	= "Merge Request ##{@merge_request.iid}"
3		3
4	- - if @merge_request.merged?
5	- %span.state-label.state-label-green
6	- %i.icon-ok
7	- Merged
8	- - elsif @merge_request.closed?
9	- %span.state-label.state-label-red
10	- Closed
11	- - else
12	- %span.state-label.state-label-green
13	- Open
14	-
15	-
16	-
17	%span.pull-right	4	%span.pull-right
18	- if can?(current_user, :modify_merge_request, @merge_request)	5	- if can?(current_user, :modify_merge_request, @merge_request)
19	- if @merge_request.opened?	6	- if @merge_request.opened?