mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-03 21:08:25 +00: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