diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/state_container.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/state_container.vue | 57 |
1 files changed, 37 insertions, 20 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue index f7d6f7b4345..dd899701de0 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue @@ -1,6 +1,6 @@ <script> import { GlButton, GlTooltipDirective } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { STATUS_CLOSED, STATUS_MERGED } from '~/issues/constants'; import StatusIcon from './mr_widget_status_icon.vue'; import Actions from './action_buttons.vue'; @@ -13,7 +13,30 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, + inject: { + expandDetailsTooltip: { + default: '', + }, + collapseDetailsTooltip: { + default: '', + }, + }, props: { + isCollapsible: { + type: Boolean, + required: false, + default: false, + }, + collapseOnDesktop: { + type: Boolean, + required: false, + default: false, + }, + collapsed: { + type: Boolean, + required: false, + default: false, + }, mr: { type: Object, required: false, @@ -35,14 +58,10 @@ export default { default: () => [], }, }, - i18n: { - expandDetailsTooltip: __('Expand merge details'), - collapseDetailsTooltip: __('Collapse merge details'), - }, computed: { wrapperClasses() { - if (this.status === 'merged') return 'gl-bg-blue-50'; - if (this.status === 'closed') return 'gl-bg-red-50'; + if (this.status === STATUS_MERGED) return 'gl-bg-blue-50'; + if (this.status === STATUS_CLOSED) return 'gl-bg-red-50'; return null; }, hasActionsSlot() { @@ -54,15 +73,15 @@ export default { <template> <div - class="mr-widget-body media gl-display-flex gl-align-items-center" + class="mr-widget-body media gl-display-flex gl-align-items-center gl-pl-5 gl-pr-4 gl-py-4" :class="wrapperClasses" v-on="$listeners" > - <div v-if="isLoading" class="gl-w-full mr-conflict-loader"> + <div v-if="isLoading" class="gl-w-full mr-state-loader"> <slot name="loading"> <div class="gl-display-flex"> <status-icon status="loading" /> - <div class="media-body"> + <div class="media-body gl-display-flex gl-align-items-center"> <slot></slot> </div> </div> @@ -78,7 +97,7 @@ export default { 'gl-display-flex gl-align-items-center': actions.length, 'gl-md-display-flex gl-align-items-center gl-flex-wrap gl-gap-3': !actions.length, }" - class="media-body gl-line-height-24" + class="media-body gl-line-height-normal" > <slot></slot> <div @@ -94,21 +113,19 @@ export default { </div> </div> <div - v-if="mr" - class="gl-md-display-none gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6 gl-mt-1" + v-if="isCollapsible" + :class="{ 'gl-md-display-none': !collapseOnDesktop }" + class="gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6" > <gl-button v-gl-tooltip - :title=" - mr.mergeDetailsCollapsed - ? $options.i18n.expandDetailsTooltip - : $options.i18n.collapseDetailsTooltip - " - :icon="mr.mergeDetailsCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'" + :title="collapsed ? expandDetailsTooltip : collapseDetailsTooltip" + :icon="collapsed ? 'chevron-lg-down' : 'chevron-lg-up'" category="tertiary" size="small" class="gl-vertical-align-top" - @click="() => mr.toggleMergeDetails()" + data-testid="widget-toggle" + @click="() => $emit('toggle')" /> </div> </div> |