Fix activity heat map padding & locale

web_src/js/components/ActivityHeatmap.vue

@@ -55,15 +55,33 @@ export default {
 </script>
 <template>
   <div class="total-contributions">
-    {{ locale.contributions_in_the_last_12_months }}
+    {{ locale.textTotalContributions }}
   </div>
   <calendar-heatmap
-    :locale="locale"
-    :no-data-text="locale.no_contributions"
-    :tooltip-unit="locale.contributions"
+    :locale="locale.heatMapLocale"
+    :no-data-text="locale.noDataText"
+    :tooltip-unit="locale.tooltipUnit"
     :end-date="endDate"
     :values="values"
     :range-color="colorRange"
     @day-click="handleDayClick($event)"
   />
 </template>
+<style>
+/* A quick patch for vue3-calendar-heatmap's tooltip padding, to avoid conflicting with other tippy contents.
+At the moment we could only identify the tooltip by its transition property.
+https://github.com/razorness/vue3-calendar-heatmap/blob/955626176cb5dc3d3ead8120475c2e5e753cc392/src/components/CalendarHeatmap.vue#L202
+This selector should be replaced by a more specific one if the library adds a CSS class.
+*/
+[data-tippy-root][style*="transition: transform 0.1s ease-out"] .tippy-box {
+  border: none;
+}
+/* some styles are put on the tippy-content intentionally, otherwise there will be strange animations */
+[data-tippy-root][style*="transition: transform 0.1s ease-out"] .tippy-box .tippy-content {
+  transition: none !important;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-tooltip-bg);
+  color: var(--color-tooltip-text);
+  border-radius: var(--border-radius);
+}
+</style>

web_src/js/features/heatmap.js

@@ -20,13 +20,16 @@ export function initHeatmap() {
 
     // last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
     const locale = {
-      months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
-      days: new Array(7).fill().map((_, idx) => translateDay(idx)),
-      contributions: 'contributions',
-      contributions_in_the_last_12_months: el.getAttribute('data-locale-total-contributions'),
-      no_contributions: el.getAttribute('data-locale-no-contributions'),
-      more: el.getAttribute('data-locale-more'),
-      less: el.getAttribute('data-locale-less'),
+      heatMapLocale: {
+        months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
+        days: new Array(7).fill().map((_, idx) => translateDay(idx)),
+        on: ' - ', // no correct locale support for it, because in many languages the sentence is not "something on someday"
+        more: el.getAttribute('data-locale-more'),
+        less: el.getAttribute('data-locale-less'),
+      },
+      tooltipUnit: 'contributions',
+      textTotalContributions: el.getAttribute('data-locale-total-contributions'),
+      noDataText: el.getAttribute('data-locale-no-contributions'),
     };
 
     const View = createApp(ActivityHeatmap, {values, locale});