Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Make it possible to hide tooltip on the user status (#17808) 

Sometimes status appears on popovers, and we may not want to show a tooltip in that case. But by default, tooltip is enabled.
This commit is contained in:
Andrei Prigorshnev 2022-08-05 16:53:28 +04:00 committed by GitHub
parent 5c37a5d0f2
commit 9f5ba2db90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/components/user-status-message.js
View File

@ -2,8 +2,9 @@ import Component from "@ember/component";
import { computed } from "@ember/object";
import I18n from "I18n";
export default class extends Component {
export default class UserStatusMessage extends Component {
tagName = "";
showTooltip = true;
@computed("status.ends_at")
get until() {

28
app/assets/javascripts/discourse/app/templates/components/user-status-message.hbs
View File

@ -5,17 +5,19 @@
{{@status.description}}
</span>
{{/if}}
<DTooltip>
<div class="user-status-message-tooltip">
{{emoji @status.emoji skipTitle=true}}
<span class="user-status-tooltip-description">
{{@status.description}}
</span>
{{#if this.until}}
<div class="user-status-tooltip-until">
{{this.until}}
</div>
{{/if}}
</div>
</DTooltip>
{{#if this.showTooltip}}
<DTooltip>
<div class="user-status-message-tooltip">
{{emoji @status.emoji skipTitle=true}}
<span class="user-status-tooltip-description">
{{@status.description}}
</span>
{{#if this.until}}
<div class="user-status-tooltip-until">
{{this.until}}
</div>
{{/if}}
</div>
</DTooltip>
{{/if}}
</span>

30
app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js
View File

@ -111,4 +111,34 @@ module("Integration | Component | user-status-message", function (hooks) {
document.querySelector("[data-tippy-root] .user-status-tooltip-until")
);
});
test("it shows tooltip by default", async function (assert) {
this.set("status", {
emoji: "tooth",
description: "off to dentist",
});
await render(hbs`<UserStatusMessage @status={{this.status}} />`);
await mouseenter();
assert.ok(
document.querySelector("[data-tippy-root] .user-status-message-tooltip")
);
});
test("it doesn't show tooltip if disabled", async function (assert) {
this.set("status", {
emoji: "tooth",
description: "off to dentist",
});
await render(
hbs`<UserStatusMessage @status={{this.status}} @showTooltip={{false}} />`
);
await mouseenter();
assert.notOk(
document.querySelector("[data-tippy-root] .user-status-message-tooltip")
);
});
});