diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-22 11:31:16 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-22 11:31:16 +0000 |
commit | 905c1110b08f93a19661cf42a276c7ea90d0a0ff (patch) | |
tree | 756d138db422392c00471ab06acdff92c5a9b69c /app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue | |
parent | 50d93f8d1686950fc58dda4823c4835fd0d8c14b (diff) | |
download | gitlab-ce-905c1110b08f93a19661cf42a276c7ea90d0a0ff.tar.gz |
Add latest changes from gitlab-org/gitlab@12-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue new file mode 100644 index 00000000000..36f291e995c --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue @@ -0,0 +1,88 @@ +<script> +import { GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + GlButton, + GlLink, + GlLoadingIcon, + Icon, + }, + props: { + title: { + type: String, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + hasError: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + isCollapsed: true, + }; + }, + + computed: { + arrowIconName() { + return this.isCollapsed ? 'angle-right' : 'angle-down'; + }, + ariaLabel() { + return this.isCollapsed ? __('Expand') : __('Collapse'); + }, + }, + methods: { + toggleCollapsed() { + this.isCollapsed = !this.isCollapsed; + }, + }, +}; +</script> +<template> + <div> + <div class="mr-widget-extension d-flex align-items-center pl-3"> + <div v-if="hasError" class="ci-widget media"> + <div class="media-body"> + <span class="gl-font-size-small mr-widget-margin-left gl-line-height-24 js-error-state">{{ + title + }}</span> + </div> + </div> + + <template v-else> + <gl-button + class="btn-blank btn s32 square append-right-default" + :aria-label="ariaLabel" + :disabled="isLoading" + @click="toggleCollapsed" + > + <gl-loading-icon v-if="isLoading" /> + <icon v-else :name="arrowIconName" class="js-icon" /> + </gl-button> + <gl-button + variant="link" + class="js-title" + :disabled="isLoading" + :class="{ 'border-0': isLoading }" + @click="toggleCollapsed" + > + <template v-if="isCollapsed">{{ title }}</template> + <template v-else>{{ __('Collapse') }}</template> + </gl-button> + </template> + </div> + + <div v-if="!isCollapsed" class="border-top js-slot-container"> + <slot></slot> + </div> + </div> +</template> |