Bootstrap: issues, notes css

Dmitriy Zaporozhets
1 parent d4ad3623
Showing 12 changed files with 104 additions and 171 deletions Show diff stats
app/assets/javascripts/issues.js
app/assets/stylesheets/common.scss
app/assets/stylesheets/issues.css.scss
app/assets/stylesheets/merge_requests.css.scss
app/assets/stylesheets/notes.css.scss
app/views/commits/_commits.html.haml
app/views/commits/show.html.haml
app/views/issues/_head.html.haml
app/views/issues/_show.html.haml
app/views/issues/index.html.haml
app/views/notes/_form.html.haml
app/views/projects/_project_head.html.haml
 function switchToNewIssue(form){
-  $("#issues-table-holder").hide("slide", { direction: "left" }, 150, function(){
-    $(".project-content").append(form);
+  $("#issues-table").hide("slide", { direction: "left" }, 150, function(){
+    $("#issues-table").after(form);
     $('select#issue_assignee_id').chosen();
     $("#new_issue_dialog").show("slide", { direction: "right" }, 150);
     $('.top-tabs .add_new').hide();
@@ -8,11 +8,11 @@ function switchToNewIssue(form){
 }
 function switchToEditIssue(form){
-  $("#issues-table-holder").hide("slide", { direction: "left" }, 150, function(){
-    $(".project-content").append(form);
+  $("#issues-table").hide("slide", { direction: "left" }, 150, function(){
+    $("#issues-table").after(form);
     $('select#issue_assignee_id').chosen();
     $("#edit_issue_dialog").show("slide", { direction: "right" }, 150);
-    $('.top-tabs .add_new').hide();
+    $('.add_new').hide();
   });
 }
@@ -26,10 +26,10 @@ function switchFromEditIssue(){
 function backToIssues(){
   $("#edit_issue_dialog, #new_issue_dialog").hide("slide", { direction: "right" }, 150, function(){
-    $("#issues-table-holder").show("slide", { direction: "left" }, 150, function() { 
+    $("#issues-table").show("slide", { direction: "left" }, 150, function() { 
       $("#edit_issue_dialog").remove();
       $("#new_issue_dialog").remove();
-      $('.top-tabs .add_new').show();
+      $('.add_new').show();
     });
   });
 }
@@ -87,6 +87,9 @@ $blue_link: &quot;#2fa0bb&quot;;
 .no-padding { 
   padding:0 !important;
 }
+.underlined { 
+  border-bottom: 1px solid $border_color;
+}
 /** LAYOUT **/
@@ -94,7 +97,7 @@ $blue_link: &quot;#2fa0bb&quot;;
   min-width:$min_app_width;
   max-width:$max_app_width;
   margin:auto;
-  margin-top:60px;
+  margin-top:51px;
 }
 .container-fluid > .sidebar { 
@@ -106,6 +109,7 @@ $blue_link: &quot;#2fa0bb&quot;;
 .container-fluid > .content {
   margin-left: 160px;
+  margin-top:20px;
 }
 @import "reset_bootstrap.scss";
@@ -113,12 +117,12 @@ $blue_link: &quot;#2fa0bb&quot;;
 @import "projects.css.scss";
 @import "commits.css.scss";
 @import "tree.scss";
+@import "issues.css.scss";
+@import "merge_requests.css.scss";
+@import "notes.css.scss";
 //@import "style.scss";
-//@import "notes.css.scss";
-//@import "merge_requests.css.scss";
-//@import "issues.css.scss";
 //@import "commits.css.scss";
 //@import "dashboard.scss";
@@ -10,61 +10,6 @@
   color: #444;
 }
-.issues_filter {
-  margin:10px 0;
-  .left { 
-    margin-right:15px;
-  }
-}
-
-.top_panel_issues{
-  #issue_search_form {
-    margin:5px 0;
-    input {
-      border:1px solid #D3D3D3;
-      padding: 3px;
-      height: 28px;
-      width: 250px;
-      -webkit-appearance:none;
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-
-      &:focus {
-        border-color:#c2e1ef;
-      }
-    }
-  }
-}
-
-/** ISSUES LIST **/
-.issue .action-links {
-  display:none;
-  a {
-    margin-left:10px;
-  }
-}
-.issue:hover .action-links { display:block; }
-.issue-show-holder { 
-  width:100%;
-  .data p { font-size:16px }
-}
-
 #issue_assignee_id {
   width:300px;
 }
-
-.issue-form-holder .ui-box .data { 
-  margin: 0;
-  padding: 0;
-}
-
-
-#issues-table {
-  tr { 
-    border-top: 1px solid $lite_border_color;
-    &:first-child { 
-      border:none;
-    }
-  }
-
-}
-// Place all the styles related to the MergeRequests controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-
 .merge-request-form-holder {
   select { 
     width:300px;
@@ -32,7 +32,6 @@
 #notes-list .note .delete-note { display:none; }
 #notes-list .note:hover .delete-note { display:block; }
-
 #notes-list .note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
 #notes-list .note img{float: left; margin-right: 10px;}
 #notes-list .note span.note-title{display: block;}
 - @commits.group_by { |c| c.committed_date.to_date }.each do |day, commits|
   %div{ :class => "commits-date ui-box ui-box-small ui-box-big" }
     .day-commits-table
-      %div.alert-message.info
-        %p= day.stamp("28 Aug, 2010")
-      .data
+      %h5.underlined= day.stamp("28 Aug, 2010")
+      %ul.unstyled
         - commits.each do |commit|
-          %a{ :class => "commit", :href => project_commit_path(@project, :id => commit.id) }
-            %span.commit-info
-              %data.commit-button
-                = truncate(commit.id.to_s, :length => 16)
-                %i
-              %data.commit-browse{ :onclick => "location.href='#{tree_project_ref_path(@project, commit.id)}';return false;"}
-                Browse Code
-            - if commit.author_email
-              = image_tag gravatar_icon(commit.author_email), :class => "left", :width => 40, :style => "padding-right:5px;"
-            - else
-              = image_tag "no_avatar.png", :class => "left", :width => 40, :style => "padding-right:5px;"
-            %span.commit-title
-              %strong
-                = truncate(commit.safe_message, :length => 70)
-            %span.commit-author
-              %strong= commit.author_name
-              = time_ago_in_words(commit.committed_date)
-              ago
+          %li
+            %a{ :class => "commit", :href => project_commit_path(@project, :id => commit.id) }
+              %span.commit-info
+                %data.commit-button
+                  = truncate(commit.id.to_s, :length => 16)
+                  %i
+                %data.commit-browse{ :onclick => "location.href='#{tree_project_ref_path(@project, commit.id)}';return false;"}
+                  Browse Code
+              - if commit.author_email
+                = image_tag gravatar_icon(commit.author_email), :class => "left", :width => 40, :style => "padding-right:5px;"
+              - else
+                = image_tag "no_avatar.png", :class => "left", :width => 40, :style => "padding-right:5px;"
+              %span.commit-title
+                %strong
+                  = truncate(commit.safe_message, :length => 70)
+              %span.commit-author
+                %strong= commit.author_name
+                = time_ago_in_words(commit.committed_date)
+                ago
 .commit
   %span.commit-info
-    = link_to tree_project_ref_path(@project, @commit.id) do 
-      %data.commit-button
-        Browse Code
-        %i
+    = link_to tree_project_ref_path(@project, @commit.id), :class => "btn" do 
+      Browse Code »
   - if @commit.author_email
     = image_tag gravatar_icon(@commit.author_email), :class => "left", :width => 40, :style => "padding-right:5px;"
   - else
-.top-tabs
-  = link_to project_issues_path(@project), :class => "tab #{'active' if current_page?(project_issues_path(@project)) }" do 
-    %span 
-    Issues  
+.tabs
+  %li{:class => "#{'active' if current_page?(project_issues_path(@project))}"}
+    = link_to project_issues_path(@project), :class => "tab" do 
+      Issues  
   -#= link_to project_issues_path(@project), :class => "tab" do 
     %span 
@@ -9,6 +9,7 @@
   - if current_page?(project_issues_path(@project))
     - if can? current_user, :write_issue, @project
-      = link_to new_project_issue_path(@project), :class => "add_new", :title => "New Issue", :remote => true do 
-        Add new
+      %li
+        = link_to new_project_issue_path(@project), :class => "add_new", :title => "New Issue", :remote => true do 
+          Add new
 %tr{ :id => dom_id(issue), :class => "issue #{issue.critical ? "critical" : ""}", :url => project_issue_path(issue.project, issue) }
   %td
-    %strong.issue-number{:class => sort_class}= "##{issue.id}"
+    = image_tag gravatar_icon(issue.assignee_email), :class => "left", :width => 40, :style => "padding-right:5px;"
     %span
       = truncate(html_escape(issue.title), :length => 100)
-    %br
-    %br
     %div.note-author
       %strong= issue.assignee.name
       %cite.cgray
@@ -6,31 +6,25 @@
         = image_tag "Rss-UI.PNG", :width => 22, :title => "feed"
 %div#issues-table-holder
-  .top_panel_issues
-    = form_tag search_project_issues_path(@project), :method => :get, :remote => true, :class => :right, :id => "issue_search_form" do
+  .well
+    = form_tag project_issues_path(@project), :method => :get, :class => :left do
+      = label_tag "open_issues" do 
+        = radio_button_tag :f, 0, (params[:f] || "0") == "0", :onclick => "setIssueFilter(this.form, 0)", :id => "open_issues", :class => "status"
+        %span.tag.open Open
+      = label_tag "closed_issues" do 
+        = radio_button_tag :f, 2, params[:f] == "2", :onclick => "setIssueFilter(this.form, 2)", :id => "closed_issues", :class => "status"
+        %span.tag.closed Closed
+      = label_tag "my_issues" do 
+        = radio_button_tag :f, 3, params[:f] == "3", :onclick => "setIssueFilter(this.form, 3)", :id => "my_issues", :class => "status"
+        %span To Me
+      = label_tag "all_issues" do 
+        = radio_button_tag :f, 1, params[:f] == "1", :onclick => "setIssueFilter(this.form, 1)", :id => "all_issues", :class => "status"
+        %span All
+    = form_tag search_project_issues_path(@project), :method => :get, :remote => true, :id => "issue_search_form", :class => :right  do
       = hidden_field_tag :project_id, @project.id, { :id => 'project_id' }
       = search_field_tag :issue_search, nil, { :placeholder => 'Search', :class => 'issue_search' }
-    .left.issues_filter
-      = form_tag project_issues_path(@project), :method => :get do
-        .left
-          = radio_button_tag :f, 0, (params[:f] || "0") == "0", :onclick => "setIssueFilter(this.form, 0)", :id => "open_issues", :class => "status"
-          = label_tag "open_issues" do 
-            %span.tag.open Open
-        .left
-          = radio_button_tag :f, 2, params[:f] == "2", :onclick => "setIssueFilter(this.form, 2)", :id => "closed_issues", :class => "status"
-          = label_tag "closed_issues" do 
-            %span.tag.closed Closed
-        .left
-          = radio_button_tag :f, 3, params[:f] == "3", :onclick => "setIssueFilter(this.form, 3)", :id => "my_issues", :class => "status"
-          = label_tag "my_issues","To Me"
-        .left
-          = radio_button_tag :f, 1, params[:f] == "1", :onclick => "setIssueFilter(this.form, 1)", :id => "all_issues", :class => "status"
-          = label_tag "all_issues","All"
-
-  .clear
-  %hr
-  %table.no-borders#issues-table
+  %table#issues-table
     = render "issues"
   %br
 :javascript
 %div
+  %h3 Leave a note
   = form_for [@project, @note], :remote => "true", :multipart => true do |f|
     -if @note.errors.any?
       .errors.error
@@ -7,30 +8,25 @@
     = f.hidden_field :noteable_id
     = f.hidden_field :noteable_type
+    = f.text_area :note,  :size => 255
-    %div
-      = f.label :note
-      %cite.cgray markdown supported
-      %br
-      %br
-      = f.text_area :note,  :size => 255
+    .row
+      .span6
+        %h5 Notify via email:
+        .clearfix
+          = label_tag :notify do 
+            = check_box_tag :notify, 1, @note.noteable_type != "Commit"
+            %span Project team
-    %div.attach_holder
-      %br
-      = f.label :attachment
-      %cite.cgray (less than 10 MB)
-      &nbsp;
-      = f.file_field :attachment
-      
-      %p.notify_controls
-        %span Notify:
-        = check_box_tag :notify, 1, @note.noteable_type != "Commit"
-        = label_tag :notify, "Project team"
+          -if @note.noteable_type == "Commit"
+            = label_tag :notify_author do 
+              = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
+              %span Commit author
+      .span6
+        %h5 Attachment:
+        .clearfix
+          = f.label :attachment, "Any file, < 10 MB"
+          .input= f.file_field :attachment, :class => "input-file"
-        -if @note.noteable_type == "Commit"
-          = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
-          = label_tag :notify_author, "Commit author"
-    .clear
-    %br
-    = f.submit 'Add note', :class => "positive-button", :id => "submit_note"
+    = f.submit 'Add note', :class => "btn primary", :id => "submit_note"
-.top-tabs
-  = link_to project_path(@project), :class => "activities-tab tab #{'active' if current_page?(project_path(@project)) }" do 
-    %span
-    Activities
-  = link_to info_project_path(@project), :class => "stat-tab tab #{'active' if current_page?(info_project_path(@project)) || current_page?(edit_project_path(@project)) }" do 
-    %span
-    Info
-  = link_to team_project_path(@project), :class => "team-tab tab #{'active' if current_page?(team_project_path(@project)) }" do 
-    %span 
-    Team
-  = link_to files_project_path(@project), :class => "files-tab tab #{'active' if current_page?(files_project_path(@project)) }" do 
-    %span
-    Files
-  = link_to project_snippets_path(@project), :class => "snippets-tab tab #{'active' if current_page?(project_snippets_path(@project)) }" do 
-    %span
-    Snippets
+%ul.tabs
+  %li{ :class => "#{'active' if current_page?(project_path(@project)) }" }
+    = link_to project_path(@project), :class => "activities-tab tab" do 
+      Activities
+  %li{ :class => "#{'active' if current_page?(info_project_path(@project)) || current_page?(edit_project_path(@project)) }" }
+    = link_to info_project_path(@project), :class => "stat-tab tab " do 
+      Info
+ 
+  %li{ :class => " #{'active' if current_page?(team_project_path(@project)) }" }
+    = link_to team_project_path(@project), :class => "team-tab tab" do 
+      Team
+  %li{ :class => "#{'active' if current_page?(files_project_path(@project)) }" }
+    = link_to files_project_path(@project), :class => "files-tab tab " do 
+      Files
+  %li{ :class => " #{'active' if current_page?(project_snippets_path(@project)) }" }
+    = link_to project_snippets_path(@project), :class => "snippets-tab tab" do 
+      Snippets
   - if current_page?(project_snippets_path(@project))
     - if can? current_user, :write_snippet, @project
-      = link_to new_project_snippet_path(@project), :class => "add_new", :title => "New Snippet" do 
-        Add new
+      %li
+        = link_to new_project_snippet_path(@project), :class => "add_new", :title => "New Snippet" do 
+          Add new
   - if current_page?(team_project_path(@project))
     - if can? current_user, :admin_team_member, @project
-      = link_to new_project_team_member_path(@project), :class => "add_new", :title => "New Team Member" do 
-        Add New
+      %li
+        = link_to new_project_team_member_path(@project), :class => "add_new", :title => "New Team Member" do 
+          Add New
	@@ -10,61 +10,6 @@		@@ -10,61 +10,6 @@
10	color: #444;	10	color: #444;
11	}	11	}
12		12
13	-.issues_filter {
14	- margin:10px 0;
15	- .left {
16	- margin-right:15px;
17	- }
18	-}
19	-
20	-.top_panel_issues{
21	- #issue_search_form {
22	- margin:5px 0;
23	- input {
24	- border:1px solid #D3D3D3;
25	- padding: 3px;
26	- height: 28px;
27	- width: 250px;
28	- -webkit-appearance:none;
29	- box-sizing: border-box;
30	- -moz-box-sizing: border-box;
31	-
32	- &:focus {
33	- border-color:#c2e1ef;
34	- }
35	- }
36	- }
37	-}
38	-
39	-/ ISSUES LIST /
40	-.issue .action-links {
41	- display:none;
42	- a {
43	- margin-left:10px;
44	- }
45	-}
46	-.issue:hover .action-links { display:block; }
47	-.issue-show-holder {
48	- width:100%;
49	- .data p { font-size:16px }
50	-}
51	-
52	#issue_assignee_id {	13	#issue_assignee_id {
53	width:300px;	14	width:300px;
54	}	15	}
55	-
56	-.issue-form-holder .ui-box .data {
57	- margin: 0;
58	- padding: 0;
59	-}
60	-
61	-
62	-#issues-table {
63	- tr {
64	- border-top: 1px solid $lite_border_color;
65	- &:first-child {
66	- border:none;
67	- }
68	- }
69	-
70	-}
1	-// Place all the styles related to the MergeRequests controller here.
2	-// They will automatically be included in application.css.
3	-// You can use Sass (SCSS) here: http://sass-lang.com/
4	-
5	-
6	.merge-request-form-holder {	1	.merge-request-form-holder {
7	select {	2	select {
8	width:300px;	3	width:300px;
	@@ -32,7 +32,6 @@		@@ -32,7 +32,6 @@
32		32
33	#notes-list .note .delete-note { display:none; }	33	#notes-list .note .delete-note { display:none; }
34	#notes-list .note:hover .delete-note { display:block; }	34	#notes-list .note:hover .delete-note { display:block; }
35	-
36	#notes-list .note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;}	35	#notes-list .note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
37	#notes-list .note img{float: left; margin-right: 10px;}	36	#notes-list .note img{float: left; margin-right: 10px;}
38	#notes-list .note span.note-title{display: block;}	37	#notes-list .note span.note-title{display: block;}