Remove fomantic transition module (#26469)
Removes all dropdown and dimmer animations. Works everywhere as far as I can tell, but need to give this thorough testing. Removes around 70kb JS/CSS. Note, I'm not 100% sure regarding the various callbacks, those will need more investigation, but it appears to work nonetheless. Fixes: https://github.com/go-gitea/gitea/issues/15709
This commit is contained in:
parent
3b129aaa80
commit
376c0e25f7
|
@ -225,7 +225,7 @@
|
||||||
--color-button: #fafafa;
|
--color-button: #fafafa;
|
||||||
--color-code-bg: #ffffff;
|
--color-code-bg: #ffffff;
|
||||||
--color-code-sidebar-bg: #f5f5f5;
|
--color-code-sidebar-bg: #f5f5f5;
|
||||||
--color-shadow: #00000030;
|
--color-shadow: #00000026;
|
||||||
--color-secondary-bg: #f4f4f4;
|
--color-secondary-bg: #f4f4f4;
|
||||||
--color-expand-button: #d8efff;
|
--color-expand-button: #d8efff;
|
||||||
--color-placeholder-text: #aaa;
|
--color-placeholder-text: #aaa;
|
||||||
|
@ -248,6 +248,7 @@
|
||||||
--color-accent: var(--color-primary-light-1);
|
--color-accent: var(--color-primary-light-1);
|
||||||
--color-small-accent: var(--color-primary-light-6);
|
--color-small-accent: var(--color-primary-light-6);
|
||||||
--color-active-line: #fffbdd;
|
--color-active-line: #fffbdd;
|
||||||
|
--color-overlay-backdrop: #080808c0;
|
||||||
accent-color: var(--color-accent);
|
accent-color: var(--color-accent);
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
}
|
}
|
||||||
|
@ -705,6 +706,16 @@ a.label,
|
||||||
background: var(--color-active) !important;
|
background: var(--color-active) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* styles from removed fomantic transition module */
|
||||||
|
.hidden.transition {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.visible.transition {
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
.ui.message {
|
.ui.message {
|
||||||
background: var(--color-box-body);
|
background: var(--color-box-body);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
@ -796,7 +807,7 @@ a.label,
|
||||||
.ui.selection.active.dropdown:hover,
|
.ui.selection.active.dropdown:hover,
|
||||||
.ui.selection.active.dropdown .menu,
|
.ui.selection.active.dropdown .menu,
|
||||||
.ui.selection.active.dropdown:hover .menu {
|
.ui.selection.active.dropdown:hover .menu {
|
||||||
border-color: var(--color-primary-light-2);
|
border-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.selection.dropdown .menu {
|
.ui.selection.dropdown .menu {
|
||||||
|
@ -1186,6 +1197,20 @@ img.ui.avatar,
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.dropdown .menu,
|
||||||
|
.ui.upward.dropdown > .menu,
|
||||||
|
.ui.menu .dropdown.item .menu,
|
||||||
|
.ui.selection.active.dropdown .menu,
|
||||||
|
.ui.upward.selection.dropdown .menu,
|
||||||
|
.ui.selection.active.dropdown:hover .menu,
|
||||||
|
.ui.upward.active.selection.dropdown:hover .menu {
|
||||||
|
box-shadow: 0 6px 18px var(--color-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.dimmer {
|
||||||
|
background: var(--color-overlay-backdrop);
|
||||||
|
}
|
||||||
|
|
||||||
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
|
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
|
||||||
/* This fixes the commit graph button on the commits page */
|
/* This fixes the commit graph button on the commits page */
|
||||||
/* modal svg icons, copied from fomantic except width and height */
|
/* modal svg icons, copied from fomantic except width and height */
|
||||||
|
|
|
@ -105,3 +105,9 @@ code.language-math.is-loading::after {
|
||||||
.pulse {
|
.pulse {
|
||||||
animation: pulse 2s linear;
|
animation: pulse 2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.modal {
|
||||||
|
animation-name: fadein;
|
||||||
|
animation-duration: 300ms;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
|
@ -233,6 +233,7 @@
|
||||||
--color-accent: var(--color-primary-light-1);
|
--color-accent: var(--color-primary-light-1);
|
||||||
--color-small-accent: var(--color-primary-light-5);
|
--color-small-accent: var(--color-primary-light-5);
|
||||||
--color-active-line: #534d1b;
|
--color-active-line: #534d1b;
|
||||||
|
--color-overlay-backdrop: #080808c0;
|
||||||
accent-color: var(--color-accent);
|
accent-color: var(--color-accent);
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -43,7 +43,6 @@
|
||||||
"site",
|
"site",
|
||||||
"tab",
|
"tab",
|
||||||
"table",
|
"table",
|
||||||
"text",
|
"text"
|
||||||
"transition"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,6 +22,43 @@ export function initGiteaFomantic() {
|
||||||
return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
|
return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// stand-in for removed transition module
|
||||||
|
$.fn.transition = function (arg) {
|
||||||
|
if (arg === 'is supported') return true;
|
||||||
|
if (arg === 'is animating') return false;
|
||||||
|
if (arg === 'is inward') return false;
|
||||||
|
if (arg === 'is outward') return false;
|
||||||
|
if (arg === 'stop all') return;
|
||||||
|
|
||||||
|
const isIn = arg?.animation?.endsWith(' in');
|
||||||
|
const isOut = arg?.animation?.endsWith(' out');
|
||||||
|
|
||||||
|
let ret;
|
||||||
|
if (arg === 'show' || isIn) {
|
||||||
|
arg?.onStart?.(this);
|
||||||
|
ret = this.each((_, el) => {
|
||||||
|
el.classList.remove('hidden');
|
||||||
|
el.classList.add('visible');
|
||||||
|
if (isIn) el.classList.add('transition');
|
||||||
|
if (arg?.displayType) el.style.setProperty('display', arg.displayType, 'important');
|
||||||
|
arg?.onShow?.(this);
|
||||||
|
});
|
||||||
|
arg?.onComplete?.(this);
|
||||||
|
} else if (arg === 'hide' || isOut) {
|
||||||
|
arg?.onStart?.(this);
|
||||||
|
ret = this.each((_, el) => {
|
||||||
|
el.classList.add('hidden');
|
||||||
|
el.classList.remove('visible');
|
||||||
|
// don't remove the transition class because fomantic didn't do it either
|
||||||
|
el.style.removeProperty('display');
|
||||||
|
arg?.onHidden?.(this);
|
||||||
|
});
|
||||||
|
arg?.onComplete?.(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
|
||||||
initFomanticApiPatch();
|
initFomanticApiPatch();
|
||||||
|
|
||||||
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
|
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
|
||||||
|
|
Loading…
Reference in New Issue