From 48405671974ce10cd40e0e82b064113f93f5af9c Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 19 Mar 2024 23:02:06 +0100 Subject: [PATCH 1/2] Fix various js loading states --- 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 26462596bc5bb..f7d77eab1d41c 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 37305d278a293..f3c28963c92e3 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 4e0f0e9c3e3a2..9f7a7816eaf2f 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 018c7d7bcd5f7..c347ad3a9d02d 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -709,16 +709,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]), @@ -810,10 +800,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 795e1f2d61fba..6a04c44e51495 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 31d840c3e1282..0c65f04ab8f34 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 b7ca5a0fcf345..d74b59fd2aa64 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 9e11ffe19789d..0557e53631ddb 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 bca062bcc7d35..174b8fa4c2290 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')); } } @@ -231,14 +231,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 { From f5e632caf0e4a415214345c796093032a6a5bc25 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 20 Mar 2024 18:04:04 +0100 Subject: [PATCH 2/2] use tw-py-32 and restore missing gt-hidden --- templates/repo/graph.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index f3c28963c92e3..67804f117d664 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -50,7 +50,7 @@
-
+
{{template "repo/graph/svgcontainer" .}} {{template "repo/graph/commits" .}}