From 8181d3af44994f1b3abd2f77cc4af839d56f3211 Mon Sep 17 00:00:00 2001 From: Blender Defender Date: Sat, 18 May 2024 15:01:23 +0200 Subject: [PATCH] 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. --- options/locale/locale_en-US.ini | 2 + templates/repo/clone_script.tmpl | 5 +++ templates/repo/home.tmpl | 64 +++++++++++++++++++++++--------- web_src/css/repo.css | 50 +++++++++++++++++++++++-- 4 files changed, 101 insertions(+), 20 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index a85b107eee..2d59f817e3 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -1017,6 +1017,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 diff --git a/templates/repo/clone_script.tmpl b/templates/repo/clone_script.tmpl index 40dae76dc7..ab0c744952 100644 --- a/templates/repo/clone_script.tmpl +++ b/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 { diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index ef76f3ed5d..b04e8a5028 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -116,26 +116,56 @@
{{if $isHomepage}} -
- {{template "repo/clone_buttons" .}} - - {{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}} -
+
+ +
+ {{svg "octicon-copy" 14}} +
+
+
+ {{range .OpenWithEditorApps}} + {{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}} + {{end}} + {{if not $.DisableDownloadSourceArchives}} +
+ {{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}} + {{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}} + {{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}} + {{end}} + {{if .CitiationExist}} +
+ {{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}} + {{end}} +
+ + {{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}} + {{template "repo/cite/cite_modal" .}} {{end}} {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 56235f8ebe..d770b20f85 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -151,12 +151,56 @@ margin-left: -1px; /* make the borders overlap to avoid double borders */ } -.repository .clone-panel > button:first-of-type { +/* .repository .clone-panel > button:first-of-type, */ +/* .repository .clone-panel > div:first-of-type { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; +} */ + +/* .repository .clone-panel > button:last-of-type, */ +/* .repository .clone-panel > div:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} */ + +.repository .clone-panel > button { + border-radius: var(--border-radius) !important; } -.repository .clone-panel > button:last-of-type { - border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +#clone-heading { + font-size: 1rem; +} + +.clone-panel-content { + min-width: 200px; +} + +.clone-panel-content::before { + content: ""; + + left: auto; + right: 9px; + top: -10px; + + border: 8px solid #0000; + border-bottom: 8px solid var(--color-shadow); + + display: inline-block; + position: absolute; +} + +.clone.tabs { + cursor: pointer; + + border-bottom: 3px solid; + border-color: transparent; + + font-weight: 600; + font-size: 1rem; + + padding: 0.5rem; +} + +.clone.tabs.primary { + border-color: var(--color-primary); } .repository .clone-panel .dropdown .menu {