add file line count info on UI (#8396)

Also reworked the header to remove the filename (which is redundant with
the file path above) and made the header a flexbox with a monospace
font.

Fixes: https://github.com/go-gitea/gitea/issues/8170
This commit is contained in:
silverwind 2019-10-07 06:59:17 +02:00 committed by techknowlogick
parent 51fade4c44
commit 08896cd9f6
5 changed files with 69 additions and 43 deletions

View file

@ -681,6 +681,7 @@ stored_lfs = Stored with Git LFS
commit_graph = Commit Graph commit_graph = Commit Graph
blame = Blame blame = Blame
normal_view = Normal View normal_view = Normal View
lines = lines
editor.new_file = New File editor.new_file = New File
editor.upload_file = Upload File editor.upload_file = Upload File

View file

@ -494,7 +494,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
.repository.file.list #repo-files-table tr:hover{background-color:#ffe} .repository.file.list #repo-files-table tr:hover{background-color:#ffe}
.repository.file.list #repo-files-table .jumpable-path{color:#888} .repository.file.list #repo-files-table .jumpable-path{color:#888}
.repository.file.list .non-diff-file-content .header .icon{font-size:1em} .repository.file.list .non-diff-file-content .header .icon{font-size:1em}
.repository.file.list .non-diff-file-content .header .file-actions{margin-top:0;margin-bottom:-5px;padding-left:20px} .repository.file.list .non-diff-file-content .header .file-actions{margin-bottom:-5px}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon{display:inline-block;padding:5px;margin-left:5px;line-height:1;color:#767676;vertical-align:middle;background:0 0;border:0;outline:0} .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon{display:inline-block;padding:5px;margin-left:5px;line-height:1;color:#767676;vertical-align:middle;background:0 0;border:0;outline:0}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover{color:#4078c0} .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover{color:#4078c0}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover{color:#bd2c00} .repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover{color:#bd2c00}
@ -878,6 +878,9 @@ tbody.commit-list{vertical-align:baseline}
.repo-buttons .disabled-repo-button a.button:hover{background:0 0!important;color:rgba(0,0,0,.6)!important;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset!important} .repo-buttons .disabled-repo-button a.button:hover{background:0 0!important;color:rgba(0,0,0,.6)!important;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset!important}
.repo-buttons .ui.labeled.button>.label{border-left:0!important;margin:0!important} .repo-buttons .ui.labeled.button>.label{border-left:0!important;margin:0!important}
.tag-code,.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px} .tag-code,.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px}
.file-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px!important}
.file-info{display:flex;align-items:center}
.file-info-entry+.file-info-entry{border-left:1px solid currentColor;margin-left:8px;padding-left:8px}
.CodeMirror{font:14px 'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace} .CodeMirror{font:14px 'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
.CodeMirror.cm-s-default{border-radius:3px;padding:0!important} .CodeMirror.cm-s-default{border-radius:3px;padding:0!important}
.CodeMirror .cm-comment{background:inherit!important} .CodeMirror .cm-comment{background:inherit!important}

View file

@ -371,9 +371,7 @@
} }
.file-actions { .file-actions {
margin-top: 0;
margin-bottom: -5px; margin-bottom: -5px;
padding-left: 20px;
.btn-octicon { .btn-octicon {
display: inline-block; display: inline-block;
@ -2385,3 +2383,21 @@ tbody.commit-list {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
} }
.file-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px !important;
}
.file-info {
display: flex;
align-items: center;
}
.file-info-entry + .file-info-entry {
border-left: 1px solid currentColor;
margin-left: 8px;
padding-left: 8px;
}

View file

@ -304,6 +304,8 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st
var output bytes.Buffer var output bytes.Buffer
lines := strings.Split(fileContent, "\n") lines := strings.Split(fileContent, "\n")
ctx.Data["NumLines"] = len(lines)
//Remove blank line at the end of file //Remove blank line at the end of file
if len(lines) > 0 && lines[len(lines)-1] == "" { if len(lines) > 0 && lines[len(lines)-1] == "" {
lines = lines[:len(lines)-1] lines = lines[:len(lines)-1]

View file

@ -1,48 +1,52 @@
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content"> <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
<h4 class="ui top attached header" id="{{if .ReadmeExist}}repo-readme{{else}}repo-read-file{{end}}"> <h4 class="file-header ui top attached header">
<div class="ui stackable grid"> <div class="file-header-left">
<div class="eight wide column"> {{if .ReadmeInList}}
{{if .ReadmeExist}} <i class="book icon"></i>
<i class="book icon ui left"></i> <strong>{{.FileName}}</strong>
{{if .ReadmeInList}} {{else}}
<strong>{{.FileName}}</strong> <div class="file-info text grey normal mono">
{{else}} {{if .NumLines}}
<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span> <div class="file-info-entry">
{{end}} {{.NumLines}} {{.i18n.Tr "repo.lines"}}
{{else}}
<i class="file text outline icon ui left"></i>
<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
{{end}}
</div>
<div class="eight wide right aligned column">
{{if not .ReadmeInList}}
<div class="ui right file-actions">
<div class="ui buttons">
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
{{if not .IsViewCommit}}
<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
{{end}}
{{if .IsTextFile}}
<a class="ui button" href="{{.RepoLink}}/blame/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.blame"}}</a>
{{end}}
<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
</div> </div>
{{if .Repository.CanEnableEditor}} {{end}}
{{if .CanEditFile}} {{if .FileSize}}
<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-pencil btn-octicon poping up" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a> <div class="file-info-entry">
{{else}} {{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}
<i class="octicon octicon-pencil btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i> </div>
{{end}} {{end}}
{{if .CanDeleteFile}} </div>
<a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-trashcan btn-octicon btn-octicon-danger poping up" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a> {{end}}
{{else}} </div>
<i class="octicon octicon-trashcan btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i> {{if not .ReadmeInList}}
{{end}} <div class="file-header-right">
{{end}} <div class="ui right file-actions">
</div> <div class="ui buttons">
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
{{if not .IsViewCommit}}
<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
{{end}}
{{if .IsTextFile}}
<a class="ui button" href="{{.RepoLink}}/blame/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.blame"}}</a>
{{end}}
<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
</div>
{{if .Repository.CanEnableEditor}}
{{if .CanEditFile}}
<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-pencil btn-octicon poping up" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
{{else}}
<i class="octicon octicon-pencil btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
{{end}}
{{if .CanDeleteFile}}
<a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-trashcan btn-octicon btn-octicon-danger poping up" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
{{else}}
<i class="octicon octicon-trashcan btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
{{end}}
{{end}} {{end}}
</div> </div>
</div> </div>
{{end}}
</h4> </h4>
<div class="ui attached table unstackable segment"> <div class="ui attached table unstackable segment">
<div class="file-view {{if .IsMarkup}}{{.MarkupType}} markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji"> <div class="file-view {{if .IsMarkup}}{{.MarkupType}} markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">