diff options
author | silverwind <me@silverwind.io> | 2020-11-26 21:31:09 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-11-26 22:31:09 +0200 |
commit | 7bc0c8cff66d42c9aa01d2ec107edac60d4a08f3 (patch) | |
tree | 59430e3085862bec9e110f6cf0293f65262aca82 /templates/repo/home.tmpl | |
parent | b2de034278560f0fec9fc0919f1b75fa005de25c (diff) | |
download | gitea-7bc0c8cff66d42c9aa01d2ec107edac60d4a08f3.tar.gz gitea-7bc0c8cff66d42c9aa01d2ec107edac60d4a08f3.zip |
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>
Diffstat (limited to 'templates/repo/home.tmpl')
-rw-r--r-- | templates/repo/home.tmpl | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 23ee989e32..ee3406fac6 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -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"}} |