discourse/app/assets/javascripts/float-kit/addon/lib/constants.js
Martin Brennan 9c17588f6a
Some checks are pending
Licenses / run (push) Waiting to run
Linting / run (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (backend, plugins) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (frontend, plugins) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (frontend, themes) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (system, chat) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (system, core) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (system, plugins) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (system, themes) (push) Waiting to run
Tests / core frontend (${{ matrix.browser }}) (Chrome) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (annotations, core) (push) Waiting to run
Tests / ${{ matrix.target }} ${{ matrix.build_type }} (backend, core) (push) Waiting to run
Tests / core frontend (${{ matrix.browser }}) (Firefox ESR) (push) Waiting to run
Tests / core frontend (${{ matrix.browser }}) (Firefox Evergreen) (push) Waiting to run
FIX: Admin dashboard tooltips not working on mobile (#29538)
This commit fixes the (?) tooltips for reports on
the admin dashboard on mobile.

The fix is that float-kit instances can now have different triggers
and un-triggers for mobile and desktop, and float-kit is now aware
of the site being in mobile view.

Example usage:

```
@triggers={{hash mobile=(array "click")}}
```

So now, if you press on the tooltip trigger on mobile it shows
correctly, and on desktop both hover and click can be used.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-11-01 12:25:12 +10:00

92 lines
1.9 KiB
JavaScript

export const FLOAT_UI_PLACEMENTS = [
"top",
"top-start",
"top-end",
"right",
"right-start",
"right-end",
"bottom",
"bottom-start",
"bottom-end",
"left",
"left-start",
"left-end",
];
export const TOOLTIP = {
options: {
animated: true,
arrow: true,
beforeTrigger: null,
closeOnClickOutside: true,
closeOnEscape: true,
closeOnScroll: true,
component: null,
content: null,
identifier: null,
interactive: false,
listeners: false,
maxWidth: 350,
data: null,
offset: 10,
triggers: { mobile: ["click"], desktop: ["hover", "click"] },
untriggers: { mobile: ["click"], desktop: ["hover", "click"] },
placement: "top",
fallbackPlacements: FLOAT_UI_PLACEMENTS,
autoUpdate: true,
trapTab: true,
onClose: null,
onShow: null,
onRegisterApi: null,
},
portalOutletId: "d-tooltip-portal-outlet",
};
export const MENU = {
options: {
animated: true,
arrow: false,
autofocus: false,
beforeTrigger: null,
closeOnEscape: true,
closeOnClickOutside: true,
closeOnScroll: false,
component: null,
content: null,
identifier: null,
interactive: true,
listeners: false,
maxWidth: 400,
data: null,
offset: 10,
triggers: ["click"],
untriggers: ["click"],
placement: "bottom-start",
fallbackPlacements: FLOAT_UI_PLACEMENTS,
autoUpdate: true,
trapTab: true,
onClose: null,
onShow: null,
onRegisterApi: null,
modalForMobile: false,
inline: null,
groupIdentifier: null,
triggerClass: null,
contentClass: null,
class: null,
},
portalOutletId: "d-menu-portal-outlet",
};
import DDefaultToast from "float-kit/components/d-default-toast";
export const TOAST = {
options: {
autoClose: true,
duration: 3000,
component: DDefaultToast,
showProgressBar: false,
views: ["desktop", "mobile"],
},
};