Skip to content

Commit 8181d3a

Browse files
BlenderDefenderBlenderDefender
committed
feat(WIP): Rearrange clone panel
This commit restores the state of the pull request from March 2023. The result looks different and still needs to be improved.
1 parent 0289924 commit 8181d3a

File tree

4 files changed

+101
-20
lines changed

4 files changed

+101
-20
lines changed

‎options/locale/locale_en-US.ini‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1017,6 +1017,8 @@ all_branches = All branches
10171017
fork_no_valid_owners = This repository can not be forked because there are no valid owners.
10181018
fork.blocked_user = Cannot fork the repository because you are blocked by the repository owner.
10191019
use_template = Use this template
1020+
clone_https_description = Use Git via the web URL.
1021+
clone_ssh_description = Use a password protected SSH key.
10201022
open_with_editor = Open with %s
10211023
download_zip = Download ZIP
10221024
download_tar = Download TAR.GZ

‎templates/repo/clone_script.tmpl‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
const sshBtn = document.getElementById('repo-clone-ssh');
1111
const value = localStorage.getItem('repo-clone-protocol') || 'https';
1212
const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
13+
const methodDesc = document.getElementById("repo-clone-method-description");
1314

1415
if (httpsBtn) {
1516
httpsBtn.textContent = window.origin.split(':')[0].toUpperCase();
@@ -24,6 +25,10 @@
2425
const btn = isSSH ? sshBtn : httpsBtn;
2526
if (!btn) return;
2627

28+
if (methodDesc) {
29+
methodDesc.innerText = btn.dataset.description;
30+
}
31+
2732
// NOTE: Keep this function in sync with the one in the js folder
2833
function toOriginUrl(urlStr) {
2934
try {

‎templates/repo/home.tmpl‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -116,26 +116,56 @@
116116
<div class="repo-button-row-right">
117117
<!-- Only show clone panel in repository home page -->
118118
{{if $isHomepage}}
119-
<div class="clone-panel ui action tiny input">
120-
{{template "repo/clone_buttons" .}}
121-
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
122-
{{svg "octicon-kebab-horizontal"}}
123-
<div class="menu">
124-
{{if not $.DisableDownloadSourceArchives}}
125-
<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>
126-
<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>
127-
<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>
128-
{{end}}
129-
{{if .CitiationExist}}
130-
<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
119+
<div class="clone-panel ui action tiny input">
120+
<button class="ui basic small compact jump dropdown icon button primary" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
121+
<!-- {{svg "octicon-kebab-horizontal"}} -->
122+
<div>
123+
{{svg "octicon-code" 16}}
124+
<span>Code</span>
125+
{{svg "octicon-chevron-down"}}
126+
</div>
127+
<div class="menu gt-mt-3 clone-panel-content">
128+
<div class="ui input">
129+
{{svg "octicon-terminal" 16}}
130+
<strong id="clone-heading" class="gt-ml-3">Clone</strong>
131+
</div>
132+
<div class="ui input gt-mb-0">
133+
<!-- there is always at least one button (by context/repo.go) -->
134+
{{if $.CloneButtonShowHTTPS}}
135+
<div class="ui clone tabs" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}" data-description="{{ctx.Locale.Tr "repo.clone_https_description"}}">
136+
HTTPS
137+
</div>
131138
{{end}}
132-
{{range .OpenWithEditorApps}}
133-
<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
139+
{{if $.CloneButtonShowSSH}}
140+
<div class="ui clone tabs" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}" data-description="{{ctx.Locale.Tr "repo.clone_ssh_description"}}">
141+
SSH
142+
</div>
134143
{{end}}
135144
</div>
136-
</button>
137-
{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
138-
</div>
145+
<div class="ui input tiny action gt-mt-4 gt-mb-0">
146+
<input id="repo-clone-url" size="30" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
147+
<div class="ui basic small compact icon button tooltip" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
148+
{{svg "octicon-copy" 14}}
149+
</div>
150+
</div>
151+
<div id="repo-clone-method-description" class="ui input text tiny grey gt-mt-3"></div>
152+
{{range .OpenWithEditorApps}}
153+
<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
154+
{{end}}
155+
{{if not $.DisableDownloadSourceArchives}}
156+
<div class="ui divider"></div>
157+
<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>
158+
<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>
159+
<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>
160+
{{end}}
161+
{{if .CitiationExist}}
162+
<div class="ui divider"></div>
163+
<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
164+
{{end}}
165+
</div>
166+
</button>
167+
{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
168+
</div>
139169
{{template "repo/cite/cite_modal" .}}
140170
{{end}}
141171
{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}

‎web_src/css/repo.css‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,12 +151,56 @@
151151
margin-left: -1px; /* make the borders overlap to avoid double borders */
152152
}
153153

154-
.repository .clone-panel > button:first-of-type {
154+
/* .repository .clone-panel > button:first-of-type, */
155+
/* .repository .clone-panel > div:first-of-type {
155156
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
156-
}
157+
} */
157158

158-
.repository .clone-panel > button:last-of-type {
159+
/* .repository .clone-panel > button:last-of-type, */
160+
/* .repository .clone-panel > div:last-of-type {
159161
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
162+
} */
163+
164+
.repository .clone-panel > button {
165+
border-radius: var(--border-radius) !important;
166+
}
167+
168+
#clone-heading {
169+
font-size: 1rem;
170+
}
171+
172+
.clone-panel-content {
173+
min-width: 200px;
174+
}
175+
176+
.clone-panel-content::before {
177+
content: "";
178+
179+
left: auto;
180+
right: 9px;
181+
top: -10px;
182+
183+
border: 8px solid #0000;
184+
border-bottom: 8px solid var(--color-shadow);
185+
186+
display: inline-block;
187+
position: absolute;
188+
}
189+
190+
.clone.tabs {
191+
cursor: pointer;
192+
193+
border-bottom: 3px solid;
194+
border-color: transparent;
195+
196+
font-weight: 600;
197+
font-size: 1rem;
198+
199+
padding: 0.5rem;
200+
}
201+
202+
.clone.tabs.primary {
203+
border-color: var(--color-primary);
160204
}
161205

162206
.repository .clone-panel .dropdown .menu {

0 commit comments

Comments
 (0)