New snippet design for projects

Split out header into shared partial
Used action partials to have unique actions for shared and personal
snippets
changed back to created date in list view
Switched to using existing color classes

7 files changed, 53 insertions, 67 deletions

diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 39034a1391f..af391481764 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -37,10 +37,14 @@
     padding: 10px 0;
     margin-bottom: 0;
     color: #5c5d5e;
-    font-size: 16px;
+    font-size: 13px;
+    @include clearfix();
 
-    .author {
-      color: #5c5d5e;
+    .creator {
+      color: $gl-gray;
+      a {
+        color: $gl-gray;
+      }
     }
 
     .snippet-id {
@@ -79,9 +83,5 @@
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;
-
-  &.snippet-box-locked {
-    background: $gl-gray;
-    color: #FFF;
-  }
+  border: 1px solid;
 }
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
new file mode 100644
index 00000000000..4d5f7026373
--- /dev/null
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -0,0 +1,9 @@
+= 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 "remove", namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet'
+- 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/show.html.haml b/app/views/projects/snippets/show.html.haml
index be7d4d486fa..4f236fcc7e2 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -1,27 +1,6 @@
 - page_title @snippet.title, "Snippets"
 = render "header_title"
-
-%h3.page-title
-  = @snippet.title
-
-  .pull-right
-    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New Snippet" do
-      Add new snippet
-
-%hr
-
-.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
-      ← project snippets
+= render 'shared/snippets/header'
 
 .file-holder
   .file-title
@@ -30,11 +9,6 @@
       = @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"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
new file mode 100644
index 00000000000..95786ee3377
--- /dev/null
+++ b/app/views/shared/snippets/_header.html.haml
@@ -0,0 +1,25 @@
+.snippet
+  .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
+        · created by #{link_to_member(@project, @snippet.author, size: 24)}
+        ·
+        = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
+        - if @snippet.updated_at != @snippet.created_at
+          %span
+            ·
+            = 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 6f4b0453ad3..c6294caddc7 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -17,4 +17,4 @@
     = link_to user_snippets_path(snippet.author) do
       = image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
       = snippet.author_name
-    authored #{time_ago_with_tooltip(snippet.updated_at)}
+    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..a4fdf89a4ee
--- /dev/null
+++ b/app/views/snippets/_actions.html.haml
@@ -0,0 +1,8 @@
+= link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
+  = icon('plus')
+  new snippet
+= link_to "remove", snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet'
+- 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 9d20b76cbf2..202a43bc57d 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -1,35 +1,5 @@
 - page_title @snippet.title, "Snippets"
-
-.snippet
-  .snippet-details
-    .page-title
-      - if @snippet.private?
-        .snippet-box.snippet-box-locked
-          %i.fa.fa-lock
-          Private
-      %span.snippet-id Snippet ##{@snippet.id}
-      %span.creator
-        · created by #{link_to_member(@project, @snippet.author, size: 24)}
-        ·
-        = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-        - if @snippet.updated_at != @snippet.created_at
-          %span
-            ·
-            = icon('edit', title: 'edited')
-            = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
-
-      .pull-right
-        = link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
-          = icon('plus')
-          new snippet
-        = link_to "remove", snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet'
-        - if can?(current_user, :update_personal_snippet, @snippet)
-          = link_to edit_snippet_path(@snippet), class: "btn btn-grouped issuabled-edit" do
-            = icon('pencil-square-o')
-            Edit
-    .gray-content-block.middle-block
-      %h2.snippet-title
-        = gfm escape_once(@snippet.title)
+= render 'shared/snippets/header'
 
 .file-holder
   .file-title