Commit @1af5fe5c7e0c69f87a7b1ae0131f0894f0e3ab3d

DeokHong Kim (a.k.a insanehong) 2013-12-18

Diff:fix diff full scroll and hide comment orver code line wrap

@1af5fe5c7e0c69f87a7b1ae0131f0894f0e3ab3d

5ed0eaa

1af5fe5

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


 .project-page-wrap {
     width: 1170px;
     margin:20px auto 0;
+
+    label {
+        display: inline-block;
+    }
 }
 
 .site-breadcrumb-outer {

 
 .diff-body {
     font-family: "monospace", Consolas, Tahoma;
-    overflow:auto;
 
-    .isBinary { color:#bbb; text-shadow:-1px -1px #fff; }
+    .isBinary { color:#bbb; text-shadow:-1px -1px #fff; padding:5px 10px; }
 
-    table {
-        border: 1px solid #eee;
-        width: 100%;
-    }
-    table {
+    .diff-partial-outer {
+        border: 1px solid #bbb;
         margin-bottom: 20px;
-    }
-    td {
-        border-width: 0px 1px;
-        border-color: #e5e5e5;
-        border-style: solid;
-    }
-    td.linenum {
-        text-align: right;
-        color: rgba(0, 0, 0, 0.3);
-        white-space: nowrap;
-        .user-select();
-        
-        &:before {
-            content: attr(data-line-num);
-            width:40px;
-        }
-    }
-    .code {
-        white-space: pre;
-    }
-    span.add {
-        background-color: #aaffaa;
-    }
-    span.remove {
-        background-color: #ffaaaa;
-    }
-    tr.add {
-        background-color: #eeffcc;
-    }
-    tr.remove {
-        background-color: #fdd;
-    }
-    tr.file {
-        background-color: #eee;
-        border:1px solid #bbb;
-        height:30px; /* 40px? */
-        font-weight: bold;
-    }
-    tr.range {
-        color: #999;
-        background-color: #f8f8ff;
-    }
-    .yobicon-comments {
-        visibility: hidden;
-        opacity: 0.6;
-    }
-    .icon-comment {
-        display:none;
-        float: left;
-        opacity: 0.6;
-    }
-    tr:hover .icon-comment {
-        display:block;
-    }
-    .linenum:hover .icon-comment {
-        opacity: 1.0;
-    }
-    .linenum, .filemode {
-        width: 40px;
-    }
-    .linenum-from { min-width:15px; }
-    .filename { float:left; line-height:30px; }
 
-    .hide {
-        display:none;
-    }
+        .diff-partial-inner {
+            .diff-partial-meta {
+                background-color: #eee;
+                border-bottom: 1px solid #bbb;
+                height: 30px;
+
+                .diff-partial-commit {
+                    float:left;
+
+                    .diff-partial-commit-id {
+                        float:left;
+                        padding:5px 2px;  
+                        font-weight: bold;
+                        border-right:1px solid #bbb;
+                        width:52px;
+                        text-align: center;
+                    }
+                }
+
+                .diff-partial-file {
+                    float: left;
+                    padding:5px 10px;
+                    font-weight: bold;
+                }
+
+                .diff-partial-utility {
+                    float:right;
+                    padding:2px 5px;
+                }
+            }
+
+            .diff-partial-code {
+                overflow: auto;
+                overflow-x: auto;
+                overflow-y: hidden;
+
+                table {
+                    width: 100%;
+                    border-collapse: separate;
+                    border-spacing: 0;
+
+                    tr {
+                        position: relative;
+                        td {
+                            &.linenum {
+                                text-align: right;
+                                color: rgba(0, 0, 0, 0.3);
+                                white-space: nowrap;
+                                border-right: 1px solid #e5e5e5;
+                                width:50px;
+                                padding:0 3px;
+                                .user-select(none);
+                                cursor: pointer;
+
+                                .line-number {
+                                    width: 50px;
+                                    height: 20px;
+                                    position: relative;
+
+                                    &:before { 
+                                        position: absolute;
+                                        content: attr(data-line-num); 
+                                        width: 50px;
+                                        display: block;
+                                    } 
+                                }
+                            }
+
+                            &.code {
+                                white-space: nowrap;
+                                padding:0 5px;
+                                .diff-partial-codeline {
+                                    font-family: "monospace", Consolas, Tahoma;
+                                    background-color: transparent;
+                                    border:none;
+                                    margin:0;
+                                    padding:0;
+                                    font-size:12px;
+                                    white-space: pre;
+                                }
+                            }
+
+                            &.diff-comment-box {
+                                border:1px solid #e5e5e5;
+                                border-left: none;
+                                border-right: none;
+
+                                form { margin:0;}
+                                
+                                .write-comment-box {
+                                    background-color: #f5f5f5;
+                                    margin:0;
+                                    .write-comment-wrap {
+                                        max-width: 1070px;
+                                    }
+                                }
+                            }
+                        }
+
+                        &.add {
+                            background-color: #eeffcc;
+                        }
+
+                        &.remove {
+                            background-color: #fdd;
+                        }
+
+                        &.range {
+                            color: #999;
+                            background-color: #f8f8ff;
+
+                            td {
+                                text-align: right;
+                                border-right: 1px solid #e5e5e5;
+
+                                &.hunk {
+                                    text-align: left;
+                                    padding-left:5px;
+                                }
+                            }
+                        }
+
+                        &.comments {
+                            display: table-row;
+                            td {
+                                border:1px solid #e5e5e5;
+                                border-left: none;
+                                border-right: none;
+                                padding:10px 5px;
+
+                                li {
+                                    max-width: 1150px;
+                                }
+                            }
+                        }
+                    }
+                }
+               
+                .icon-comment {
+                    position:absolute;
+                    cursor: pointer; 
+                    .opacity(0);
+                    margin-left: -75px;
+                    width: 25px;
+                    margin-top:2px;
+
+                }
+
+                tr.add:hover, tr.remove:hover,tr.context:hover{
+                    background-color: #CCE9FF !important;
+
+                    .icon-comment {
+                        .opacity(100);
+                    }
+                }
+                
+                .linenum:hover .icon-comment {
+                    opacity: 1.0;
+                }
+                
+                .linenum-from { min-width:15px; }
+                
+                .hide {
+                    display:none;
+                }    
+            }
+        }
+    }    
 }
 
 div.diff-body[data-outdated="true"] tr:hover .icon-comment {

5ed0eaa

1af5fe5

app/views/partial_diff_line.scala.html

--- app/views/partial_diff_line.scala.html

+++ app/views/partial_diff_line.scala.html

...	...	@@ -2,4 +2,17 @@
2	2
3	3	@import utils.TemplateHelper.DiffRenderer._
4	4
5		-<tr class="@klass" data-line="@num" data-type="@klass"><td class="linenum" data-line-num="@Option(numA).getOrElse("")"><i class="icon-comment"></i><span class="hidden">@Option(numA).getOrElse("")</span></td><td class="linenum" data-line-num="@Option(numB).getOrElse("")"><span class="hidden">@Option(numB).getOrElse("")</span></td><td class="code"><span>@prefix</span>@content @if(isEndOfLineMissing){@Html(noNewlineAtEof)}</td></tr>
	5	+<tr class="@klass" data-line="@num" data-type="@klass">
	6	+ <td class="linenum">
	7	+ <i class="icon-comment"></i>
	8	+ <div class="line-number" data-line-num="@Option(numA).getOrElse("")"></div>
	9	+ <span class="hidden">@Option(numA).getOrElse("")</span>
	10	+ </td>
	11	+ <td class="linenum" >
	12	+ <div class="line-number" data-line-num="@Option(numB).getOrElse("")"></div>
	13	+ <span class="hidden">@Option(numB).getOrElse("")</span>
	14	+ </td>
	15	+ <td class="code">
	16	+ <pre class="diff-partial-codeline">@prefix@content</pre> @if(isEndOfLineMissing){@Html(noNewlineAtEof)}
	17	+ </td>
	18	+</tr>

5ed0eaa

1af5fe5

app/views/partial_filediff.scala.html

--- app/views/partial_filediff.scala.html

+++ app/views/partial_filediff.scala.html


 **@
 @renderDiffLines(diff: playRepository.FileDiff, comments: Map[String, List[_ <: CodeComment]]) = {
   @if(diff.isFileModeChanged) {
-    <tr><td class="filemode">@diff.oldMode</td><td class="filemode">@diff.newMode</td><td>@Messages("code.fileModeChanged")</td></tr>
+    <tr><td class="linenum"><div class="line-number" data-line-num="@diff.oldMode"></div><span class="hidden">@diff.oldMode</span></td><td class="linenum"><div class="line-number" data-line-num="@diff.newMode"></div><span class="hidden">@diff.newMode</span></td><td class="isBinary">@Messages("code.fileModeChanged")</td></tr>
   }
   @if(diff.getHunks.size > 0){
     @for(hunk <- diff.getHunks) {
-      <tr class="range"><td>...</td><td>...</td><td>@@@@ -@(hunk.beginA + 1),@(hunk.endA - hunk.beginA) +@(hunk.beginB + 1),@(hunk.endB - hunk.beginB) @@@@</td></tr>
+      <tr class="range"><td class="linenum"><div class="line-number" data-line-num="..."><span class="hidden">...</span></div></td><td class="linenum"><div class="line-number" data-line-num="..."><span class="hidden">...</span></div></td><td class="hunk">@@@@ -@(hunk.beginA + 1),@(hunk.endA - hunk.beginA) +@(hunk.beginB + 1),@(hunk.endB - hunk.beginB) @@@@</td></tr>
       @Html(renderLines(hunk.lines.toList, comments, eolMissingChecker(diff)))
     }
   } else {

             builder.append(i + 1)
             builder.append("' data-type='")
             builder.append(klass)
-            builder.append("'><td class='linenum'><i class='icon-comment'></i></td><td class='linenum' data-line-num='")
+            builder.append("'><td class='linenum'><i class='icon-comment'></i><div class='line-number'></div></td>")
+            builder.append("<td class='linenum'><div class='line-number' data-line-num='")
             builder.append(i + 1)
-            builder.append("'><span class='hidden'>")
+            builder.append("'></div><span class='hidden'>")
             builder.append(i + 1)
-            builder.append("</span></td><td class='code'><span>")
+            builder.append("</span></td><td class='code'><pre class='diff-partial-codeline'>")
             builder.append(prefix)
-            builder.append("</span>")
             builder.append(escapeHtml(rawText.getString(i)))
             if ((i + 1 == rawText.size) && rawText.isMissingNewlineAtEnd) {
                 builder.append(noNewlineAtEof)
             }
-            builder.append("</td></tr>")
+            builder.append("</pre></td></tr>")
             builder.append(partial_diff_comment_on_line(commentsOrEmpty(comments, commentKey(path, side, i + 1))).toString.trim)
         }
 

  * @param renderedLines
 **@
 @renderFile(diff: FileDiff, fileHeader: String, renderedLines: Html) = {
-  <table class="diff-body show-comments" data-path-a="@diff.pathA" data-path-b="@diff.pathB" data-commit-a="@diff.commitA" data-commit-b="@diff.commitB"><tbody>
-  <tr id="@getFileHeadId(diff)" class="file">
-      <td class="linenum-from">
-          @if(diff.commitA != null && diff.pathA != null){
-          <a href="@routes.CodeApp.codeBrowserWithBranch(projectA.owner, projectA.name, diff.commitA, diff.pathA)" title="@diff.commitA" target="_blank">@getShortenedCommitId(diff.commitA)</a>
-          }
-      </td>
-      <td class="linenum-to">
-          @if(diff.commitB != null && diff.pathB != null){
-          <a href="@routes.CodeApp.codeBrowserWithBranch(projectB.owner, projectB.name, diff.commitB, diff.pathB)" title="@diff.commitB" target="_blank">@getShortenedCommitId(diff.commitB)</a></td>
-          }
-      <td class="line-body">
+  <div class="diff-partial-outer">
+    <div class="diff-partial-inner">
+      <div class="diff-partial-meta">
+        <div class="diff-partial-commit">
+          <div class="diff-partial-commit-id">
+            @if(diff.commitA != null && diff.pathA != null){
+            <a href="@routes.CodeApp.codeBrowserWithBranch(projectA.owner, projectA.name, diff.commitA, diff.pathA)" title="@diff.commitA" target="_blank">@getShortenedCommitId(diff.commitA)</a>
+            } else {
+            &nbsp;
+            }
+          </div>
+          <div class="diff-partial-commit-id">
+            @if(diff.commitB != null && diff.pathB != null){
+            <a href="@routes.CodeApp.codeBrowserWithBranch(projectB.owner, projectB.name, diff.commitB, diff.pathB)" title="@diff.commitB" target="_blank">@getShortenedCommitId(diff.commitB)</a></td>
+            } else {
+            &nbsp;
+            }
+          </div>
+        </div>
+        <div class="diff-partial-file">
           <span class="filename">@fileHeader</span>
+        </div>
+        <div class="diff-partial-utility">
           @if(diff.commitA && diff.commitB && diff.pathA && diff.pathB){
-          <button type="button" class="ybtn pull-right" data-toggle="mergely"
-            data-pathA="@diff.pathA" data-pathB="@diff.pathB" data-commitA="@diff.commitA" data-commitB="@diff.commitB"
-            data-rawA="@routes.CodeApp.showRawFile(projectA.owner, projectA.name, diff.commitA, diff.pathA)" 
-            data-rawB="@routes.CodeApp.showRawFile(projectB.owner, projectB.name, diff.commitB, diff.pathB)"
-          >@Messages("code.fullDiff")</button>
+              <button type="button" class="ybtn ybtn-small" data-toggle="mergely"
+                data-pathA="@diff.pathA" data-pathB="@diff.pathB" data-commitA="@diff.commitA" data-commitB="@diff.commitB"
+                data-rawA="@routes.CodeApp.showRawFile(projectA.owner, projectA.name, diff.commitA, diff.pathA)" 
+                data-rawB="@routes.CodeApp.showRawFile(projectB.owner, projectB.name, diff.commitB, diff.pathB)"
+              >@Messages("code.fullDiff")</button>
           }
-      </td>
-  </tr>
-  @renderedLines
-  </tbody></table>
+        </div>
+      </div>
+      <div class="diff-partial-code">
+        <table class="diff-container show-comments" data-path-a="@diff.pathA" data-path-b="@diff.pathB" data-commit-a="@diff.commitA" data-commit-b="@diff.commitB">
+        <tbody>
+          @renderedLines
+        </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 }
 
 @**

  * @param prefix
 **@
 @renderCodeIsBinary(klass:String = "", prefix:String = "") = {
-    <tr class="@klass"><td></td><td></td><td class="isBinary">@prefix@Messages("code.isBinary")</td></tr>
+    <tr class="@klass"><td class='linenum'><div class='line-number'></div></td><td class='linenum'><div class='line-number'></div></td><td class="isBinary">@prefix@Messages("code.isBinary")</td></tr>
 }
 
 @getComments(comments: java.util.List[_ <: CodeComment]) = @{

5ed0eaa

1af5fe5

public/javascripts/common/yobi.CodeCommentBox.js

--- public/javascripts/common/yobi.CodeCommentBox.js

+++ public/javascripts/common/yobi.CodeCommentBox.js


      * @param {Object} welTr
      */
     function _show(welTr, fCallback) {
-        var welTd = $("<td colspan=3>");
+        var welTd = $('<td colspan="3">');
+        welTd.addClass('diff-comment-box');
         var welCommentTr;
         var nLine = parseInt(welTr.data('line'));
         var sType = welTr.data('type');
         var sCommitId;
         var sPath;
-        var sCommitA = welTr.closest('.diff-body').data('commitA');
-        var sCommitB = welTr.closest('.diff-body').data('commitB');
+        var sCommitA = welTr.closest('.diff-container').data('commitA');
+        var sCommitB = welTr.closest('.diff-container').data('commitB');
 
         if (isNaN(nLine)) {
             nLine = parseInt(welTr.prev().data('line'));

Add a comment

Open 0
Closed 0

List

...	...	@@ -20,11 +20,11 @@
20	20	**@
21	21	@renderDiffLines(diff: playRepository.FileDiff, comments: Map[String, List[_ <: CodeComment]]) = {
22	22	@if(diff.isFileModeChanged) {
23		- <tr><td class="filemode">@diff.oldMode</td><td class="filemode">@diff.newMode</td><td>@Messages("code.fileModeChanged")</td></tr>
	23	+ <tr><td class="linenum"><div class="line-number" data-line-num="@diff.oldMode"></div><span class="hidden">@diff.oldMode</span></td><td class="linenum"><div class="line-number" data-line-num="@diff.newMode"></div><span class="hidden">@diff.newMode</span></td><td class="isBinary">@Messages("code.fileModeChanged")</td></tr>
24	24	}
25	25	@if(diff.getHunks.size > 0){
26	26	@for(hunk <- diff.getHunks) {
27		- <tr class="range"><td>...</td><td>...</td><td>@@@@ -@(hunk.beginA + 1),@(hunk.endA - hunk.beginA) +@(hunk.beginB + 1),@(hunk.endB - hunk.beginB) @@@@</td></tr>
	27	+ <tr class="range"><td class="linenum"><div class="line-number" data-line-num="..."><span class="hidden">...</span></div></td><td class="linenum"><div class="line-number" data-line-num="..."><span class="hidden">...</span></div></td><td class="hunk">@@@@ -@(hunk.beginA + 1),@(hunk.endA - hunk.beginA) +@(hunk.beginB + 1),@(hunk.endB - hunk.beginB) @@@@</td></tr>
28	28	@Html(renderLines(hunk.lines.toList, comments, eolMissingChecker(diff)))
29	29	}
30	30	} else {
...	...	@@ -57,18 +57,18 @@
57	57	builder.append(i + 1)
58	58	builder.append("' data-type='")
59	59	builder.append(klass)
60		- builder.append("'><td class='linenum'><i class='icon-comment'></i></td><td class='linenum' data-line-num='")
	60	+ builder.append("'><td class='linenum'><i class='icon-comment'></i><div class='line-number'></div></td>")
	61	+ builder.append("<td class='linenum'><div class='line-number' data-line-num='")
61	62	builder.append(i + 1)
62		- builder.append("'><span class='hidden'>")
	63	+ builder.append("'></div><span class='hidden'>")
63	64	builder.append(i + 1)
64		- builder.append("</span></td><td class='code'><span>")
	65	+ builder.append("</span></td><td class='code'><pre class='diff-partial-codeline'>")
65	66	builder.append(prefix)
66		- builder.append("</span>")
67	67	builder.append(escapeHtml(rawText.getString(i)))
68	68	if ((i + 1 == rawText.size) && rawText.isMissingNewlineAtEnd) {
69	69	builder.append(noNewlineAtEof)
70	70	}
71		- builder.append("</td></tr>")
	71	+ builder.append("</pre></td></tr>")
72	72	builder.append(partial_diff_comment_on_line(commentsOrEmpty(comments, commentKey(path, side, i + 1))).toString.trim)
73	73	}
74	74
...	...	@@ -136,30 +136,47 @@
136	136	* @param renderedLines
137	137	**@
138	138	@renderFile(diff: FileDiff, fileHeader: String, renderedLines: Html) = {
139		- <table class="diff-body show-comments" data-path-a="@diff.pathA" data-path-b="@diff.pathB" data-commit-a="@diff.commitA" data-commit-b="@diff.commitB"><tbody>
140		- <tr id="@getFileHeadId(diff)" class="file">
141		- <td class="linenum-from">
142		- @if(diff.commitA != null && diff.pathA != null){
143		- <a href="@routes.CodeApp.codeBrowserWithBranch(projectA.owner, projectA.name, diff.commitA, diff.pathA)" title="@diff.commitA" target="_blank">@getShortenedCommitId(diff.commitA)</a>
144		- }
145		- </td>
146		- <td class="linenum-to">
147		- @if(diff.commitB != null && diff.pathB != null){
148		- <a href="@routes.CodeApp.codeBrowserWithBranch(projectB.owner, projectB.name, diff.commitB, diff.pathB)" title="@diff.commitB" target="_blank">@getShortenedCommitId(diff.commitB)</a></td>
149		- }
150		- <td class="line-body">
	139	+ <div class="diff-partial-outer">
	140	+ <div class="diff-partial-inner">
	141	+ <div class="diff-partial-meta">
	142	+ <div class="diff-partial-commit">
	143	+ <div class="diff-partial-commit-id">
	144	+ @if(diff.commitA != null && diff.pathA != null){
	145	+ <a href="@routes.CodeApp.codeBrowserWithBranch(projectA.owner, projectA.name, diff.commitA, diff.pathA)" title="@diff.commitA" target="_blank">@getShortenedCommitId(diff.commitA)</a>
	146	+ } else {
	147	+
	148	+ }
	149	+ </div>
	150	+ <div class="diff-partial-commit-id">
	151	+ @if(diff.commitB != null && diff.pathB != null){
	152	+ <a href="@routes.CodeApp.codeBrowserWithBranch(projectB.owner, projectB.name, diff.commitB, diff.pathB)" title="@diff.commitB" target="_blank">@getShortenedCommitId(diff.commitB)</a></td>
	153	+ } else {
	154	+
	155	+ }
	156	+ </div>
	157	+ </div>
	158	+ <div class="diff-partial-file">
151	159	<span class="filename">@fileHeader</span>
	160	+ </div>
	161	+ <div class="diff-partial-utility">
152	162	@if(diff.commitA && diff.commitB && diff.pathA && diff.pathB){
153		- <button type="button" class="ybtn pull-right" data-toggle="mergely"
154		- data-pathA="@diff.pathA" data-pathB="@diff.pathB" data-commitA="@diff.commitA" data-commitB="@diff.commitB"
155		- data-rawA="@routes.CodeApp.showRawFile(projectA.owner, projectA.name, diff.commitA, diff.pathA)"
156		- data-rawB="@routes.CodeApp.showRawFile(projectB.owner, projectB.name, diff.commitB, diff.pathB)"
157		- >@Messages("code.fullDiff")</button>
	163	+ <button type="button" class="ybtn ybtn-small" data-toggle="mergely"
	164	+ data-pathA="@diff.pathA" data-pathB="@diff.pathB" data-commitA="@diff.commitA" data-commitB="@diff.commitB"
	165	+ data-rawA="@routes.CodeApp.showRawFile(projectA.owner, projectA.name, diff.commitA, diff.pathA)"
	166	+ data-rawB="@routes.CodeApp.showRawFile(projectB.owner, projectB.name, diff.commitB, diff.pathB)"
	167	+ >@Messages("code.fullDiff")</button>
158	168	}
159		- </td>
160		- </tr>
161		- @renderedLines
162		- </tbody></table>
	169	+ </div>
	170	+ </div>
	171	+ <div class="diff-partial-code">
	172	+ <table class="diff-container show-comments" data-path-a="@diff.pathA" data-path-b="@diff.pathB" data-commit-a="@diff.commitA" data-commit-b="@diff.commitB">
	173	+ <tbody>
	174	+ @renderedLines
	175	+ </tbody>
	176	+ </table>
	177	+ </div>
	178	+ </div>
	179	+ </div>
163	180	}
164	181
165	182	@**
...	...	@@ -197,7 +214,7 @@
197	214	* @param prefix
198	215	**@
199	216	@renderCodeIsBinary(klass:String = "", prefix:String = "") = {
200		- <tr class="@klass"><td></td><td></td><td class="isBinary">@prefix@Messages("code.isBinary")</td></tr>
	217	+ <tr class="@klass"><td class='linenum'><div class='line-number'></div></td><td class='linenum'><div class='line-number'></div></td><td class="isBinary">@prefix@Messages("code.isBinary")</td></tr>
201	218	}
202	219
203	220	@getComments(comments: java.util.List[_ <: CodeComment]) = @{

...	...	@@ -74,14 +74,15 @@
74	74	* @param {Object} welTr
75	75	*/
76	76	function _show(welTr, fCallback) {
77		- var welTd = $("<td colspan=3>");
	77	+ var welTd = $('<td colspan="3">');
	78	+ welTd.addClass('diff-comment-box');
78	79	var welCommentTr;
79	80	var nLine = parseInt(welTr.data('line'));
80	81	var sType = welTr.data('type');
81	82	var sCommitId;
82	83	var sPath;
83		- var sCommitA = welTr.closest('.diff-body').data('commitA');
84		- var sCommitB = welTr.closest('.diff-body').data('commitB');
	84	+ var sCommitA = welTr.closest('.diff-container').data('commitA');
	85	+ var sCommitB = welTr.closest('.diff-container').data('commitB');
85	86
86	87	if (isNaN(nLine)) {
87	88	nLine = parseInt(welTr.prev().data('line'));

...	...	@@ -412,6 +412,10 @@
412	412	.project-page-wrap {
413	413	width: 1170px;
414	414	margin:20px auto 0;
	415	+
	416	+ label {
	417	+ display: inline-block;
	418	+ }
415	419	}
416	420
417	421	.site-breadcrumb-outer {
...	...	@@ -4595,82 +4599,181 @@
4595	4599
4596	4600	.diff-body {
4597	4601	font-family: "monospace", Consolas, Tahoma;
4598		- overflow:auto;
4599	4602
4600		- .isBinary { color:#bbb; text-shadow:-1px -1px #fff; }
	4603	+ .isBinary { color:#bbb; text-shadow:-1px -1px #fff; padding:5px 10px; }
4601	4604
4602		- table {
4603		- border: 1px solid #eee;
4604		- width: 100%;
4605		- }
4606		- table {
	4605	+ .diff-partial-outer {
	4606	+ border: 1px solid #bbb;
4607	4607	margin-bottom: 20px;
4608		- }
4609		- td {
4610		- border-width: 0px 1px;
4611		- border-color: #e5e5e5;
4612		- border-style: solid;
4613		- }
4614		- td.linenum {
4615		- text-align: right;
4616		- color: rgba(0, 0, 0, 0.3);
4617		- white-space: nowrap;
4618		- .user-select();
4619		-
4620		- &:before {
4621		- content: attr(data-line-num);
4622		- width:40px;
4623		- }
4624		- }
4625		- .code {
4626		- white-space: pre;
4627		- }
4628		- span.add {
4629		- background-color: #aaffaa;
4630		- }
4631		- span.remove {
4632		- background-color: #ffaaaa;
4633		- }
4634		- tr.add {
4635		- background-color: #eeffcc;
4636		- }
4637		- tr.remove {
4638		- background-color: #fdd;
4639		- }
4640		- tr.file {
4641		- background-color: #eee;
4642		- border:1px solid #bbb;
4643		- height:30px; /* 40px? */
4644		- font-weight: bold;
4645		- }
4646		- tr.range {
4647		- color: #999;
4648		- background-color: #f8f8ff;
4649		- }
4650		- .yobicon-comments {
4651		- visibility: hidden;
4652		- opacity: 0.6;
4653		- }
4654		- .icon-comment {
4655		- display:none;
4656		- float: left;
4657		- opacity: 0.6;
4658		- }
4659		- tr:hover .icon-comment {
4660		- display:block;
4661		- }
4662		- .linenum:hover .icon-comment {
4663		- opacity: 1.0;
4664		- }
4665		- .linenum, .filemode {
4666		- width: 40px;
4667		- }
4668		- .linenum-from { min-width:15px; }
4669		- .filename { float:left; line-height:30px; }
4670	4608
4671		- .hide {
4672		- display:none;
4673		- }
	4609	+ .diff-partial-inner {
	4610	+ .diff-partial-meta {
	4611	+ background-color: #eee;
	4612	+ border-bottom: 1px solid #bbb;
	4613	+ height: 30px;
	4614	+
	4615	+ .diff-partial-commit {
	4616	+ float:left;
	4617	+
	4618	+ .diff-partial-commit-id {
	4619	+ float:left;
	4620	+ padding:5px 2px;
	4621	+ font-weight: bold;
	4622	+ border-right:1px solid #bbb;
	4623	+ width:52px;
	4624	+ text-align: center;
	4625	+ }
	4626	+ }
	4627	+
	4628	+ .diff-partial-file {
	4629	+ float: left;
	4630	+ padding:5px 10px;
	4631	+ font-weight: bold;
	4632	+ }
	4633	+
	4634	+ .diff-partial-utility {
	4635	+ float:right;
	4636	+ padding:2px 5px;
	4637	+ }
	4638	+ }
	4639	+
	4640	+ .diff-partial-code {
	4641	+ overflow: auto;
	4642	+ overflow-x: auto;
	4643	+ overflow-y: hidden;
	4644	+
	4645	+ table {
	4646	+ width: 100%;
	4647	+ border-collapse: separate;
	4648	+ border-spacing: 0;
	4649	+
	4650	+ tr {
	4651	+ position: relative;
	4652	+ td {
	4653	+ &.linenum {
	4654	+ text-align: right;
	4655	+ color: rgba(0, 0, 0, 0.3);
	4656	+ white-space: nowrap;
	4657	+ border-right: 1px solid #e5e5e5;
	4658	+ width:50px;
	4659	+ padding:0 3px;
	4660	+ .user-select(none);
	4661	+ cursor: pointer;
	4662	+
	4663	+ .line-number {
	4664	+ width: 50px;
	4665	+ height: 20px;
	4666	+ position: relative;
	4667	+
	4668	+ &:before {
	4669	+ position: absolute;
	4670	+ content: attr(data-line-num);
	4671	+ width: 50px;
	4672	+ display: block;
	4673	+ }
	4674	+ }
	4675	+ }
	4676	+
	4677	+ &.code {
	4678	+ white-space: nowrap;
	4679	+ padding:0 5px;
	4680	+ .diff-partial-codeline {
	4681	+ font-family: "monospace", Consolas, Tahoma;
	4682	+ background-color: transparent;
	4683	+ border:none;
	4684	+ margin:0;
	4685	+ padding:0;
	4686	+ font-size:12px;
	4687	+ white-space: pre;
	4688	+ }
	4689	+ }
	4690	+
	4691	+ &.diff-comment-box {
	4692	+ border:1px solid #e5e5e5;
	4693	+ border-left: none;
	4694	+ border-right: none;
	4695	+
	4696	+ form { margin:0;}
	4697	+
	4698	+ .write-comment-box {
	4699	+ background-color: #f5f5f5;
	4700	+ margin:0;
	4701	+ .write-comment-wrap {
	4702	+ max-width: 1070px;
	4703	+ }
	4704	+ }
	4705	+ }
	4706	+ }
	4707	+
	4708	+ &.add {
	4709	+ background-color: #eeffcc;
	4710	+ }
	4711	+
	4712	+ &.remove {
	4713	+ background-color: #fdd;
	4714	+ }
	4715	+
	4716	+ &.range {
	4717	+ color: #999;
	4718	+ background-color: #f8f8ff;
	4719	+
	4720	+ td {
	4721	+ text-align: right;
	4722	+ border-right: 1px solid #e5e5e5;
	4723	+
	4724	+ &.hunk {
	4725	+ text-align: left;
	4726	+ padding-left:5px;
	4727	+ }
	4728	+ }
	4729	+ }
	4730	+
	4731	+ &.comments {
	4732	+ display: table-row;
	4733	+ td {
	4734	+ border:1px solid #e5e5e5;
	4735	+ border-left: none;
	4736	+ border-right: none;
	4737	+ padding:10px 5px;
	4738	+
	4739	+ li {
	4740	+ max-width: 1150px;
	4741	+ }
	4742	+ }
	4743	+ }
	4744	+ }
	4745	+ }
	4746	+
	4747	+ .icon-comment {
	4748	+ position:absolute;
	4749	+ cursor: pointer;
	4750	+ .opacity(0);
	4751	+ margin-left: -75px;
	4752	+ width: 25px;
	4753	+ margin-top:2px;
	4754	+
	4755	+ }
	4756	+
	4757	+ tr.add:hover, tr.remove:hover,tr.context:hover{
	4758	+ background-color: #CCE9FF !important;
	4759	+
	4760	+ .icon-comment {
	4761	+ .opacity(100);
	4762	+ }
	4763	+ }
	4764	+
	4765	+ .linenum:hover .icon-comment {
	4766	+ opacity: 1.0;
	4767	+ }
	4768	+
	4769	+ .linenum-from { min-width:15px; }
	4770	+
	4771	+ .hide {
	4772	+ display:none;
	4773	+ }
	4774	+ }
	4775	+ }
	4776	+ }
4674	4777	}
4675	4778
4676	4779	div.diff-body[data-outdated="true"] tr:hover .icon-comment {

Delete comment