mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-11-04 15:04:00 +01:00 
			
		
		
		
	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;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										2063
									
								
								web_src/fomantic/build/semantic.css
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										2063
									
								
								web_src/fomantic/build/semantic.css
									
									
									
										generated
									
									
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										1110
									
								
								web_src/fomantic/build/semantic.js
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										1110
									
								
								web_src/fomantic/build/semantic.js
									
									
									
										generated
									
									
									
								
							
										
											
												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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user