Skip to content

Commit 18061af

Browse files
BlenderDefendertechknowlogickwxiaoguang
authored
Rearrange Clone Panel (#31142)
Rearrange the clone panel to use less horizontal space. The following changes have been made to achieve this: - Moved everything into the dropdown menu - Moved the HTTPS/SSH Switch to a separate line - Moved the "Clone in VS Code"-Button up and added a divider - Named the dropdown button "Code", added appropriate icon --------- Co-authored-by: techknowlogick <[email protected]> Co-authored-by: wxiaoguang <[email protected]>
1 parent 8a53a39 commit 18061af

File tree

19 files changed

+191
-195
lines changed

19 files changed

+191
-195
lines changed

‎routers/web/repo/view_home.go

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ func prepareOpenWithEditorApps(ctx *context.Context) {
7474
schema, _, _ := strings.Cut(app.OpenURL, ":")
7575
var iconHTML template.HTML
7676
if schema == "vscode" || schema == "vscodium" || schema == "jetbrains" {
77-
iconHTML = svg.RenderHTML(fmt.Sprintf("gitea-%s", schema), 16, "tw-mr-2")
77+
iconHTML = svg.RenderHTML(fmt.Sprintf("gitea-%s", schema), 16)
7878
} else {
79-
iconHTML = svg.RenderHTML("gitea-git", 16, "tw-mr-2") // TODO: it could support user's customized icon in the future
79+
iconHTML = svg.RenderHTML("gitea-git", 16) // TODO: it could support user's customized icon in the future
8080
}
8181
tmplApps = append(tmplApps, map[string]any{
8282
"DisplayName": app.DisplayName,

‎templates/repo/clone_buttons.tmpl

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
<!-- there is always at least one button (by context/repo.go) -->
2-
{{if $.CloneButtonShowHTTPS}}
3-
<button class="ui small button" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
4-
HTTPS
1+
<!-- there is always at least one button (guaranteed by context/repo.go) -->
2+
<div class="ui action small input clone-buttons-combo">
3+
{{if $.CloneButtonShowHTTPS}}
4+
<button class="ui small button repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">HTTPS</button>
5+
{{end}}
6+
{{if $.CloneButtonShowSSH}}
7+
<button class="ui small button repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">SSH</button>
8+
{{end}}
9+
<input size="10" class="repo-clone-url js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
10+
<button class="ui small icon button" data-clipboard-target=".repo-clone-url" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}">
11+
{{svg "octicon-copy" 14}}
512
</button>
6-
{{end}}
7-
{{if $.CloneButtonShowSSH}}
8-
<button class="ui small button" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
9-
SSH
10-
</button>
11-
{{end}}
12-
<input id="repo-clone-url" size="10" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
13-
<button class="ui small icon button" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
14-
{{svg "octicon-copy" 14}}
15-
</button>
13+
</div>

‎templates/repo/clone_panel.tmpl

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<button class="ui green button js-btn-clone-panel">
2+
<span>{{svg "octicon-code" 16}} Code</span>
3+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
4+
</button>
5+
<div class="clone-panel-popup tippy-target">
6+
<div class="flex-text-block clone-panel-field">{{svg "octicon-terminal"}} Clone</div>
7+
8+
<div class="clone-panel-tab">
9+
<!-- there is always at least one button (guaranteed by context/repo.go) -->
10+
{{if $.CloneButtonShowHTTPS}}
11+
<button class="item repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">HTTPS</button>
12+
{{end}}
13+
{{if $.CloneButtonShowSSH}}
14+
<button class="item repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">SSH</button>
15+
{{end}}
16+
</div>
17+
<div class="divider"></div>
18+
19+
<div class="clone-panel-field">
20+
<div class="ui input tiny action">
21+
<input size="30" class="repo-clone-url js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
22+
<div class="ui small compact icon button" data-clipboard-target=".js-clone-url" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}">
23+
{{svg "octicon-copy" 14}}
24+
</div>
25+
</div>
26+
</div>
27+
28+
{{if not .PageIsWiki}}
29+
<div class="flex-items-block clone-panel-list">
30+
{{range .OpenWithEditorApps}}
31+
<a class="item muted js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
32+
{{end}}
33+
</div>
34+
35+
{{if and (not $.DisableDownloadSourceArchives) $.RefName}}
36+
<div class="divider"></div>
37+
<div class="flex-items-block clone-panel-list">
38+
<a class="item muted archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip"}} {{ctx.Locale.Tr "repo.download_zip"}}</a>
39+
<a class="item muted archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}} {{ctx.Locale.Tr "repo.download_tar"}}</a>
40+
<a class="item muted archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package"}} {{ctx.Locale.Tr "repo.download_bundle"}}</a>
41+
</div>
42+
{{end}}
43+
{{end}}
44+
</div>

‎templates/repo/clone_script.tmpl

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎templates/repo/empty.tmpl

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,7 @@
3737
</a>
3838
{{end}}
3939
{{end}}
40-
<div class="clone-panel ui action small input tw-flex-1">
41-
{{template "repo/clone_buttons" .}}
42-
</div>
40+
{{template "repo/clone_buttons" .}}
4341
</div>
4442
</div>
4543

@@ -73,7 +71,6 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
7371
{{ctx.Locale.Tr "repo.empty_message"}}
7472
</div>
7573
{{end}}
76-
{{template "repo/clone_script" .}}
7774
</div>
7875
</div>
7976
</div>

‎templates/repo/home.tmpl

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -106,23 +106,7 @@
106106
<div class="repo-button-row-right {{if not $isTreePathRoot}}tw-flex-grow-0{{end}}">
107107
<!-- Only show clone panel in repository home page -->
108108
{{if $isTreePathRoot}}
109-
<div class="clone-panel ui action tiny input">
110-
{{template "repo/clone_buttons" .}}
111-
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
112-
{{svg "octicon-kebab-horizontal"}}
113-
<div class="menu">
114-
{{if not $.DisableDownloadSourceArchives}}
115-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
116-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
117-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
118-
{{end}}
119-
{{range .OpenWithEditorApps}}
120-
<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
121-
{{end}}
122-
</div>
123-
</button>
124-
{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
125-
</div>
109+
{{template "repo/clone_panel" .}}
126110
{{end}}
127111
{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
128112
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">

‎templates/repo/wiki/revision.tmpl

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@
1515
</div>
1616
</div>
1717
<div class="ui eight wide column text right">
18-
<div class="clone-panel ui action small input">
19-
{{template "repo/clone_buttons" .}}
20-
{{template "repo/clone_script" .}}
21-
</div>
18+
{{template "repo/clone_panel" .}}
2219
</div>
2320
</div>
2421
<h2 class="ui top header">{{ctx.Locale.Tr "repo.wiki.wiki_page_revisions"}}</h2>

‎templates/repo/wiki/view.tmpl

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@
2828
</div>
2929
</div>
3030
</div>
31-
<div class="clone-panel ui action small input">
32-
{{template "repo/clone_buttons" .}}
33-
{{template "repo/clone_script" .}}
34-
</div>
31+
{{template "repo/clone_panel" .}}
3532
</div>
3633
<div class="ui dividing header">
3734
<div class="flex-text-block tw-flex-wrap tw-justify-end">

‎tests/integration/repo_test.go

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,10 @@ func TestViewRepo1CloneLinkAnonymous(t *testing.T) {
127127
resp := MakeRequest(t, req, http.StatusOK)
128128

129129
htmlDoc := NewHTMLParser(t, resp.Body)
130-
link, exists := htmlDoc.doc.Find("#repo-clone-https").Attr("data-link")
130+
link, exists := htmlDoc.doc.Find(".repo-clone-https").Attr("data-link")
131131
assert.True(t, exists, "The template has changed")
132132
assert.Equal(t, setting.AppURL+"user2/repo1.git", link)
133-
_, exists = htmlDoc.doc.Find("#repo-clone-ssh").Attr("data-link")
133+
_, exists = htmlDoc.doc.Find(".repo-clone-ssh").Attr("data-link")
134134
assert.False(t, exists)
135135
}
136136

@@ -143,10 +143,10 @@ func TestViewRepo1CloneLinkAuthorized(t *testing.T) {
143143
resp := session.MakeRequest(t, req, http.StatusOK)
144144

145145
htmlDoc := NewHTMLParser(t, resp.Body)
146-
link, exists := htmlDoc.doc.Find("#repo-clone-https").Attr("data-link")
146+
link, exists := htmlDoc.doc.Find(".repo-clone-https").Attr("data-link")
147147
assert.True(t, exists, "The template has changed")
148148
assert.Equal(t, setting.AppURL+"user2/repo1.git", link)
149-
link, exists = htmlDoc.doc.Find("#repo-clone-ssh").Attr("data-link")
149+
link, exists = htmlDoc.doc.Find(".repo-clone-ssh").Attr("data-link")
150150
assert.True(t, exists, "The template has changed")
151151
sshURL := fmt.Sprintf("ssh://%s@%s:%d/user2/repo1.git", setting.SSH.User, setting.SSH.Domain, setting.SSH.Port)
152152
assert.Equal(t, sshURL, link)

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
@import "./repo/header.css";
6868
@import "./repo/home.css";
6969
@import "./repo/reactions.css";
70+
@import "./repo/clone.css";
7071

7172
@import "./editor/fileeditor.css";
7273
@import "./editor/combomarkdowneditor.css";

0 commit comments

Comments
 (0)