diff options
Diffstat (limited to 'app/assets/javascripts/whats_new/components/app.vue')
-rw-r--r-- | app/assets/javascripts/whats_new/components/app.vue | 80 |
1 files changed, 60 insertions, 20 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index 9400dacedc2..3c1de57252a 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -1,8 +1,16 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui'; +import { + GlDrawer, + GlBadge, + GlIcon, + GlLink, + GlInfiniteScroll, + GlResizeObserverDirective, +} from '@gitlab/ui'; import SkeletonLoader from './skeleton_loader.vue'; import Tracking from '~/tracking'; +import { getDrawerBodyHeight } from '../utils/get_drawer_body_height'; const trackingMixin = Tracking.mixin(); @@ -12,8 +20,12 @@ export default { GlBadge, GlIcon, GlLink, + GlInfiniteScroll, SkeletonLoader, }, + directives: { + GlResizeObserver: GlResizeObserverDirective, + }, mixins: [trackingMixin], props: { storageKey: { @@ -23,7 +35,7 @@ export default { }, }, computed: { - ...mapState(['open', 'features']), + ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight']), }, mounted() { this.openDrawer(this.storageKey); @@ -35,36 +47,64 @@ export default { this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId }); }, methods: { - ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems']), + ...mapActions(['openDrawer', 'closeDrawer', 'fetchItems', 'setDrawerBodyHeight']), + bottomReached() { + if (this.pageInfo.nextPage) { + this.fetchItems(this.pageInfo.nextPage); + } + }, + handleResize() { + const height = getDrawerBodyHeight(this.$refs.drawer.$el); + this.setDrawerBodyHeight(height); + }, }, }; </script> <template> <div> - <gl-drawer class="whats-new-drawer" :open="open" @close="closeDrawer"> + <gl-drawer + ref="drawer" + v-gl-resize-observer="handleResize" + class="whats-new-drawer" + :open="open" + @close="closeDrawer" + > <template #header> - <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4> + <h4 class="page-title gl-my-2">{{ __("What's new at GitLab") }}</h4> </template> - <div class="pb-6"> - <template v-if="features"> - <div v-for="feature in features" :key="feature.title" class="mb-6"> + <gl-infinite-scroll + v-if="features.length" + :fetched-items="features.length" + :max-list-height="drawerBodyHeight" + class="gl-p-0" + @bottomReached="bottomReached" + > + <template #items> + <div + v-for="feature in features" + :key="feature.title" + class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + > <gl-link :href="feature.url" target="_blank" - data-testid="whats-new-title-link" + class="whats-new-item-title-link" data-track-event="click_whats_new_item" :data-track-label="feature.title" :data-track-property="feature.url" > - <h5 class="gl-font-base">{{ feature.title }}</h5> + <h5 class="gl-font-lg">{{ feature.title }}</h5> </gl-link> <div v-if="feature.packages" class="gl-mb-3"> - <template v-for="package_name in feature.packages"> - <gl-badge :key="package_name" size="sm" class="whats-new-item-badge gl-mr-2"> - <gl-icon name="license" />{{ package_name }} - </gl-badge> - </template> + <gl-badge + v-for="package_name in feature.packages" + :key="package_name" + size="sm" + class="whats-new-item-badge gl-mr-2" + > + <gl-icon name="license" />{{ package_name }} + </gl-badge> </div> <gl-link :href="feature.url" @@ -76,7 +116,7 @@ export default { <img :alt="feature.title" :src="feature.image_url" - class="img-thumbnail px-6 gl-py-3 whats-new-item-image" + class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" /> </gl-link> <p class="gl-pt-3">{{ feature.body }}</p> @@ -90,10 +130,10 @@ export default { > </div> </template> - <div v-else class="gl-mt-5"> - <skeleton-loader /> - <skeleton-loader /> - </div> + </gl-infinite-scroll> + <div v-else class="gl-mt-5"> + <skeleton-loader /> + <skeleton-loader /> </div> </gl-drawer> <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div> |