6 Commits (08f4a9cca22d2c092760fb83dbaa1bf0c9dbb49e)

Author	SHA1	Message	Date
wxiaoguang	12fff36d05	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: 	2 years ago
wxiaoguang	8d5fbeb7a2	Use data-tooltip-content for tippy tooltip (#23649) ... Follow: * #23574 * Remove all ".tooltip[data-content=...]" Major changes: * Remove "tooltip" class, use "[data-tooltip-content=...]" instead of ".tooltip[data-content=...]" * Remove legacy `data-position`, it's dead code since last Fomantic Tooltip -> Tippy Tooltip refactoring * Rename reaction attribute from `data-content` to `data-reaction-content` * Add comments for some `data-content`: `{{/* used by the form */}}` * Remove empty "ui" class * Use "text color" for SVG icons (a few)	2 years ago
wxiaoguang	9be90a5875	Use a general approach to show tooltip, fix temporary tooltip bug (#23574) ... ## TLDR * Improve performance: lazy creating the tippy instances. * Transparently support all "tooltip" elements, no need to call `initTooltip` again and again. * Fix a temporary tooltip re-entrance bug, which causes showing temp content forever. * Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init (initHeatmap time decreases from 100ms to 50ms) ## Details ### The performance Creating a lot of tippy tooltip instances is expensive. This PR doesn't create all tippy tooltip instances, instead, it only adds "mouseover" event listener to necessary elements, and then switches to the tippy tooltip ### The general approach for all tooltips Before, dynamically generated tooltips need to be called with `initTooltip`. After, use MutationObserver to: * Attach the event listeners to newly created tooltip elements, work for Vue (easier than before) * Catch changed attributes and update the tooltip content (better than before) It does help a lot, eg: 1a4efa0ee9/web_src/js/components/PullRequestMergeForm.vue (L33-L36) ### Temporary tooltip re-entrance bug To reproduce, on try.gitea.io, click the "copy clone url" quickly, then the tooltip will be "Copied!" forever. After this PR, with the help of `attachTippyTooltip`, the tooltip content could be reset to the default correctly. ### Other changes * `data-tooltip-content` is preferred from now on, the old `data-content` may cause conflicts with other modules. * `data-placement` was only used for tooltip, so it's renamed to `data-tooltip-placement`, and removed from `createTippy`.	2 years ago
yp05327	06c067bb0f	Remove stars in dashboard repo list (#23530) ... Discussion is here: https://github.com/go-gitea/gitea/pull/22816	2 years ago
wxiaoguang	ac8d71ff07	Refactor branch/tag selector to Vue SFC (#23421) ... Follow #23394 There were many bad smells in old code. This PR only moves the code into Vue SFC, doesn't touch the unrelated logic. update: after 5f23218c85 , there should be no usage of the vue-rumtime-compiler anymore (hopefully), so I think this PR could close #19851 --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>	2 years ago
wxiaoguang	e82f1b15c7	Refactor dashboard repo list to Vue SFC (#23405) ... Similar to #23394 The dashboard repo list mixes jQuery/Fomantic UI/Vue together, it's very diffcult to maintain and causes unfixable a11y problems. This PR uses two steps to refactor the repo list: 1. move `data-` attributes to JS object and use Vue data as much as possible d3adc0dcac 2. move the code into a Vue SFC 7ebe55df6e Total: +516 −585 Screenshots: <details>    </details> --------- Co-authored-by: John Olheiser <john.olheiser@gmail.com>	2 years ago