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:
silverwind 2020-11-26 21:31:09 +01:00 committed by GitHub
parent b2de034278
commit 7bc0c8cff6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 22 deletions

View File

@ -111,12 +111,12 @@
{{if eq $n 0}} {{if eq $n 0}}
<div class="ui action tiny input" id="clone-panel"> <div class="ui action tiny input" id="clone-panel">
{{if not $.DisableHTTP}} {{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}} {{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
</button> </button>
{{end}} {{end}}
{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}} {{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 SSH
</button> </button>
{{end}} {{end}}
@ -125,6 +125,19 @@
{{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}} {{else if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
<input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly> <input id="repo-clone-url" value="{{$.CloneLink.SSH}}" readonly>
{{end}} {{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))}} {{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"> <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"}} {{svg "octicon-clippy"}}

View File

@ -1138,16 +1138,16 @@ async function initRepository() {
$('#repo-clone-ssh').on('click', function () { $('#repo-clone-ssh').on('click', function () {
$('.clone-url').text($(this).data('link')); $('.clone-url').text($(this).data('link'));
$('#repo-clone-url').val($(this).data('link')); $('#repo-clone-url').val($(this).data('link'));
$(this).addClass('blue'); $(this).addClass('primary');
$('#repo-clone-https').removeClass('blue'); $('#repo-clone-https').removeClass('primary');
localStorage.setItem('repo-clone-protocol', 'ssh'); localStorage.setItem('repo-clone-protocol', 'ssh');
}); });
$('#repo-clone-https').on('click', function () { $('#repo-clone-https').on('click', function () {
$('.clone-url').text($(this).data('link')); $('.clone-url').text($(this).data('link'));
$('#repo-clone-url').val($(this).data('link')); $('#repo-clone-url').val($(this).data('link'));
$(this).addClass('blue'); $(this).addClass('primary');
if ($('#repo-clone-ssh').length > 0) { if ($('#repo-clone-ssh').length > 0) {
$('#repo-clone-ssh').removeClass('blue'); $('#repo-clone-ssh').removeClass('primary');
localStorage.setItem('repo-clone-protocol', 'https'); localStorage.setItem('repo-clone-protocol', 'https');
} }
}); });
@ -2520,22 +2520,6 @@ $(document).ready(async () => {
initTableSort(); initTableSort();
initNotificationsTable(); 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 = { const routes = {
'div.user.settings': initUserSettings, 'div.user.settings': initUserSettings,
'div.repository.settings.collaboration': initRepositoryCollaboration 'div.repository.settings.collaboration': initRepositoryCollaboration

View File

@ -24,6 +24,8 @@
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; } .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; } .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-red { background: var(--color-red) !important; }
.bg-orange { background: var(--color-orange) !important; } .bg-orange { background: var(--color-orange) !important; }
.bg-yellow { background: var(--color-yellow) !important; } .bg-yellow { background: var(--color-yellow) !important; }