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

app/assets/stylesheets/pages/snippets.scss

@@ -37,10 +37,14 @@
     padding: 10px 0;
     margin-bottom: 0;
     color: #5c5d5e;
-    font-size: 16px;
-    .author {
-      color: #5c5d5e;
+    font-size: 13px;
+    @include clearfix();
+    .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;
 }

app/views/projects/snippets/_actions.html.haml

+= 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

app/views/projects/snippets/show.html.haml

 - 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"

app/views/shared/snippets/_header.html.haml

+.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)

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)}

app/views/snippets/_actions.html.haml

+= 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

app/views/snippets/show.html.haml

 - 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