Make the dropdown match the design

Regenerate locale.pot as well

7 files changed, 60 insertions, 54 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index b90db135b4a..22ee12362fa 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -287,7 +287,7 @@
     list-style: none;
     padding: 0 1px;
 
-    a,
+    a:not(.btn),
     button,
     .menu-item {
       @include dropdown-link;
@@ -351,6 +351,16 @@
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
+
+  .dropdown-menu-content {
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  }
+
+  .inline-content {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .droplab-dropdown {
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 76690f4b678..64532b1bc3a 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -9,44 +9,35 @@
       = sprite_icon("arrow-down")
     %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
       - if directory?
-        %li.dropdown-header
-          #{ _('Directory') }
-        %li
-          = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'zip'), rel: 'nofollow', download: '' do
-            %span=  _('Download zip')
-        %li
-          = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar.gz'), rel: 'nofollow', download: '' do
-            %span=  _('Download tar.gz')
-        %li
-          = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar.bz2'), rel: 'nofollow', download: '' do
-            %span=  _('Download tar.bz2')
-        %li
-          = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar'), rel: 'nofollow', download: '' do
-            %span=  _('Download tar')
-      %li.dropdown-header
-        #{ _('Source code') }
-      %li
-        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'zip'), rel: 'nofollow', download: '' do
-          %span=  _('Download zip')
-      %li
-        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.gz'), rel: 'nofollow', download: '' do
-          %span= _('Download tar.gz')
-      %li
-        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.bz2'), rel: 'nofollow', download: '' do
-          %span= _('Download tar.bz2')
-      %li
-        = link_to project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar'), rel: 'nofollow', download: '' do
-          %span= _('Download tar')
-
+        %li.dropdown-bold-header= _('Download this directory')
+        %li.dropdown-menu-content
+          %ul
+            %li.inline-content
+              = link_to _('zip'), project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'zip'), rel: 'nofollow', download: '', class: 'btn btn-primary btn-xs'
+            %li.inline-content
+              = link_to _('tar.gz'), project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar.gz'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+            %li.inline-content
+              = link_to _('tar.bz2'), project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar.bz2'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+            %li.inline-content
+              = link_to _('tar'), project_archive_path(project, id: tree_join(ref, archive_prefix), path: @path, format: 'tar'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+        %li.separator
+      %li.dropdown-bold-header= _('Download source code')
+      %li.dropdown-menu-content
+        %ul
+          %li.inline-content
+            = link_to _('zip'), project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'zip'), rel: 'nofollow', download: '', class: 'btn btn-primary btn-xs'
+          %li.inline-content
+            = link_to _('tar.gz'), project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.gz'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+          %li.inline-content
+            = link_to _('tar.bz2'), project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar.bz2'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+          %li.inline-content
+            = link_to _('tar'), project_archive_path(project, id: tree_join(ref, archive_prefix), format: 'tar'), rel: 'nofollow', download: '', class: 'btn btn-xs'
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
-        %li.dropdown-header Artifacts
+        %li.separator
+        %li.dropdown-bold-header= _('Download artifacts')
         - unless pipeline.latest?
-          - latest_pipeline = project.pipeline_for(ref)
-          %li
-            .unclickable= ci_status_for_statuseable(latest_pipeline)
-          %li.dropdown-header Previous Artifacts
+          %span.unclickable= ci_status_for_statuseable(project.pipeline_for(ref))
+        %li.dropdown-header= _('Previous Artifacts')
         - pipeline.latest_builds_with_artifacts.each do |job|
           %li
-            = link_to latest_succeeded_project_artifacts_path(project, "#{ref}/download", job: job.name), rel: 'nofollow', download: '' do
-              %span
-                #{s_('DownloadArtifacts|Download')} '#{job.name}'
+            = link_to job.name, latest_succeeded_project_artifacts_path(project, "#{ref}/download", job: job.name), rel: 'nofollow', download: ''
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fcbd34a05d5..40bf85d32d0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3004,19 +3004,10 @@ msgstr ""
 msgid "Download asset"
 msgstr ""
 
-msgid "Download tar"
+msgid "Download source code"
 msgstr ""
 
-msgid "Download tar.bz2"
-msgstr ""
-
-msgid "Download tar.gz"
-msgstr ""
-
-msgid "Download zip"
-msgstr ""
-
-msgid "DownloadArtifacts|Download"
+msgid "Download this directory"
 msgstr ""
 
 msgid "DownloadCommit|Email Patches"
@@ -6019,6 +6010,9 @@ msgstr ""
 msgid "Preview payload"
 msgstr ""
 
+msgid "Previous Artifacts"
+msgstr ""
+
 msgid "Prioritize"
 msgstr ""
 
@@ -9989,6 +9983,15 @@ msgstr ""
 msgid "syntax is incorrect"
 msgstr ""
 
+msgid "tar"
+msgstr ""
+
+msgid "tar.bz2"
+msgstr ""
+
+msgid "tar.gz"
+msgstr ""
+
 msgid "this document"
 msgstr ""
 
@@ -10023,3 +10026,6 @@ msgstr[1] ""
 
 msgid "yaml invalid"
 msgstr ""
+
+msgid "zip"
+msgstr ""
diff --git a/spec/features/projects/branches/download_buttons_spec.rb b/spec/features/projects/branches/download_buttons_spec.rb
index c8dc72a34ec..3e75890725e 100644
--- a/spec/features/projects/branches/download_buttons_spec.rb
+++ b/spec/features/projects/branches/download_buttons_spec.rb
@@ -35,7 +35,7 @@ describe 'Download buttons in branches page' do
       it 'shows download artifacts button' do
         href = latest_succeeded_project_artifacts_path(project, 'binary-encoding/download', job: 'build')
 
-        expect(page).to have_link "Download '#{build.name}'", href: href
+        expect(page).to have_link build.name, href: href
       end
     end
   end
diff --git a/spec/features/projects/files/download_buttons_spec.rb b/spec/features/projects/files/download_buttons_spec.rb
index 03cb3530e2b..111972a6b00 100644
--- a/spec/features/projects/files/download_buttons_spec.rb
+++ b/spec/features/projects/files/download_buttons_spec.rb
@@ -30,7 +30,7 @@ describe 'Projects > Files > Download buttons in files tree' do
     it 'shows download artifacts button' do
       href = latest_succeeded_project_artifacts_path(project, "#{project.default_branch}/download", job: 'build')
 
-      expect(page).to have_link "Download '#{build.name}'", href: href
+      expect(page).to have_link build.name, href: href
     end
   end
 end
diff --git a/spec/features/projects/show/download_buttons_spec.rb b/spec/features/projects/show/download_buttons_spec.rb
index 3a2dcc5aa55..fee5f8001b0 100644
--- a/spec/features/projects/show/download_buttons_spec.rb
+++ b/spec/features/projects/show/download_buttons_spec.rb
@@ -35,11 +35,10 @@ describe 'Projects > Show > Download buttons' do
       it 'shows download artifacts button' do
         href = latest_succeeded_project_artifacts_path(project, "#{project.default_branch}/download", job: 'build')
 
-        expect(page).to have_link "Download '#{build.name}'", href: href
+        expect(page).to have_link build.name, href: href
       end
 
       it 'download links have download attribute' do
-        expect(page).to have_selector('a', text: 'Download')
         page.all('a', text: 'Download').each do |link|
           expect(link[:download]).to eq ''
         end
diff --git a/spec/features/projects/tags/download_buttons_spec.rb b/spec/features/projects/tags/download_buttons_spec.rb
index fbfd8cee7aa..4c8ec53836a 100644
--- a/spec/features/projects/tags/download_buttons_spec.rb
+++ b/spec/features/projects/tags/download_buttons_spec.rb
@@ -36,7 +36,7 @@ describe 'Download buttons in tags page' do
       it 'shows download artifacts button' do
         href = latest_succeeded_project_artifacts_path(project, "#{tag}/download", job: 'build')
 
-        expect(page).to have_link "Download '#{build.name}'", href: href
+        expect(page).to have_link build.name, href: href
       end
     end
   end