Updated snippets UI

Closes #14328

2 files changed, 30 insertions, 16 deletions

diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index 4a515469422..bf57beb9d07 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,11 +1,27 @@
-= 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
+.hidden-xs
+  = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do
+    = icon('plus')
+    New 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
+      Edit
+  - if can?(current_user, :update_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-warning", title: 'Delete Snippet' do
+      Delete
+.visible-xs-block.dropdown
+  %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    Options
+    %span.caret
+  .dropdown-menu.dropdown-menu-full-width
+    %ul
+      %li
+        = link_to new_namespace_project_snippet_path(@project.namespace, @project), title: "New Snippet" do
+          New Snippet
+      - if can?(current_user, :update_project_snippet, @snippet)
+        %li
+          = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
+            Edit
+      - if can?(current_user, :update_project_snippet, @snippet)
+        %li
+          = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
+            Delete
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 7c599563ce4..6f7bdcb29e8 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,15 +4,13 @@
 .snippet-holder
   = render 'shared/snippets/header'
 
-  %article.file-holder
-    .file-title
+  %article.file-holder.file-holder-no-border.snippet-file-content
+    .file-title.file-title-clear
       = blob_icon 0, @snippet.file_name
-      %strong
-        = @snippet.file_name
+      = @snippet.file_name
       .file-actions.hidden-xs
         = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
         = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
-
     = render 'shared/snippets/blob'
 
   %div#notes= render "projects/notes/notes_with_form"