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 { computed } from "@ember/object";
import I18n from "I18n"; import I18n from "I18n";
export default class extends Component { export default class UserStatusMessage extends Component {
tagName = ""; tagName = "";
showTooltip = true;
@computed("status.ends_at") @computed("status.ends_at")
get until() { get until() {

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

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