diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-06-12 18:31:22 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-12 18:31:22 +0300 |
commit | 9f832e59ab659d27865704f9f0b43f81f6f2aa8a (patch) | |
tree | 75c2ca9bc4827a07e78c641937c2712f408bac32 | |
parent | 4e249e542cdf9f515c01346a9c9ace10e414644c (diff) |
Adds margins to the section lines
-rw-r--r-- | app/assets/javascripts/jobs/components/job_log.vue | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/builds.scss | 4 | ||||
-rw-r--r-- | lib/gitlab/ci/ansi2html.rb | 8 |
3 files changed, 17 insertions, 12 deletions
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue index e845a84e872..8e4557e2b6c 100644 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -29,9 +29,7 @@ export default { }); }, destroyed() { - this.$el - .querySelector('.js-section-start') - .removeEventListener('click', this.handleSectionClick); + this.removeEventListener(); }, methods: { ...mapActions(['scrollBottom']), @@ -49,6 +47,11 @@ export default { }, 0); } }, + removeEventListener() { + this.$el + .querySelector('.js-section-start') + .removeEventListener('click', this.handleSectionClick); + }, /** * The collapsible rows are sent in HTML from the backend * We need to add a onclick handler for the divs that match `.js-section-start` @@ -60,7 +63,8 @@ export default { .forEach(el => el.addEventListener('click', this.handleSectionClick)); }, /** - * + * On click, we toggle the hidden class of + * all the rows that match the `data-section` selector */ handleSectionClick(evt) { const clickedArrow = evt.currentTarget; @@ -70,11 +74,8 @@ export default { clickedArrow.classList.toggle('fa-caret-down'); const dataSection = clickedArrow.getAttribute('data-section'); - const sibilings = this.$el.querySelectorAll( - `.s_${dataSection}:not(.js-section-header)`, - ); + const sibilings = this.$el.querySelectorAll(`.js-s_${dataSection}:not(.js-section-header)`); - // Get all sibilings between the clicked element and the next sibilings.forEach(row => row.classList.toggle('hidden')); }, }, diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 6fc742871e7..6e98908eeed 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -124,6 +124,10 @@ float: left; padding-left: $gl-padding-8; } + + .section-header ~ .section.line { + margin-left: $gl-padding; + } } .build-header { diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb index 70c8c099e55..7f98cfa4f79 100644 --- a/lib/gitlab/ci/ansi2html.rb +++ b/lib/gitlab/ci/ansi2html.rb @@ -193,7 +193,7 @@ module Gitlab if @sections.any? css_classes << "section" css_classes += sections.map { |section| "s_#{section}" } - css_classes << "prepend-left-default line" + css_classes << "line" end write_in_tag %{<br/>} @@ -222,7 +222,7 @@ module Gitlab return if @sections.include?(section) @sections << section - write_raw %{<div class="section-start js-section-start fa fa-caret-down js-open append-right-8 cursor-pointer" id="id_#{section}" data-action="start" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>} + write_raw %{<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>} @lineno_in_section = 0 end @@ -231,7 +231,7 @@ module Gitlab # close all sections up to section until @sections.empty? - write_raw %{<div class="section-end js-section-end" data-action="end" data-timestamp="#{timestamp}" data-section="#{data_section_names}"></div>} + write_raw %{<div class="section-end" data-section="#{data_section_names}"></div>} last_section = @sections.pop break if section == last_section @@ -309,7 +309,7 @@ module Gitlab if @sections.any? css_classes << "section" css_classes << "js-section-header" if @lineno_in_section == 0 - css_classes += sections.map { |section| "s_#{section}" } + css_classes += sections.map { |section| "js-s_#{section}" } end @out << %{<span class="#{css_classes.join(' ')}">} |