New snippet design for projects

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

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