mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
Fix various loading states, remove .loading
class (#29920)
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">
This commit is contained in:
parent
4bef1fb3e4
commit
d6fed9ab88
@ -50,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
|
<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>
|
</button>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -50,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="ui dividing"></div>
|
<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/svgcontainer" .}}
|
||||||
{{template "repo/graph/commits" .}}
|
{{template "repo/graph/commits" .}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,7 +6,9 @@
|
|||||||
<div class="ui right">
|
<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 -->
|
<!-- 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}}">
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -710,16 +710,6 @@ img.ui.avatar,
|
|||||||
background: var(--color-active);
|
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 textarea,
|
||||||
.ui.form .fields.error .field select,
|
.ui.form .fields.error .field select,
|
||||||
.ui.form .fields.error .field input:not([type]),
|
.ui.form .fields.error .field input:not([type]),
|
||||||
@ -811,10 +801,6 @@ input:-webkit-autofill:active,
|
|||||||
opacity: var(--opacity-disabled);
|
opacity: var(--opacity-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.loading.loading.input > i.icon svg {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text.primary {
|
.text.primary {
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
}
|
}
|
||||||
|
@ -4,12 +4,6 @@
|
|||||||
min-height: 350px;
|
min-height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#git-graph-container > .ui.segment.loading {
|
|
||||||
border: 0;
|
|
||||||
z-index: 1;
|
|
||||||
min-height: 246px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#git-graph-container h2 {
|
#git-graph-container h2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -208,7 +208,7 @@ export function initAdminCommon() {
|
|||||||
$('#delete-selection').on('click', async function (e) {
|
$('#delete-selection').on('click', async function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const $this = $(this);
|
const $this = $(this);
|
||||||
$this.addClass('loading disabled');
|
$this.addClass('is-loading disabled');
|
||||||
const data = new FormData();
|
const data = new FormData();
|
||||||
$checkboxes.each(function () {
|
$checkboxes.each(function () {
|
||||||
if ($(this).checkbox('is checked')) {
|
if ($(this).checkbox('is checked')) {
|
||||||
|
@ -35,7 +35,7 @@ export function initCompWebHookEditor() {
|
|||||||
|
|
||||||
// Test delivery
|
// Test delivery
|
||||||
document.getElementById('test-delivery')?.addEventListener('click', async function () {
|
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'));
|
await POST(this.getAttribute('data-link'));
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.href = this.getAttribute('data-redirect');
|
window.location.href = this.getAttribute('data-redirect');
|
||||||
|
@ -3,18 +3,20 @@ import {hideElem, showElem} from '../utils/dom.js';
|
|||||||
import {POST} from '../modules/fetch.js';
|
import {POST} from '../modules/fetch.js';
|
||||||
|
|
||||||
async function getArchive($target, url, first) {
|
async function getArchive($target, url, first) {
|
||||||
|
const dropdownBtn = $target[0].closest('.ui.dropdown.button');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
dropdownBtn.classList.add('is-loading');
|
||||||
const response = await POST(url);
|
const response = await POST(url);
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
if (!data) {
|
if (!data) {
|
||||||
// XXX Shouldn't happen?
|
// XXX Shouldn't happen?
|
||||||
$target.closest('.dropdown').children('i').removeClass('loading');
|
dropdownBtn.classList.remove('is-loading');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data.complete) {
|
if (!data.complete) {
|
||||||
$target.closest('.dropdown').children('i').addClass('loading');
|
|
||||||
// Wait for only three quarters of a second initially, in case it's
|
// Wait for only three quarters of a second initially, in case it's
|
||||||
// quickly archived.
|
// quickly archived.
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -22,12 +24,12 @@ async function getArchive($target, url, first) {
|
|||||||
}, first ? 750 : 2000);
|
}, first ? 750 : 2000);
|
||||||
} else {
|
} else {
|
||||||
// We don't need to continue checking.
|
// We don't need to continue checking.
|
||||||
$target.closest('.dropdown').children('i').removeClass('loading');
|
dropdownBtn.classList.remove('is-loading');
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
$target.closest('.dropdown').children('i').removeClass('loading');
|
dropdownBtn.classList.remove('is-loading');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,14 +43,14 @@ export function initRepoIssueTimeTracking() {
|
|||||||
|
|
||||||
async function updateDeadline(deadlineString) {
|
async function updateDeadline(deadlineString) {
|
||||||
hideElem($('#deadline-err-invalid-date'));
|
hideElem($('#deadline-err-invalid-date'));
|
||||||
$('#deadline-loader').addClass('loading');
|
$('#deadline-loader').addClass('is-loading');
|
||||||
|
|
||||||
let realDeadline = null;
|
let realDeadline = null;
|
||||||
if (deadlineString !== '') {
|
if (deadlineString !== '') {
|
||||||
const newDate = Date.parse(deadlineString);
|
const newDate = Date.parse(deadlineString);
|
||||||
|
|
||||||
if (Number.isNaN(newDate)) {
|
if (Number.isNaN(newDate)) {
|
||||||
$('#deadline-loader').removeClass('loading');
|
$('#deadline-loader').removeClass('is-loading');
|
||||||
showElem($('#deadline-err-invalid-date'));
|
showElem($('#deadline-err-invalid-date'));
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -69,7 +69,7 @@ async function updateDeadline(deadlineString) {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
$('#deadline-loader').removeClass('loading');
|
$('#deadline-loader').removeClass('is-loading');
|
||||||
showElem($('#deadline-err-invalid-date'));
|
showElem($('#deadline-err-invalid-date'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -237,14 +237,14 @@ export function initRepoPullRequestUpdate() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const $this = $(this);
|
const $this = $(this);
|
||||||
const redirect = $this.data('redirect');
|
const redirect = $this.data('redirect');
|
||||||
$this.addClass('loading');
|
$this.addClass('is-loading');
|
||||||
let response;
|
let response;
|
||||||
try {
|
try {
|
||||||
response = await POST($this.data('do'));
|
response = await POST($this.data('do'));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
} finally {
|
} finally {
|
||||||
$this.removeClass('loading');
|
$this.removeClass('is-loading');
|
||||||
}
|
}
|
||||||
let data;
|
let data;
|
||||||
try {
|
try {
|
||||||
|
Loading…
Reference in New Issue
Block a user