diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue | 106 |
1 files changed, 56 insertions, 50 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 897f706290d..814d4e8341e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -1,24 +1,33 @@ <script> +/* eslint-disable vue/no-v-html */ import Mousetrap from 'mousetrap'; import { escape } from 'lodash'; +import { + GlButton, + GlDropdown, + GlDropdownSectionHeader, + GlDropdownItem, + GlTooltipDirective, +} from '@gitlab/ui'; import { n__, s__, sprintf } from '~/locale'; import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import tooltip from '~/vue_shared/directives/tooltip'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import MrWidgetIcon from './mr_widget_icon.vue'; export default { name: 'MRWidgetHeader', components: { - Icon, clipboardButton, TooltipOnTruncate, MrWidgetIcon, + GlButton, + GlDropdown, + GlDropdownSectionHeader, + GlDropdownItem, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { mr: { @@ -124,62 +133,59 @@ export default { <div class="branch-actions d-flex"> <template v-if="mr.isOpen"> - <a + <span v-if="!mr.sourceBranchRemoved" - v-tooltip - :href="webIdePath" + v-gl-tooltip :title="ideButtonTitle" - :class="{ disabled: !mr.canPushToSourceBranch }" - class="btn btn-default js-web-ide d-none d-md-inline-block gl-mr-3" - data-placement="bottom" - tabindex="0" - role="button" - data-qa-selector="open_in_web_ide_button" + class="gl-display-none d-md-inline-block gl-mr-3" + :tabindex="!mr.canPushToSourceBranch ? 0 : null" > - {{ s__('mrWidget|Open in Web IDE') }} - </a> - <button + <gl-button + :href="webIdePath" + :disabled="!mr.canPushToSourceBranch" + class="js-web-ide" + tabindex="0" + role="button" + data-qa-selector="open_in_web_ide_button" + > + {{ s__('mrWidget|Open in Web IDE') }} + </gl-button> + </span> + <gl-button :disabled="mr.sourceBranchRemoved" data-target="#modal_merge_info" data-toggle="modal" - class="btn btn-default js-check-out-branch gl-mr-3" - type="button" + class="js-check-out-branch gl-mr-3" > {{ s__('mrWidget|Check out branch') }} - </button> + </gl-button> </template> - <span class="dropdown"> - <button - type="button" - class="btn dropdown-toggle qa-dropdown-toggle" - data-toggle="dropdown" - :aria-label="__('Download as')" - aria-haspopup="true" - aria-expanded="false" + <gl-dropdown + v-gl-tooltip + :title="__('Download as')" + :aria-label="__('Download as')" + icon="download" + right + data-qa-selector="download_dropdown" + > + <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header> + <gl-dropdown-item + :href="mr.emailPatchesPath" + class="js-download-email-patches" + download + data-qa-selector="download_email_patches" > - <icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"> </i> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li> - <a - :href="mr.emailPatchesPath" - class="js-download-email-patches qa-download-email-patches" - download - > - {{ s__('mrWidget|Email patches') }} - </a> - </li> - <li> - <a - :href="mr.plainDiffPath" - class="js-download-plain-diff qa-download-plain-diff" - download - > - {{ s__('mrWidget|Plain diff') }} - </a> - </li> - </ul> - </span> + {{ s__('mrWidget|Email patches') }} + </gl-dropdown-item> + <gl-dropdown-item + :href="mr.plainDiffPath" + class="js-download-plain-diff" + download + data-qa-selector="download_plain_diff" + > + {{ s__('mrWidget|Plain diff') }} + </gl-dropdown-item> + </gl-dropdown> </div> </div> </div> |