Various code was using fomantic `loading` class which I think got broken a while ago and rendered only a full circle. Fix those to use `is-loading`. Before: <img width="295" alt="Screenshot 2024-03-19 at 22 56 26" src="https://github.com/go-gitea/gitea/assets/115237/dbe83395-5db4-4868-90bc-3613866a35f0"> After: <img width="60" alt="Screenshot 2024-03-19 at 22 54 35" src="https://github.com/go-gitea/gitea/assets/115237/8ac19b7e-035a-4c6d-850b-53a234ef69c2"> <img width="294" alt="Screenshot 2024-03-19 at 22 54 56" src="https://github.com/go-gitea/gitea/assets/115237/34e819d7-25f7-43a1-9d48-4a68dcd2b6ad"> <img width="320" alt="Screenshot 2024-03-19 at 22 55 16" src="https://github.com/go-gitea/gitea/assets/115237/05127544-47ff-4e18-9fd8-c84e44c374f8"> <img width="153" alt="Screenshot 2024-03-19 at 23 01 43" src="https://github.com/go-gitea/gitea/assets/115237/a33248c6-b11d-40ff-82d8-f5a3d85b55aa"> <img width="1300" alt="Screenshot 2024-03-19 at 23 56 25" src="https://github.com/go-gitea/gitea/assets/115237/562ca876-b5d5-4295-961e-9d2cdab31ab0"> <img width="136" alt="Screenshot 2024-03-20 at 00 00 38" src="https://github.com/go-gitea/gitea/assets/115237/44838ac4-67f3-4fec-a8e3-978cc5dbdb72">tags/v1.22.0-rc0
@@ -50,7 +50,7 @@ | |||
</div> | |||
</div> | |||
<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}"> | |||
{{ctx.Locale.Tr "admin.notices.delete_selected"}} | |||
<span class="text">{{ctx.Locale.Tr "admin.notices.delete_selected"}}</span> | |||
</button> | |||
</th> | |||
</tr> |
@@ -50,7 +50,7 @@ | |||
</div> | |||
</h2> | |||
<div class="ui dividing"></div> | |||
<div class="ui segment loading gt-hidden" id="loading-indicator"></div> | |||
<div class="is-loading tw-py-32 gt-hidden" id="loading-indicator"></div> | |||
{{template "repo/graph/svgcontainer" .}} | |||
{{template "repo/graph/commits" .}} | |||
</div> |
@@ -6,7 +6,9 @@ | |||
<div class="ui right"> | |||
<!-- the button is wrapped with a span because the tooltip doesn't show on hover if we put data-tooltip-content directly on the button --> | |||
<span data-tooltip-content="{{if or $isNew .Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc_disabled"}}{{end}}"> | |||
<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</button> | |||
<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}"> | |||
<span class="text">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</span> | |||
</button> | |||
</span> | |||
</div> | |||
{{end}} |
@@ -710,16 +710,6 @@ img.ui.avatar, | |||
background: var(--color-active); | |||
} | |||
.ui.loading.segment::before, | |||
.ui.loading.form::before { | |||
background: none; | |||
} | |||
.ui.loading.form > *, | |||
.ui.loading.segment > * { | |||
opacity: 0.35; | |||
} | |||
.ui.form .fields.error .field textarea, | |||
.ui.form .fields.error .field select, | |||
.ui.form .fields.error .field input:not([type]), | |||
@@ -811,10 +801,6 @@ input:-webkit-autofill:active, | |||
opacity: var(--opacity-disabled); | |||
} | |||
.ui.loading.loading.input > i.icon svg { | |||
visibility: hidden; | |||
} | |||
.text.primary { | |||
color: var(--color-primary) !important; | |||
} |
@@ -4,12 +4,6 @@ | |||
min-height: 350px; | |||
} | |||
#git-graph-container > .ui.segment.loading { | |||
border: 0; | |||
z-index: 1; | |||
min-height: 246px; | |||
} | |||
#git-graph-container h2 { | |||
display: flex; | |||
justify-content: space-between; |
@@ -208,7 +208,7 @@ export function initAdminCommon() { | |||
$('#delete-selection').on('click', async function (e) { | |||
e.preventDefault(); | |||
const $this = $(this); | |||
$this.addClass('loading disabled'); | |||
$this.addClass('is-loading disabled'); | |||
const data = new FormData(); | |||
$checkboxes.each(function () { | |||
if ($(this).checkbox('is checked')) { |
@@ -35,7 +35,7 @@ export function initCompWebHookEditor() { | |||
// Test delivery | |||
document.getElementById('test-delivery')?.addEventListener('click', async function () { | |||
this.classList.add('loading', 'disabled'); | |||
this.classList.add('is-loading', 'disabled'); | |||
await POST(this.getAttribute('data-link')); | |||
setTimeout(() => { | |||
window.location.href = this.getAttribute('data-redirect'); |
@@ -3,18 +3,20 @@ import {hideElem, showElem} from '../utils/dom.js'; | |||
import {POST} from '../modules/fetch.js'; | |||
async function getArchive($target, url, first) { | |||
const dropdownBtn = $target[0].closest('.ui.dropdown.button'); | |||
try { | |||
dropdownBtn.classList.add('is-loading'); | |||
const response = await POST(url); | |||
if (response.status === 200) { | |||
const data = await response.json(); | |||
if (!data) { | |||
// XXX Shouldn't happen? | |||
$target.closest('.dropdown').children('i').removeClass('loading'); | |||
dropdownBtn.classList.remove('is-loading'); | |||
return; | |||
} | |||
if (!data.complete) { | |||
$target.closest('.dropdown').children('i').addClass('loading'); | |||
// Wait for only three quarters of a second initially, in case it's | |||
// quickly archived. | |||
setTimeout(() => { | |||
@@ -22,12 +24,12 @@ async function getArchive($target, url, first) { | |||
}, first ? 750 : 2000); | |||
} else { | |||
// We don't need to continue checking. | |||
$target.closest('.dropdown').children('i').removeClass('loading'); | |||
dropdownBtn.classList.remove('is-loading'); | |||
window.location.href = url; | |||
} | |||
} | |||
} catch { | |||
$target.closest('.dropdown').children('i').removeClass('loading'); | |||
dropdownBtn.classList.remove('is-loading'); | |||
} | |||
} | |||
@@ -43,14 +43,14 @@ export function initRepoIssueTimeTracking() { | |||
async function updateDeadline(deadlineString) { | |||
hideElem($('#deadline-err-invalid-date')); | |||
$('#deadline-loader').addClass('loading'); | |||
$('#deadline-loader').addClass('is-loading'); | |||
let realDeadline = null; | |||
if (deadlineString !== '') { | |||
const newDate = Date.parse(deadlineString); | |||
if (Number.isNaN(newDate)) { | |||
$('#deadline-loader').removeClass('loading'); | |||
$('#deadline-loader').removeClass('is-loading'); | |||
showElem($('#deadline-err-invalid-date')); | |||
return false; | |||
} | |||
@@ -69,7 +69,7 @@ async function updateDeadline(deadlineString) { | |||
} | |||
} catch (error) { | |||
console.error(error); | |||
$('#deadline-loader').removeClass('loading'); | |||
$('#deadline-loader').removeClass('is-loading'); | |||
showElem($('#deadline-err-invalid-date')); | |||
} | |||
} | |||
@@ -237,14 +237,14 @@ export function initRepoPullRequestUpdate() { | |||
e.preventDefault(); | |||
const $this = $(this); | |||
const redirect = $this.data('redirect'); | |||
$this.addClass('loading'); | |||
$this.addClass('is-loading'); | |||
let response; | |||
try { | |||
response = await POST($this.data('do')); | |||
} catch (error) { | |||
console.error(error); | |||
} finally { | |||
$this.removeClass('loading'); | |||
$this.removeClass('is-loading'); | |||
} | |||
let data; | |||
try { |