summaryrefslogtreecommitdiffstats
path: root/web_src/js/modules/tippy.js
Commit message (Collapse)AuthorAgeFilesLines
* Rework and fix stopwatch (#30732) (#30787)Giteabot2024-04-301-2/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | Backport #30732 by @silverwind Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the stopwatch. Time is now shown inside the "dot" icon and on both mobile and desktop. All rendering is now done by `<relative-time>`, the `pretty-ms` dependency is dropped. Desktop: <img width="557" alt="Screenshot 2024-04-29 at 22 33 27" src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac"> Mobile: <img width="640" alt="Screenshot 2024-04-29 at 22 34 19" src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877"> Note for tippy: Previously, tippy instances defaulted to "menu" theme, but that theme is really only meant for `.ui.menu`, so it was not optimal for the stopwatch popover. This introduces a unopinionated `default` theme that has no padding and should be suitable for all content. I reviewed all existing uses and explicitely set the desired `theme` on all of them. Co-authored-by: silverwind <me@silverwind.io>
* Replace coloris with vanilla-colorful (#30201)silverwind2024-04-031-3/+4
| | | | | | | | | | | | | | Found [a better color picker](https://github.com/web-padawan/vanilla-colorful) that [does not rely](https://github.com/mdbassit/Coloris/issues/139) on `querySelectorAll` or a global shared instance, and is also around a third of the size of the previous one. The popover is handled by tippy.js for which I introduced a new "bare" theme and it uses a new sibling-based mechanism which should prove useful later to create tippy popovers via HTML only. <img width="846" alt="Screenshot 2024-03-31 at 04 03 38" src="https://github.com/go-gitea/gitea/assets/115237/7639b911-a2d7-4f5c-bffd-a9d84561e747">
* Enforce trailing comma in JS on multiline (#30002)silverwind2024-03-221-1/+1
| | | | | | | | To keep blame info accurate and to avoid [changes like this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359), it's good to always have a trailing comma, so let's enforce it in JS. This rule is completely automatically fixable with `make lint-js-fix` and that's what I did here.
* Add `<overflow-menu>`, rename webcomponents (#29400)silverwind2024-03-151-8/+6
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Set user's 24h preference from their current OS locale (#29651)silverwind2024-03-081-1/+9
| | | | | | | | | | | | | | Fixes: https://github.com/go-gitea/gitea/issues/28371 Fixed by using a JS solution that formats according to `lang`, but alters the 24h format setting as per user's locale. This will work for all tooltips: <img width="243" alt="Screenshot 2024-03-07 at 23 03 35" src="https://github.com/go-gitea/gitea/assets/115237/6d16c71c-6786-4eda-8cdc-50ec68ba62c6"> <img width="250" alt="Screenshot 2024-03-07 at 23 03 17" src="https://github.com/go-gitea/gitea/assets/115237/4e26bbb7-12df-4b81-bd37-14705e87e8f7"> <img width="310" alt="Screenshot 2024-03-07 at 23 14 34" src="https://github.com/go-gitea/gitea/assets/115237/1ef599f0-6401-4e19-b1da-59cdfc09b0f6"> I think there is only one other place in the UI where we render such absolute dates, which is in the actions view and which I've also fixed: <img width="275" alt="Screenshot 2024-03-07 at 23 04 00" src="https://github.com/go-gitea/gitea/assets/115237/df0fbe1f-96ee-4338-ab5e-2b10e215005d">
* Avoid showing unnecessary JS errors when there are elements with different ↵wxiaoguang2024-02-081-7/+5
| | | | | origin on the page (#29081) Try to fix #29080
* Polyfill SubmitEvent for PaleMoon (#28441)wxiaoguang2023-12-151-1/+1
|
* Add `Hide/Show all checks` button to commit status check (#26284)yp053272023-11-021-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | Step one for a GitHub like commit status check ui: ![image](https://github.com/go-gitea/gitea/assets/18380374/22953b88-1f91-4d19-bc57-ad92d33fa11f) ![image](https://github.com/go-gitea/gitea/assets/18380374/78572a49-c9b0-472b-86a8-8293197e807b) ![image](https://github.com/go-gitea/gitea/assets/18380374/bc5c8d1c-2ab5-4b03-b8c6-20c34b86d856) Step two: ![image](https://github.com/go-gitea/gitea/assets/18380374/938b359e-8823-4192-b82d-55fa40b986fd) ![image](https://github.com/go-gitea/gitea/assets/18380374/2de5bb8f-40f5-462a-8d6d-bac13a32bc2a) The design now will list all commit status checks which takes too much space. This is a pre-improve for #26247 --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Enable followCursor for language stats bar (#27713)silverwind2023-10-221-1/+3
| | | | | | | | | Fixes: https://github.com/go-gitea/gitea/issues/27600 ![](https://github.com/go-gitea/gitea/assets/115237/96743d90-0712-4f13-84ec-66f84e6ed2d7) Also tested together with https://github.com/go-gitea/gitea/pull/27704, works well.
* Clipboard copy enhancements (#27669)silverwind2023-10-181-0/+5
| | | | | | | | | | | | | | | | | | | | | 1. Do not show temporary tooltips that are triggered from within dropdowns. Previously this resulted in the tooltip being stuck to top-left of the page like seen on issue comment URL copy. I could not figure out any tippy options that prevent this, so I think it's better to just not show it. 1. Refactor `initGlobalCopyToClipboardListener` so that it does not run a often useless `document.querySelector` on every click, make `data-clipboard-text-type` work with `data-clipboard-target`. No use in current code base but still good to have. Finally some minor code cleanup in the function. Point 1 is for this copy button: <img width="229" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/81f34746-8ea5-43d9-8c6f-f6f417a9e4ad"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* 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-08-07 16:07:58 +0000