summaryrefslogtreecommitdiffstats
path: root/web_src/js/modules/tippy.js
Commit message (Collapse)AuthorAgeFilesLines
* Batch delete issue and improve tippy opts (#25253)wxiaoguang2023-06-191-12/+10
| | | | | 1. Add "batch delete" button for selected issues, close #22273 2. Address the review in https://github.com/go-gitea/gitea/pull/25219#discussion_r1229266083
* Change form actions to fetch for submit review box (#25219)HesterG2023-06-141-3/+11
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Co-author: @wxiaoguang Close #25096 The way to fix it in this PR is to change form submit to fetch using formData, and add flags to avoid post repeatedly. Should be able to apply to more forms that have the same issue after this PR. In the demo below, 'approve' is clicked several times, and then 'comment' is clicked several time after 'request changes' clicked. After: https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0 Update: screenshots from /devtest > ![image](https://user-images.githubusercontent.com/2114189/245680011-ee4231e0-a53d-4c2a-a9c2-71ccd98005cc.png) > > ![image](https://user-images.githubusercontent.com/2114189/245680057-9215d348-63d8-406d-8828-17e171163aaa.png) > > ![image](https://user-images.githubusercontent.com/2114189/245680148-89d7b3d1-d7b6-442f-b69e-eadaee112482.png) --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Fix mobile navbar and misc cleanups (#25134)silverwind2023-06-091-1/+3
| | | | | | | | | | | | | | | | | | - Fix and improve mobile navbar layout - Apply all cleanups suggested in https://github.com/go-gitea/gitea/pull/25111 - Make media query breakpoints match Fomantic's exactly - Clean up whitespace in class on navbar items Mobile navbar before and after: <img width="745" alt="Screenshot 2023-06-08 at 08 40 56" src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28"> <img width="739" alt="Screenshot 2023-06-08 at 08 41 23" src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Improve and fix bugs surrounding reactions (#24760)silverwind2023-05-281-0/+7
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | - Slightly decrease size of reaction buttons - Remove tooltip inside menu, it's obvious by the picture alone - Fix top menu triangle - Use `display: grid` to align icons in menu - Use regular tooltip for reaction users - Fix bug that deleted the reaction bar on clicking already reacted reaction in dropdown <img width="490" alt="Screenshot 2023-05-17 at 00 03 42" src="https://github.com/go-gitea/gitea/assets/115237/61588b37-facb-4829-b75b-e1cb5dda8ca4"> <img width="67" alt="Screenshot 2023-05-17 at 00 11 14" src="https://github.com/go-gitea/gitea/assets/115237/29605589-3b5f-40c6-8ad4-09923094bb8e"> <img width="211" alt="Screenshot 2023-05-17 at 00 29 30" src="https://github.com/go-gitea/gitea/assets/115237/7d2725da-6a3d-4e42-a351-53647f79f762"> <img width="210" alt="Screenshot 2023-05-17 at 00 29 54" src="https://github.com/go-gitea/gitea/assets/115237/b50f8364-033c-4445-ba25-61a814bb2d92"> <img width="892" alt="Screenshot 2023-05-17 at 00 12 20" src="https://github.com/go-gitea/gitea/assets/115237/30a46424-406a-46e5-b4de-47172eb8679d"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix duplicate tooltip hiding (#24814)silverwind2023-05-191-1/+1
| | | | | A tippy instance's role is actually on `props.role`. This makes duplicate tooltip hiding work again after https://github.com/go-gitea/gitea/pull/24688.
* Only hide tooltip tippy instances (#24688)silverwind2023-05-121-1/+4
| | | | | | Fix regression from https://github.com/go-gitea/gitea/pull/24648 where it was hiding non-tooltip tippy instances, like for example in the review panel which itself is a tippy instance, but with a different `role`.
* Only show one tippy at a time (#24648)silverwind2023-05-111-0/+14
| | | | | | | | | | | | | Because our tippy instances have an `interactiveBorder`, it's possible to bring up two instances at once, which is undesirable. <img width="256" alt="Screenshot 2023-05-10 at 23 03 04" src="https://github.com/go-gitea/gitea/assets/115237/3a9a1775-78c1-46d4-a8a5-503ab7dca0d8"> Prevent this by keeping track of visible tippy instances and hiding others when one is shown. Tippy also has the [singleton addon](https://atomiks.github.io/tippyjs/v6/addons/#singleton) for the same purpose, but it's unsuitable to us because we don't init all tooltips at once.
* Use auto-updating, natively hoverable, localized time elements (#23988)Yarden Shoham2023-04-111-26/+49
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | - Added [GitHub's `relative-time` element](https://github.com/github/relative-time-element) - Converted all formatted timestamps to use this element - No more flashes of unstyled content around time elements - These elements are localized using the `lang` property of the HTML file - Relative (e.g. the activities in the dashboard) and duration (e.g. server uptime in the admin page) time elements are auto-updated to keep up with the current time without refreshing the page - Code that is not needed anymore such as `formatting.js` and parts of `since.go` have been deleted Replaces #21440 Follows #22861 ## Screenshots ### Localized ![image](https://user-images.githubusercontent.com/20454870/230775041-f0af4fda-8f6b-46d3-b8e3-d340c791a50c.png) ![image](https://user-images.githubusercontent.com/20454870/230673393-931415a9-5729-4ac3-9a89-c0fb5fbeeeb7.png) ### Tooltips #### Native for dates ![image](https://user-images.githubusercontent.com/20454870/230797525-1fa0a854-83e3-484c-9da5-9425ab6528a3.png) #### Interactive for relative ![image](https://user-images.githubusercontent.com/115237/230796860-51e1d640-c820-4a34-ba2e-39087020626a.png) ### Auto-update ![rec](https://user-images.githubusercontent.com/20454870/230672159-37480d8f-435a-43e9-a2b0-44073351c805.gif) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: delvh <dev.lh@web.de>
* Use data-tooltip-content for tippy tooltip (#23649)wxiaoguang2023-03-241-16/+4
| | | | | | | | | | | | | | | | | 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)
* Add aria attributes to interactive time tooltips. (#23661)Felipe Leopoldo Sologuren Gutiérrez2023-03-241-1/+1
| | | | | | Fixes #23645 * Added `describedby` attribute to the reference element. * Eliminated `aria-expanded` attribute to the reference element in order to conform strictly with WCAG 2.1 rules.
* Use a general approach to show tooltip, fix temporary tooltip bug (#23574)wxiaoguang2023-03-231-20/+97
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ## 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: https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/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`.
* Fix aria.js bugs: incorrect role element problem, mobile focus problem, ↵wxiaoguang2023-03-171-1/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | tippy problem (#23450) This PR is extracted from #23346 to address some unclear (I don't understand) code-belonging concerns. This PR needs to be backported, otherwise the `aria.js` is too buggy in some cases. Since there would be two minor conflicts, I will do the backport manually. Before: the `aria.js` is still buggy in some cases. After: tested with AppleVoice, Android TalkBack * Fix incorrect dropdown init code * Fix incorrect role element (the menu role should be on the `$menu` element, but not on the `$focusable`) * Fix the focus-show-click-hide problem on mobile. Now the language menu works as expected * Fix incorrect dropdown template function setting * Clarify the logic in aria.js * Hide item's tippy after menu gets hidden * Fix incorrect tippy `setProps` after `destroy` * Fix UI lag problem when page gets redirected during menu hiding animation with screen reader * Improve comments * Implement the layout proposed by #19861 <details> https://github.com/go-gitea/gitea/blob/d74a7efb60f94a4b8e6e5f65332f94f1be31b761/web_src/js/features/aria.md?plain=1#L38-L47 </details>
* Make time tooltips interactive (#23526)silverwind2023-03-161-0/+1
| | | | | | Fixes https://codeberg.org/forgejo/forgejo/issues/511 <img width="379" alt="Screenshot 2023-03-16 at 20 23 10" src="https://user-images.githubusercontent.com/115237/225731294-4c6e4f44-bdcc-4c8c-86e2-49f7c03b377d.png">
* Add Mermaid copy button, avoid unnecessary tooltip hide (#22225)silverwind2022-12-251-1/+2
| | | | | | | | | | | | | - Add Copy button to mermaid diagrams which copies their source. - Set tippy to not hide on click and avoid tooltip re-creation for temporary tooltips. This avoids hide and show when copying repo url. Popovers still hide the tooltip as usual. <img width="815" alt="Screenshot 2022-12-23 at 14 02 32" src="https://user-images.githubusercontent.com/115237/209341696-98e30953-f246-46d9-9157-2ececfd791c9.png"> Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
* Improvements for Content Copy (#21842)silverwind2022-11-211-0/+1
| | | | | | | | | It now supports copying Markdown, SVG and Images (not in Firefox currently because of lacking [`ClipboardItem`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem) support, but can be enabled in `about:config` and works). It will fetch the data if in a rendered view or when it's an image. Followup to https://github.com/go-gitea/gitea/pull/21629.
* Improve commit status icons (#21124)silverwind2022-09-091-0/+2
| | | | | | | | | | | | | | | | | | | | | - Show popover on hover/focus (tippy default) instead of click - If there is only one status, add href to trigger element - Increase tippy [interactiveBorder](https://atomiks.github.io/tippyjs/v6/all-props/#interactiveborder), making it easier to keep interactive tooltips open with sloppy mouse movement - Fix a overflow issue in the commit list Commit list before: <img width="459" alt="Screen Shot 2022-09-09 at 19 00 01" src="https://user-images.githubusercontent.com/115237/189405517-68de5a69-e312-4ea2-ab81-87629db6064b.png"> Commit List after: <img width="475" alt="Screen Shot 2022-09-09 at 19 01 43" src="https://user-images.githubusercontent.com/115237/189405574-13e84885-9073-4f86-9eeb-d008c1639647.png"> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Show language name on hover (#20923)JakobDev2022-09-021-1/+1
| | | | Each repo has a bar which shows the used programming languages. If you want to know, what language is behind a color, you need to click the bar. With this PR, you just need to hover over the color the view the name.
* Forbid HTML string tooltips (#20935)silverwind2022-08-231-1/+1
| | | | | | | Tippy allows HTML strings to be passed as content but we do not use this feature (we do pass HTML only as Element), so it's better to disable it for increased security. Ref: https://atomiks.github.io/tippyjs/v6/html-content/#string
* Use separate class for tippy targets (#20742)silverwind2022-08-101-3/+4
| | | | | | Previous solution that re-purposed the 'hide' class by making it `!important` had various unintended side-effects where jQuery .show() was not able to outweight it. Use a separate class to prevent these interactions.
* Replace fomantic popup module with tippy.js (#20428)silverwind2022-08-091-2/+46
| | | | | | | | - replace fomantic popup module with tippy.js - fix chaining and add comment - add 100ms delay to tooltips - stopwatch improvments, raise default maxWidth - update web_src/js/features/common-global.js - use type=submit instead of js
* Use tippy.js for context popup (#20393)silverwind2022-07-191-0/+12
By appending the tooltips to `document.body`, we can avoid any stacking context issues caused by surrounding element's CSS. This uses [tippy.js](https://github.com/atomiks/tippyjs) instead of Fomantic popups. We should aim to replace all Fomantic popups with this eventually and then get rid of the Fomantic `popup` module completely.
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-24 12:47:32 +0000