diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue | 52 |
1 files changed, 29 insertions, 23 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue index 55c71e299be..b13460b4c68 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue @@ -1,14 +1,19 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { - GlIcon, - GlLink, + GlDropdown, + GlDropdownItem, + GlSprintf, + }, + translations: { + artifacts: __('Artifacts'), + downloadArtifact: __('Download %{name} artifact'), }, props: { artifacts: { @@ -19,24 +24,25 @@ export default { }; </script> <template> - <div class="btn-group" role="group"> - <button - v-gl-tooltip - type="button" - class="dropdown-toggle build-artifacts btn btn-default js-pipeline-dropdown-download" - :title="__('Artifacts')" - data-toggle="dropdown" - :aria-label="__('Artifacts')" + <gl-dropdown + v-gl-tooltip + class="build-artifacts js-pipeline-dropdown-download" + :title="$options.translations.artifacts" + :text="$options.translations.artifacts" + :aria-label="$options.translations.artifacts" + icon="download" + text-sr-only + > + <gl-dropdown-item + v-for="(artifact, i) in artifacts" + :key="i" + :href="artifact.path" + rel="nofollow" + download > - <gl-icon name="download" /> - <gl-icon name="chevron-down" /> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li v-for="(artifact, i) in artifacts" :key="i"> - <gl-link :href="artifact.path" rel="nofollow" download - >Download {{ artifact.name }} artifact</gl-link - > - </li> - </ul> - </div> + <gl-sprintf :message="$options.translations.downloadArtifact"> + <template #name>{{ artifact.name }}</template> + </gl-sprintf> + </gl-dropdown-item> + </gl-dropdown> </template> |