finsih diff and compare

2025-10-31 21:28:11 +09:00 · 2015-08-21 00:18:30 +08:00
parent aa65761d81
commit 4275b3720a
7 changed files with 305 additions and 133 deletions
--- a/public/css/gogs.min.css
+++ b/public/css/gogs.min.css
--- a/public/js/gogs.js
+++ b/public/js/gogs.js
@@ -339,6 +339,25 @@ function initRepository() {
        })
    }

+    // Diff
+    if ($('.repository.diff').length > 0) {
+        $('.diff-detail-box .toggle.button').click(function () {
+            $($(this).data('target')).slideToggle(100);
+        })
+
+        var $counter = $('.diff-counter');
+        if ($counter.length < 1) {
+            return;
+        }
+        $counter.each(function (i, item) {
+            var $item = $(item);
+            var addLine = $item.find('span[data-line].add').data("line");
+            var delLine = $item.find('span[data-line].del').data("line");
+            var addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
+            $item.find(".bar .add").css("width", addPercent + "%");
+        });
+    }
+
    // Pull request
    if ($('.repository.compare.pull').length > 0) {
        var $branch_dropdown = $('.choose.branch .dropdown')
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -118,6 +118,19 @@ img {
 	    border-color: #F0C36D;
 		}
 	}
+	.info {
+		&.header {
+			background-color: #d9edf7!important;
+    	border-color: #85c5e5;
+		}
+		&.segment {
+    	border-color: #85c5e5;
+		}
+	}
+
+	.normal.header {
+		font-weight: normal;
+	}

 	.avatar.image {
 		border-radius: 3px;
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -455,14 +455,6 @@
 		.author {
 			min-width: 180px;
 		}
-		.sha {
-			a {
-				font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
-				font-size: 14px;
-				padding: 6px 10px 4px 10px;
-				font-weight: normal;
-			}
-		}
 		.message span {
 			max-width: 500px;
 		}
@@ -470,6 +462,144 @@
 	    width: 120px;
 		}
 	}
+	.sha.label {
+		font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
+		font-size: 14px;
+		padding: 6px 10px 4px 10px;
+		font-weight: normal;
+	}
+
+	.diff-detail-box {
+    margin: 15px 0;
+    line-height: 30px;
+    ol {
+      clear: both;
+      padding-left: 0;
+      margin-top: 5px;
+      margin-bottom: 28px;
+      li {
+        list-style: none;
+        padding-bottom: 4px;
+        margin-bottom: 4px;
+        border-bottom: 1px dashed #DDD;
+        padding-left: 6px;
+      }
+    }
+    span.status{
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-right: 8px;
+      vertical-align: middle;
+      &.modify {
+        background-color: #f0db88;
+      }
+      &.add {
+        background-color: #b4e2b4;
+      }
+      &.del {
+        background-color: #e9aeae;
+      }
+      &.rename {
+        background-color: #dad8ff;
+      }
+    }
+	}
+	.diff-box {
+    .count {
+      margin-right: 12px;
+      .bar {
+        background-color: #e75316;
+        height: 12px;
+        width: 40px;
+        display: inline-block;
+        margin: 2px 4px 0 4px;
+        vertical-align: text-top;
+        .add {
+          background-color: #77c64a;
+          height: 12px;
+        }
+      }
+    }
+    .file {
+      color: #888;
+    }
+	}
+	.diff-file-box {
+		.header {
+			border-bottom: 1px solid #d4d4d5!important;
+		}
+    .file-body.file-code {
+      .lines-num {
+        text-align: right;
+        color: #999;
+        background: #fafafa;
+        width: 1%;
+      }
+      .lines-num-old {
+        border-right: 1px solid #DDD;
+      }
+    }
+    .code-diff {
+    	font-size: 13px;
+    	td {
+    		padding: 0;
+    		border-top: none;
+    	}
+    	pre {
+    		margin: 0;
+    	}
+    	.lines-num {
+    		border-right: 1px solid #d4d4d5;
+    		padding: 0 5px;
+    	}
+      tbody {
+        tr {
+          &.tag-code {
+            td, pre {
+              background-color: #E0E0E0 !important;
+              border-color: #ADADAD!important;
+            }
+            // td.selected-line, td.selected-line pre {
+            //   background-color: #ffffdd !important;
+            // }
+          }
+          // &.same-code {
+          //   td.selected-line, td.selected-line pre {
+          //     background-color: #ffffdd !important;
+          //   }
+          // }
+          &.del-code {
+            td, pre {
+              background-color: #ffe2dd !important;
+              border-color: #e9aeae !important;
+            }
+            // td.selected-line, td.selected-line pre {
+            //   background-color: #ffffdd !important;
+            // }
+          }
+          &.add-code {
+            td, pre { 
+              background-color: #d1ffd6 !important;
+              border-color: #b4e2b4 !important;
+            }
+            // td.selected-line, td.selected-line pre {
+            //   background-color: #ffffdd !important;
+            // }
+          }
+          &:hover {
+            td {
+              background-color: #FFF8D2 !important;
+              border-color: #F0DB88 !important;   
+            }
+            pre {
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+    }
+	}
 }

 .ui.comments {
--- a/routers/repo/commit.go
+++ b/routers/repo/commit.go
@@ -189,7 +189,7 @@ func FileHistory(ctx *middleware.Context) {
 }

 func Diff(ctx *middleware.Context) {
-	ctx.Data["IsRepoToolbarCommits"] = true
+	ctx.Data["PageIsDiff"] = true

 	userName := ctx.Repo.Owner.Name
 	repoName := ctx.Repo.Repository.Name
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -34,7 +34,7 @@
          <img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
          {{end}}
        </td>
-        <td class="sha"><a rel="nofollow" class="ui green label" href="{{AppSubUrl}}/{{$username}}/{{$reponame}}/commit/{{.Id}} ">{{SubStr .Id.String 0 10}} </a></td>
+        <td class="sha"><a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$username}}/{{$reponame}}/commit/{{.Id}} ">{{SubStr .Id.String 0 10}} </a></td>
        <td class="message"><span class="text truncate">{{RenderCommitMessage .Summary $.RepoLink}}</span></td>
        <td class="date">{{TimeSince .Author.When $.Lang}}</td>
      </tr>
--- a/templates/repo/diff.tmpl
+++ b/templates/repo/diff.tmpl
@@ -13,31 +13,36 @@
    </div>
    {{template "repo/commits_table" .}}
    {{else}}
-        <div class="panel panel-info panel-radius diff-head-box">
-            <div class="panel-header">
-                <a class="pull-right btn btn-blue btn-header btn-medium btn-radius" rel="nofollow" href="{{EscapePound .SourcePath}}">{{.i18n.Tr "repo.diff.browse_source"}}</a>
-                <h4 class="commit-message">{{RenderCommitMessage .Commit.Message $.RepoLink}}</h4>
+    <h4 class="ui top attached info header">
+      {{RenderCommitMessage .Commit.Message $.RepoLink}}
+      <div class="ui right">
+        <a class="ui blue tiny button" href="{{EscapePound .SourcePath}}">
+          {{.i18n.Tr "repo.diff.browse_source"}}
+        </a>
      </div>
-            <div class="panel-body">
-                <span class="pull-right">
-                    <ul class="list-unstyled">
-                        <li class="inline">{{.i18n.Tr "repo.diff.parent"}}</li>
-                        {{range .Parents}}
-                        <li class="inline"><a href="{{$.RepoLink}}/commit/{{.}}"><span class="label label-blue">{{ShortSha .}}</span></a></li>
-                        {{end}}
-                        <li class="inline">{{.i18n.Tr "repo.diff.commit"}} <span class="label label-blue">{{ShortSha .CommitId}}</span></li>
-                    </ul>
-                </span>
-                <p class="author">
+    </h4>
+    <div class="ui attached info segment">
      {{if .Author}}
-                    <img class="avatar-30" src="{{.Author.AvatarLink}}" />
-                    <a href="{{AppSubUrl}}/{{.Author.Name}}"><strong>{{.Commit.Author.Name}}</strong></a>
+      <img class="ui avatar image" src="{{.Author.AvatarLink}}" />
+      <a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
      {{else}}
-                    <img class="avatar-30" src="{{AvatarLink .Commit.Author.Email}}" />
+      <img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
      <strong>{{.Commit.Author.Name}}</strong>
      {{end}}
-                    <span class="text-grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
-                </p>
+      <span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
+      <div class="ui right">
+        <div class="ui horizontal list">
+          <div class="item">
+            {{.i18n.Tr "repo.diff.parent"}}
+          </div>
+          <div class="item">
+            {{range .Parents}}
+            <a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.}}">{{ShortSha .}}</a>
+            {{end}}
+          </div>
+          <div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
+          <div class="item"><span class="ui blue sha label">{{ShortSha .CommitId}}</span></div>
+        </div>
      </div>
    </div>
    {{end}}
@@ -46,12 +51,14 @@
    <h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
    {{else}}
    <div class="diff-detail-box diff-box">
-            <a class="pull-right btn btn-gray btn-header btn-radius text-black" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
-            <p class="showing">
+      <div>
        <i class="fa fa-retweet"></i>
        {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
-            </p>
-            <ol class="detail-files collapse hide" id="diff-files">
+        <div class="ui right">
+          <a class="ui tiny basic black toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
+        </div>
+      </div>
+      <ol class="detail-files hide" id="diff-files">
        {{range .Diff.Files}}
        <li>
          <div class="diff-counter count pull-right">
@@ -67,7 +74,7 @@
            {{end}}
          </div>
          <!-- todo finish all file status, now modify, add, delete and rename -->
-                    <span class="status {{DiffTypeToStr .Type}}" data-toggle="tooltip" data-placement="right" title="{{DiffTypeToStr .Type}}">&nbsp;</span>
+          <span class="status {{DiffTypeToStr .Type}} poping up" data-content="{{DiffTypeToStr .Type}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
          <a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
        </li>
        {{end}}
@@ -75,9 +82,9 @@
    </div>

    {{range $i, $file := .Diff.Files}}
-        <div class="panel panel-radius diff-file-box diff-box file-content" id="diff-{{.Index}}">
-            <div class="panel-header">
-                <div class="diff-counter count pull-left">
+    <div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
+      <h4 class="ui top attached normal header">
+        <div class="diff-counter count ui left">
            {{if not $file.IsBin}}
            <span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
            <span class="bar">
@@ -89,20 +96,23 @@
            {{$.i18n.Tr "repo.diff.bin"}}
            {{end}}
        </div>
-                {{if $file.IsDeleted}}
-                <a class="btn btn-gray btn-header btn-radius text-black pull-right" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-                {{else}}
-                <a class="btn btn-gray btn-header btn-radius text-black pull-right" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-                {{end}}
        <span class="file">{{$file.Name}}</span>
+        <div class="ui right">
+          {{if $file.IsDeleted}}
+          <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+          {{else}}
+          <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+          {{end}}
        </div>
+      </h4>
+      <div class="ui attached table segment">
        {{$isImage := (call $.IsImageFile $file.Name)}}
-            <div class="panel-body file-body file-code code-view code-diff">
        {{if $isImage}}
-                    <div class="text-center">
+        <div class="center">
          <img src="{{$.RawPath}}/{{EscapePound .Name}}">
        </div>
        {{else}}
+        <div class="file-body file-code code-view code-diff">
          <table>
            <tbody>
              {{range .Sections}}
@@ -114,7 +124,6 @@
                <td class="lines-num lines-num-new">
                  <span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
                </td>
-
                <td class="lines-code">
                  <pre>{{$line.Content}}</pre>
                </td>
@@ -123,6 +132,7 @@
              {{end}}
            </tbody>
          </table>
+        </div>
        {{end}}
      </div>
    </div>