From 8181d3af44994f1b3abd2f77cc4af839d56f3211 Mon Sep 17 00:00:00 2001 From: Blender Defender Date: Sat, 18 May 2024 15:01:23 +0200 Subject: [PATCH 01/15] 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 a85b107eeed62..2d59f817e3521 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 40dae76dc7164..ab0c744952eaa 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 ef76f3ed5d46b..b04e8a5028322 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 56235f8ebecaa..d770b20f8546a 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 > 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; +} + +#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 { From 556eb6c0f7c048cfadeb8609e84ebdcfbeb7bda2 Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 14:52:57 -0400 Subject: [PATCH 02/15] fix lint --- web_src/css/repo.css | 247 +++++++++++++++++++++++++++++++++---------- 1 file changed, 189 insertions(+), 58 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index feb7ad133ac06..da66be784bc1b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -156,16 +156,6 @@ margin-left: -1px; /* make the borders overlap to avoid double borders */ } -/* .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; } @@ -185,7 +175,7 @@ right: 9px; top: -10px; - border: 8px solid #0000; + border: 8px solid #000000; border-bottom: 8px solid var(--color-shadow); display: inline-block; @@ -198,7 +188,7 @@ border-bottom: 3px solid; border-color: transparent; - font-weight: 600; + font-weight: var(--font-weight-semibold); font-size: 1rem; padding: 0.5rem; @@ -255,7 +245,9 @@ td .commit-summary { /* this is what limits the commit table width to a value that works on all viewport sizes */ #repo-files-table th:first-of-type { - max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x))); + max-width: calc( + calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)) + ); } .repository.file.list #repo-files-table thead th { @@ -278,7 +270,10 @@ td .commit-summary { .repository.file.list #repo-files-table tbody .svg.octicon-file, .repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file, -.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink { +.repository.file.list + #repo-files-table + tbody + .svg.octicon-file-directory-symlink { color: var(--color-secondary-dark-7); } @@ -397,22 +392,38 @@ td .commit-summary { font-size: 0.5em; } -.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon { +.repository.file.list + .non-diff-file-content + .header + .file-actions + .btn-octicon { line-height: var(--line-height-default); padding: 8px; vertical-align: middle; color: var(--color-text); } -.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover { +.repository.file.list + .non-diff-file-content + .header + .file-actions + .btn-octicon:hover { color: var(--color-primary); } -.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover { +.repository.file.list + .non-diff-file-content + .header + .file-actions + .btn-octicon-danger:hover { color: var(--color-red); } -.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled { +.repository.file.list + .non-diff-file-content + .header + .file-actions + .btn-octicon.disabled { color: inherit; opacity: var(--opacity-disabled); cursor: default; @@ -545,7 +556,11 @@ td .commit-summary { margin-top: -8px; } -.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name { +.repository.file.editor + .commit-form-wrapper + .commit-form + .quick-pull-choice + .branch-name { display: inline-block; padding: 2px 4px; font: 12px var(--fonts-monospace); @@ -555,17 +570,30 @@ td .commit-summary { margin: 0 2px; } -.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { +.repository.file.editor + .commit-form-wrapper + .commit-form + .quick-pull-choice + .new-branch-name-input { position: relative; margin-left: 25px; } -.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { +.repository.file.editor + .commit-form-wrapper + .commit-form + .quick-pull-choice + .new-branch-name-input + input { width: 240px !important; padding-left: 26px !important; } -.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { +.repository.file.editor + .commit-form-wrapper + .commit-form + .quick-pull-choice + .octicon-git-branch { position: absolute; top: 9px; left: 10px; @@ -681,7 +709,7 @@ td .commit-summary { .repository.view.issue .issue-title .ui.input input { font-size: 1.5em; - padding: 2px .5rem; + padding: 2px 0.5rem; } .issue-title .index { @@ -764,7 +792,8 @@ td .commit-summary { padding-left: 16px; } -.repository.view.issue .comment-list .timeline::before { /* ciara */ +.repository.view.issue .comment-list .timeline::before { + /* ciara */ display: block; content: ""; position: absolute; @@ -840,7 +869,11 @@ td .commit-summary { padding: 3px; } -.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment { +.repository.view.issue + .comment-list + .timeline-item + .badge + .svg.octicon-comment { margin-top: 2px; } @@ -912,7 +945,10 @@ td .commit-summary { background: var(--color-orange-badge-hover-bg) !important; } -.repository.view.issue .comment-list .timeline-item.event > .commit-status-link { +.repository.view.issue + .comment-list + .timeline-item.event + > .commit-status-link { float: right; margin-right: 8px; margin-top: 4px; @@ -958,7 +994,11 @@ td .commit-summary { background: var(--color-box-body); } -.repository.view.issue .comment-list .conversation-holder .comment .comment-container { +.repository.view.issue + .comment-list + .conversation-holder + .comment + .comment-container { border: none; } @@ -967,7 +1007,12 @@ td .commit-summary { width: 100%; margin: 0; } - .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) { + .repository.view.issue + .comment-list + .comment + .content + .form + .button:not(:last-child) { margin-bottom: 1rem; } } @@ -1070,7 +1115,10 @@ td .commit-summary { margin-top: 6px; } -.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { +.repository.view.issue + .comment-list + .comment-code-cloud + button.comment-form-reply { margin: 0; } @@ -1258,7 +1306,11 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon, .repository #repo-file-commit-box .sha.label .detail.icon, .repository #rev-list .sha.label .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label + .detail.icon { background: var(--color-light); margin: -6px -10px -4px 0; padding: 5px 4px 5px 6px; @@ -1274,7 +1326,12 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon .svg, .repository #repo-file-commit-box .sha.label .detail.icon .svg, .repository #rev-list .sha.label .detail.icon .svg, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label + .detail.icon + .svg { margin: 0 0.25em 0 0; } @@ -1282,7 +1339,12 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon > div, .repository #repo-file-commit-box .sha.label .detail.icon > div, .repository #rev-list .sha.label .detail.icon > div, -.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label + .detail.icon + > div { display: flex; align-items: center; } @@ -1291,7 +1353,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning, .repository #repo-file-commit-box .sha.label.isSigned.isWarning, .repository #rev-list .sha.label.isSigned.isWarning, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isWarning { border: 1px solid var(--color-red-badge); background: var(--color-red-badge-bg); } @@ -1300,7 +1365,11 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, .repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon, .repository #rev-list .sha.label.isSigned.isWarning .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isWarning + .detail.icon { border-left: 1px solid var(--color-red-badge); color: var(--color-red-badge); } @@ -1309,7 +1378,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning:hover, .repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover, .repository #rev-list .sha.label.isSigned.isWarning:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isWarning:hover { background: var(--color-red-badge-hover-bg) !important; } @@ -1317,7 +1389,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified, .repository #repo-file-commit-box .sha.label.isSigned.isVerified, .repository #rev-list .sha.label.isSigned.isVerified, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified { border: 1px solid var(--color-green-badge); background: var(--color-green-badge-bg); } @@ -1326,7 +1401,11 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, .repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon, .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified + .detail.icon { border-left: 1px solid var(--color-green-badge); color: var(--color-green-badge); } @@ -1335,7 +1414,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover, .repository #rev-list .sha.label.isSigned.isVerified:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerified:hover { background: var(--color-green-badge-hover-bg) !important; } @@ -1343,16 +1425,33 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUntrusted { border: 1px solid var(--color-yellow-badge); background: var(--color-yellow-badge-bg); } -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository + #commits-table + td.sha + .sha.label.isSigned.isVerifiedUntrusted + .detail.icon, +.repository + #repo-files-table + .sha.label.isSigned.isVerifiedUntrusted + .detail.icon, +.repository + #repo-file-commit-box + .sha.label.isSigned.isVerifiedUntrusted + .detail.icon, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUntrusted + .detail.icon { border-left: 1px solid var(--color-yellow-badge); color: var(--color-yellow-badge); } @@ -1361,7 +1460,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUntrusted:hover { background: var(--color-yellow-badge-hover-bg) !important; } @@ -1369,16 +1471,33 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUnmatched { border: 1px solid var(--color-orange-badge); background: var(--color-orange-badge-bg); } -.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository + #commits-table + td.sha + .sha.label.isSigned.isVerifiedUnmatched + .detail.icon, +.repository + #repo-files-table + .sha.label.isSigned.isVerifiedUnmatched + .detail.icon, +.repository + #repo-file-commit-box + .sha.label.isSigned.isVerifiedUnmatched + .detail.icon, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUnmatched + .detail.icon { border-left: 1px solid var(--color-orange-badge); color: var(--color-orange-badge); } @@ -1387,7 +1506,10 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { +.repository + .timeline-item.commits-list + .singular-commit + .sha.label.isSigned.isVerifiedUnmatched:hover { background: var(--color-orange-badge-hover-bg) !important; } @@ -1412,16 +1534,16 @@ td .commit-summary { /* the border css competes with .markup where all tables have outer border which would add a double border here, remove only the outer borders from this table */ -.repository .data-table tr:first-child :is(td,th) { +.repository .data-table tr:first-child :is(td, th) { border-top: none !important; } -.repository .data-table tr:last-child :is(td,th) { +.repository .data-table tr:last-child :is(td, th) { border-bottom: none !important; } -.repository .data-table tr :is(td,th):first-child { +.repository .data-table tr :is(td, th):first-child { border-left: none !important; } -.repository .data-table tr :is(td,th):last-child { +.repository .data-table tr :is(td, th):last-child { border-right: none !important; } @@ -1616,7 +1738,12 @@ td .commit-summary { display: inline-block; } -.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner { +.repository + .diff-file-box + .code-diff-split + .tag-code + .lines-code + code.code-inner { padding-left: 10px !important; } @@ -1704,7 +1831,7 @@ td .commit-summary { padding: 5px 10px; font-size: 1.2em; line-height: 1.4; - flex: 1 + flex: 1; } .empty-placeholder { @@ -2734,7 +2861,11 @@ tbody.commit-list { /* Don't show the general avatar, we show the inline avatar on mobile. * And don't show the role labels, there's no place for that. */ .repository.view.issue .comment-list .timeline .timeline-avatar, - .repository.view.issue .comment-list .timeline .comment-header-right .role-label { + .repository.view.issue + .comment-list + .timeline + .comment-header-right + .role-label { display: none; } .commit-header-row .ui.horizontal.list { @@ -2799,7 +2930,7 @@ tbody.commit-list { .commit-status-list { max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */ overflow-x: hidden; - transition: max-height .2s; + transition: max-height 0.2s; } .commit-status-item { From f5499caafb777c19e28f527e25570453a17666c6 Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 14:57:19 -0400 Subject: [PATCH 03/15] fix lint --- web_src/css/repo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index da66be784bc1b..b606398f4cf7f 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -175,7 +175,7 @@ right: 9px; top: -10px; - border: 8px solid #000000; + border: 8px solid war(--color-black); border-bottom: 8px solid var(--color-shadow); display: inline-block; From 35dc89a0221270d7cd5f23b93c9866b224a2ca57 Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 15:05:08 -0400 Subject: [PATCH 04/15] remove incorrect auto-lintfix --- web_src/css/repo.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index b606398f4cf7f..4084193736072 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -156,6 +156,16 @@ margin-left: -1px; /* make the borders overlap to avoid double borders */ } +/* .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; } @@ -175,7 +185,7 @@ right: 9px; top: -10px; - border: 8px solid war(--color-black); + border: 8px solid var(--color-black); border-bottom: 8px solid var(--color-shadow); display: inline-block; From 540e58f65991cc94b3496e80270e987c3e847bbb Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 15:12:46 -0400 Subject: [PATCH 05/15] force removal of 'autocorrect' changes --- web_src/css/repo.css | 233 +++++++++---------------------------------- 1 file changed, 46 insertions(+), 187 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4084193736072..ffdf4c4266f98 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -255,9 +255,7 @@ td .commit-summary { /* this is what limits the commit table width to a value that works on all viewport sizes */ #repo-files-table th:first-of-type { - max-width: calc( - calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)) - ); + max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x))); } .repository.file.list #repo-files-table thead th { @@ -280,10 +278,7 @@ td .commit-summary { .repository.file.list #repo-files-table tbody .svg.octicon-file, .repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file, -.repository.file.list - #repo-files-table - tbody - .svg.octicon-file-directory-symlink { +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink { color: var(--color-secondary-dark-7); } @@ -402,38 +397,22 @@ td .commit-summary { font-size: 0.5em; } -.repository.file.list - .non-diff-file-content - .header - .file-actions - .btn-octicon { +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon { line-height: var(--line-height-default); padding: 8px; vertical-align: middle; color: var(--color-text); } -.repository.file.list - .non-diff-file-content - .header - .file-actions - .btn-octicon:hover { +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover { color: var(--color-primary); } -.repository.file.list - .non-diff-file-content - .header - .file-actions - .btn-octicon-danger:hover { +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover { color: var(--color-red); } -.repository.file.list - .non-diff-file-content - .header - .file-actions - .btn-octicon.disabled { +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled { color: inherit; opacity: var(--opacity-disabled); cursor: default; @@ -566,11 +545,7 @@ td .commit-summary { margin-top: -8px; } -.repository.file.editor - .commit-form-wrapper - .commit-form - .quick-pull-choice - .branch-name { +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name { display: inline-block; padding: 2px 4px; font: 12px var(--fonts-monospace); @@ -580,30 +555,17 @@ td .commit-summary { margin: 0 2px; } -.repository.file.editor - .commit-form-wrapper - .commit-form - .quick-pull-choice - .new-branch-name-input { +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { position: relative; margin-left: 25px; } -.repository.file.editor - .commit-form-wrapper - .commit-form - .quick-pull-choice - .new-branch-name-input - input { +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { width: 240px !important; padding-left: 26px !important; } -.repository.file.editor - .commit-form-wrapper - .commit-form - .quick-pull-choice - .octicon-git-branch { +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { position: absolute; top: 9px; left: 10px; @@ -719,7 +681,7 @@ td .commit-summary { .repository.view.issue .issue-title .ui.input input { font-size: 1.5em; - padding: 2px 0.5rem; + padding: 2px .5rem; } .issue-title .index { @@ -802,8 +764,7 @@ td .commit-summary { padding-left: 16px; } -.repository.view.issue .comment-list .timeline::before { - /* ciara */ +.repository.view.issue .comment-list .timeline::before { /* ciara */ display: block; content: ""; position: absolute; @@ -879,11 +840,7 @@ td .commit-summary { padding: 3px; } -.repository.view.issue - .comment-list - .timeline-item - .badge - .svg.octicon-comment { +.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment { margin-top: 2px; } @@ -955,10 +912,7 @@ td .commit-summary { background: var(--color-orange-badge-hover-bg) !important; } -.repository.view.issue - .comment-list - .timeline-item.event - > .commit-status-link { +.repository.view.issue .comment-list .timeline-item.event > .commit-status-link { float: right; margin-right: 8px; margin-top: 4px; @@ -1004,11 +958,7 @@ td .commit-summary { background: var(--color-box-body); } -.repository.view.issue - .comment-list - .conversation-holder - .comment - .comment-container { +.repository.view.issue .comment-list .conversation-holder .comment .comment-container { border: none; } @@ -1017,12 +967,7 @@ td .commit-summary { width: 100%; margin: 0; } - .repository.view.issue - .comment-list - .comment - .content - .form - .button:not(:last-child) { + .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) { margin-bottom: 1rem; } } @@ -1125,10 +1070,7 @@ td .commit-summary { margin-top: 6px; } -.repository.view.issue - .comment-list - .comment-code-cloud - button.comment-form-reply { +.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { margin: 0; } @@ -1316,11 +1258,7 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon, .repository #repo-file-commit-box .sha.label .detail.icon, .repository #rev-list .sha.label .detail.icon, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label - .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { background: var(--color-light); margin: -6px -10px -4px 0; padding: 5px 4px 5px 6px; @@ -1336,12 +1274,7 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon .svg, .repository #repo-file-commit-box .sha.label .detail.icon .svg, .repository #rev-list .sha.label .detail.icon .svg, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label - .detail.icon - .svg { +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { margin: 0 0.25em 0 0; } @@ -1349,12 +1282,7 @@ td .commit-summary { .repository #repo-files-table .sha.label .detail.icon > div, .repository #repo-file-commit-box .sha.label .detail.icon > div, .repository #rev-list .sha.label .detail.icon > div, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label - .detail.icon - > div { +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { display: flex; align-items: center; } @@ -1363,10 +1291,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning, .repository #repo-file-commit-box .sha.label.isSigned.isWarning, .repository #rev-list .sha.label.isSigned.isWarning, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isWarning { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { border: 1px solid var(--color-red-badge); background: var(--color-red-badge-bg); } @@ -1375,11 +1300,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, .repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon, .repository #rev-list .sha.label.isSigned.isWarning .detail.icon, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isWarning - .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { border-left: 1px solid var(--color-red-badge); color: var(--color-red-badge); } @@ -1388,10 +1309,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isWarning:hover, .repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover, .repository #rev-list .sha.label.isSigned.isWarning:hover, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isWarning:hover { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { background: var(--color-red-badge-hover-bg) !important; } @@ -1399,10 +1317,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified, .repository #repo-file-commit-box .sha.label.isSigned.isVerified, .repository #rev-list .sha.label.isSigned.isVerified, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerified { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { border: 1px solid var(--color-green-badge); background: var(--color-green-badge-bg); } @@ -1411,11 +1326,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, .repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon, .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerified - .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { border-left: 1px solid var(--color-green-badge); color: var(--color-green-badge); } @@ -1424,10 +1335,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerified:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover, .repository #rev-list .sha.label.isSigned.isVerified:hover, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerified:hover { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { background: var(--color-green-badge-hover-bg) !important; } @@ -1435,33 +1343,16 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUntrusted { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { border: 1px solid var(--color-yellow-badge); background: var(--color-yellow-badge-bg); } -.repository - #commits-table - td.sha - .sha.label.isSigned.isVerifiedUntrusted - .detail.icon, -.repository - #repo-files-table - .sha.label.isSigned.isVerifiedUntrusted - .detail.icon, -.repository - #repo-file-commit-box - .sha.label.isSigned.isVerifiedUntrusted - .detail.icon, +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUntrusted - .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { border-left: 1px solid var(--color-yellow-badge); color: var(--color-yellow-badge); } @@ -1470,10 +1361,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover, .repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUntrusted:hover { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { background: var(--color-yellow-badge-hover-bg) !important; } @@ -1481,33 +1369,16 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUnmatched { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { border: 1px solid var(--color-orange-badge); background: var(--color-orange-badge-bg); } -.repository - #commits-table - td.sha - .sha.label.isSigned.isVerifiedUnmatched - .detail.icon, -.repository - #repo-files-table - .sha.label.isSigned.isVerifiedUnmatched - .detail.icon, -.repository - #repo-file-commit-box - .sha.label.isSigned.isVerifiedUnmatched - .detail.icon, +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUnmatched - .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { border-left: 1px solid var(--color-orange-badge); color: var(--color-orange-badge); } @@ -1516,10 +1387,7 @@ td .commit-summary { .repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, .repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover, .repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, -.repository - .timeline-item.commits-list - .singular-commit - .sha.label.isSigned.isVerifiedUnmatched:hover { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { background: var(--color-orange-badge-hover-bg) !important; } @@ -1544,16 +1412,16 @@ td .commit-summary { /* the border css competes with .markup where all tables have outer border which would add a double border here, remove only the outer borders from this table */ -.repository .data-table tr:first-child :is(td, th) { +.repository .data-table tr:first-child :is(td,th) { border-top: none !important; } -.repository .data-table tr:last-child :is(td, th) { +.repository .data-table tr:last-child :is(td,th) { border-bottom: none !important; } -.repository .data-table tr :is(td, th):first-child { +.repository .data-table tr :is(td,th):first-child { border-left: none !important; } -.repository .data-table tr :is(td, th):last-child { +.repository .data-table tr :is(td,th):last-child { border-right: none !important; } @@ -1748,12 +1616,7 @@ td .commit-summary { display: inline-block; } -.repository - .diff-file-box - .code-diff-split - .tag-code - .lines-code - code.code-inner { +.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner { padding-left: 10px !important; } @@ -1841,7 +1704,7 @@ td .commit-summary { padding: 5px 10px; font-size: 1.2em; line-height: 1.4; - flex: 1; + flex: 1 } .empty-placeholder { @@ -2871,11 +2734,7 @@ tbody.commit-list { /* Don't show the general avatar, we show the inline avatar on mobile. * And don't show the role labels, there's no place for that. */ .repository.view.issue .comment-list .timeline .timeline-avatar, - .repository.view.issue - .comment-list - .timeline - .comment-header-right - .role-label { + .repository.view.issue .comment-list .timeline .comment-header-right .role-label { display: none; } .commit-header-row .ui.horizontal.list { @@ -2940,7 +2799,7 @@ tbody.commit-list { .commit-status-list { max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */ overflow-x: hidden; - transition: max-height 0.2s; + transition: max-height .2s; } .commit-status-item { From 88876cf30bb497cfb796de5de4cde4873f1503ef Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 17:06:46 -0400 Subject: [PATCH 06/15] convert to tippy --- templates/repo/home.tmpl | 57 ++++++++++++++++++++------------ web_src/css/repo.css | 17 ++++++---- web_src/js/features/repo-home.ts | 27 +++++++++++++++ web_src/js/index.ts | 3 +- 4 files changed, 74 insertions(+), 30 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index ffe3e114bac73..00e878874d194 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -116,20 +116,19 @@
{{if $isHomepage}} -
-
-
-
- {{svg "octicon-terminal" 16}} - Clone -
-
+ {{svg "octicon-triangle-down" 14 "dropdown icon"}} + +
+
+
+
{{svg "octicon-terminal" 16}} Clone
+ {{svg "octicon-x" 16}} +
+
{{if $.CloneButtonShowHTTPS}}
@@ -142,32 +141,46 @@
{{end}}
-
+
{{svg "octicon-copy" 14}}
+
- {{range .OpenWithEditorApps}} - {{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}} + {{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 */}} {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index ffdf4c4266f98..ca9bc7b53448d 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -166,15 +166,23 @@ border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; } */ +.repository #clone-panel { + position: relative; +} + +.repository .clone-panel .ui.segment { + border: none; +} + .repository .clone-panel > button { border-radius: var(--border-radius) !important; } -#clone-heading { +.repository #clone-heading { font-size: 1rem; } -.clone-panel-content { +.repository .clone-panel-content { min-width: 200px; } @@ -208,11 +216,6 @@ border-color: var(--color-primary); } -.repository .clone-panel .dropdown .menu { - right: 0 !important; - left: auto !important; -} - .repository .repo-description { font-size: 16px; margin-bottom: 5px; diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts index f3e39ddb3c1ae..a8335e65e66e6 100644 --- a/web_src/js/features/repo-home.ts +++ b/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', + 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; diff --git a/web_src/js/index.ts b/web_src/js/index.ts index db678a25ba388..2826f6870fa9e 100644 --- a/web_src/js/index.ts +++ b/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, From d53a2229a4c1d19fd7a0ffc598e791af8ebc4147 Mon Sep 17 00:00:00 2001 From: techknowlogick Date: Sat, 7 Sep 2024 17:16:19 -0400 Subject: [PATCH 07/15] finish tippy styles --- templates/repo/home.tmpl | 6 +++--- web_src/css/repo.css | 30 +----------------------------- 2 files changed, 4 insertions(+), 32 deletions(-) diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 00e878874d194..4e28c1c331181 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -128,7 +128,7 @@
{{svg "octicon-terminal" 16}} Clone
{{svg "octicon-x" 16}}
-
+
{{if $.CloneButtonShowHTTPS}}
@@ -141,14 +141,14 @@
{{end}}
-
+
{{svg "octicon-copy" 14}}
-
+