mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 02:11:08 -06:00
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
105
app/assets/javascripts/discourse/app/components/topic-status.gjs
Normal file
105
app/assets/javascripts/discourse/app/components/topic-status.gjs
Normal file
@ -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
Block a user