From 850904ca56dbc8972699a4a8547a7e12edaf846c Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 14 Nov 2023 20:05:31 -0700 Subject: [PATCH] Fix calendar alignment and add achievements section - Show full 12 month calendar on all screen sizes - Scroll calendar when out of room - Add achievements section Changelog: changed --- .../pages/users/activity_calendar.js | 22 +-- .../javascripts/pages/users/user_tabs.js | 53 ++++--- .../profile/components/activity_calendar.vue | 35 +---- .../profile/components/overview_tab.vue | 8 +- .../profile/components/user_achievements.vue | 13 +- .../stylesheets/page_bundles/profile.scss | 147 +++++------------- locale/gitlab.pot | 3 + spec/features/calendar_spec.rb | 36 ----- .../components/activity_calendar_spec.js | 30 ---- 9 files changed, 96 insertions(+), 251 deletions(-) diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js index 13bba06d425bbf..dbb0fe585791f7 100644 --- a/app/assets/javascripts/pages/users/activity_calendar.js +++ b/app/assets/javascripts/pages/users/activity_calendar.js @@ -72,7 +72,7 @@ export default class ActivityCalendar { this.clickDay = this.clickDay.bind(this); this.currentSelectedDate = ''; this.daySpace = 1; - this.daySize = 15; + this.daySize = 14; this.daySizeWithSpace = this.daySize + this.daySpace * 2; this.monthNames = [ __('Jan'), @@ -131,7 +131,6 @@ export default class ActivityCalendar { this.renderDays(); this.renderMonths(); this.renderDayTitles(); - this.renderKey(); } // Add extra padding for the last month label if it is also the last column @@ -257,25 +256,6 @@ export default class ActivityCalendar { .text((date) => this.monthNames[date.month]); } - renderKey() { - this.svg - .append('g') - .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`) - .selectAll('rect') - .data(CONTRIB_LEGENDS) - .enter() - .append('rect') - .attr('width', this.daySize) - .attr('height', this.daySize) - .attr('x', (_, i) => this.daySizeWithSpace * i) - .attr('y', 0) - .attr('data-level', (_, i) => i) - .attr('class', 'user-contrib-cell has-tooltip contrib-legend') - .attr('title', (x) => x.title) - .attr('data-container', 'body') - .attr('data-html', true); - } - clickDay(stamp) { if (this.currentSelectedDate !== stamp.date) { this.currentSelectedDate = stamp.date; diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js index 79eb3902116f36..62f49769f4d4a7 100644 --- a/app/assets/javascripts/pages/users/user_tabs.js +++ b/app/assets/javascripts/pages/users/user_tabs.js @@ -1,7 +1,6 @@ // TODO: Remove this with the removal of the old navigation. // See https://gitlab.com/groups/gitlab-org/-/epics/11875. -import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import $ from 'jquery'; import Activities from '~/activities'; import AjaxCache from '~/lib/utils/ajax_cache'; @@ -67,17 +66,32 @@ import UserOverviewBlock from './user_overview_block'; const CALENDAR_TEMPLATE = `
-
+
+ + + + + + + + + +
+
`; -const CALENDAR_PERIOD_6_MONTHS = 6; const CALENDAR_PERIOD_12_MONTHS = 12; -/* computation based on - * width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group); - * (see activity_calendar.js) - */ -const OVERVIEW_CALENDAR_BREAKPOINT = 918; export default class UserTabs { constructor({ defaultAction, action, parentEl }) { @@ -105,12 +119,6 @@ export default class UserTabs { .off('shown.bs.tab', '.nav-links a[data-toggle="tab"]') .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', (event) => this.tabShown(event)) .on('click', '.gl-pagination a', (event) => this.changeProjectsPage(event)); - - window.addEventListener('resize', () => this.onResize()); - } - - onResize() { - this.loadActivityCalendar(); } changeProjectsPage(e) { @@ -199,6 +207,7 @@ export default class UserTabs { UserTabs.renderMostRecentBlocks('#js-overview .activities-block', { requestParams: { limit: 15 }, }); + UserTabs.renderMostRecentBlocks('#js-overview .projects-block', { requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true }, }); @@ -218,8 +227,6 @@ export default class UserTabs { loadActivityCalendar() { const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar'); - if (!$calendarWrap.length || bp.getBreakpointSize() === 'xs') return; - const calendarPath = $calendarWrap.data('calendarPath'); AjaxCache.retrieve(calendarPath) @@ -240,7 +247,6 @@ export default class UserTabs { } static renderActivityCalendar(data, $calendarWrap) { - const monthsAgo = UserTabs.getVisibleCalendarPeriod($calendarWrap); const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath'); const utcOffset = $calendarWrap.data('utcOffset'); const calendarHint = __('Issues, merge requests, pushes, and comments.'); @@ -257,8 +263,12 @@ export default class UserTabs { calendarActivitiesPath, utcOffset, firstDayOfWeek: gon.first_day_of_week, - monthsAgo, + CALENDAR_PERIOD_12_MONTHS, }); + + // Scroll to end + const calendarContainer = document.querySelector('.js-contrib-calendar'); + calendarContainer.scrollLeft = calendarContainer.scrollWidth; } toggleLoading(status) { @@ -282,11 +292,4 @@ export default class UserTabs { getCurrentAction() { return this.$parentEl.find('.nav-links a.active').data('action'); } - - static getVisibleCalendarPeriod($calendarWrap) { - const width = $calendarWrap.width(); - return width < OVERVIEW_CALENDAR_BREAKPOINT - ? CALENDAR_PERIOD_6_MONTHS - : CALENDAR_PERIOD_12_MONTHS; - } } diff --git a/app/assets/javascripts/profile/components/activity_calendar.vue b/app/assets/javascripts/profile/components/activity_calendar.vue index d359b478d35c05..07a137e7fef4a7 100644 --- a/app/assets/javascripts/profile/components/activity_calendar.vue +++ b/app/assets/javascripts/profile/components/activity_calendar.vue @@ -1,12 +1,8 @@ diff --git a/app/assets/javascripts/profile/components/overview_tab.vue b/app/assets/javascripts/profile/components/overview_tab.vue index 8cfa3fb3eea188..ab8a2871a41c1c 100644 --- a/app/assets/javascripts/profile/components/overview_tab.vue +++ b/app/assets/javascripts/profile/components/overview_tab.vue @@ -54,19 +54,19 @@ export default {