diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-06 12:18:56 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-06 12:18:56 +0300 |
commit | c06178d51ad9b8d4ce665047873615facfc9c1c5 (patch) | |
tree | 2a1acfea73fd0fbdd7d0e240fd7ac52224845f99 /app/assets/javascripts/vue_shared/new_namespace/components | |
parent | 0a0e8803b0e3e2fb83d74c9bafc32f4e9d825bcc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/new_namespace/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/new_namespace/components/legacy_container.vue | 31 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue | 71 |
2 files changed, 102 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/new_namespace/components/legacy_container.vue b/app/assets/javascripts/vue_shared/new_namespace/components/legacy_container.vue new file mode 100644 index 00000000000..d2fc2c66924 --- /dev/null +++ b/app/assets/javascripts/vue_shared/new_namespace/components/legacy_container.vue @@ -0,0 +1,31 @@ +<script> +export default { + inheritAttrs: false, + props: { + selector: { + type: String, + required: true, + }, + }, + mounted() { + const legacyEntry = document.querySelector(this.selector); + if (legacyEntry.tagName === 'TEMPLATE') { + this.$el.innerHTML = legacyEntry.innerHTML; + } else { + this.source = legacyEntry.parentNode; + this.$el.appendChild(legacyEntry); + legacyEntry.classList.add('active'); + } + }, + + beforeDestroy() { + if (this.source) { + this.$el.firstChild.classList.remove('active'); + this.source.appendChild(this.$el.firstChild); + } + }, +}; +</script> +<template> + <div></div> +</template> diff --git a/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue b/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue new file mode 100644 index 00000000000..e9983af5401 --- /dev/null +++ b/app/assets/javascripts/vue_shared/new_namespace/components/welcome.vue @@ -0,0 +1,71 @@ +<script> +import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import Vue from 'vue'; +import Tracking from '~/tracking'; + +export default { + directives: { + SafeHtml, + }, + props: { + title: { + type: String, + required: true, + }, + panels: { + type: Array, + required: true, + }, + experiment: { + type: String, + required: false, + default: null, + }, + }, + created() { + const trackingMixin = Tracking.mixin({ ...gon.tracking_data, experiment: this.experiment }); + const trackingInstance = new Vue({ + ...trackingMixin, + render() { + return null; + }, + }); + this.track = trackingInstance.track; + }, +}; +</script> +<template> + <div class="container"> + <h2 class="gl-my-7 gl-font-size-h1 gl-text-center"> + {{ title }} + </h2> + <div> + <div + v-for="panel in panels" + :key="panel.name" + class="new-namespace-panel-wrapper gl-display-inline-block gl-px-3 gl-mb-5" + > + <a + :href="`#${panel.name}`" + :data-qa-selector="`${panel.name}_link`" + class="new-namespace-panel gl-display-flex gl-flex-shrink-0 gl-flex-direction-column gl-lg-flex-direction-row gl-align-items-center gl-rounded-base gl-border-gray-100 gl-border-solid gl-border-1 gl-w-full gl-py-6 gl-px-8 gl-hover-text-decoration-none!" + @click="track('click_tab', { label: panel.name })" + > + <div + v-safe-html="panel.illustration" + class="new-namespace-panel-illustration gl-text-white gl-display-flex gl-flex-shrink-0 gl-justify-content-center" + ></div> + <div class="gl-pl-4"> + <h3 class="gl-font-size-h2 gl-reset-color"> + {{ panel.title }} + </h3> + <p class="gl-text-gray-900"> + {{ panel.description }} + </p> + </div> + </a> + </div> + </div> + <slot name="footer"></slot> + </div> +</template> |