Skip to content

G
gitlab-ce
Commit a60b4712 authored by anna_vovchenko's avatar anna_vovchenko Committed by Anna Vovchenko
Browse files
Options

Terraform MR widget UI polish 

Fixed UI issues:
- updated the color of the small text;
- fixed the position of the actions button.
parent ed8b030b
Show whitespace changes
Inline Side-by-side
Showing with 148 additions and 122 deletions
app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
View file @ a60b4712
......@@ -55,6 +55,7 @@ export default {
<div class="gl-display-flex">
<status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
<div class="gl-w-full">
<div class="gl-display-flex gl-flex-nowrap">
<div class="gl-flex-wrap gl-display-flex gl-w-full">
<div class="gl-mr-4 gl-display-flex gl-align-items-center">
<p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
......@@ -68,6 +69,7 @@ export default {
<gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
{{ data.badge.text }}
</gl-badge>
</div>
<actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" />
</div>
<p
......
app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js
View file @ a60b4712
......@@ -32,7 +32,7 @@ const textStyleTags = {
[getStartTag('critical')]: '<span class="gl-font-weight-bold gl-text-red-800">',
[getStartTag('same')]: '<span class="gl-font-weight-bold gl-text-gray-700">',
[getStartTag('strong')]: '<span class="gl-font-weight-bold">',
[getStartTag('small')]: '<span class="gl-font-sm">',
[getStartTag('small')]: '<span class="gl-font-sm gl-text-gray-700">',
};
export const generateText = (text) => {
......
ee/spec/frontend/vue_mr_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap
View file @ a60b4712
......@@ -26,6 +26,9 @@ exports[`License Compliance extension expanded data with new licesnes displays a
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -45,6 +48,7 @@ exports[`License Compliance extension expanded data with new licesnes displays a
<!---->
<!---->
</div>
<div
class="gl-ml-auto"
......@@ -89,6 +93,9 @@ exports[`License Compliance extension expanded data with new licesnes displays a
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -120,6 +127,7 @@ exports[`License Compliance extension expanded data with new licesnes displays a
</div>
<!---->
</div>
<div
class="gl-ml-auto"
......@@ -169,6 +177,9 @@ exports[`License Compliance extension expanded data with new licesnes displays d
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -188,6 +199,7 @@ exports[`License Compliance extension expanded data with new licesnes displays d
<!---->
<!---->
</div>
<div
class="gl-ml-auto"
......@@ -232,6 +244,9 @@ exports[`License Compliance extension expanded data with new licesnes displays d
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -263,6 +278,7 @@ exports[`License Compliance extension expanded data with new licesnes displays d
</div>
<!---->
</div>
<div
class="gl-ml-auto"
......@@ -312,6 +328,9 @@ exports[`License Compliance extension expanded data with new licesnes displays u
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -331,6 +350,7 @@ exports[`License Compliance extension expanded data with new licesnes displays u
<!---->
<!---->
</div>
<div
class="gl-ml-auto"
......@@ -375,6 +395,9 @@ exports[`License Compliance extension expanded data with new licesnes displays u
<div
class="gl-w-full"
>
<div
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
......@@ -406,6 +429,7 @@ exports[`License Compliance extension expanded data with new licesnes displays u
</div>
<!---->
</div>
<div
class="gl-ml-auto"
......
spec/frontend/vue_mr_widget/components/extensions/utils_spec.js
View file @ a60b4712
......@@ -8,7 +8,7 @@ describe('generateText', () => {
${'%{danger_start}Hello world%{danger_end}'} | ${'<span class="gl-font-weight-bold gl-text-red-500">Hello world</span>'}
${'%{critical_start}Hello world%{critical_end}'} | ${'<span class="gl-font-weight-bold gl-text-red-800">Hello world</span>'}
${'%{same_start}Hello world%{same_end}'} | ${'<span class="gl-font-weight-bold gl-text-gray-700">Hello world</span>'}
${'%{small_start}Hello world%{small_end}'} | ${'<span class="gl-font-sm">Hello world</span>'}
${'%{small_start}Hello world%{small_end}'} | ${'<span class="gl-font-sm gl-text-gray-700">Hello world</span>'}
${'%{strong_start}%{danger_start}Hello world%{danger_end}%{strong_end}'} | ${'<span class="gl-font-weight-bold"><span class="gl-font-weight-bold gl-text-red-500">Hello world</span></span>'}
${'%{no_exist_start}Hello world%{no_exist_end}'} | ${'Hello world'}
${['array']} | ${null}
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7