Commit 4791f771 authored by Clement Ho's avatar Clement Ho

Merge branch '47825-gitaly-modal' into 'master'

Resolve "Performance bar Gitaly modal is hard to read"

Closes #47825

See merge request gitlab-org/gitlab-ce!19752
parents b3969ed2 4d098451
......@@ -56,7 +56,7 @@ export default {
<gl-modal
:id="`modal-peek-${metric}-details`"
:header-title-text="header"
modal-size="lg"
modal-size="xl"
class="performance-bar-modal"
>
<table
......@@ -71,7 +71,7 @@ export default {
<td
v-for="key in keys"
:key="key"
class="break-word all-words"
class="break-word"
>
{{ item[key] }}
</td>
......
<script>
const buttonVariants = ['danger', 'primary', 'success', 'warning'];
const sizeVariants = ['sm', 'md', 'lg'];
const sizeVariants = ['sm', 'md', 'lg', 'xl'];
export default {
name: 'GlModal',
......
......@@ -440,10 +440,6 @@ img.emoji {
.break-word {
word-wrap: break-word;
&.all-words {
word-break: break-word;
}
}
/** COMMON CLASSES **/
......
.modal-xl {
max-width: 98%;
}
.modal-header {
background-color: $modal-body-bg;
......
......@@ -107,12 +107,12 @@
}
.performance-bar-modal {
.modal-footer {
display: none;
.modal-body {
padding: 0;
}
.modal-dialog {
width: 860px;
.modal-footer {
display: none;
}
}
}
......
......@@ -41,7 +41,7 @@ module Peek
]
end.sort_by{ |a,b,c,d,e,f| -f }
output = "<div class='modal-dialog modal-lg'><div class='modal-content'>"
output = "<div class='modal-dialog modal-xl'><div class='modal-content'>"
output << "<div class='modal-header'>"
output << "<h4>Line profiling: #{human_description(params[:lineprofiler])}</h4>"
output << "<button class='close' type='button' data-dismiss='modal' aria-label='close'><span aria-hidden='true'>&times;</span></button>"
......
......@@ -208,6 +208,14 @@ describe('GlModal', () => {
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
});
it('should render modal-xl', () => {
vm = mountComponent(modalComponent, {
modalSize: 'xl',
});
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true);
});
it('should not add modal size classes when md size is passed', () => {
vm = mountComponent(modalComponent, {
modalSize: 'md',
......
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