kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Resolve "Performance bar Gitaly modal is hard to read"

Browse source
This commit is contained in:
Annabel Gray 2018-06-14 16:34:58 +00:00 committed by Clement Ho
parent b3969ed23c
commit 4d098451c3
7 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/performance_bar/components/detailed_metric.vue
View file

@ -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 {
<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>

2
app/assets/javascripts/vue_shared/components/gl_modal.vue
View file

@ -1,6 +1,6 @@
<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',

4
app/assets/stylesheets/framework/common.scss
View file

@ -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 **/

4
app/assets/stylesheets/framework/modal.scss
View file

@ -1,3 +1,7 @@
.modal-xl {
max-width: 98%;
}
.modal-header { .modal-header {
background-color: $modal-body-bg; background-color: $modal-body-bg;

8
app/assets/stylesheets/performance_bar.scss
View file

@ -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;
} }
} }
} }

2
lib/peek/rblineprof/custom_controller_helpers.rb
View file

@ -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>"

8
spec/javascripts/vue_shared/components/gl_modal_spec.js
View file

@ -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',