diff options
author | Fernando Arias <farias@gitlab.com> | 2019-04-05 08:19:23 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-04-05 08:19:23 +0300 |
commit | e0725fa436708209f431fc874d1ee148bbfb50f0 (patch) | |
tree | 834120f95f856355a988098151237b05414e5650 /app | |
parent | b54d466caeed724c73f4447c6ad26b7755262968 (diff) |
Dynamic vuln graph dimensions
* Fix up graph resize logic if navbar is collapsed
Add snapshot
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue | 40 |
2 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 67fcdd082a2..03dea1ec0a5 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -41,6 +41,9 @@ export default class ContextualSidebar { this.toggleCollapsedSidebar(value, true); } }); + this.$page.on('transitionstart transitionend', () => { + $(document).trigger('content.resize'); + }); $(window).on('resize', () => _.debounce(this.render(), 100)); } diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue b/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue new file mode 100644 index 00000000000..1f3d248e991 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue @@ -0,0 +1,40 @@ +<script> +import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; +import $ from 'jquery'; + +export default { + data() { + return { + width: 0, + height: 0, + }; + }, + beforeDestroy() { + this.contentResizeHandler.off('content.resize', this.debouncedResize); + window.removeEventListener('resize', this.debouncedResize); + }, + created() { + this.debouncedResize = debounceByAnimationFrame(this.onResize); + + // Handle when we explicictly trigger a custom resize event + this.contentResizeHandler = $(document).on('content.resize', this.debouncedResize); + + // Handle window resize + window.addEventListener('resize', this.debouncedResize); + }, + methods: { + onResize() { + // Slot dimensions + const { clientWidth, clientHeight } = this.$refs.chartWrapper; + this.width = clientWidth; + this.height = clientHeight; + }, + }, +}; +</script> + +<template> + <div ref="chartWrapper"> + <slot :width="width" :height="height"> </slot> + </div> +</template> |