Commit 170046fe authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'ph/widgetExtensionCollapseButton' into 'master'

Updated design of collapse button in widget extensions

See merge request gitlab-org/gitlab!71084
parents 97455b6f 99ee6fd7
<script>
import { GlButton, GlLoadingIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
import {
GlButton,
GlLoadingIcon,
GlLink,
GlBadge,
GlSafeHtmlDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
import { EXTENSION_ICON_CLASS } from '../../constants';
import StatusIcon from './status_icon.vue';
......@@ -21,6 +29,7 @@ export default {
},
directives: {
SafeHtml: GlSafeHtmlDirective,
GlTooltip: GlTooltipDirective,
},
data() {
return {
......@@ -44,6 +53,14 @@ export default {
return true;
},
collapseButtonLabel() {
return sprintf(
this.isCollapsed
? s__('mrWidget|Show %{widget} details')
: s__('mrWidget|Hide %{widget} details'),
{ widget: this.$options.name },
);
},
statusIconName() {
if (this.isLoadingSummary) return null;
......@@ -102,22 +119,28 @@ export default {
:is-loading="isLoadingSummary"
:icon-name="statusIconName"
/>
<div class="media-body d-flex flex-align-self-center align-items-center">
<div class="media-body gl-display-flex gl-align-self-center gl-align-items-center">
<div class="code-text">
<template v-if="isLoadingSummary">
{{ __('Loading...') }}
</template>
<div v-else v-safe-html="summary(collapsedData)"></div>
</div>
<div
class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
>
<gl-button
v-if="isCollapsible"
size="small"
class="float-right align-self-center"
v-gl-tooltip
:title="collapseButtonLabel"
:aria-expanded="`${!isCollapsed}`"
:aria-label="collapseButtonLabel"
:icon="isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
category="tertiary"
data-testid="toggle-button"
@click="toggleCollapsed"
>
{{ isCollapsed ? __('Expand') : __('Collapse') }}
</gl-button>
/>
</div>
</div>
</div>
<div
......@@ -137,11 +160,9 @@ export default {
wclass="report-block-list"
class="report-block-container"
>
<li v-for="data in fullData" :key="data.id" class="d-flex align-items-center">
<li v-for="data in fullData" :key="data.id" class="gl-display-flex gl-align-items-center">
<status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
<div
class="gl-mt-2 gl-mb-2 align-content-around align-items-start flex-wrap align-self-center d-flex"
>
<div class="gl-mt-2 gl-mb-2 gl-flex-wrap gl-align-self-center gl-display-flex">
<div v-safe-html="data.text" class="gl-mr-4"></div>
<div v-if="data.link">
<gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
......
......@@ -40525,6 +40525,9 @@ msgstr ""
msgid "mrWidget|Failed to load deployment statistics"
msgstr ""
msgid "mrWidget|Hide %{widget} details"
msgstr ""
msgid "mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line"
msgstr ""
......@@ -40647,6 +40650,9 @@ msgstr ""
msgid "mrWidget|Set by %{merge_author} to start a merge train when the pipeline succeeds"
msgstr ""
msgid "mrWidget|Show %{widget} details"
msgstr ""
msgid "mrWidget|The changes were merged into"
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment