FIX: Admin dashboard tooltips not working on mobile (#29538)
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

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:
Martin Brennan 2024-11-01 12:25:12 +10:00 committed by GitHub
parent 254cf22559
commit 9c17588f6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 63 additions and 2 deletions

View File

@ -18,6 +18,10 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
await triggerEvent(".fk-d-tooltip__trigger", "mousemove"); await triggerEvent(".fk-d-tooltip__trigger", "mousemove");
} }
async function leave() {
await triggerEvent(".fk-d-tooltip__trigger", "mouseleave");
}
async function close() { async function close() {
await triggerKeyEvent(document.activeElement, "keydown", "Escape"); 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(); 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();
});
}); });

View File

@ -29,8 +29,8 @@ export const TOOLTIP = {
maxWidth: 350, maxWidth: 350,
data: null, data: null,
offset: 10, offset: 10,
triggers: ["hover", "click"], triggers: { mobile: ["click"], desktop: ["hover", "click"] },
untriggers: ["hover", "click"], untriggers: { mobile: ["click"], desktop: ["hover", "click"] },
placement: "top", placement: "top",
fallbackPlacements: FLOAT_UI_PLACEMENTS, fallbackPlacements: FLOAT_UI_PLACEMENTS,
autoUpdate: true, autoUpdate: true,

View File

@ -1,6 +1,7 @@
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { cancel } from "@ember/runloop"; import { cancel } from "@ember/runloop";
import { service } from "@ember/service";
import { makeArray } from "discourse-common/lib/helpers"; import { makeArray } from "discourse-common/lib/helpers";
import discourseLater from "discourse-common/lib/later"; import discourseLater from "discourse-common/lib/later";
import { bind } from "discourse-common/utils/decorators"; import { bind } from "discourse-common/utils/decorators";
@ -13,6 +14,8 @@ function cancelEvent(event) {
} }
export default class FloatKitInstance { export default class FloatKitInstance {
@service site;
@tracked id = null; @tracked id = null;
@action @action
@ -197,10 +200,28 @@ export default class FloatKitInstance {
} }
get triggers() { 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"]; return this.options.triggers ?? ["click"];
} }
get untriggers() { 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"]; return this.options.untriggers ?? ["click"];
} }
} }