Rework blame template and styling (#11885)

* Rework blame template and styling

* cleanup template and add missing NumLines

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
release/v1.15
Cirno the Strongest 2020-06-15 20:39:39 +02:00 committed by GitHub
parent a7f7d1399f
commit c8780984f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 73 deletions

View File

@ -118,29 +118,15 @@ func RefBlame(ctx *context.Context) {
ctx.Data["IsBlame"] = true ctx.Data["IsBlame"] = true
if ctx.Repo.CanEnableEditor() {
// Check LFS Lock
lfsLock, err := ctx.Repo.Repository.GetTreePathLock(ctx.Repo.TreePath)
if err != nil {
ctx.ServerError("GetTreePathLock", err)
return
}
if lfsLock != nil && lfsLock.OwnerID != ctx.User.ID {
ctx.Data["CanDeleteFile"] = false
ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.this_file_locked")
} else {
ctx.Data["CanDeleteFile"] = true
ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.delete_this_file")
}
} else if !ctx.Repo.IsViewBranch {
ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.must_be_on_a_branch")
} else if !ctx.Repo.CanWrite(models.UnitTypeCode) {
ctx.Data["DeleteFileTooltip"] = ctx.Tr("repo.editor.must_have_write_access")
}
ctx.Data["FileSize"] = blob.Size() ctx.Data["FileSize"] = blob.Size()
ctx.Data["FileName"] = blob.Name() ctx.Data["FileName"] = blob.Name()
ctx.Data["NumLines"], err = blob.GetBlobLineCount()
if err != nil {
ctx.NotFound("GetBlobLineCount", err)
return
}
blameReader, err := git.CreateBlameReader(models.RepoPath(userName, repoName), commitID, fileName) blameReader, err := git.CreateBlameReader(models.RepoPath(userName, repoName), commitID, fileName)
if err != nil { if err != nil {
ctx.NotFound("CreateBlameReader", err) ctx.NotFound("CreateBlameReader", err)
@ -245,9 +231,9 @@ func renderBlame(ctx *context.Context, blameParts []git.BlamePart, commitNames m
//Line number //Line number
if len(part.Lines)-1 == index && len(blameParts)-1 != pi { if len(part.Lines)-1 == index && len(blameParts)-1 != pi {
lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" class="bottom-line">%d</span>`, i, i)) lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" data-line-number="%d" class="bottom-line"></span>`, i, i))
} else { } else {
lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d">%d</span>`, i, i)) lineNumbers.WriteString(fmt.Sprintf(`<span id="L%d" data-line-number="%d"></span>`, i, i))
} }
//Code line //Code line

View File

@ -1,51 +1,37 @@
<div class="tab-size-8 non-diff-file-content"> <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
<h4 class="file-header ui top attached header">
<h4 class="ui top attached header" id="repo-read-file"> <div class="file-header-left">
<div class="ui stackable grid"> <div class="file-info text grey normal mono">
<div class="eight wide column"> <div class="file-info-entry">
<i class="file text outline icon ui left"></i> {{.NumLines}} {{.i18n.Tr (TrN .i18n.Lang .NumLines "repo.line" "repo.lines") }}
<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span> </div>
<div class="file-info-entry">{{FileSize .FileSize}}</div>
</div> </div>
<div class="eight wide right aligned column"> </div>
<div class="ui right file-actions"> <div class="file-header-right">
<div class="ui buttons"> <div class="ui right file-actions">
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a> <div class="ui buttons">
{{if not .IsViewCommit}} <a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a> {{if not .IsViewCommit}}
{{end}} <a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
<a class="ui button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a> {{end}}
<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a> <a class="ui button" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.normal_view"}}</a>
</div> <a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
{{if .Repository.CanEnableEditor}} </div>
{{if .CanEditFile}}
<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil" 16}}</span></a>
{{else}}
<span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil" 16}}</span>
{{end}}
{{if .CanDeleteFile}}
<a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon btn-octicon-danger poping up" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan" 16}}</span></a>
{{else}}
<span class="btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan" 16}}</span>
{{end}}
{{end}}
</div>
</div> </div>
</div> </div>
</h4> </h4>
<div class="ui attached table unstackable segment"> <div class="ui attached table unstackable segment">
<div class="file-view code-view"> <div class="file-view code-view">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="lines-commit">{{.BlameCommitInfo}}</td> <td class="lines-commit">{{.BlameCommitInfo}}</td>
<td class="lines-num">{{.BlameLineNums}}</td> <td class="lines-num">{{.BlameLineNums}}</td>
<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td> <td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
{{template "base/head" .}} {{template "base/head" .}}
<div class="repository file list"> <div class="repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
{{template "base/alert" .}} {{template "base/alert" .}}

View File

@ -1069,7 +1069,6 @@ i.icons {
} }
.lines-num { .lines-num {
vertical-align: top;
text-align: right !important; text-align: right !important;
color: #999999; color: #999999;
background: #f5f5f5; background: #f5f5f5;
@ -1077,7 +1076,13 @@ i.icons {
user-select: none; user-select: none;
span { span {
&:before { &.bottom-line {
&:after {
border-bottom: 1px solid #eaecef;
}
}
&:after {
content: attr(data-line-number); content: attr(data-line-number);
line-height: 20px !important; line-height: 20px !important;
padding: 0 10px; padding: 0 10px;
@ -1090,6 +1095,7 @@ i.icons {
.lines-num, .lines-num,
.lines-code { .lines-code {
padding: 0 !important; padding: 0 !important;
vertical-align: top;
pre, pre,
ol, ol,
@ -1101,7 +1107,7 @@ i.icons {
li { li {
display: block; display: block;
width: calc(100% - 1ch); width: calc(100% - 1ch);
margin-left: 1ch; padding-left: 1ch;
} }
} }
} }
@ -1149,7 +1155,6 @@ i.icons {
} }
} }
.lines-num,
.lines-code, .lines-code,
.lines-commit { .lines-commit {
.bottom-line { .bottom-line {

View File

@ -1,5 +1,4 @@
.repository { .repository {
padding-top: 15px; padding-top: 15px;
.repo-header { .repo-header {
@ -246,6 +245,12 @@
} }
&.file.list { &.file.list {
&.blame {
.ui.container:not(.flex) {
width: 98%;
}
}
.repo-description { .repo-description {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1646,7 +1651,6 @@
width: 1%; width: 1%;
min-width: 50px; min-width: 50px;
user-select: none; user-select: none;
vertical-align: top;
span.fold { span.fold {
display: block; display: block;