[Branch View] add download button (#7604)

* add download-button info message

* add overflow-visible css for table colum class

* right colum is always there

* add download button for default branch

* add download button for all other branchs

* resize table colum so two buttons fit in

* code indent avter rebase

* show commit divergence corect
https://github.com/go-gitea/gitea/issues/7625

* changes because of merge master into ...

* optimize if statement for protected branches

* dont downloat a deleted branch - fix error 404

4 files changed, 32 insertions, 9 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index e01d0b67dc..0df7cdf7e0 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1408,6 +1408,7 @@ branch.restore_success = Branch '%s' has been restored.
 branch.restore_failed = Failed to restore branch '%s'.
 branch.protected_deletion_failed = Branch '%s' is protected. It cannot be deleted.
 branch.restore = Restore Branch '%s'
+branch.download = Download Branch '%s'
 
 topic.manage_topics = Manage Topics
 topic.done = Done
diff --git a/public/css/index.css b/public/css/index.css
index 96dfcb0e8b..68236a6de9 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -985,6 +985,7 @@ tbody.commit-list{vertical-align:baseline}
 .ui.repository.list .item .ui.avatar.image{width:24px;height:24px}
 .ui.repository.branches .info{font-size:12px;color:grey;display:flex;white-space:pre}
 .ui.repository.branches .info .commit-message{max-width:72em;overflow:hidden;text-overflow:ellipsis}
+.ui.repository.branches .overflow-visible{overflow:visible}
 .ui.user.list .item{padding-bottom:25px}
 .ui.user.list .item:not(:first-child){border-top:1px solid #eee;padding-top:25px}
 .ui.user.list .item .ui.avatar.image{width:40px;height:40px}
diff --git a/public/less/_explore.less b/public/less/_explore.less
index 11dacb7285..ad9adc70e0 100644
--- a/public/less/_explore.less
+++ b/public/less/_explore.less
@@ -73,6 +73,9 @@
             text-overflow: ellipsis;
         }
     }
+    .overflow-visible {
+        overflow: visible;
+    }
 }
 
 .ui.user.list {
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index ead9f4ba2d..2b98881f60 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -23,6 +23,15 @@
 							{{end}}
 						{{end}}
 						</td>
+						<td class="right aligned overflow-visible">
+							<div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" ($.DefaultBranch|EscapePound)}}" data-variation="tiny inverted" data-position="top right">
+							  <i class="download icon"></i>
+							  <div class="menu">
+							    <a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.zip"><i class="octicon octicon-file-zip"></i> ZIP</a>
+							    <a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.DefaultBranch}}.tar.gz"><i class="octicon octicon-file-zip"></i> TAR.GZ</a>
+							  </div>
+							</div>
+						</td>
 					</tr>
 				</tbody>
 			</table>
@@ -50,7 +59,7 @@
 										<p class="info"><i class="octicon octicon-git-commit"></i><a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
 									{{end}}
 									</td>
-									<td class="two wide ui">
+									<td class="three wide ui">
 										{{if not .IsDeleted}}
 										<div class="commit-divergence">
 											<div class="bar-group">
@@ -82,15 +91,24 @@
 											{{end}}
 										{{end}}
 									</td>
-									{{if and $.IsWriter (not $.IsMirror)}}
-										<td class="one wide right aligned">
-										{{if and .IsDeleted  (not .IsProtected)}}
-											<a class="ui basic jump button icon poping up undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID | urlquery}}&name={{.DeletedBranch.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.restore" (.Name | EscapePound)}}" data-variation="tiny inverted" data-position="top right"><i class="octicon octicon-reply text blue"></i></a>
-										{{else if (not .IsProtected)}}
-											<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name | EscapePound)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}"><i class="trash icon text red"></i></a>
+									<td class="two wide right aligned overflow-visible">
+										{{if (not .IsDeleted)}}
+											<div class="ui basic jump dropdown icon button poping up" data-content="{{$.i18n.Tr "repo.branch.download" (.Name|EscapePound)}}" data-variation="tiny inverted" data-position="top right">
+												<i class="download icon"></i>
+												<div class="menu">
+													<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound .Name}}.zip"><i class="octicon octicon-file-zip"></i> ZIP</a>
+													<a class="item" href="{{$.RepoLink}}/archive/{{EscapePound .Name}}.tar.gz"><i class="octicon octicon-file-zip"></i> TAR.GZ</a>
+												</div>
+											</div>
 										{{end}}
-										</td>
-									{{end}}
+										{{if and $.IsWriter (not $.IsMirror) (not .IsProtected)}}
+											{{if .IsDeleted}}
+												<a class="ui basic jump button icon poping up undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID | urlquery}}&name={{.DeletedBranch.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.restore" (.Name | EscapePound)}}" data-variation="tiny inverted" data-position="top right"><i class="octicon octicon-reply text blue"></i></a>
+											{{else}}
+												<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name | EscapePound)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}"><i class="trash icon text red"></i></a>
+											{{end}}
+										{{end}}
+									</td>
 								</tr>
 							{{end}}
 						{{end}}