github-mirror/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-22 13:34:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix various loading states, remove .loading class (#29920)

Browse Source 
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:
silverwind 2024-03-21 17:31:15 +01:00 committed by GitHub
parent 4bef1fb3e4
commit d6fed9ab88
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/admin/notice.tmpl
View File

@ -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>

2
templates/repo/graph.tmpl
View File

@ -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>

4
templates/repo/settings/webhook/history.tmpl
View File

@ -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}}

14
web_src/css/base.css
View File

@ -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;
} }

6
web_src/css/features/gitgraph.css
View File

@ -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;

2
web_src/js/features/admin/common.js
View File

@ -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')) {

2
web_src/js/features/comp/WebHookEditor.js
View File

@ -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');

10
web_src/js/features/repo-common.js
View File

@ -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');
} }
} }

10
web_src/js/features/repo-issue.js
View File

@ -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 {