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

1 files changed, 43 insertions, 39 deletions

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 50e4c33946..71607bd1f8 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -1,48 +1,52 @@
 <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}}">
-		<div class="ui stackable grid">
-			<div class="eight wide column">
-				{{if .ReadmeExist}}
-					<i class="book icon ui left"></i>
-					{{if .ReadmeInList}}
-						<strong>{{.FileName}}</strong>
-					{{else}}
-						<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+	<h4 class="file-header ui top attached header">
+		<div class="file-header-left">
+			{{if .ReadmeInList}}
+				<i class="book icon"></i>
+				<strong>{{.FileName}}</strong>
+			{{else}}
+				<div class="file-info text grey normal mono">
+					{{if .NumLines}}
+						<div class="file-info-entry">
+							{{.NumLines}} {{.i18n.Tr "repo.lines"}}
+						</div>
 					{{end}}
-				{{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>
+					{{if .FileSize}}
+						<div class="file-info-entry">
+							{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}
 						</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}}
-					</div>
+					{{end}}
+				</div>
+			{{end}}
+		</div>
+		{{if not .ReadmeInList}}
+		<div class="file-header-right">
+			<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>
+				{{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}}
 			</div>
 		</div>
+		{{end}}
 	</h4>
 	<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">