DEV: Convert topic-status to glimmer/gjs (#27536)
Now that discourse-moderator-attention is gone this is safe to change.
This commit is contained in:
Jarek Radosz
GitHub
parent
d845d6febf
commit
dd329d55a5
|
|
@ -0,0 +1,105 @@
|
||||||
|
import Component from "@glimmer/component";
|
||||||
|
import { hash } from "@ember/helper";
|
||||||
|
import { on } from "@ember/modifier";
|
||||||
|
import { action } from "@ember/object";
|
||||||
|
import { service } from "@ember/service";
|
||||||
|
import { and } from "truth-helpers";
|
||||||
|
import PluginOutlet from "discourse/components/plugin-outlet";
|
||||||
|
import icon from "discourse-common/helpers/d-icon";
|
||||||
|
import i18n from "discourse-common/helpers/i18n";
|
||||||
|
|
||||||
|
export default class TopicStatus extends Component {
|
||||||
|
@service currentUser;
|
||||||
|
|
||||||
|
get canAct() {
|
||||||
|
return this.currentUser && !this.args.disableActions;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
togglePinned(e) {
|
||||||
|
const { topic } = this.args;
|
||||||
|
topic.pinned ? topic.clearPin() : topic.rePin();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
<template>
|
||||||
|
{{~! no whitespace ~}}
|
||||||
|
<span class="topic-statuses">
|
||||||
|
{{~#if (and @topic.closed @topic.archived)~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.locked_and_archived.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "lock"}}</span>
|
||||||
|
{{~else if @topic.closed~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.locked.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "lock"}}</span>
|
||||||
|
{{~else if @topic.archived~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.archived.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "lock"}}</span>
|
||||||
|
{{~/if~}}
|
||||||
|
|
||||||
|
{{~#if @topic.is_warning~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.warning.help"}}
|
||||||
|
class="topic-status topic-status-warning"
|
||||||
|
>{{icon "envelope"}}</span>
|
||||||
|
{{~else if (and @showPrivateMessageIcon @topic.isPrivateMessage)~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.personal_message.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "envelope"}}</span>
|
||||||
|
{{~/if~}}
|
||||||
|
|
||||||
|
{{~#if @topic.pinned~}}
|
||||||
|
{{~#if this.canAct~}}
|
||||||
|
<a
|
||||||
|
{{on "click" this.togglePinned}}
|
||||||
|
href
|
||||||
|
title={{i18n "topic_statuses.pinned.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "thumbtack"}}</a>
|
||||||
|
{{~else~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.pinned.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "thumbtack"}}</span>
|
||||||
|
{{~/if~}}
|
||||||
|
{{~else if @topic.unpinned~}}
|
||||||
|
{{~#if this.canAct~}}
|
||||||
|
<a
|
||||||
|
{{on "click" this.togglePinned}}
|
||||||
|
href
|
||||||
|
title={{i18n "topic_statuses.unpinned.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "thumbtack" class="unpinned"}}</a>
|
||||||
|
{{~else~}}
|
||||||
|
<span
|
||||||
|
title={{i18n "topic_statuses.unpinned.help"}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "thumbtack" class="unpinned"}}</span>
|
||||||
|
{{~/if~}}
|
||||||
|
{{~/if~}}
|
||||||
|
|
||||||
|
{{~#if @topic.invisible~}}
|
||||||
|
<span
|
||||||
|
title={{i18n
|
||||||
|
"topic_statuses.unlisted.help"
|
||||||
|
unlistedReason=@topic.visibilityReasonTranslated
|
||||||
|
}}
|
||||||
|
class="topic-status"
|
||||||
|
>{{icon "far-eye-slash"}}</span>
|
||||||
|
{{~/if~}}
|
||||||
|
|
||||||
|
<PluginOutlet
|
||||||
|
@name="after-topic-status"
|
||||||
|
@outletArgs={{hash topic=this.topic}}
|
||||||
|
/>
|
||||||
|
{{~! no whitespace ~}}
|
||||||
|
</span>
|
||||||
|
{{~! no whitespace ~}}
|
||||||
|
</template>
|
||||||
|
}
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
{{~#if this.topicClosedArchived~}}
|
|
||||||
<span
|
|
||||||
title={{this.closedArchivedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.closedArchivedIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.closedIcon~}}
|
|
||||||
<span
|
|
||||||
title={{this.closedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.closedIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.archivedIcon~}}
|
|
||||||
<span
|
|
||||||
title={{this.archivedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.archivedIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.topicPrivateMessage~}}
|
|
||||||
<span
|
|
||||||
title={{this.privateMessageTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.privateMessageIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.topicWarning~}}
|
|
||||||
<span
|
|
||||||
title={{this.warningTitle}}
|
|
||||||
class="topic-status topic-status-warning"
|
|
||||||
>{{this.warningIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.topicPinned~}}
|
|
||||||
{{~#if this.canAct~}}
|
|
||||||
<a
|
|
||||||
href=""
|
|
||||||
title={{this.pinnedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.pinnedIcon}}</a>
|
|
||||||
{{~else~}}
|
|
||||||
<span
|
|
||||||
title={{this.pinnedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.pinnedIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.topicUnpinned~}}
|
|
||||||
{{~#if this.canAct~}}
|
|
||||||
<a
|
|
||||||
href=""
|
|
||||||
title={{this.unpinnedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.unpinnedIcon}}</a>
|
|
||||||
{{~else~}}
|
|
||||||
<span
|
|
||||||
title={{this.unpinnedTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.unpinnedIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
{{~/if~}}
|
|
||||||
{{~#if this.topicInvisible~}}
|
|
||||||
<span
|
|
||||||
title={{this.invisibleTitle}}
|
|
||||||
class="topic-status"
|
|
||||||
>{{this.invisibleIcon}}</span>
|
|
||||||
{{~/if~}}
|
|
||||||
<PluginOutlet
|
|
||||||
@name="after-topic-status"
|
|
||||||
@connectorTagName="div"
|
|
||||||
@outletArgs={{hash topic=this.topic}}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
import Component from "@ember/component";
|
|
||||||
import { htmlSafe } from "@ember/template";
|
|
||||||
import $ from "jquery";
|
|
||||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
||||||
import discourseComputed from "discourse-common/utils/decorators";
|
|
||||||
import I18n from "discourse-i18n";
|
|
||||||
|
|
||||||
export default Component.extend({
|
|
||||||
disableActions: false,
|
|
||||||
|
|
||||||
classNames: ["topic-statuses"],
|
|
||||||
|
|
||||||
click(e) {
|
|
||||||
// only pin unpin for now
|
|
||||||
if (this.canAct && $(e.target).hasClass("d-icon-thumbtack")) {
|
|
||||||
const topic = this.topic;
|
|
||||||
topic.get("pinned") ? topic.clearPin() : topic.rePin();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("disableActions")
|
|
||||||
canAct(disableActions) {
|
|
||||||
return this.currentUser && !disableActions;
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("topic.closed", "topic.archived")
|
|
||||||
topicClosedArchived(closed, archived) {
|
|
||||||
if (closed && archived) {
|
|
||||||
this._set("closedArchived", "lock", "locked_and_archived");
|
|
||||||
this._reset("closed");
|
|
||||||
this._reset("archived");
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
this._reset("closedArchived");
|
|
||||||
closed ? this._set("closed", "lock", "locked") : this._reset("closed");
|
|
||||||
archived
|
|
||||||
? this._set("archived", "lock", "archived")
|
|
||||||
: this._reset("archived");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("topic.is_warning")
|
|
||||||
topicWarning(warning) {
|
|
||||||
return warning
|
|
||||||
? this._set("warning", "envelope", "warning")
|
|
||||||
: this._reset("warning");
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed(
|
|
||||||
"showPrivateMessageIcon",
|
|
||||||
"topic.isPrivateMessage",
|
|
||||||
"topic.is_warning"
|
|
||||||
)
|
|
||||||
topicPrivateMessage(showPrivateMessageIcon, privateMessage, warning) {
|
|
||||||
return showPrivateMessageIcon && privateMessage && !warning
|
|
||||||
? this._set("privateMessage", "envelope", "personal_message")
|
|
||||||
: this._reset("privateMessage");
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("topic.pinned")
|
|
||||||
topicPinned(pinned) {
|
|
||||||
return pinned
|
|
||||||
? this._set("pinned", "thumbtack", "pinned")
|
|
||||||
: this._reset("pinned");
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("topic.unpinned")
|
|
||||||
topicUnpinned(unpinned) {
|
|
||||||
return unpinned
|
|
||||||
? this._set("unpinned", "thumbtack", "unpinned", { class: "unpinned" })
|
|
||||||
: this._reset("unpinned");
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("topic.invisible")
|
|
||||||
topicInvisible(invisible) {
|
|
||||||
return invisible
|
|
||||||
? this._set("invisible", "far-eye-slash", "unlisted")
|
|
||||||
: this._reset("invisible");
|
|
||||||
},
|
|
||||||
|
|
||||||
_set(name, icon, key, iconArgs) {
|
|
||||||
this.set(`${name}Icon`, htmlSafe(iconHTML(`${icon}`, iconArgs)));
|
|
||||||
|
|
||||||
const translationParams = {};
|
|
||||||
|
|
||||||
if (name === "invisible") {
|
|
||||||
translationParams.unlistedReason = this.topic.visibilityReasonTranslated;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.set(
|
|
||||||
`${name}Title`,
|
|
||||||
I18n.t(`topic_statuses.${key}.help`, translationParams)
|
|
||||||
);
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
|
|
||||||
_reset(name) {
|
|
||||||
this.set(`${name}Icon`, null);
|
|
||||||
this.set(`${name}Title`, null);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue