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>
This commit is contained in:
Jonas Franz 2018-05-24 15:41:57 +02:00 committed by Jonas Franz
parent 27c488e3a3
commit 2b6001b189
No known key found for this signature in database
GPG Key ID: 506AEEBE80BEDECD
6 changed files with 19 additions and 20 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,24 +1,24 @@
.ui.button.add-code-comment { .ui.button.add-code-comment {
font-size: 14px; font-size: 14px;
height: 16px; height: 16px;
padding: 0; padding: 2px 0 0;
padding-top: 2px; position: relative;
position: absolute;
width: 16px; 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 { &: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-new .ui.button.add-code-comment.add-code-comment-right,
.focus-lines-old .ui.button.add-code-comment.add-code-comment-left { .focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
display: inline-block; opacity: 1;
} }
.comment-code-cloud { .comment-code-cloud {

View File

@ -101,21 +101,18 @@
<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}"> <tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
<td class="lines-num lines-num-old"> <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> <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>
<td class="lines-code lines-code-old halfwidth"> <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> <pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
</td> </td>
<td class="lines-num lines-num-new"> <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> <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>
<td class="lines-code lines-code-new halfwidth"> <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> <pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
</td> </td>
</tr> </tr>

View File

@ -30,7 +30,9 @@
<button type="submit" <button type="submit"
class="ui submit tiny basic button btn-add-single">{{$.root.i18n.Tr "repo.diff.comment.add_single_comment"}}</button> class="ui submit tiny basic button btn-add-single">{{$.root.i18n.Tr "repo.diff.comment.add_single_comment"}}</button>
{{end}} {{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>
</div> </div>
</form> </form>

View File

@ -1,5 +1,5 @@
{{if $.comment}} {{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}} {{else if $.root}}
{{ template "repo/diff/comment_form" $}} {{ template "repo/diff/comment_form" $}}
{{else}} {{else}}

View File

@ -13,10 +13,10 @@
</td> </td>
<td class="lines-num lines-num-new"> <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> <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> </td>
{{end}} {{end}}
<td class="lines-code {{if (not $line.RightIdx)}}lines-code-old{{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> <pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
</td> </td>
</tr> </tr>