Merge branch 'hanloong/gitlab-ce-add-dates-snippets-show' into 'master'

Update style of snippets pages

![Screen_Shot_2015-10-18_at_13.04.13](/uploads/95d58b64fa81aa4e75568d2d7b4a6b08/Screen_Shot_2015-10-18_at_13.04.13.png)

![Screen_Shot_2015-10-21_at_11.11.10](/uploads/106371d718a07a9ccdad9148812211fd/Screen_Shot_2015-10-21_at_11.11.10.png)

Replaces !1567.

Fixes #1767 and #2538.


See merge request !1637

20 files changed, 171 insertions, 138 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 3ca30375f6d..fa630f354c4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -78,6 +78,7 @@ v 8.1.0
   - Fix position of hamburger in header for smaller screens (Han Loong Liauw)
   - Fix bug where Emojis in Markdown would truncate remaining text (Sakata Sinji)
   - Persist filters when sorting on admin user page (Jerry Lukins)
+  - Update style of snippets pages (Han Loong Liauw)
   - Allow dashboard and group issues/MRs to be filtered by label
   - Add spellcheck=false to certain input fields
   - Invalidate stored service password if the endpoint URL is changed
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e5f0c0ad9ef..04024419584 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -162,10 +162,21 @@
     border-color: #e7e9ed;
     width: 140px;
 
+    .badge {
+      font-weight: normal;
+      background-color: #eee;
+      color: #78a;
+    }
+
     &.active {
       border-color: $gl-info;
       background: $gl-info;
       color: #fff;
+
+      .badge {
+        color: $gl-info;
+        background-color: white;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 089e6958eeb..1d798344890 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -147,7 +147,6 @@
 
     .badge {
       font-weight: normal;
-      background-color: #fff;
       background-color: #eee;
       color: #78a;
     }
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index a3d7aba054d..242783a7b7e 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -1,8 +1,3 @@
-.my-snippets li:first-child {
-  h4 { margin-top: 0; }
-  padding-top: 0;
-}
-
 .snippet-form-holder .file-holder .file-title {
   padding: 2px;
 }
@@ -30,3 +25,58 @@
     }
   }
 }
+
+.snippet-holder {
+  .snippet-details {
+    .page-title {
+      margin-top: -15px;
+      padding: 10px 0;
+      margin-bottom: 0;
+      color: #5c5d5e;
+      font-size: 16px;
+
+      .author {
+        color: #5c5d5e;
+      }
+
+      .snippet-id {
+        color: #5c5d5e;
+      }
+    }
+
+    .snippet-title {
+      margin: 0;
+      font-size: 23px;
+      color: #313236;
+    }
+
+    @media (max-width: $screen-md-max) {
+      .new-snippet-link {
+        display: none;
+      }
+    }
+
+    @media (max-width: $screen-sm-max) {
+      .creator,
+      .page-title .btn-close {
+        display: none;
+      }
+    }
+  }
+
+  .file-holder {
+    border-top: 0;
+  }
+}
+
+
+.snippet-box {
+  @include border-radius(2px);
+
+  display: inline-block;
+  padding: 10px $gl-padding;
+  font-weight: normal;
+  margin-right: 10px;
+  font-size: $gl-font-size;
+  border: 1px solid;
+}
diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb
index b07a2a8db2f..2104c7a7a71 100644
--- a/app/controllers/projects/snippets_controller.rb
+++ b/app/controllers/projects/snippets_controller.rb
@@ -21,6 +21,7 @@ class Projects::SnippetsController < Projects::ApplicationController
       filter: :by_project,
       project: @project
     })
+    @snippets = @snippets.page(params[:page]).per(PER_PAGE)
   end
 
   def new
diff --git a/app/helpers/tab_helper.rb b/app/helpers/tab_helper.rb
index 0e7d8065ac7..04e53fe7c61 100644
--- a/app/helpers/tab_helper.rb
+++ b/app/helpers/tab_helper.rb
@@ -110,22 +110,4 @@ module TabHelper
       'active'
     end
   end
-
-  # Use nav_tab for save controller/action  but different params
-  def nav_tab(key, value, &block)
-    o = {}
-    o[:class] = ""
-
-    if value.nil?
-      o[:class] << " active" if params[key].blank?
-    else
-      o[:class] << " active" if params[key] == value
-    end
-
-    if block_given?
-      content_tag(:li, capture(&block), o)
-    else
-      content_tag(:li, nil, o)
-    end
-  end
 end
diff --git a/app/views/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml
index d3908062f43..07b6d57932e 100644
--- a/app/views/dashboard/snippets/index.html.haml
+++ b/app/views/dashboard/snippets/index.html.haml
@@ -6,33 +6,29 @@
 .gray-content-block
   .pull-right
     = link_to new_snippet_path, class: "btn btn-new", title: "New Snippet" do
-      Add new snippet
+      = icon('plus')
+      New Snippet
 
-  .oneline
-    Share code pastes with others out of git repository
-
-%ul.nav.nav-tabs.prepend-top-20
-  = nav_tab :scope, nil do
-    = link_to dashboard_snippets_path do
+  .btn-group.btn-group-next.snippet-scope-menu
+    = link_to dashboard_snippets_path, class: "btn btn-default #{"active" unless params[:scope]}" do
       All
       %span.badge
         = current_user.snippets.count
-  = nav_tab :scope, 'are_private' do
-    = link_to dashboard_snippets_path(scope: 'are_private') do
+
+    = link_to dashboard_snippets_path(scope: 'are_private'), class: "btn btn-default #{"active" if params[:scope] == "are_private"}" do
       Private
       %span.badge
         = current_user.snippets.are_private.count
-  = nav_tab :scope, 'are_internal' do
-    = link_to dashboard_snippets_path(scope: 'are_internal') do
+
+    = link_to dashboard_snippets_path(scope: 'are_internal'), class: "btn btn-default #{"active" if params[:scope] == "are_internal"}" do
       Internal
       %span.badge
         = current_user.snippets.are_internal.count
-  = nav_tab :scope, 'are_public' do
-    = link_to dashboard_snippets_path(scope: 'are_public') do
+
+    = link_to dashboard_snippets_path(scope: 'are_public'), class: "btn btn-default #{"active" if params[:scope] == "are_public"}" do
       Public
       %span.badge
         = current_user.snippets.are_public.count
 
-.my-snippets
-  = render 'snippets/snippets'
+= render 'snippets/snippets'
 
diff --git a/app/views/explore/snippets/index.html.haml b/app/views/explore/snippets/index.html.haml
index 7e4fa7d4873..0f100c39ffb 100644
--- a/app/views/explore/snippets/index.html.haml
+++ b/app/views/explore/snippets/index.html.haml
@@ -10,7 +10,8 @@
   - if current_user
     .pull-right
       = link_to new_snippet_path, class: "btn btn-new", title: "New Snippet" do
-        Add new snippet
+        = icon('plus')
+        New Snippet
 
   .oneline
     Public snippets created by you and other users are listed here
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
new file mode 100644
index 00000000000..4a515469422
--- /dev/null
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -0,0 +1,11 @@
+= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
+  = icon('plus')
+  New Snippet
+- if can?(current_user, :admin_project_snippet, @snippet)
+  = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet' do
+    = icon('trash-o')
+    Delete
+- if can?(current_user, :update_project_snippet, @snippet)
+  = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
+    = icon('pencil-square-o')
+    Edit
diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml
index 3fed2c9949d..4af963e14da 100644
--- a/app/views/projects/snippets/index.html.haml
+++ b/app/views/projects/snippets/index.html.haml
@@ -1,17 +1,13 @@
 - page_title "Snippets"
 = render "header_title"
 
-%h3.page-title
-  Snippets
-  - if can? current_user, :create_project_snippet, @project
-    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new pull-right", title: "New Snippet" do
-      Add new snippet
+.gray-content-block.top-block
+  .pull-right
+    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New Snippet" do
+      = icon('plus')
+      New Snippet
 
-%p.light
-  Share code pastes with others out of git repository
+  .oneline
+    Share code pastes with others out of git repository
 
-%ul.bordered-list
-  = render partial: "shared/snippets/snippet", collection: @snippets
-  - if @snippets.empty?
-    %li
-      .nothing-here-block Nothing here.
+= render 'snippets/snippets'
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index be7d4d486fa..5d706942f2d 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,40 +1,18 @@
 - page_title @snippet.title, "Snippets"
 = render "header_title"
 
-%h3.page-title
-  = @snippet.title
+.snippet-holder
+  = render 'shared/snippets/header'
 
-  .pull-right
-    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New Snippet" do
-      Add new snippet
+  %article.file-holder
+    .file-title
+      = blob_icon 0, @snippet.file_name
+      %strong
+        = @snippet.file_name
+      .file-actions.hidden-xs
+        .btn-group.tree-btn-group
+          = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
 
-%hr
+    = render 'shared/snippets/blob'
 
-.append-bottom-20
-  .pull-right
-    = "##{@snippet.id}"
-    %span.light
-      by
-      = link_to user_path(@snippet.author) do
-        = image_tag avatar_icon(@snippet.author_email), class: "avatar avatar-inline s16"
-        = @snippet.author_name
-
-  .back-link
-    = link_to namespace_project_snippets_path(@project.namespace, @project) do
-      &larr; project snippets
-
-.file-holder
-  .file-title
-    %i.fa.fa-file
-    %strong
-      = @snippet.file_name
-    .file-actions
-      .btn-group
-        - if can?(current_user, :update_project_snippet, @snippet)
-          = link_to "edit", edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", title: 'Edit Snippet'
-        = link_to "raw", raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
-      - if can?(current_user, :admin_project_snippet, @snippet)
-        = link_to "remove", namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-sm btn-remove", title: 'Delete Snippet'
-  = render 'shared/snippets/blob'
-
-%div#notes= render "projects/notes/notes_with_form"
+  %div#notes= render "projects/notes/notes_with_form"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
new file mode 100644
index 00000000000..0a4a790ec5e
--- /dev/null
+++ b/app/views/shared/snippets/_header.html.haml
@@ -0,0 +1,24 @@
+.snippet-details
+  .page-title
+    .snippet-box{class: visibility_level_color(@snippet.visibility_level)}
+      = visibility_level_icon(@snippet.visibility_level)
+      = visibility_level_label(@snippet.visibility_level)
+    %span.snippet-id Snippet ##{@snippet.id}
+    %span.creator
+      &middot; created by #{link_to_member(@project, @snippet.author, size: 24)}
+      &middot;
+      = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
+      - if @snippet.updated_at != @snippet.created_at
+        %span
+          &middot;
+          = icon('edit', title: 'edited')
+          = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
+
+    .pull-right
+      - if @snippet.project_id?
+        = render "projects/snippets/actions"
+      - else
+        = render "snippets/actions"
+  .gray-content-block.middle-block
+    %h2.snippet-title
+      = gfm escape_once(@snippet.title)
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 69a713ad9aa..c6294caddc7 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -18,4 +18,3 @@
       = image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
       = snippet.author_name
     authored #{time_ago_with_tooltip(snippet.created_at)}
-
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
new file mode 100644
index 00000000000..751fafa8942
--- /dev/null
+++ b/app/views/snippets/_actions.html.haml
@@ -0,0 +1,11 @@
+= link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
+  = icon('plus')
+  New Snippet
+- if can?(current_user, :admin_personal_snippet, @snippet)
+  = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet' do
+    = icon('trash-o')
+    Delete
+- if can?(current_user, :update_personal_snippet, @snippet)
+  = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
+    = icon('pencil-square-o')
+    Edit
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 97374e073dc..69d8899d4c1 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,41 +1,14 @@
 - page_title @snippet.title, "Snippets"
-%h4.page-title
-  = @snippet.title
 
-  - if @snippet.private?
-    %span.label.label-success
-      %i.fa.fa-lock
-      private
-
-  .pull-right
-    = link_to new_snippet_path, class: "btn btn-new btn-sm", title: "New Snippet" do
-      Add new snippet
-
-.append-bottom-10.prepend-top-10
-  .pull-right
-    %span.light
-      created by
-      = link_to user_snippets_path(@snippet.author) do
-        = @snippet.author_name
-
-  .back-link
-    - if @snippet.author == current_user
-      = link_to dashboard_snippets_path do
-        &larr; your snippets
-    - else
-      = link_to explore_snippets_path do
-        &larr; explore snippets
-
-.file-holder
-  .file-title
-    %i.fa.fa-file
-    %strong
-      = @snippet.file_name
-    .file-actions
-      .btn-group
-        - if can?(current_user, :update_personal_snippet, @snippet)
-          = link_to "edit", edit_snippet_path(@snippet), class: "btn btn-sm", title: 'Edit Snippet'
-        = link_to "raw", raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
-      - if can?(current_user, :admin_personal_snippet, @snippet)
-        = link_to "remove", snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-sm btn-remove", title: 'Delete Snippet'
-  = render 'shared/snippets/blob'
+.snippet-holder
+  = render 'shared/snippets/header'
+
+  %article.file-holder
+    .file-title
+      = blob_icon 0, @snippet.file_name
+      %strong
+        = @snippet.file_name
+      .file-actions.hidden-xs
+        .btn-group.tree-btn-group
+          = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
+    = render 'shared/snippets/blob'
diff --git a/features/project/snippets.feature b/features/project/snippets.feature
index 77e42a1a38b..270557cbde7 100644
--- a/features/project/snippets.feature
+++ b/features/project/snippets.feature
@@ -30,5 +30,5 @@ Feature: Project Snippets
 
   Scenario: I destroy "Snippet one"
     Given I visit snippet page "Snippet one"
-    And I click link "Remove Snippet"
+    And I click link "Delete"
     Then I should not see "Snippet one" in snippets
diff --git a/features/snippets/snippets.feature b/features/snippets/snippets.feature
index 4f617b6bed8..e15d7c79342 100644
--- a/features/snippets/snippets.feature
+++ b/features/snippets/snippets.feature
@@ -24,7 +24,7 @@ Feature: Snippets
 
   Scenario: I destroy "Personal snippet one"
     Given I visit snippet page "Personal snippet one"
-    And I click link "Destroy"
+    And I click link "Delete"
     Then I should not see "Personal snippet one" in snippets
 
   Scenario: I create new internal snippet
diff --git a/features/steps/project/snippets.rb b/features/steps/project/snippets.rb
index db8ad08bb9e..a3aef9bf8c3 100644
--- a/features/steps/project/snippets.rb
+++ b/features/steps/project/snippets.rb
@@ -22,7 +22,7 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps
   end
 
   step 'I click link "New Snippet"' do
-    click_link "Add new snippet"
+    click_link "New Snippet"
   end
 
   step 'I click link "Snippet one"' do
@@ -42,13 +42,13 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps
   end
 
   step 'I click link "Edit"' do
-    page.within ".file-title" do
+    page.within ".page-title" do
       click_link "Edit"
     end
   end
 
-  step 'I click link "Remove Snippet"' do
-    click_link "remove"
+  step 'I click link "Delete"' do
+    click_link "Delete"
   end
 
   step 'I submit new snippet "Snippet three"' do
diff --git a/features/steps/snippets/snippets.rb b/features/steps/snippets/snippets.rb
index 6ff48e0c6b8..80d1ddeef05 100644
--- a/features/steps/snippets/snippets.rb
+++ b/features/steps/snippets/snippets.rb
@@ -13,13 +13,13 @@ class Spinach::Features::Snippets < Spinach::FeatureSteps
   end
 
   step 'I click link "Edit"' do
-    page.within ".file-title" do
+    page.within ".page-title" do
       click_link "Edit"
     end
   end
 
-  step 'I click link "Destroy"' do
-    click_link "remove"
+  step 'I click link "Delete"' do
+    click_link "Delete"
   end
 
   step 'I submit new snippet "Personal snippet three"' do
diff --git a/features/steps/snippets/user.rb b/features/steps/snippets/user.rb
index dea3256229f..997c605bce2 100644
--- a/features/steps/snippets/user.rb
+++ b/features/steps/snippets/user.rb
@@ -32,19 +32,19 @@ class Spinach::Features::SnippetsUser < Spinach::FeatureSteps
   end
 
   step 'I click "Internal" filter' do
-    page.within('.nav-tabs') do
+    page.within('.snippet-scope-menu') do
       click_link "Internal"
     end
   end
 
   step 'I click "Private" filter' do
-    page.within('.nav-tabs') do
+    page.within('.snippet-scope-menu') do
       click_link "Private"
     end
   end
 
   step 'I click "Public" filter' do
-    page.within('.nav-tabs') do
+    page.within('.snippet-scope-menu') do
       click_link "Public"
     end
   end