Contribution heatmap improvements (#35876) (#35880)

Backport #35876 by @silverwind

1. Set a fixed height on the element, preventing the content after the
element from shifting on page load. This uses CSS [container query
length
units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units)
as I saw no other way because of the non-linear scaling of the element.
2. Move the "total-contributions" text into the existing vue slot,
eliminating the need for absolute positioning.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

modules/git/tree_entry_gogit.go

@@ -19,12 +19,17 @@ type TreeEntry struct {
 	gogitTreeEntry *object.TreeEntry
 	ptree          *Tree
 
+	fullName string
+
 	size  int64
 	sized bool
 }
 
 // Name returns the name of the entry
 func (te *TreeEntry) Name() string {
+	if te.fullName != "" {
+		return te.fullName
+	}
 	return te.gogitTreeEntry.Name
 }
 

modules/git/tree_gogit.go

@@ -69,7 +69,7 @@ func (t *Tree) ListEntriesRecursiveWithSize() (Entries, error) {
 	seen := map[plumbing.Hash]bool{}
 	walker := object.NewTreeWalker(t.gogitTree, true, seen)
 	for {
-		_, entry, err := walker.Next()
+		fullName, entry, err := walker.Next()
 		if err == io.EOF {
 			break
 		}
@@ -84,6 +84,7 @@ func (t *Tree) ListEntriesRecursiveWithSize() (Entries, error) {
 			ID:             ParseGogitHash(entry.Hash),
 			gogitTreeEntry: &entry,
 			ptree:          t,
+			fullName:       fullName,
 		}
 		entries = append(entries, convertedEntry)
 	}

routers/api/v1/repo/file.go

@@ -369,11 +369,11 @@ func ReqChangeRepoFileOptionsAndCheck(ctx *context.APIContext) {
 		},
 		Signoff: commonOpts.Signoff,
 	}
-	if commonOpts.Dates.Author.IsZero() {
-		commonOpts.Dates.Author = time.Now()
+	if changeFileOpts.Dates.Author.IsZero() {
+		changeFileOpts.Dates.Author = time.Now()
 	}
-	if commonOpts.Dates.Committer.IsZero() {
-		commonOpts.Dates.Committer = time.Now()
+	if changeFileOpts.Dates.Committer.IsZero() {
+		changeFileOpts.Dates.Committer = time.Now()
 	}
 	ctx.Data["__APIChangeRepoFilesOptions"] = changeFileOpts
 }

templates/user/heatmap.tmpl

@@ -1,4 +1,5 @@
 {{if .HeatmapData}}
+<div class="activity-heatmap-container">
 	<div id="user-heatmap" class="is-loading"
 		data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
 		data-locale-total-contributions="{{ctx.Locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (ctx.Locale.PrettyNumber .HeatmapTotalContributions)}}"
@@ -6,5 +7,6 @@
 		data-locale-more="{{ctx.Locale.Tr "heatmap.more"}}"
 		data-locale-less="{{ctx.Locale.Tr "heatmap.less"}}"
 	></div>
-	<div class="divider"></div>
+</div>
+<div class="divider"></div>
 {{end}}

web_src/css/base.css

@@ -626,7 +626,6 @@ img.ui.avatar,
   font-family: var(--fonts-monospace);
   font-size: 13px;
   font-weight: var(--font-weight-normal);
-  padding: 3px 5px;
   flex-shrink: 0;
 }
 

web_src/css/features/heatmap.css

@@ -4,23 +4,44 @@
   position: relative;
 }
 
-/* before the Vue component is mounted, show a loading indicator with dummy size */
-/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */
-#user-heatmap.is-loading {
-  aspect-ratio: 5.415; /* the size is about 790 x 145 */
+.activity-heatmap-container {
+  container-type: inline-size;
 }
-.user.profile #user-heatmap.is-loading {
-  aspect-ratio: 5.645; /* the size is about 953 x 169 */
+
+@container (width > 0) {
+  #user-heatmap {
+    /* Set element to fixed height so that it does not resize after load. The calculation is complex
+       because the element does not scale with a fixed aspect ratio. */
+    height: calc((100cqw / 5) - (100cqw / 25) + 20px);
+  }
+}
+
+/* Fallback height adjustment above for browsers that don't support container queries */
+@supports not (container-type: inline-size) {
+  /* Before the Vue component is mounted, show a loading indicator with dummy size */
+  /* The ratio is guesswork for legacy browsers, new browsers use the "@container" approach above  */
+  #user-heatmap.is-loading {
+    aspect-ratio: 5.4823972051; /* the size is about 816 x 148.84 */
+  }
+  .user.profile #user-heatmap.is-loading {
+    aspect-ratio: 5.6290608387; /* the size is about 953 x 169.3 */
+  }
 }
 
 #user-heatmap text {
   fill: currentcolor !important;
 }
 
+/* root legend */
+#user-heatmap .vch__container > .vch__legend {
+  display: flex;
+  font-size: 11px;
+  justify-content: space-between;
+}
+
 /* for the "Less" and "More" legend */
 #user-heatmap .vch__legend .vch__legend {
   display: flex;
-  font-size: 11px;
   align-items: center;
   justify-content: right;
 }
@@ -34,25 +55,3 @@
 #user-heatmap .vch__day__square:hover {
   outline: 1.5px solid var(--color-text);
 }
-
-/* move the "? contributions in the last ? months" text from top to bottom */
-#user-heatmap .total-contributions {
-  font-size: 11px;
-  position: absolute;
-  bottom: 0;
-  left: 25px;
-}
-
-@media (max-width: 1200px) {
-  #user-heatmap .total-contributions {
-    left: 21px;
-  }
-}
-
-@media (max-width: 1000px) {
-  #user-heatmap .total-contributions {
-    font-size: 10px;
-    left: 17px;
-    bottom: -4px;
-  }
-}

web_src/css/repo.css

@@ -387,6 +387,7 @@ td .commit-summary {
 
 .repository.view.issue .pull-desc code {
   color: var(--color-primary);
+  background: transparent;
 }
 
 .repository.view.issue .pull-desc a[data-clipboard-text] {

web_src/js/components/ActivityHeatmap.vue

@@ -53,9 +53,6 @@ function handleDayClick(e: Event & {date: Date}) {
 }
 </script>
 <template>
-  <div class="total-contributions">
-    {{ locale.textTotalContributions }}
-  </div>
   <calendar-heatmap
     :locale="locale.heatMapLocale"
     :no-data-text="locale.noDataText"
@@ -65,5 +62,7 @@ function handleDayClick(e: Event & {date: Date}) {
     :range-color="colorRange"
     @day-click="handleDayClick($event)"
     :tippy-props="{theme: 'tooltip'}"
-  />
+  >
+    <template #vch__legend-left>{{ locale.textTotalContributions }}</template>
+  </calendar-heatmap>
 </template>