Fix ui bug reported by @lunny causing wrong position of add button

Add functionality to "Cancel" button
Add scale effects to add button
Hide "Cancel" button for existing comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

public/less/_review.less

@@ -1,24 +1,24 @@
 .ui.button.add-code-comment {
     font-size: 14px;
     height: 16px;
-    padding: 0;
+    padding: 2px 0 0;
-    padding-top: 2px;
+    position: relative;
-    position: absolute;
     width: 16px;
-    display: none;
+    z-index: 5;
+    float: left;
+    margin: -2px -10px -2px -20px;
+    opacity: 0;
+    transition: transform 0.1s ease-in-out;
+    transform: scale(1, 1);
 
     &:hover {
-        font-size:16px;
+      transform: scale(1.2, 1.2);
-        margin-top: -2px;
-        margin-left: -2px;
-        height: 20px;
-        width: 20px;
     }
 }
 
 .focus-lines-new .ui.button.add-code-comment.add-code-comment-right,
 .focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
-    display: inline-block;
+    opacity: 1;
 }
 
 .comment-code-cloud {

templates/repo/diff/box.tmpl

@@ -101,21 +101,18 @@
 													<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
 														<td class="lines-num lines-num-old">
 															<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
-															{{if $line.LeftIdx}}
+
-															<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
-															{{end}}
 														</td>
 														<td class="lines-code lines-code-old halfwidth">
+															<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
 															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
 														</td>
 														<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>
-															{{if $line.RightIdx}}
-															<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
-															{{end}}
 														</td>
 
 														<td class="lines-code lines-code-new halfwidth">
+															<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
 															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
 														</td>
 													</tr>

templates/repo/diff/comment_form.tmpl

@@ -30,7 +30,9 @@
 				<button type="submit"
 						class="ui submit tiny basic button btn-add-single">{{$.root.i18n.Tr "repo.diff.comment.add_single_comment"}}</button>
 			{{end}}
-			<button type="button" class="ui submit tiny basic button btn-cancel">{{$.root.i18n.Tr "cancel"}}</button>
+			{{if not $.HasComments}}
+				<button type="button" class="ui submit tiny basic button btn-cancel" onclick="$(this).closest('.comment-code-cloud').remove()">{{$.root.i18n.Tr "cancel"}}</button>
+			{{end}}
 		</div>
 	</div>
 </form>

templates/repo/diff/comment_form_datahandler.tmpl

@@ -1,5 +1,5 @@
 {{if $.comment}}
-	{{ template "repo/diff/comment_form" dict "root" $.root "Line" $.comment.UnsignedLine "File" $.comment.TreePath "Side" $.comment.DiffSide}}
+	{{ template "repo/diff/comment_form" dict "root" $.root "Line" $.comment.UnsignedLine "File" $.comment.TreePath "Side" $.comment.DiffSide "HasComments" true}}
 {{else if $.root}}
 	{{ template "repo/diff/comment_form" $}}
 {{else}}

templates/repo/diff/section_unified.tmpl

@@ -13,10 +13,10 @@
 			</td>
 			<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>
-				<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
 			</td>
 			{{end}}
 			<td class="lines-code {{if (not $line.RightIdx)}}lines-code-old{{end}}">
+				<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
 				<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
 			</td>
 		</tr>