Skip to content

Commit 26f941f

Browse files
Xinyu Zhoulunnylafriks
authored
Fix button in branch list, avoid unexpected page jump before restore branch actually done (#21562)
This patch: - Use `<button>` replace anchor link `<a>` in **_Delete/Restore Branch_** button to avoid unexpected page jump before restore branch actually done. - Also replace right side buttons with `<button>` in branch list, let some screen readers know they are buttons. ## Before click restore branch -> restore triggered -> page refreshed, but branch status not update -> manually refresh page <details> https://user-images.githubusercontent.com/76462613/197389108-5a0bd259-0455-40b2-92ac-4326900276f8.mp4 </details> ## After waiting restore done -> page refresh -> branch status update <details> https://user-images.githubusercontent.com/76462613/197428683-616fcbd2-70f9-4572-bf76-e0b7f77b6dd7.mp4 </details> Signed-off-by: baronbunny <[email protected]> Co-authored-by: Lunny Xiao <[email protected]> Co-authored-by: Lauris BH <[email protected]>
1 parent b2269de commit 26f941f

File tree

1 file changed

+15
-11
lines changed

1 file changed

+15
-11
lines changed

‎templates/repo/branch/list.tmpl‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@
2222
</td>
2323
<td class="right aligned overflow-visible">
2424
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
25-
<div class="ui basic jump button icon tooltip show-create-branch-modal" data-content="{{$.locale.Tr "repo.branch.new_branch_from" ($.DefaultBranch)}}" data-branch-from="{{$.DefaultBranch}}" data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}" data-modal="#create-branch-modal" data-position="top right">
25+
<button class="ui basic jump button icon tooltip show-create-branch-modal" data-content="{{$.locale.Tr "repo.branch.new_branch_from" ($.DefaultBranch)}}" data-branch-from="{{$.DefaultBranch}}" data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}" data-modal="#create-branch-modal" data-position="top right">
2626
{{svg "octicon-git-branch"}}
27-
</div>
27+
</button>
2828
{{end}}
2929
{{if not $.DisableDownloadSourceArchives}}
30-
<div class="ui basic jump dropdown icon button tooltip" data-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}" data-position="top right">
30+
<button class="ui basic jump dropdown icon button tooltip" data-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}" data-position="top right">
3131
{{svg "octicon-download"}}
3232
<div class="menu">
3333
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
3434
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
3535
</div>
36-
</div>
36+
</button>
3737
{{end}}
3838
</td>
3939
</tr>
@@ -108,26 +108,30 @@
108108
</td>
109109
<td class="three wide right aligned overflow-visible">
110110
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
111-
<div class="ui basic jump button icon tooltip show-create-branch-modal" data-branch-from="{{.Name}}" data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}" data-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}" data-position="top right" data-modal="#create-branch-modal" data-name="{{.Name}}">
111+
<button class="ui basic jump button icon tooltip show-create-branch-modal" data-branch-from="{{.Name}}" data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}" data-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}" data-position="top right" data-modal="#create-branch-modal" data-name="{{.Name}}">
112112
{{svg "octicon-git-branch"}}
113-
</div>
113+
</button>
114114
{{end}}
115115
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
116-
<div class="ui basic jump dropdown icon button tooltip" data-content="{{$.locale.Tr "repo.branch.download" (.Name)}}" data-position="top right">
116+
<button class="ui basic jump dropdown icon button tooltip" data-content="{{$.locale.Tr "repo.branch.download" (.Name)}}" data-position="top right">
117117
{{svg "octicon-download"}}
118118
<div class="menu">
119119
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
120120
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
121121
</div>
122-
</div>
122+
</button>
123123
{{end}}
124124
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
125125
{{if .IsDeleted}}
126-
<a class="ui basic jump button icon tooltip undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}" data-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}" data-position="top right"><span class="text blue">{{svg "octicon-reply"}}</span></a>
126+
<button class="ui basic jump button icon tooltip undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}" data-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}" data-position="top right">
127+
<span class="text blue">
128+
{{svg "octicon-reply"}}
129+
</span>
130+
</button>
127131
{{else}}
128-
<a class="ui basic jump button icon tooltip delete-button delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name}}" data-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-position="top right" data-name="{{.Name}}">
132+
<button class="ui basic jump button icon tooltip delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}" data-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-position="top right" data-name="{{.Name}}">
129133
{{svg "octicon-trash"}}
130-
</a>
134+
</button>
131135
{{end}}
132136
{{end}}
133137
</td>

0 commit comments

Comments
 (0)