Browse Source

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
Sondre Nilsen 2 years ago
parent
commit
86ee41ec03

+ 27 - 2
modules/templates/helper.go

@@ -110,8 +110,10 @@ func NewFuncMap() []template.FuncMap {
110 110
 		"EscapePound": func(str string) string {
111 111
 			return strings.NewReplacer("%", "%25", "#", "%23", " ", "%20", "?", "%3F").Replace(str)
112 112
 		},
113
-		"RenderCommitMessage":     RenderCommitMessage,
114
-		"RenderCommitMessageLink": RenderCommitMessageLink,
113
+		"RenderCommitMessage":      RenderCommitMessage,
114
+		"RenderCommitMessageLink":  RenderCommitMessageLink,
115
+		"RenderCommitBody":         RenderCommitBody,
116
+		"IsMultilineCommitMessage": IsMultilineCommitMessage,
115 117
 		"ThemeColorMetaTag": func() string {
116 118
 			return setting.UI.ThemeColorMetaTag
117 119
 		},
@@ -280,6 +282,29 @@ func renderCommitMessage(msg string, opts markup.RenderIssueIndexPatternOptions)
280 282
 	return template.HTML(msgLines[0])
281 283
 }
282 284
 
285
+// RenderCommitBody extracts the body of a commit message without its title.
286
+func RenderCommitBody(msg, urlPrefix string, metas map[string]string) template.HTML {
287
+	return renderCommitBody(msg, markup.RenderIssueIndexPatternOptions{
288
+		URLPrefix: urlPrefix,
289
+		Metas:     metas,
290
+	})
291
+}
292
+
293
+func renderCommitBody(msg string, opts markup.RenderIssueIndexPatternOptions) template.HTML {
294
+	cleanMsg := template.HTMLEscapeString(msg)
295
+	fullMessage := string(markup.RenderIssueIndexPattern([]byte(cleanMsg), opts))
296
+	body := strings.Split(strings.TrimSpace(fullMessage), "\n")
297
+	if len(body) == 0 {
298
+		return template.HTML("")
299
+	}
300
+	return template.HTML(strings.Join(body[1:], "\n"))
301
+}
302
+
303
+// IsMultilineCommitMessage checks to see if a commit message contains multiple lines.
304
+func IsMultilineCommitMessage(msg string) bool {
305
+	return strings.Count(strings.TrimSpace(msg), "\n") > 1
306
+}
307
+
283 308
 // Actioner describes an action
284 309
 type Actioner interface {
285 310
 	GetOpType() models.ActionType

File diff suppressed because it is too large
+ 1 - 1
public/css/index.css


+ 4 - 0
public/js/index.js

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

+ 8 - 0
public/less/_repository.less

@@ -1606,3 +1606,11 @@
1606 1606
 		}
1607 1607
 	}
1608 1608
 }
1609
+
1610
+.commit-list {
1611
+	vertical-align: baseline;
1612
+}
1613
+
1614
+.commit-body {
1615
+	white-space: pre-wrap;
1616
+}

+ 5 - 1
templates/repo/commits_table.tmpl

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

+ 3 - 0
templates/repo/diff/page.tmpl

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

+ 5 - 1
templates/repo/view_list.tmpl

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