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>
This commit is contained in:
parent
254cf22559
commit
9c17588f6a
|
@ -18,6 +18,10 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
|
|||
await triggerEvent(".fk-d-tooltip__trigger", "mousemove");
|
||||
}
|
||||
|
||||
async function leave() {
|
||||
await triggerEvent(".fk-d-tooltip__trigger", "mouseleave");
|
||||
}
|
||||
|
||||
async function close() {
|
||||
await triggerKeyEvent(document.activeElement, "keydown", "Escape");
|
||||
}
|
||||
|
@ -240,4 +244,40 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
|
|||
|
||||
assert.dom(".fk-d-tooltip__content.test-content").doesNotExist();
|
||||
});
|
||||
|
||||
test("a tooltip is triggered/untriggered by click on mobile", async function (assert) {
|
||||
this.site.mobileView = true;
|
||||
|
||||
await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
|
||||
await click(".fk-d-tooltip__trigger");
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").exists();
|
||||
|
||||
await click(".fk-d-tooltip__trigger");
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").doesNotExist();
|
||||
});
|
||||
|
||||
test("a tooltip is triggered/untriggered by click on desktop", async function (assert) {
|
||||
await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
|
||||
await click(".fk-d-tooltip__trigger");
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").exists();
|
||||
|
||||
await click(".fk-d-tooltip__trigger");
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").doesNotExist();
|
||||
});
|
||||
|
||||
test("a tooltip is triggered/untriggered by hover on desktop", async function (assert) {
|
||||
await render(hbs`<DTooltip @inline={{true}} @label="label" />`);
|
||||
|
||||
await hover();
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").exists();
|
||||
|
||||
await leave();
|
||||
|
||||
assert.dom(".fk-d-tooltip__content").doesNotExist();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -29,8 +29,8 @@ export const TOOLTIP = {
|
|||
maxWidth: 350,
|
||||
data: null,
|
||||
offset: 10,
|
||||
triggers: ["hover", "click"],
|
||||
untriggers: ["hover", "click"],
|
||||
triggers: { mobile: ["click"], desktop: ["hover", "click"] },
|
||||
untriggers: { mobile: ["click"], desktop: ["hover", "click"] },
|
||||
placement: "top",
|
||||
fallbackPlacements: FLOAT_UI_PLACEMENTS,
|
||||
autoUpdate: true,
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { cancel } from "@ember/runloop";
|
||||
import { service } from "@ember/service";
|
||||
import { makeArray } from "discourse-common/lib/helpers";
|
||||
import discourseLater from "discourse-common/lib/later";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
|
@ -13,6 +14,8 @@ function cancelEvent(event) {
|
|||
}
|
||||
|
||||
export default class FloatKitInstance {
|
||||
@service site;
|
||||
|
||||
@tracked id = null;
|
||||
|
||||
@action
|
||||
|
@ -197,10 +200,28 @@ export default class FloatKitInstance {
|
|||
}
|
||||
|
||||
get triggers() {
|
||||
if (
|
||||
typeof this.options.triggers === "object" &&
|
||||
!Array.isArray(this.options.triggers)
|
||||
) {
|
||||
return this.site.mobileView
|
||||
? this.options.triggers.mobile ?? ["click"]
|
||||
: this.options.triggers.desktop ?? ["click"];
|
||||
}
|
||||
|
||||
return this.options.triggers ?? ["click"];
|
||||
}
|
||||
|
||||
get untriggers() {
|
||||
if (
|
||||
typeof this.options.untriggers === "object" &&
|
||||
!Array.isArray(this.options.untriggers)
|
||||
) {
|
||||
return this.site.mobileView
|
||||
? this.options.untriggers.mobile ?? ["click"]
|
||||
: this.options.untriggers.desktop ?? ["click"];
|
||||
}
|
||||
|
||||
return this.options.untriggers ?? ["click"];
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue