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
pull/26552/head
silverwind 1 year ago committed by GitHub
parent 3b129aaa80
commit 376c0e25f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 29
      web_src/css/base.css
  2. 6
      web_src/css/modules/animations.css
  3. 1
      web_src/css/themes/theme-arc-green.css
  4. 2063
      web_src/fomantic/build/semantic.css
  5. 1110
      web_src/fomantic/build/semantic.js
  6. 3
      web_src/fomantic/semantic.json
  7. 37
      web_src/js/modules/fomantic.js

@ -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…
Cancel
Save