diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-19 18:44:42 +0300 |
commit | 4555e1b21c365ed8303ffb7a3325d773c9b8bf31 (patch) | |
tree | 5423a1c7516cffe36384133ade12572cf709398d /app/assets/javascripts/whats_new | |
parent | e570267f2f6b326480d284e0164a6464ba4081bc (diff) |
Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42
Diffstat (limited to 'app/assets/javascripts/whats_new')
-rw-r--r-- | app/assets/javascripts/whats_new/components/app.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/components/feature.vue | 60 | ||||
-rw-r--r-- | app/assets/javascripts/whats_new/store/actions.js | 4 |
3 files changed, 51 insertions, 26 deletions
diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index 4a387edbe3f..4ee586527b5 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -30,7 +30,7 @@ export default { }, mounted() { this.openDrawer(this.versionDigest); - this.fetchItems(); + this.fetchFreshItems(); const body = document.querySelector('body'); const namespaceId = body.getAttribute('data-namespace-id'); @@ -42,13 +42,18 @@ export default { bottomReached() { const page = this.pageInfo.nextPage; if (page) { - this.fetchItems({ page }); + this.fetchFreshItems(page); } }, handleResize() { const height = getDrawerBodyHeight(this.$refs.drawer.$el); this.setDrawerBodyHeight(height); }, + fetchFreshItems(page) { + const { versionDigest } = this; + + this.fetchItems({ page, versionDigest }); + }, }, }; </script> @@ -58,7 +63,7 @@ export default { <gl-drawer ref="drawer" v-gl-resize-observer="handleResize" - class="whats-new-drawer" + class="whats-new-drawer gl-reset-line-height" :z-index="700" :open="open" @close="closeDrawer" @@ -83,6 +88,6 @@ export default { <skeleton-loader /> </div> </gl-drawer> - <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div> + <div v-if="open" class="whats-new-modal-backdrop modal-backdrop" @click="closeDrawer"></div> </div> </template> diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue index f6f7618b0d8..5444e77a4d2 100644 --- a/app/assets/javascripts/whats_new/components/feature.vue +++ b/app/assets/javascripts/whats_new/components/feature.vue @@ -1,11 +1,13 @@ <script> -import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; +import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective, GlButton } from '@gitlab/ui'; +import { dateInWords, isValidDate } from '~/lib/utils/datetime_utility'; export default { components: { GlBadge, GlIcon, GlLink, + GlButton, }, directives: { SafeHtml: GlSafeHtmlDirective, @@ -16,52 +18,68 @@ export default { required: true, }, }, + computed: { + releaseDate() { + const { published_at } = this.feature; + const date = new Date(published_at); + + if (!isValidDate(date) || date.getTime() === 0) { + return ''; + } + + return dateInWords(date); + }, + }, }; </script> <template> - <div class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <div class="gl-py-6 gl-px-6 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"> + <gl-link + :href="feature.url" + target="_blank" + class="gl-display-block" + data-track-event="click_whats_new_item" + :data-track-label="feature.title" + :data-track-property="feature.url" + > + <div + class="whats-new-item-image gl-bg-size-cover" + :style="`background-image: url(${feature.image_url});`" + > + <span class="gl-sr-only">{{ feature.title }}</span> + </div> + </gl-link> <gl-link :href="feature.url" target="_blank" - class="whats-new-item-title-link" + class="whats-new-item-title-link gl-display-block gl-mt-4 gl-mb-1" data-track-event="click_whats_new_item" :data-track-label="feature.title" :data-track-property="feature.url" > - <h5 class="gl-font-lg" data-test-id="feature-title">{{ feature.title }}</h5> + <h5 class="gl-font-lg gl-my-0" data-test-id="feature-title">{{ feature.title }}</h5> </gl-link> + <div v-if="releaseDate" class="gl-mb-3" data-testid="release-date">{{ releaseDate }}</div> <div v-if="feature.packages" class="gl-mb-3"> <gl-badge v-for="packageName in feature.packages" :key="packageName" - size="sm" + size="md" class="whats-new-item-badge gl-mr-2" > <gl-icon name="license" />{{ packageName }} </gl-badge> </div> - <gl-link - :href="feature.url" - target="_blank" - data-track-event="click_whats_new_item" - :data-track-label="feature.title" - :data-track-property="feature.url" - > - <img - :alt="feature.title" - :src="feature.image_url" - class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image" - /> - </gl-link> - <div v-safe-html="feature.body" class="gl-pt-3"></div> - <gl-link + <div v-safe-html="feature.body" class="gl-pt-3 gl-line-height-20"></div> + <gl-button :href="feature.url" target="_blank" data-track-event="click_whats_new_item" :data-track-label="feature.title" :data-track-property="feature.url" - >{{ __('Learn more') }}</gl-link > + {{ __('Learn more') }} <gl-icon name="arrow-right" /> + </gl-button> </div> </template> diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js index 1dc92ea2606..f209f145884 100644 --- a/app/assets/javascripts/whats_new/store/actions.js +++ b/app/assets/javascripts/whats_new/store/actions.js @@ -14,17 +14,19 @@ export default { localStorage.setItem(STORAGE_KEY, versionDigest); } }, - fetchItems({ commit, state }, { page } = { page: null }) { + fetchItems({ commit, state }, { page, versionDigest } = { page: null, versionDigest: null }) { if (state.fetching) { return false; } commit(types.SET_FETCHING, true); + const v = versionDigest; return axios .get('/-/whats_new', { params: { page, + v, }, }) .then(({ data, headers }) => { |