mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 10:56:10 +01:00 
			
		
		
		
	Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR, however, they are all related, and can be tested together, so I put them together to save everyone's time. Diff: `+79 −84`, everything becomes much better. ### Improve the dropdown settings. Move all fomantic-init related code into our `fomantic.js` Fine-tune some dropdown global settings, see the comments. Also help to fix the first problem in #23625 , cc: @yp05327 The "language" menu has been simplified, and it works with small-height window better. ### Use SVG instead of `<i class="delete icon">` It's also done by `$.fn.dropdown.settings.templates.label` , cc: @silverwind ### Remove incorrect `tabable` CSS class It doesn't have CSS styles, and it was only in Vue. So it's totally unnecessary, remove it by the way. ### Improve the Repo Topic Edit form * Simplify the code * Add a "Cancel" button * Align elements Before: <details>  </details> After: 
This commit is contained in:
		
							
								
								
									
										29
									
								
								web_src/js/modules/fomantic.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								web_src/js/modules/fomantic.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,29 @@ | ||||
| import $ from 'jquery'; | ||||
| import {initAriaCheckboxPatch} from './aria/checkbox.js'; | ||||
| import {initAriaDropdownPatch} from './aria/dropdown.js'; | ||||
| import {svg} from '../svg.js'; | ||||
|  | ||||
| export function initGiteaFomantic() { | ||||
|   // Silence fomantic's error logging when tabs are used without a target content element | ||||
|   $.fn.tab.settings.silent = true; | ||||
|   // Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element. | ||||
|   $.fn.checkbox.settings.enableEnterKey = false; | ||||
|  | ||||
|   // Prevent Fomantic from guessing the popup direction. | ||||
|   // Otherwise, if the viewport height is small, Fomantic would show the popup upward, | ||||
|   // if the dropdown is at the beginning of the page, then the top part would be clipped by the window view, eg: Issue List "Sort" dropdown | ||||
|   $.fn.dropdown.settings.direction = 'downward'; | ||||
|   // By default, use "exact match" for full text search | ||||
|   $.fn.dropdown.settings.fullTextSearch = 'exact'; | ||||
|   // Do not use "cursor: pointer" for dropdown labels | ||||
|   $.fn.dropdown.settings.className.label += ' gt-cursor-default'; | ||||
|   // Always use Gitea's SVG icons | ||||
|   $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) { | ||||
|     const escape = $.fn.dropdown.settings.templates.escape; | ||||
|     return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`); | ||||
|   }; | ||||
|  | ||||
|   // 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. | ||||
|   initAriaCheckboxPatch(); | ||||
|   initAriaDropdownPatch(); | ||||
| } | ||||
		Reference in New Issue
	
	Block a user