mirror of https://github.com/go-gitea/gitea.git
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>pull/32738/head^2
Blender Defender
2 months ago
committed by
GitHub
parent
8a53a39c42
commit
18061af490
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,32 @@
|
||||
/* only used by "repo/empty.tmpl" */
|
||||
.clone-buttons-combo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.clone-buttons-combo input {
|
||||
border-left: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* used by the clone-panel popup */
|
||||
.clone-panel-field,
|
||||
.clone-panel-list {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.clone-panel-tab .item {
|
||||
padding: 5px 10px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.clone-panel-tab .item.active {
|
||||
border-bottom: 3px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.clone-panel-tab + .divider {
|
||||
margin: -1px 0 0;
|
||||
}
|
||||
|
||||
.clone-panel-list .item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import {toOriginUrl} from './origin-url.ts';
|
||||
|
||||
test('toOriginUrl', () => {
|
||||
const oldLocation = String(window.location);
|
||||
for (const origin of ['https://example.com', 'https://example.com:3000']) {
|
||||
window.location.assign(`${origin}/`);
|
||||
expect(toOriginUrl('/')).toEqual(`${origin}/`);
|
||||
expect(toOriginUrl('/org/repo.git')).toEqual(`${origin}/org/repo.git`);
|
||||
expect(toOriginUrl('https://another.com')).toEqual(`${origin}/`);
|
||||
expect(toOriginUrl('https://another.com/')).toEqual(`${origin}/`);
|
||||
expect(toOriginUrl('https://another.com/org/repo.git')).toEqual(`${origin}/org/repo.git`);
|
||||
expect(toOriginUrl('https://another.com:4000')).toEqual(`${origin}/`);
|
||||
expect(toOriginUrl('https://another.com:4000/')).toEqual(`${origin}/`);
|
||||
expect(toOriginUrl('https://another.com:4000/org/repo.git')).toEqual(`${origin}/org/repo.git`);
|
||||
}
|
||||
window.location.assign(oldLocation);
|
||||
});
|
||||
Loading…
Reference in New Issue