Rearrange Clone Panel

options/locale/locale_en-US.ini

@@ -1023,6 +1023,8 @@ all_branches = All branches
 fork_no_valid_owners = This repository can not be forked because there are no valid owners.
 fork.blocked_user = Cannot fork the repository because you are blocked by the repository owner.
 use_template = Use this template
+clone_https_description = Use Git via the web URL.
+clone_ssh_description = Use a password protected SSH key.
 open_with_editor = Open with %s
 download_zip = Download ZIP
 download_tar = Download TAR.GZ

templates/repo/clone_script.tmpl

@@ -10,6 +10,7 @@
 		const sshBtn = document.getElementById('repo-clone-ssh');
 		const value = localStorage.getItem('repo-clone-protocol') || 'https';
 		const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
+		const methodDesc = document.getElementById("repo-clone-method-description");
 
 		if (httpsBtn) {
 			httpsBtn.textContent = window.origin.split(':')[0].toUpperCase();
@@ -24,6 +25,10 @@
 		const btn = isSSH ? sshBtn : httpsBtn;
 		if (!btn) return;
 
+		if (methodDesc) {
+			methodDesc.innerText = btn.dataset.description;
+		}
+
 		// NOTE: Keep this function in sync with the one in the js folder
 		function toOriginUrl(urlStr) {
 			try {

templates/repo/home.tmpl

@@ -116,28 +116,70 @@
 			<div class="repo-button-row-right">
 				<!-- Only show clone panel in repository home page -->
 				{{if $isHomepage}}
-					<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}}
-								{{if .CitiationExist}}
-									<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
+				<div id="clone-panel">
+					<button class="ui tiny primary button tw-pr-1 tw-flex js-btn-clone-panel">
+						<span>{{svg "octicon-code" 16}} Code</span>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</button>
+					<div class="clone-panel tippy-target">
+						<div class="ui segment">
+							<div class="field tw-flex tw-items-center">
+								<div class="tw-flex-1">{{svg "octicon-terminal" 16}} Clone</div>
+								<a class="muted close">{{svg "octicon-x" 16}}</a>
+							</div>
+							<div class="ui input tw-mb-0">
+								<!-- there is always at least one button (by context/repo.go) -->
+								{{if $.CloneButtonShowHTTPS}}
+								<div class="ui clone tabs" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}" data-description="{{ctx.Locale.Tr "repo.clone_https_description"}}">
+									HTTPS
+								</div>
 								{{end}}
-								{{range .OpenWithEditorApps}}
-									<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
+								{{if $.CloneButtonShowSSH}}
+								<div class="ui clone tabs" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}" data-description="{{ctx.Locale.Tr "repo.clone_ssh_description"}}">
+									SSH
+								</div>
 								{{end}}
 							</div>
-						</button>
-						{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
+							<div class="ui input tiny action tw-mt-4 tw-mb-0 field">
+								<input id="repo-clone-url" size="30" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+								<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"}}">
+									{{svg "octicon-copy" 14}}
+								</div>
+							</div>
+							<div class="divider"></div>
+							<div id="repo-clone-method-description" class="ui input text tiny grey tw-mt-3"></div>
+							<ul class="ui list tw-w-full">
+							{{range .OpenWithEditorApps}}
+								<li>
+									<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
+								</li>
+							{{end}}
+							</ul>
+							{{if not $.DisableDownloadSourceArchives}}
+							<div class="divider"></div>
+							<ul class="ui list tw-w-full">
+							<li>
+								<a class="item archive-lnk" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
+							</li>
+							<li>
+								<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>
+							</li>
+							<li>
+								<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>
+							</li>
+							</ul>
+							{{end}}
+							{{if .CitiationExist}}
+								<div class="divider"></div>
+								<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
+							{{end}}
+						</div>
 					</div>
+					{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
 					{{template "repo/cite/cite_modal" .}}
+				</div>
 				{{end}}
+
 				{{if and (not $isHomepage) (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}}">
 						{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}

web_src/css/repo.css

@@ -136,6 +136,7 @@
 .repository .clone-panel {
   display: flex;
   flex: 1;
+  min-width: 200px;
 }
 
 .repository.wiki .clone-panel {
@@ -156,17 +157,32 @@
   margin-left: -1px; /* make the borders overlap to avoid double borders */
 }
 
-.repository .clone-panel > button:first-of-type {
-  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
+.repository #clone-panel {
+  position: relative;
 }
 
-.repository .clone-panel > button:last-of-type {
-  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
+.clone-panel .ui.segment {
+  border: none;
+}
+
+.repository .clone-panel > button {
+  border-radius: var(--border-radius) !important;
+}
+
+.clone.tabs {
+  cursor: pointer;
+
+  border-bottom: 3px solid;
+  border-color: transparent;
+
+  font-weight: var(--font-weight-semibold);
+  font-size: 1rem;
+
+  padding: 0.5rem;
 }
 
-.repository .clone-panel .dropdown .menu {
-  right: 0 !important;
-  left: auto !important;
+.clone.tabs.primary {
+  border-color: var(--color-primary);
 }
 
 .repository .repo-description {

web_src/js/features/repo-home.ts

@@ -1,11 +1,38 @@
 import $ from 'jquery';
 import {stripTags} from '../utils.ts';
+import {createTippy} from '../modules/tippy.ts';
 import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 
 const {appSubUrl} = window.config;
 
+export function initRepoClonePanel() {
+  const $clonePanelBtn = $('.js-btn-clone-panel');
+  // The following part is only for diff views
+  if (!$clonePanelBtn.length) return;
+
+  const $panel = $clonePanelBtn.parent().find('.clone-panel');
+  const $closeBtn = $panel.find('.close');
+
+  if ($clonePanelBtn.length && $panel.length) {
+    const tippy = createTippy($clonePanelBtn[0], {
+      content: $panel[0],
+      theme: 'default',
+      placement: 'bottom-start',
+      trigger: 'click',
+      maxWidth: '300px',
+      interactive: true,
+      hideOnClick: true,
+    });
+
+    $closeBtn.on('click', (e) => {
+      e.preventDefault();
+      tippy.hide();
+    });
+  }
+}
+
 export function initRepoTopicBar() {
   const mgrBtn = document.querySelector('#manage_topic');
   if (!mgrBtn) return;

web_src/js/index.ts

@@ -35,7 +35,7 @@ import {
   initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler,
 } from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
-import {initRepoTopicBar} from './features/repo-home.ts';
+import {initRepoTopicBar, initRepoClonePanel} from './features/repo-home.ts';
 import {initAdminEmails} from './features/admin/emails.ts';
 import {initAdminCommon} from './features/admin/common.ts';
 import {initRepoTemplateSearch} from './features/repo-template.ts';
@@ -207,6 +207,7 @@ onDomReady(() => {
     initRepoSettingSearchTeamBox,
     initRepoSettingsCollaboration,
     initRepoTemplateSearch,
+    initRepoClonePanel,
     initRepoTopicBar,
     initRepoWikiForm,
     initRepository,