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
This commit is contained in:
Sondre Nilsen 2017-11-30 06:08:40 +01:00 committed by Lunny Xiao
parent 4cf90aa865
commit 86ee41ec03
7 changed files with 53 additions and 5 deletions

View file

@ -112,6 +112,8 @@ func NewFuncMap() []template.FuncMap {
}, },
"RenderCommitMessage": RenderCommitMessage, "RenderCommitMessage": RenderCommitMessage,
"RenderCommitMessageLink": RenderCommitMessageLink, "RenderCommitMessageLink": RenderCommitMessageLink,
"RenderCommitBody": RenderCommitBody,
"IsMultilineCommitMessage": IsMultilineCommitMessage,
"ThemeColorMetaTag": func() string { "ThemeColorMetaTag": func() string {
return setting.UI.ThemeColorMetaTag return setting.UI.ThemeColorMetaTag
}, },
@ -280,6 +282,29 @@ func renderCommitMessage(msg string, opts markup.RenderIssueIndexPatternOptions)
return template.HTML(msgLines[0]) 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 // Actioner describes an action
type Actioner interface { type Actioner interface {
GetOpType() models.ActionType GetOpType() models.ActionType

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -30,7 +30,7 @@
<th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th> <th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="commit-list">
{{ $r:= List .Commits}} {{ $r:= List .Commits}}
{{range $r}} {{range $r}}
<tr> <tr>
@ -61,6 +61,10 @@
</td> </td>
<td class="message collapsing"> <td class="message collapsing">
<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{RenderCommitMessage .Summary $.RepoLink $.Repository.ComposeMetas}}</span> <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}} {{template "repo/commit_status" .Status}}
</td> </td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td> <td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

View file

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

View file

@ -1,6 +1,6 @@
<table id="repo-files-table" class="ui fixed single line table"> <table id="repo-files-table" class="ui fixed single line table">
<thead> <thead>
<tr> <tr class="commit-list">
<th class="four wide"> <th class="four wide">
{{if .LatestCommitUser}} {{if .LatestCommitUser}}
<img class="ui avatar image img-12" src="{{.LatestCommitUser.RelAvatarLink}}" /> <img class="ui avatar image img-12" src="{{.LatestCommitUser.RelAvatarLink}}" />
@ -28,6 +28,10 @@
{{end}} {{end}}
</a> </a>
<span class="grey has-emoji">{{RenderCommitMessage .LatestCommit.Summary .RepoLink $.Repository.ComposeMetas}} <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> {{template "repo/commit_status" .LatestCommitStatus}}</span>
</th> </th>
<th class="nine wide"> <th class="nine wide">