From 093b2f42c4efc1f679ec742e0a28145171127782 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Trzci=C5=84ski?= Date: Thu, 23 May 2019 11:06:21 +0200 Subject: Generate with all sections --- app/assets/stylesheets/page_bundles/xterm.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'app') diff --git a/app/assets/stylesheets/page_bundles/xterm.scss b/app/assets/stylesheets/page_bundles/xterm.scss index de3f2a1177d..96df5789eba 100644 --- a/app/assets/stylesheets/page_bundles/xterm.scss +++ b/app/assets/stylesheets/page_bundles/xterm.scss @@ -1452,4 +1452,23 @@ .xterm-fg-255 { color: $xterm-fg-255; } + + .section-start + p { + cursor: pointer; + } + + .section-start { + width: 1rem; + }; + + .section.line { + padding-left: 0.5rem; + margin-left: 0.5rem; + } + + .section.not-used:not(.section-header):not(.open) { + display: none; + height: 0; + min-height: 0; + } } -- cgit v1.2.3 From 8a435e123b3980a80a41685f5f74443e684ac589 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 12 Jun 2019 11:58:49 +0100 Subject: Removes CSS --- app/assets/stylesheets/page_bundles/xterm.scss | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/page_bundles/xterm.scss b/app/assets/stylesheets/page_bundles/xterm.scss index 96df5789eba..de3f2a1177d 100644 --- a/app/assets/stylesheets/page_bundles/xterm.scss +++ b/app/assets/stylesheets/page_bundles/xterm.scss @@ -1452,23 +1452,4 @@ .xterm-fg-255 { color: $xterm-fg-255; } - - .section-start + p { - cursor: pointer; - } - - .section-start { - width: 1rem; - }; - - .section.line { - padding-left: 0.5rem; - margin-left: 0.5rem; - } - - .section.not-used:not(.section-header):not(.open) { - display: none; - height: 0; - min-height: 0; - } } -- cgit v1.2.3 From 4e249e542cdf9f515c01346a9c9ace10e414644c Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 12 Jun 2019 13:03:07 +0100 Subject: Moves JS into the vue component --- app/assets/javascripts/jobs/components/job_log.vue | 53 ++++++++++++++++++---- 1 file changed, 43 insertions(+), 10 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue index 92e20e92d66..e845a84e872 100644 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -17,10 +17,21 @@ export default { ...mapState(['isScrolledToBottomBeforeReceivingTrace']), }, updated() { - this.$nextTick(() => this.handleScrollDown()); + this.$nextTick(() => { + this.handleScrollDown(); + this.handleCollapsibleRows(); + }); }, mounted() { - this.$nextTick(() => this.handleScrollDown()); + this.$nextTick(() => { + this.handleScrollDown(); + this.handleCollapsibleRows(); + }); + }, + destroyed() { + this.$el + .querySelector('.js-section-start') + .removeEventListener('click', this.handleSectionClick); }, methods: { ...mapActions(['scrollBottom']), @@ -38,21 +49,43 @@ export default { }, 0); } }, + /** + * 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` + * + */ + handleCollapsibleRows() { + this.$el + .querySelectorAll('.js-section-start') + .forEach(el => el.addEventListener('click', this.handleSectionClick)); + }, + /** + * + */ + handleSectionClick(evt) { + const clickedArrow = evt.currentTarget; + + // toggle the arrow class + clickedArrow.classList.toggle('fa-caret-right'); + clickedArrow.classList.toggle('fa-caret-down'); + + const dataSection = clickedArrow.getAttribute('data-section'); + const sibilings = this.$el.querySelectorAll( + `.s_${dataSection}:not(.js-section-header)`, + ); + + // Get all sibilings between the clicked element and the next + sibilings.forEach(row => row.classList.toggle('hidden')); + }, }, };