diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue new file mode 100644 index 00000000000..375db7f3054 --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue @@ -0,0 +1,61 @@ +<script> +import { GlDrawer } from '@gitlab/ui'; +import { __ } from '~/locale'; +import FirstPipelineCard from './cards/first_pipeline_card.vue'; +import GettingStartedCard from './cards/getting_started_card.vue'; +import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue'; +import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue'; + +const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20']; + +export default { + DRAWER_CARD_STYLES, + i18n: { + title: __('Help'), + }, + components: { + FirstPipelineCard, + GettingStartedCard, + GlDrawer, + PipelineConfigReferenceCard, + VisualizeAndLintCard, + }, + props: { + isVisible: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + drawerCardStyles() { + return ''; + }, + drawerHeightOffset() { + const wrapperEl = document.querySelector('.content-wrapper'); + return wrapperEl ? `${wrapperEl.offsetTop}px` : ''; + }, + }, + methods: { + closeDrawer() { + this.$emit('close-drawer'); + }, + }, +}; +</script> +<template> + <gl-drawer + :header-height="drawerHeightOffset" + :open="isVisible" + :z-index="200" + @close="closeDrawer" + > + <template #title> + <h2 class="gl-m-0 gl-font-lg">{{ $options.i18n.title }}</h2> + </template> + <getting-started-card :class="$options.DRAWER_CARD_STYLES" /> + <first-pipeline-card :class="$options.DRAWER_CARD_STYLES" /> + <visualize-and-lint-card :class="$options.DRAWER_CARD_STYLES" /> + <pipeline-config-reference-card :class="$options.DRAWER_CARD_STYLES" /> + </gl-drawer> +</template> |