Expandable commit bodies (#2980)

* Initial working state of expandable commit bodies

* Fix all commits having showing button for multiline commits

* Refactor checking multiline messages method

* Force newlines with <br> in commit body

* Show multiple lines in the list view of repositories

* Fixed proper newlines and minor refactor

Use <pre> instead of <p>, this is so we can use \n instead of having to manually place <br> into the HTML. Makes it easier to display commit bodies.

* Fix commit list messages jumping around

* Fix indentation in view_list.tmpl

* Use vertical-align: baseline instead of top

* Refactor commit button toggle function

* Remove RenderCommitBodyLink function

* Add comments

* Add newline at the end of _repository.less

* Fix long commit bodies not properly wrapping inside <pre>

* Don't split on double newlines

* Show the commit body in commit view

* Update stylesheets

* Add/fix comments and run make fmt

* Fix spaces not being tabs

Author: sondr3

modules/templates/helper.go

@@ -110,8 +110,10 @@ func NewFuncMap() []template.FuncMap {
 		"EscapePound": func(str string) string {
 			return strings.NewReplacer("%", "%25", "#", "%23", " ", "%20", "?", "%3F").Replace(str)
 		},
-		"RenderCommitMessage":     RenderCommitMessage,
-		"RenderCommitMessageLink": RenderCommitMessageLink,
+		"RenderCommitMessage":      RenderCommitMessage,
+		"RenderCommitMessageLink":  RenderCommitMessageLink,
+		"RenderCommitBody":         RenderCommitBody,
+		"IsMultilineCommitMessage": IsMultilineCommitMessage,
 		"ThemeColorMetaTag": func() string {
 			return setting.UI.ThemeColorMetaTag
 		},
@@ -280,6 +282,29 @@ func renderCommitMessage(msg string, opts markup.RenderIssueIndexPatternOptions)
 	return template.HTML(msgLines[0])
 }
 
+// RenderCommitBody extracts the body of a commit message without its title.
+func RenderCommitBody(msg, urlPrefix string, metas map[string]string) template.HTML {
+	return renderCommitBody(msg, markup.RenderIssueIndexPatternOptions{
+		URLPrefix: urlPrefix,
+		Metas:     metas,
+	})
+}
+
+func renderCommitBody(msg string, opts markup.RenderIssueIndexPatternOptions) template.HTML {
+	cleanMsg := template.HTMLEscapeString(msg)
+	fullMessage := string(markup.RenderIssueIndexPattern([]byte(cleanMsg), opts))
+	body := strings.Split(strings.TrimSpace(fullMessage), "\n")
+	if len(body) == 0 {
+		return template.HTML("")
+	}
+	return template.HTML(strings.Join(body[1:], "\n"))
+}
+
+// IsMultilineCommitMessage checks to see if a commit message contains multiple lines.
+func IsMultilineCommitMessage(msg string) bool {
+	return strings.Count(strings.TrimSpace(msg), "\n") > 1
+}
+
 // Actioner describes an action
 type Actioner interface {
 	GetOpType() models.ActionType

public/css/index.css

@@ -2016,3 +2016,7 @@ function initFilterBranchTagDropdown(selector) {
         });
     });
 }
+
+$(".commit-button").click(function() {
+    $(this).parent().find('.commit-body').toggle();
+});

public/js/index.js

@@ -1606,3 +1606,11 @@
 		}
 	}
 }
+
+.commit-list {
+	vertical-align: baseline;
+}
+
+.commit-body {
+	white-space: pre-wrap;
+}

public/less/_repository.less

@@ -30,7 +30,7 @@
 					<th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
 				</tr>
 			</thead>
-			<tbody>
+			<tbody class="commit-list">
 				{{ $r:= List .Commits}}
 				{{range $r}}
 					<tr>
@@ -61,6 +61,10 @@
 						</td>
 						<td class="message collapsing">
 							<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{RenderCommitMessage .Summary $.RepoLink $.Repository.ComposeMetas}}</span>
+							{{if IsMultilineCommitMessage .Message}}
+							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+							{{end}}
 							{{template "repo/commit_status" .Status}}
 						</td>
 						<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

templates/repo/commits_table.tmpl

@@ -10,6 +10,9 @@
 					{{.i18n.Tr "repo.diff.browse_source"}}
 				</a>
 				<h3>{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}{{template "repo/commit_status" .CommitStatus}}</h3>
+				{{if IsMultilineCommitMessage .Commit.Message}}
+					<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+				{{end}}
 			</div>
 			<div class="ui attached info segment {{if .Commit.Signature}} isSigned {{if .Verification.Verified }} isVerified {{end}}{{end}}">
 				{{if .Author}}

templates/repo/diff/page.tmpl

@@ -1,6 +1,6 @@
 <table id="repo-files-table" class="ui fixed single line table">
 	<thead>
-		<tr>
+		<tr class="commit-list">
 			<th class="four wide">
 				{{if .LatestCommitUser}}
 					<img class="ui avatar image img-12" src="{{.LatestCommitUser.RelAvatarLink}}" />
@@ -28,6 +28,10 @@
 						{{end}}
 				</a>
 				<span class="grey has-emoji">{{RenderCommitMessage .LatestCommit.Summary .RepoLink $.Repository.ComposeMetas}}
+				{{if IsMultilineCommitMessage .LatestCommit.Message}}
+					<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+					<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+				{{end}}
 				{{template "repo/commit_status" .LatestCommitStatus}}</span>
 			</th>
 			<th class="nine wide">