diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-04 00:09:37 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-04 00:09:37 +0000 |
commit | e3bdfa1a13d7e6c92716324c78b5b20c07eeb7c6 (patch) | |
tree | e8776263096b027d32d4be5118cccc87b00de2bc /app/assets/javascripts/vue_shared/components/clone_dropdown.vue | |
parent | c1a50b8195f4e36fda9b233acbde57a449bcf6c3 (diff) | |
download | gitlab-ce-e3bdfa1a13d7e6c92716324c78b5b20c07eeb7c6.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/clone_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/clone_dropdown.vue | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue new file mode 100644 index 00000000000..3b9b9f37f52 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue @@ -0,0 +1,89 @@ +<script> +import { + GlNewDropdown, + GlNewDropdownHeader, + GlFormInputGroup, + GlNewButton, + GlIcon, + GlTooltipDirective, +} from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import { getHTTPProtocol } from '~/lib/utils/url_utility'; + +export default { + components: { + GlNewDropdown, + GlNewDropdownHeader, + GlFormInputGroup, + GlNewButton, + GlIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + sshLink: { + type: String, + required: false, + default: '', + }, + httpLink: { + type: String, + required: false, + default: '', + }, + }, + computed: { + httpLabel() { + const protocol = this.httpLink ? getHTTPProtocol(this.httpLink)?.toUpperCase() : ''; + return sprintf(__('Clone with %{protocol}'), { protocol }); + }, + }, + labels: { + defaultLabel: __('Clone'), + ssh: __('Clone with SSH'), + }, + copyURLTooltip: __('Copy URL'), +}; +</script> +<template> + <gl-new-dropdown :text="$options.labels.defaultLabel" category="primary" variant="info"> + <div class="pb-2 mx-1"> + <template v-if="sshLink"> + <gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header> + + <div class="mx-3"> + <gl-form-input-group :value="sshLink" readonly select-on-click> + <template #append> + <gl-new-button + v-gl-tooltip.hover + :title="$options.copyURLTooltip" + :data-clipboard-text="sshLink" + > + <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" /> + </gl-new-button> + </template> + </gl-form-input-group> + </div> + </template> + + <template v-if="httpLink"> + <gl-new-dropdown-header>{{ httpLabel }}</gl-new-dropdown-header> + + <div class="mx-3"> + <gl-form-input-group :value="httpLink" readonly select-on-click> + <template #append> + <gl-new-button + v-gl-tooltip.hover + :title="$options.copyURLTooltip" + :data-clipboard-text="httpLink" + > + <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" /> + </gl-new-button> + </template> + </gl-form-input-group> + </div> + </template> + </div> + </gl-new-dropdown> +</template> |