import {
colorList,
getCommentParentId,
+ getRoleLabelPill,
myAuth,
myAuthRequired,
showScores,
classes="icon-inline"
/>
</button>
+
<span className="me-2">
<PersonListing person={cv.creator} />
</span>
+
{cv.comment.distinguished && (
<Icon icon="shield" inline classes="text-danger me-2" />
)}
- {this.isPostCreator && (
- <div className="badge text-bg-light d-none d-sm-inline me-2">
- {I18NextService.i18n.t("creator")}
- </div>
- )}
- {isMod_ && (
- <div className="badge text-bg-light d-none d-sm-inline me-2">
- {I18NextService.i18n.t("mod")}
- </div>
- )}
- {isAdmin_ && (
- <div className="badge text-bg-light d-none d-sm-inline me-2">
- {I18NextService.i18n.t("admin")}
- </div>
- )}
- {cv.creator.bot_account && (
- <div className="badge text-bg-light d-none d-sm-inline me-2">
- {I18NextService.i18n.t("bot_account").toLowerCase()}
- </div>
- )}
+
+ {this.isPostCreator &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("op").toUpperCase(),
+ tooltip: I18NextService.i18n.t("creator"),
+ classes: "text-bg-info",
+ shrink: false,
+ })}
+
+ {isMod_ &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("mod"),
+ tooltip: I18NextService.i18n.t("mod"),
+ classes: "text-bg-primary",
+ })}
+
+ {isAdmin_ &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("admin"),
+ tooltip: I18NextService.i18n.t("admin"),
+ classes: "text-bg-danger",
+ })}
+
+ {cv.creator.bot_account &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("bot_account").toLowerCase(),
+ tooltip: I18NextService.i18n.t("bot_account"),
+ })}
+
{this.props.showCommunity && (
<>
<span className="mx-1">{I18NextService.i18n.t("to")}</span>
</Link>
</>
)}
- {this.linkBtn(true)}
+
+ {this.getLinkButton(true)}
+
{cv.comment.language_id !== 0 && (
<span className="badge text-bg-light d-none d-sm-inline me-2">
{
/>
)}
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
- {this.props.showContext && this.linkBtn()}
+ {this.props.showContext && this.getLinkButton()}
{this.props.markable && (
<button
className="btn btn-link btn-animate text-muted"
}
}
- linkBtn(small = false) {
+ getLinkButton(small = false) {
const cv = this.commentView;
const classnames = classNames("btn btn-link btn-animate text-muted", {
<div className="mb-3 row">
<div className="col-12">
<div className="rounded bg-light border">
- <div className="d-flex flex-wrap border-bottom">
+ <div
+ className={classNames("d-flex flex-wrap border-bottom", {
+ "no-click": this.isDisabled,
+ })}
+ >
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)}
- disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted fw-bold">
<label
name="file"
className="d-none"
multiple
- disabled={
- !UserService.Instance.myUserInfo || this.isDisabled
- }
+ disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
data-tippy-content={I18NextService.i18n.t(type)}
aria-label={I18NextService.i18n.t(type)}
onClick={linkEvent(this, handleClick)}
- disabled={this.isDisabled}
>
<Icon icon={iconType} classes="icon-inline" />
</button>
subscribe() {
const community_view = this.props.community_view;
return (
- <>
- {community_view.subscribed == "NotSubscribed" && (
- <button
- className="btn btn-secondary d-block mb-2 w-100"
- onClick={linkEvent(this, this.handleFollowCommunity)}
- >
- {this.state.followCommunityLoading ? (
- <Spinner />
- ) : (
- I18NextService.i18n.t("subscribe")
- )}
- </button>
- )}
- </>
+ community_view.subscribed === "NotSubscribed" && (
+ <button
+ className="btn btn-secondary d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleFollowCommunity)}
+ >
+ {this.state.followCommunityLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("subscribe")
+ )}
+ </button>
+ )
);
}
const { subscribed, blocked } = this.props.community_view;
return (
- <>
- {subscribed == "NotSubscribed" && (
- <button
- className="btn btn-danger d-block mb-2 w-100"
- onClick={linkEvent(this, this.handleBlockCommunity)}
- >
- {I18NextService.i18n.t(
- blocked ? "unblock_community" : "block_community"
- )}
- </button>
- )}
- </>
+ subscribed === "NotSubscribed" && (
+ <button
+ className="btn btn-danger d-block mb-2 w-100"
+ onClick={linkEvent(this, this.handleBlockCommunity)}
+ >
+ {I18NextService.i18n.t(
+ blocked ? "unblock_community" : "block_community"
+ )}
+ </button>
+ )
);
}
enableDownvotes,
enableNsfw,
getCommentParentId,
+ getRoleLabelPill,
myAuth,
myAuthRequired,
setIsoData,
/>
</li>
{isBanned(pv.person) && (
- <li className="list-inline-item badge text-bg-danger">
- {I18NextService.i18n.t("banned")}
+ <li className="list-inline-item">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("banned"),
+ tooltip: I18NextService.i18n.t("banned"),
+ classes: "text-bg-danger",
+ shrink: false,
+ })}
</li>
)}
{pv.person.deleted && (
- <li className="list-inline-item badge text-bg-danger">
- {I18NextService.i18n.t("deleted")}
+ <li className="list-inline-item">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("deleted"),
+ tooltip: I18NextService.i18n.t("deleted"),
+ classes: "text-bg-danger",
+ shrink: false,
+ })}
</li>
)}
{pv.person.admin && (
- <li className="list-inline-item badge text-bg-light">
- {I18NextService.i18n.t("admin")}
+ <li className="list-inline-item">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("admin"),
+ tooltip: I18NextService.i18n.t("admin"),
+ shrink: false,
+ })}
</li>
)}
{pv.person.bot_account && (
- <li className="list-inline-item badge text-bg-light">
- {I18NextService.i18n.t("bot_account").toLowerCase()}
+ <li className="list-inline-item">
+ {getRoleLabelPill({
+ label: I18NextService.i18n
+ .t("bot_account")
+ .toLowerCase(),
+ tooltip: I18NextService.i18n.t("bot_account"),
+ shrink: false,
+ })}
</li>
)}
</ul>
-import { myAuthRequired } from "@utils/app";
+import { getRoleLabelPill, myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return (
- <a
- href={this.imageSrc}
- className="text-body d-inline-block position-relative mb-2"
+ <button
+ type="button"
+ className="d-inline-block position-relative mb-2 p-0 border-0"
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
>
{this.imgThumb(this.imageSrc)}
- <Icon icon="image" classes="mini-overlay" />
- </a>
+ <Icon
+ icon="image"
+ classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
+ />
+ </button>
);
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
return (
title={url}
>
{this.imgThumb(this.imageSrc)}
- <Icon icon="external-link" classes="mini-overlay" />
+ <Icon
+ icon="external-link"
+ classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
+ />
</a>
);
} else if (url) {
createdLine() {
const post_view = this.postView;
return (
- <span className="small">
- <PersonListing person={post_view.creator} />
- {this.creatorIsMod_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("mod")}
- </span>
- )}
- {this.creatorIsAdmin_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("admin")}
- </span>
- )}
- {post_view.creator.bot_account && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("bot_account").toLowerCase()}
- </span>
- )}
+ <div className="small">
+ <span className="me-1">
+ <PersonListing person={post_view.creator} />
+ </span>
+ {this.creatorIsMod_ &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("mod"),
+ tooltip: I18NextService.i18n.t("mod"),
+ classes: "text-bg-primary",
+ })}
+ {this.creatorIsAdmin_ &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("admin"),
+ tooltip: I18NextService.i18n.t("admin"),
+ classes: "text-bg-danger",
+ })}
+ {post_view.creator.bot_account &&
+ getRoleLabelPill({
+ label: I18NextService.i18n.t("bot_account").toLowerCase(),
+ tooltip: I18NextService.i18n.t("bot_account"),
+ })}
{this.props.showCommunity && (
<>
{" "}
published={post_view.post.published}
updated={post_view.post.updated}
/>
- </span>
+ </div>
);
}
--- /dev/null
+export default function getRoleLabelPill({
+ label,
+ tooltip,
+ classes,
+ shrink = true,
+}: {
+ label: string;
+ tooltip: string;
+ classes?: string;
+ shrink?: boolean;
+}) {
+ return (
+ <span
+ className={`badge me-1 ${classes ?? "text-bg-light"}`}
+ aria-label={tooltip}
+ data-tippy-content={tooltip}
+ >
+ {shrink ? label[0].toUpperCase() : label}
+ </span>
+ );
+}
import getDepthFromComment from "./get-depth-from-comment";
import getIdFromProps from "./get-id-from-props";
import getRecipientIdFromProps from "./get-recipient-id-from-props";
+import getRoleLabelPill from "./get-role-label-pill";
import getUpdatedSearchId from "./get-updated-search-id";
import initializeSite from "./initialize-site";
import insertCommentIntoTree from "./insert-comment-into-tree";
getDepthFromComment,
getIdFromProps,
getRecipientIdFromProps,
+ getRoleLabelPill,
getUpdatedSearchId,
getUserInterfaceLangId,
initializeSite,