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

options/locale/locale_en-US.ini

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

public/css/index.css

@@ -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 .jumpable-path{color:#888}
 .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:hover{color:#4078c0}
 .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 .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}
+.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.cm-s-default{border-radius:3px;padding:0!important}
 .CodeMirror .cm-comment{background:inherit!important}

public/less/_repository.less

@@ -371,9 +371,7 @@
                 }
 
                 .file-actions {
-                    margin-top: 0;
                     margin-bottom: -5px;
-                    padding-left: 20px;
 
                     .btn-octicon {
                         display: inline-block;
@@ -2385,3 +2383,21 @@ tbody.commit-list {
     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;
+}

routers/repo/view.go

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

templates/repo/view_file.tmpl

@@ -1,21 +1,26 @@
 <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 .ReadmeExist}}
-					<i class="book icon ui left"></i>
 			{{if .ReadmeInList}}
+				<i class="book icon"></i>
 				<strong>{{.FileName}}</strong>
 			{{else}}
-						<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+				<div class="file-info text grey normal mono">
+					{{if .NumLines}}
+						<div class="file-info-entry">
+							{{.NumLines}} {{.i18n.Tr "repo.lines"}}
+						</div>
 					{{end}}
-				{{else}}
+					{{if .FileSize}}
-					<i class="file text outline icon ui left"></i>
+						<div class="file-info-entry">
-					<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+							{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}
+						</div>
+					{{end}}
+				</div>
 			{{end}}
 		</div>
-			<div class="eight wide right aligned column">
 		{{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>
@@ -40,9 +45,8 @@
 					{{end}}
 				{{end}}
 			</div>
+		</div>
 		{{end}}
-			</div>
-		</div>
 	</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">