Skip to content

G
gitlab-ce
Commit ef3ad5dc authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'terraform-widget-ui-polish' into 'master' 

Terraform MR widget UI polish

See merge request gitlab-org/gitlab!84627
parents f5263a69 a60b4712
Hide 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 @ ef3ad5dc
......@@ -55,19 +55,21 @@ 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-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>
<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>
</div>
<div v-if="data.link">
<gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
</div>
<div v-if="data.supportingText">
<p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
</div>
<gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
{{ data.badge.text }}
</gl-badge>
</div>
<div v-if="data.link">
<gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
</div>
<div v-if="data.supportingText">
<p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
</div>
<gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
{{ data.badge.text }}
</gl-badge>
<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 @ ef3ad5dc
......@@ -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 @ ef3ad5dc
......@@ -28,24 +28,28 @@ exports[`License Compliance extension expanded data with new licesnes displays a
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
Acceptable for use in this project
</p>
<p
class="gl-m-0"
>
Acceptable for use in this project
</p>
</div>
<!---->
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<div
class="gl-ml-auto"
>
......@@ -91,36 +95,40 @@ exports[`License Compliance extension expanded data with new licesnes displays a
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="https://opensource.org/licenses/ISC"
>
ISC License
</a>
</div>
<div>
<p
class="gl-m-0"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
Used by abbrev, anymatch
</p>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="https://opensource.org/licenses/ISC"
>
ISC License
</a>
</div>
<div>
<p
class="gl-m-0"
>
Used by abbrev, anymatch
</p>
</div>
<!---->
</div>
<!---->
<div
class="gl-ml-auto"
>
......@@ -171,24 +179,28 @@ exports[`License Compliance extension expanded data with new licesnes displays d
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
Out-of-compliance with the project's policies and should be removed
</p>
<p
class="gl-m-0"
>
Out-of-compliance with the project's policies and should be removed
</p>
</div>
<!---->
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<div
class="gl-ml-auto"
>
......@@ -234,36 +246,40 @@ exports[`License Compliance extension expanded data with new licesnes displays d
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="https://opensource.org/licenses/Apache-2.0"
>
Apache License 2.0
</a>
</div>
<div>
<p
class="gl-m-0"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
Used by websocket-driver, websocket-extensions, xml-name-validator
</p>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="https://opensource.org/licenses/Apache-2.0"
>
Apache License 2.0
</a>
</div>
<div>
<p
class="gl-m-0"
>
Used by websocket-driver, websocket-extensions, xml-name-validator
</p>
</div>
<!---->
</div>
<!---->
<div
class="gl-ml-auto"
>
......@@ -314,24 +330,28 @@ exports[`License Compliance extension expanded data with new licesnes displays u
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
No policy matches this license
</p>
<p
class="gl-m-0"
>
No policy matches this license
</p>
</div>
<!---->
<!---->
<!---->
</div>
<!---->
<!---->
<!---->
<div
class="gl-ml-auto"
>
......@@ -377,36 +397,40 @@ exports[`License Compliance extension expanded data with new licesnes displays u
class="gl-w-full"
>
<div
class="gl-flex-wrap gl-display-flex gl-w-full"
class="gl-display-flex gl-flex-nowrap"
>
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
class="gl-flex-wrap gl-display-flex gl-w-full"
>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="http://opensource.linux-mirror.org/licenses/afl-2.1.txt"
<div
class="gl-mr-4 gl-display-flex gl-align-items-center"
>
Academic Free License v2.1
</a>
</div>
<div>
<p
class="gl-m-0"
>
Used by json-schema
</p>
<p
class="gl-m-0"
/>
</div>
<div>
<a
class="gl-link"
href="http://opensource.linux-mirror.org/licenses/afl-2.1.txt"
>
Academic Free License v2.1
</a>
</div>
<div>
<p
class="gl-m-0"
>
Used by json-schema
</p>
</div>
<!---->
</div>
<!---->
<div
class="gl-ml-auto"
>
......
spec/frontend/vue_mr_widget/components/extensions/utils_spec.js
View file @ ef3ad5dc
......@@ -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