mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 09:31:53 +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