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