Prevent clone protocol button flash on page load (#13626)
* Prevent clone protocol button flash on page load Previously, the saved active buttons would flash on page load because if delay involved in JS execution. Prevent these flashes bydisabling transitions on page load and run the script right after. It's not an ideal solution (which would require server-side storage of user settings like this) but I'd say better than before. * add defer Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
parent
b2de034278
commit
7bc0c8cff6
3 changed files with 21 additions and 22 deletions
|
@ -111,12 +111,12 @@
|
|||
{{if eq $n 0}}
|
||||
<div class="ui action tiny input" id="clone-panel">
|
||||
{{if not $.DisableHTTP}}
|
||||
<button class="ui basic clone button" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
|
||||
<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
|
||||
{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
|
||||
</button>
|
||||
{{end}}
|
||||
{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
|
||||
<button class="ui basic clone button" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
|
||||
<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
|
||||
SSH
|
||||
</button>
|
||||
{{end}}
|
||||
|
@ -125,6 +125,19 @@
|
|||
{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
|
||||
<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
|
||||
{{end}}
|
||||
<script defer>
|
||||
const isSSH = localStorage.getItem('repo-clone-protocol') === 'ssh';
|
||||
const sshButton = document.getElementById('repo-clone-ssh');
|
||||
const httpsButton = document.getElementById('repo-clone-https');
|
||||
const input = document.getElementById('repo-clone-url');
|
||||
if (input) input.value = (isSSH ? sshButton : httpsButton).dataset.link;
|
||||
if (sshButton) sshButton.classList[isSSH ? 'add' : 'remove']('primary');
|
||||
if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
|
||||
setTimeout(() => {
|
||||
if (sshButton) sshButton.classList.remove('no-transition');
|
||||
if (httpsButto) httpsButton.classList.remove('no-transition');
|
||||
}, 100);
|
||||
</script>
|
||||
{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
|
||||
<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
|
||||
{{svg "octicon-clippy"}}
|
||||
|
|
|
@ -1138,16 +1138,16 @@ async function initRepository() {
|
|||
$('#repo-clone-ssh').on('click', function () {
|
||||
$('.clone-url').text($(this).data('link'));
|
||||
$('#repo-clone-url').val($(this).data('link'));
|
||||
$(this).addClass('blue');
|
||||
$('#repo-clone-https').removeClass('blue');
|
||||
$(this).addClass('primary');
|
||||
$('#repo-clone-https').removeClass('primary');
|
||||
localStorage.setItem('repo-clone-protocol', 'ssh');
|
||||
});
|
||||
$('#repo-clone-https').on('click', function () {
|
||||
$('.clone-url').text($(this).data('link'));
|
||||
$('#repo-clone-url').val($(this).data('link'));
|
||||
$(this).addClass('blue');
|
||||
$(this).addClass('primary');
|
||||
if ($('#repo-clone-ssh').length > 0) {
|
||||
$('#repo-clone-ssh').removeClass('blue');
|
||||
$('#repo-clone-ssh').removeClass('primary');
|
||||
localStorage.setItem('repo-clone-protocol', 'https');
|
||||
}
|
||||
});
|
||||
|
@ -2520,22 +2520,6 @@ $(document).ready(async () => {
|
|||
initTableSort();
|
||||
initNotificationsTable();
|
||||
|
||||
// Repo clone url.
|
||||
if ($('#repo-clone-url').length > 0) {
|
||||
switch (localStorage.getItem('repo-clone-protocol')) {
|
||||
case 'ssh':
|
||||
if ($('#repo-clone-ssh').length > 0) {
|
||||
$('#repo-clone-ssh').trigger('click');
|
||||
} else {
|
||||
$('#repo-clone-https').trigger('click');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
$('#repo-clone-https').trigger('click');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const routes = {
|
||||
'div.user.settings': initUserSettings,
|
||||
'div.repository.settings.collaboration': initRepositoryCollaboration
|
||||
|
|
|
@ -24,6 +24,8 @@
|
|||
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
|
||||
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
|
||||
|
||||
.no-transition { transition: none !important; }
|
||||
|
||||
.bg-red { background: var(--color-red) !important; }
|
||||
.bg-orange { background: var(--color-orange) !important; }
|
||||
.bg-yellow { background: var(--color-yellow) !important; }
|
||||
|
|
Reference in a new issue