diff options
Diffstat (limited to 'app/assets/javascripts/whats_new')
-rw-r--r-- | app/assets/javascripts/whats_new/components/app.vue | 56 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/components/trigger.vue | 19 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/index.js | 46 |
3 files changed, 71 insertions, 50 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index d974556cb9e..a00661c214d 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -1,16 +1,40 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlDrawer } from '@gitlab/ui'; +import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui'; export default { components: { GlDrawer, + GlBadge, + GlIcon, + GlLink, + }, + props: { + features: { + type: String, + required: false, + default: null, + }, }, computed: { ...mapState(['open']), + parsedFeatures() { + let features; + + try { + features = JSON.parse(this.$props.features) || []; + } catch (err) { + features = []; + } + + return features; + }, + }, + mounted() { + this.openDrawer(); }, methods: { - ...mapActions(['closeDrawer']), + ...mapActions(['openDrawer', 'closeDrawer']), }, }; </script> @@ -19,11 +43,31 @@ export default { <div> <gl-drawer class="mt-6" :open="open" @close="closeDrawer"> <template #header> - <h4>{{ __("What's new at GitLab") }}</h4> - </template> - <template> - <div></div> + <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4> </template> + <div class="pb-6"> + <div v-for="feature in parsedFeatures" :key="feature.title" class="mb-6"> + <gl-link :href="feature.url" target="_blank"> + <h5 class="gl-font-base">{{ feature.title }}</h5> + </gl-link> + <div class="mb-2"> + <template v-for="package_name in feature.packages"> + <gl-badge :key="package_name" size="sm" class="whats-new-item-badge mr-1"> + <gl-icon name="license" />{{ package_name }} + </gl-badge> + </template> + </div> + <gl-link :href="feature.url" target="_blank"> + <img + :alt="feature.title" + :src="feature.image_url" + class="img-thumbnail px-6 py-2 whats-new-item-image" + /> + </gl-link> + <p class="pt-2">{{ feature.body }}</p> + <gl-link :href="feature.url" target="_blank">{{ __('Learn more') }}</gl-link> + </div> + </div> </gl-drawer> </div> </template> diff --git a/app/assets/javascripts/whats_new/components/trigger.vue b/app/assets/javascripts/whats_new/components/trigger.vue deleted file mode 100644 index e6c48e92888..00000000000 --- a/app/assets/javascripts/whats_new/components/trigger.vue +++ /dev/null @@ -1,19 +0,0 @@ -<script> -import { mapActions } from 'vuex'; -import { GlButton } from '@gitlab/ui'; - -export default { - components: { - GlButton, - }, - methods: { - ...mapActions(['openDrawer']), - }, -}; -</script> - -<template> - <li> - <gl-button variant="link" @click="openDrawer">{{ __("See what's new at GitLab") }}</gl-button> - </li> -</template> diff --git a/app/assets/javascripts/whats_new/index.js b/app/assets/javascripts/whats_new/index.js index c9ee3404d2a..19cdb590ae2 100644 --- a/app/assets/javascripts/whats_new/index.js +++ b/app/assets/javascripts/whats_new/index.js @@ -1,32 +1,28 @@ import Vue from 'vue'; import App from './components/app.vue'; -import Trigger from './components/trigger.vue'; import store from './store'; -export default () => { - // eslint-disable-next-line no-new - new Vue({ - el: document.getElementById('whats-new-app'), - store, - components: { - App, - }, - - render(createElement) { - return createElement('app'); - }, - }); +let whatsNewApp; - // eslint-disable-next-line no-new - new Vue({ - el: document.getElementById('whats-new-trigger'), - store, - components: { - Trigger, - }, +export default () => { + if (whatsNewApp) { + store.dispatch('openDrawer'); + } else { + const whatsNewElm = document.getElementById('whats-new-app'); - render(createElement) { - return createElement('trigger'); - }, - }); + whatsNewApp = new Vue({ + el: whatsNewElm, + store, + components: { + App, + }, + render(createElement) { + return createElement('app', { + props: { + features: whatsNewElm.getAttribute('data-features'), + }, + }); + }, + }); + } }; |