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

+2-2
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

+12-14
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

+44
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

-50
This file was deleted.

‎templates/repo/empty.tmpl

+1-4
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

+1-17
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

+1-4
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

+1-4
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

+4-4
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

+1
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";

‎web_src/css/repo.css

-44
Original file line numberDiff line numberDiff line change
@@ -101,42 +101,6 @@
101101
margin-bottom: 12px;
102102
}
103103

104-
.repository .clone-panel {
105-
display: flex;
106-
flex: 1;
107-
}
108-
109-
.repository.wiki .clone-panel {
110-
flex: 0;
111-
}
112-
113-
.repository.wiki .clone-panel input {
114-
width: 20ch;
115-
}
116-
117-
.repository .clone-panel #repo-clone-url {
118-
border-radius: 0;
119-
flex: 1;
120-
}
121-
122-
.repository .ui.action.input.clone-panel > button + button,
123-
.repository .ui.action.input.clone-panel > button + input {
124-
margin-left: -1px; /* make the borders overlap to avoid double borders */
125-
}
126-
127-
.repository .clone-panel > button:first-of-type {
128-
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
129-
}
130-
131-
.repository .clone-panel > button:last-of-type {
132-
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
133-
}
134-
135-
.repository .clone-panel .dropdown .menu {
136-
right: 0 !important;
137-
left: auto !important;
138-
}
139-
140104
.repository .repo-description {
141105
font-size: 16px;
142106
margin-bottom: 5px;
@@ -1615,14 +1579,6 @@ td .commit-summary {
16151579
font-weight: var(--font-weight-normal);
16161580
}
16171581

1618-
.repository.quickstart .guide #repo-clone-url {
1619-
border-radius: 0;
1620-
padding: 5px 10px;
1621-
font-size: 1.2em;
1622-
line-height: 1.4;
1623-
flex: 1
1624-
}
1625-
16261582
.empty-placeholder {
16271583
display: flex;
16281584
flex-direction: column;

‎web_src/css/repo/clone.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* only used by "repo/empty.tmpl" */
2+
.clone-buttons-combo {
3+
flex: 1;
4+
}
5+
6+
.clone-buttons-combo input {
7+
border-left: none !important;
8+
border-radius: 0 !important;
9+
}
10+
11+
/* used by the clone-panel popup */
12+
.clone-panel-field,
13+
.clone-panel-list {
14+
margin: 10px;
15+
}
16+
17+
.clone-panel-tab .item {
18+
padding: 5px 10px;
19+
background: none;
20+
}
21+
22+
.clone-panel-tab .item.active {
23+
border-bottom: 3px solid var(--color-secondary);
24+
}
25+
26+
.clone-panel-tab + .divider {
27+
margin: -1px 0 0;
28+
}
29+
30+
.clone-panel-list .item {
31+
margin: 5px 0;
32+
}

‎web_src/css/repo/wiki.css

-3
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,6 @@
5959
}
6060

6161
@media (max-width: 767.98px) {
62-
.repository.wiki .clone-panel #repo-clone-url {
63-
width: 160px;
64-
}
6562
.repository.wiki .wiki-content-main.with-sidebar,
6663
.repository.wiki .wiki-content-sidebar {
6764
float: none;

0 commit comments

Comments
 (0)