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 <techknowlogick@gitea.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

7 files changed, 60 insertions, 93 deletions

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index 91952c8a06..03b7a561da 100644
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -1,15 +1,13 @@
-<!-- there is always at least one button (by context/repo.go) -->
-{{if $.CloneButtonShowHTTPS}}
-	<button class="ui small button" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
-		HTTPS
+<!-- there is always at least one button (guaranteed by context/repo.go) -->
+<div class="ui action small input clone-buttons-combo">
+	{{if $.CloneButtonShowHTTPS}}
+		<button class="ui small button repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">HTTPS</button>
+	{{end}}
+	{{if $.CloneButtonShowSSH}}
+		<button class="ui small button repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">SSH</button>
+	{{end}}
+	<input size="10" class="repo-clone-url js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+	<button class="ui small icon button" data-clipboard-target=".repo-clone-url" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}">
+		{{svg "octicon-copy" 14}}
 	</button>
-{{end}}
-{{if $.CloneButtonShowSSH}}
-	<button class="ui small button" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
-		SSH
-	</button>
-{{end}}
-<input id="repo-clone-url" size="10" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
-<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"}}">
-	{{svg "octicon-copy" 14}}
-</button>
+</div>
diff --git a/templates/repo/clone_panel.tmpl b/templates/repo/clone_panel.tmpl
new file mode 100644
index 0000000000..8cbeda132d
--- /dev/null
+++ b/templates/repo/clone_panel.tmpl
@@ -0,0 +1,44 @@
+<button class="ui green button js-btn-clone-panel">
+	<span>{{svg "octicon-code" 16}} Code</span>
+	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+</button>
+<div class="clone-panel-popup tippy-target">
+	<div class="flex-text-block clone-panel-field">{{svg "octicon-terminal"}} Clone</div>
+
+	<div class="clone-panel-tab">
+		<!-- there is always at least one button (guaranteed by context/repo.go) -->
+		{{if $.CloneButtonShowHTTPS}}
+			<button class="item repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">HTTPS</button>
+		{{end}}
+		{{if $.CloneButtonShowSSH}}
+			<button class="item repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">SSH</button>
+		{{end}}
+	</div>
+	<div class="divider"></div>
+
+	<div class="clone-panel-field">
+		<div class="ui input tiny action">
+			<input size="30" class="repo-clone-url js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+			<div class="ui small compact icon button" data-clipboard-target=".js-clone-url" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}">
+				{{svg "octicon-copy" 14}}
+			</div>
+		</div>
+	</div>
+
+	{{if not .PageIsWiki}}
+		<div class="flex-items-block clone-panel-list">
+			{{range .OpenWithEditorApps}}
+			<a class="item muted js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
+			{{end}}
+		</div>
+
+		{{if and (not $.DisableDownloadSourceArchives) $.RefName}}
+		<div class="divider"></div>
+		<div class="flex-items-block clone-panel-list">
+				<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>
+				<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>
+				<a class="item muted archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package"}} {{ctx.Locale.Tr "repo.download_bundle"}}</a>
+		</div>
+		{{end}}
+	{{end}}
+</div>
diff --git a/templates/repo/clone_script.tmpl b/templates/repo/clone_script.tmpl
deleted file mode 100644
index 40dae76dc7..0000000000
--- a/templates/repo/clone_script.tmpl
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-	// synchronously set clone button states and urls here to avoid flickering
-	// on page load. initRepoCloneLink calls this when proto changes.
-	// this applies the protocol-dependant clone url to all elements with the
-	// `js-clone-url` and `js-clone-url-vsc` classes.
-	// TODO: This localStorage setting should be moved to backend user config
-	// so it's available during rendering, then this inline script can be removed.
-	(window.updateCloneStates = function() {
-		const httpsBtn = document.getElementById('repo-clone-https');
-		const sshBtn = document.getElementById('repo-clone-ssh');
-		const value = localStorage.getItem('repo-clone-protocol') || 'https';
-		const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
-
-		if (httpsBtn) {
-			httpsBtn.textContent = window.origin.split(':')[0].toUpperCase();
-			httpsBtn.classList.toggle('primary', !isSSH);
-			httpsBtn.classList.toggle('basic', isSSH);
-		}
-		if (sshBtn) {
-			sshBtn.classList.toggle('primary', isSSH);
-			sshBtn.classList.toggle('basic', !isSSH);
-		}
-
-		const btn = isSSH ? sshBtn : httpsBtn;
-		if (!btn) return;
-
-		// NOTE: Keep this function in sync with the one in the js folder
-		function toOriginUrl(urlStr) {
-			try {
-				if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) {
-					const {origin, protocol, hostname, port} = window.location;
-					const url = new URL(urlStr, origin);
-					url.protocol = protocol;
-					url.hostname = hostname;
-					url.port = port || (protocol === 'https:' ? '443' : '80');
-					return url.toString();
-				}
-			} catch {}
-			return urlStr;
-		}
-		const link = toOriginUrl(btn.getAttribute('data-link'));
-
-		for (const el of document.getElementsByClassName('js-clone-url')) {
-			el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
-		}
-		for (const el of document.getElementsByClassName('js-clone-url-editor')) {
-			el.href = el.getAttribute('data-href-template').replace('{url}', encodeURIComponent(link));
-		}
-	})();
-</script>
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index d3a81bc51d..7170fe3602 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -37,9 +37,7 @@
 									</a>
 									{{end}}
 								{{end}}
-								<div class="clone-panel ui action small input tw-flex-1">
-									{{template "repo/clone_buttons" .}}
-								</div>
+								{{template "repo/clone_buttons" .}}
 							</div>
 						</div>
 
@@ -73,7 +71,6 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 							{{ctx.Locale.Tr "repo.empty_message"}}
 						</div>
 					{{end}}
-					{{template "repo/clone_script" .}}
 				</div>
 			</div>
 		</div>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 46d0398c21..cc36fa4eea 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -106,23 +106,7 @@
 					<div class="repo-button-row-right {{if not $isTreePathRoot}}tw-flex-grow-0{{end}}">
 						<!-- Only show clone panel in repository home page -->
 						{{if $isTreePathRoot}}
-							<div class="clone-panel ui action tiny input">
-								{{template "repo/clone_buttons" .}}
-								<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
-									{{svg "octicon-kebab-horizontal"}}
-									<div class="menu">
-										{{if not $.DisableDownloadSourceArchives}}
-											<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>
-											<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>
-											<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>
-										{{end}}
-										{{range .OpenWithEditorApps}}
-											<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
-										{{end}}
-									</div>
-								</button>
-								{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
-							</div>
+							{{template "repo/clone_panel" .}}
 						{{end}}
 						{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
 							<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index 045cc41d81..ca8954928d 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -15,10 +15,7 @@
 				</div>
 			</div>
 			<div class="ui eight wide column text right">
-				<div class="clone-panel ui action small input">
-					{{template "repo/clone_buttons" .}}
-					{{template "repo/clone_script" .}}
-				</div>
+				{{template "repo/clone_panel" .}}
 			</div>
 		</div>
 		<h2 class="ui top header">{{ctx.Locale.Tr "repo.wiki.wiki_page_revisions"}}</h2>
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index c8e0b4254c..68933b0bcf 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -28,10 +28,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="clone-panel ui action small input">
-				{{template "repo/clone_buttons" .}}
-				{{template "repo/clone_script" .}}
-			</div>
+			{{template "repo/clone_panel" .}}
 		</div>
 		<div class="ui dividing header">
 			<div class="flex-text-block tw-flex-wrap tw-justify-end">