From d6fed9ab88b13e124c5e59ceac5b21a3af52ad24 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 21 Mar 2024 17:31:15 +0100 Subject: [PATCH] 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: Screenshot 2024-03-19 at 22 56 26 After: Screenshot 2024-03-19 at 22 54 35 Screenshot 2024-03-19 at 22 54 56 Screenshot 2024-03-19 at 22 55 16 Screenshot 2024-03-19 at 23 01 43 Screenshot 2024-03-19 at 23 56 25 Screenshot 2024-03-20 at 00 00 38 --- templates/admin/notice.tmpl | 2 +- templates/repo/graph.tmpl | 2 +- templates/repo/settings/webhook/history.tmpl | 4 +++- web_src/css/base.css | 14 -------------- web_src/css/features/gitgraph.css | 6 ------ web_src/js/features/admin/common.js | 2 +- web_src/js/features/comp/WebHookEditor.js | 2 +- web_src/js/features/repo-common.js | 10 ++++++---- web_src/js/features/repo-issue.js | 10 +++++----- 9 files changed, 18 insertions(+), 34 deletions(-) diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl index 26462596bc..f7d77eab1d 100644 --- a/templates/admin/notice.tmpl +++ b/templates/admin/notice.tmpl @@ -50,7 +50,7 @@ diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 37305d278a..67804f117d 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -50,7 +50,7 @@
-
+
{{template "repo/graph/svgcontainer" .}} {{template "repo/graph/commits" .}} diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl index 4e0f0e9c3e..9f7a7816ea 100644 --- a/templates/repo/settings/webhook/history.tmpl +++ b/templates/repo/settings/webhook/history.tmpl @@ -6,7 +6,9 @@
- +
{{end}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 58332fb21c..6280652086 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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; } diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 795e1f2d61..6a04c44e51 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -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; diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js index 31d840c3e1..0c65f04ab8 100644 --- a/web_src/js/features/admin/common.js +++ b/web_src/js/features/admin/common.js @@ -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')) { diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js index b7ca5a0fcf..d74b59fd2a 100644 --- a/web_src/js/features/comp/WebHookEditor.js +++ b/web_src/js/features/comp/WebHookEditor.js @@ -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'); diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js index 669b47a9c5..2c5746c738 100644 --- a/web_src/js/features/repo-common.js +++ b/web_src/js/features/repo-common.js @@ -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'); } } diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index ad2956a600..c91dd06ac9 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -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 {