+import { myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
+import { getExternalHost, getHttpBase } from "@utils/env";
+import {
+ capitalizeFirstLetter,
+ futureDaysToUnixTime,
+ hostname,
+} from "@utils/helpers";
+import { isImage, isVideo } from "@utils/media";
import {
amAdmin,
amCommunityCreator,
SavePost,
TransferCommunity,
} from "lemmy-js-client";
-import { getExternalHost, getHttpBase } from "../../env";
-import { i18n } from "../../i18next";
-import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
-import { UserService } from "../../services";
+import { relTags } from "../../config";
import {
- futureDaysToUnixTime,
- hostname,
- isImage,
- isVideo,
- mdNoImages,
- mdToHtml,
- mdToHtmlInline,
- myAuthRequired,
- newVote,
- numToSI,
- relTags,
- setupTippy,
- showScores,
-} from "../../utils";
+ BanType,
+ PostFormParams,
+ PurgeType,
+ VoteContentType,
+} from "../../interfaces";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
+import { I18NextService, UserService } from "../../services";
+import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { PictrsImage } from "../common/pictrs-image";
+import { UserBadges } from "../common/user-badges";
+import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing";
import { MetadataCard } from "./metadata-card";
showBody: boolean;
showReportDialog: boolean;
reportReason?: string;
- upvoteLoading: boolean;
- downvoteLoading: boolean;
reportLoading: boolean;
blockLoading: boolean;
lockLoading: boolean;
allLanguages: Language[];
siteLanguages: number[];
showCommunity?: boolean;
+ /**
+ * Controls whether to show both the body *and* the metadata preview card
+ */
showBody?: boolean;
hideImage?: boolean;
enableDownvotes?: boolean;
showMoreMobile: false,
showBody: false,
showReportDialog: false,
- upvoteLoading: false,
- downvoteLoading: false,
purgeLoading: false,
reportLoading: false,
blockLoading: false,
componentWillReceiveProps(nextProps: PostListingProps) {
if (this.props !== nextProps) {
this.setState({
- upvoteLoading: false,
- downvoteLoading: false,
purgeLoading: false,
reportLoading: false,
blockLoading: false,
addModLoading: false,
addAdminLoading: false,
transferLoading: false,
- imageExpanded: false,
});
}
}
<>
{this.listing()}
{this.state.imageExpanded && !this.props.hideImage && this.img}
- {post.url && this.state.showBody && post.embed_title && (
+ {this.showBody && post.url && post.embed_title && (
<MetadataCard post={post} />
)}
{this.showBody && this.body()}
}
get img() {
- return this.imageSrc ? (
- <>
- <div className="offset-sm-3 my-2 d-none d-sm-block">
- <a href={this.imageSrc} className="d-inline-block">
- <PictrsImage src={this.imageSrc} />
- </a>
+ if (this.imageSrc) {
+ return (
+ <>
+ <div className="offset-sm-3 my-2 d-none d-sm-block">
+ <a href={this.imageSrc} className="d-inline-block">
+ <PictrsImage src={this.imageSrc} />
+ </a>
+ </div>
+ <div className="my-2 d-block d-sm-none">
+ <button
+ type="button"
+ className="p-0 border-0 bg-transparent d-inline-block"
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ >
+ <PictrsImage src={this.imageSrc} />
+ </button>
+ </div>
+ </>
+ );
+ }
+
+ const { post } = this.postView;
+ const { url } = post;
+
+ // if direct video link
+ if (url && isVideo(url)) {
+ return (
+ <div className="embed-responsive mt-3">
+ <video muted controls className="embed-responsive-item col-12">
+ <source src={url} type="video/mp4" />
+ </video>
</div>
- <div className="my-2 d-block d-sm-none">
- <a
- className="d-inline-block"
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <PictrsImage src={this.imageSrc} />
- </a>
+ );
+ }
+
+ // if embedded video link
+ if (url && post.embed_video_url) {
+ return (
+ <div className="ratio ratio-16x9">
+ <iframe
+ allowFullScreen
+ className="post-metadata-iframe"
+ src={post.embed_video_url}
+ title={post.embed_title}
+ ></iframe>
</div>
- </>
- ) : (
- <></>
- );
+ );
+ }
+
+ return <></>;
}
imgThumb(src: string) {
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return (
- <a
- href={this.imageSrc}
- className="text-body d-inline-block position-relative mb-2"
- data-tippy-content={i18n.t("expand_here")}
+ <button
+ type="button"
+ className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0 bg-transparent"
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
- aria-label={i18n.t("expand_here")}
+ 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 (
<a
- className="text-body d-inline-block position-relative mb-2"
+ className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
href={url}
rel={relTags}
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) {
- if (!this.props.hideImage && isVideo(url)) {
+ if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
return (
- <div className="embed-responsive embed-responsive-16by9">
- <video
- playsInline
- muted
- loop
- controls
- className="embed-responsive-item"
- >
- <source src={url} type="video/mp4" />
- </video>
- </div>
+ <a
+ className="text-body"
+ href={url}
+ title={url}
+ rel={relTags}
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ aria-label={I18NextService.i18n.t("expand_here")}
+ >
+ <div className="thumbnail rounded bg-light d-flex justify-content-center">
+ <Icon icon="play" classes="d-flex align-items-center" />
+ </div>
+ </a>
);
} else {
return (
<Link
className="text-body"
to={`/post/${post.id}`}
- title={i18n.t("comments")}
+ title={I18NextService.i18n.t("comments")}
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="message-square" classes="d-flex align-items-center" />
createdLine() {
const post_view = this.postView;
- return (
- <ul className="list-inline mb-1 text-muted small mt-2">
- <li className="list-inline-item">
- <PersonListing person={post_view.creator} />
- {this.creatorIsMod_ && (
- <span className="mx-1 badge">{i18n.t("mod")}</span>
- )}
- {this.creatorIsAdmin_ && (
- <span className="mx-1 badge">{i18n.t("admin")}</span>
- )}
- {post_view.creator.bot_account && (
- <span className="mx-1 badge">
- {i18n.t("bot_account").toLowerCase()}
- </span>
- )}
- {this.props.showCommunity && (
- <>
- {" "}
- {i18n.t("to")} <CommunityLink community={post_view.community} />
- </>
- )}
- </li>
+ return (
+ <div className="small mb-1 mb-md-0">
+ <PersonListing person={post_view.creator} />
+ <UserBadges
+ classNames="ms-1"
+ isMod={this.creatorIsMod_}
+ isAdmin={this.creatorIsAdmin_}
+ isBot={post_view.creator.bot_account}
+ />
+ {this.props.showCommunity && (
+ <>
+ {" "}
+ {I18NextService.i18n.t("to")}{" "}
+ <CommunityLink community={post_view.community} />
+ </>
+ )}
{post_view.post.language_id !== 0 && (
- <span className="mx-1 badge">
+ <span className="mx-1 badge text-bg-light">
{
this.props.allLanguages.find(
lang => lang.id === post_view.post.language_id
)?.name
}
</span>
- )}
- <li className="list-inline-item">•</li>
- <li className="list-inline-item">
- <span>
- <MomentTime
- published={post_view.post.published}
- updated={post_view.post.updated}
- />
- </span>
- </li>
- </ul>
- );
- }
-
- voteBar() {
- return (
- <div className={`vote-bar col-1 pr-0 small text-center`}>
- <button
- className={`btn-animate btn btn-link p-0 ${
- this.postView.my_vote == 1 ? "text-info" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleUpvote)}
- data-tippy-content={i18n.t("upvote")}
- aria-label={i18n.t("upvote")}
- aria-pressed={this.postView.my_vote === 1}
- >
- {this.state.upvoteLoading ? (
- <Spinner />
- ) : (
- <Icon icon="arrow-up1" classes="upvote" />
- )}
- </button>
- {showScores() ? (
- <div
- className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
- data-tippy-content={this.pointsTippy}
- >
- {numToSI(this.postView.counts.score)}
- </div>
- ) : (
- <div className="p-1"></div>
- )}
- {this.props.enableDownvotes && (
- <button
- className={`btn-animate btn btn-link p-0 ${
- this.postView.my_vote == -1 ? "text-danger" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleDownvote)}
- data-tippy-content={i18n.t("downvote")}
- aria-label={i18n.t("downvote")}
- aria-pressed={this.postView.my_vote === -1}
- >
- {this.state.downvoteLoading ? (
- <Spinner />
- ) : (
- <Icon icon="arrow-down1" classes="downvote" />
- )}
- </button>
- )}
+ )}{" "}
+ •{" "}
+ <MomentTime
+ published={post_view.post.published}
+ updated={post_view.post.updated}
+ />
</div>
);
}
<Link
className={`d-inline ${
!post.featured_community && !post.featured_local
- ? "text-body"
- : "text-primary"
+ ? "link-dark"
+ : "link-primary"
}`}
to={`/post/${post.id}`}
- title={i18n.t("comments")}
+ title={I18NextService.i18n.t("comments")}
>
<span
className="d-inline"
<a
className={
!post.featured_community && !post.featured_local
- ? "text-body"
- : "text-primary"
+ ? "link-dark"
+ : "link-primary"
}
href={url}
title={url}
this.postLink
)}
</h5>
- {(url && isImage(url)) ||
- (post.thumbnail_url && (
- <button
- className="btn btn-link text-monospace text-muted small d-inline-block"
- data-tippy-content={i18n.t("expand_here")}
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <Icon
- icon={
- !this.state.imageExpanded ? "plus-square" : "minus-square"
- }
- classes="icon-inline"
- />
- </button>
- ))}
+
+ {/**
+ * If there is a URL, an embed title, and we were not told to show the
+ * body by the parent component, show the MetadataCard/body toggle.
+ */}
+ {!this.props.showBody &&
+ post.url &&
+ post.embed_title &&
+ this.showPreviewButton()}
+
{post.removed && (
- <small className="ml-2 badge text-bg-secondary">
- {i18n.t("removed")}
+ <small className="ms-2 badge text-bg-secondary">
+ {I18NextService.i18n.t("removed")}
</small>
)}
+
{post.deleted && (
<small
- className="unselectable pointer ml-2 text-muted font-italic"
- data-tippy-content={i18n.t("deleted")}
+ className="unselectable pointer ms-2 text-muted fst-italic"
+ data-tippy-content={I18NextService.i18n.t("deleted")}
>
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
)}
+
{post.locked && (
<small
- className="unselectable pointer ml-2 text-muted font-italic"
- data-tippy-content={i18n.t("locked")}
+ className="unselectable pointer ms-2 text-muted fst-italic"
+ data-tippy-content={I18NextService.i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
+
{post.featured_community && (
<small
- className="unselectable pointer ml-2 text-muted font-italic"
- data-tippy-content={i18n.t("featured_in_community")}
- aria-label={i18n.t("featured_in_community")}
+ className="unselectable pointer ms-2 text-muted fst-italic"
+ data-tippy-content={I18NextService.i18n.t(
+ "featured_in_community"
+ )}
+ aria-label={I18NextService.i18n.t("featured_in_community")}
>
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
+
{post.featured_local && (
<small
- className="unselectable pointer ml-2 text-muted font-italic"
- data-tippy-content={i18n.t("featured_in_local")}
- aria-label={i18n.t("featured_in_local")}
+ className="unselectable pointer ms-2 text-muted fst-italic"
+ data-tippy-content={I18NextService.i18n.t("featured_in_local")}
+ aria-label={I18NextService.i18n.t("featured_in_local")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
+
{post.nsfw && (
- <small className="ml-2 badge text-bg-danger">
- {i18n.t("nsfw")}
+ <small className="ms-2 badge text-bg-danger">
+ {I18NextService.i18n.t("nsfw")}
</small>
)}
</div>
const url = post.url;
return (
- <p className="d-flex text-muted align-items-center gap-1 small m-0">
+ <p className="small m-0">
{url && !(hostname(url) === getExternalHost()) && (
<a
- className="text-muted font-italic"
+ className="fst-italic link-dark link-opacity-75 link-opacity-100-hover"
href={url}
title={url}
rel={relTags}
return dupes && dupes.length > 0 ? (
<ul className="list-inline mb-1 small text-muted">
<>
- <li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
+ <li className="list-inline-item me-2">
+ {I18NextService.i18n.t("cross_posted_to")}
+ </li>
{dupes.map(pv => (
- <li key={pv.post.id} className="list-inline-item mr-2">
+ <li key={pv.post.id} className="list-inline-item me-2">
<Link to={`/post/${pv.post.id}`}>
{pv.community.local
? pv.community.name
const post = this.postView.post;
return (
- <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold">
+ <div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
{this.commentsButton}
{canShare() && (
<button
- className="btn btn-sm btn-link"
+ className="btn btn-sm btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShare)}
type="button"
>
)}
{!post.local && (
<a
- className="btn btn-link btn-animate text-muted py-0"
- title={i18n.t("link")}
+ className="btn btn-sm btn-animate text-muted py-0"
+ title={I18NextService.i18n.t("link")}
href={post.ap_id}
>
<Icon icon="fedilink" inline />
</a>
)}
- {mobile && !this.props.viewOnly && this.mobileVotes}
+ {mobile && !this.props.viewOnly && (
+ <VoteButtonsCompact
+ voteContentType={VoteContentType.Post}
+ id={this.postView.post.id}
+ onVote={this.props.onPostVote}
+ enableDownvotes={this.props.enableDownvotes}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ )}
{UserService.Instance.myUserInfo &&
!this.props.viewOnly &&
this.postActions()}
);
}
- showPreviewButton() {
- const post_view = this.postView;
- const body = post_view.post.body;
-
- return (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- data-tippy-content={body && mdNoImages.render(body)}
- data-tippy-allowHtml={true}
- onClick={linkEvent(this, this.handleShowBody)}
- >
- <Icon
- icon="book-open"
- classes={classNames("icon-inline mr-1", {
- "text-success": this.state.showBody,
- })}
- />
- </button>
- );
- }
-
postActions() {
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component.
{this.saveButton}
{this.crossPostButton}
- {/**
- * If there is a URL, or if the post has a body and we were told not to
- * show the body, show the MetadataCard/body toggle.
- */}
- {(post.url || (post.body && !this.props.showBody)) &&
- this.showPreviewButton()}
-
- {this.showBody && post_view.post.body && this.viewSourceButton}
+ {this.props.showBody && post_view.post.body && this.viewSourceButton}
<div className="dropdown">
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
+ className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
onClick={linkEvent(this, this.handleShowAdvanced)}
- data-tippy-content={i18n.t("more")}
+ data-tippy-content={I18NextService.i18n.t("more")}
data-bs-toggle="dropdown"
aria-expanded="false"
- aria-controls="advancedButtonsDropdown"
- aria-label={i18n.t("more")}
+ aria-controls={`advancedButtonsDropdown${post.id}`}
+ aria-label={I18NextService.i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
- <ul className="dropdown-menu" id="advancedButtonsDropdown">
+ <ul
+ className="dropdown-menu"
+ id={`advancedButtonsDropdown${post.id}`}
+ >
{!this.myPost ? (
<>
<li>{this.reportButton}</li>
{(this.canMod_ || this.canAdmin_) && (
<li>{this.modRemoveButton}</li>
)}
+
+ {this.canMod_ && (
+ <>
+ <li>
+ <hr className="dropdown-divider" />
+ </li>
+ {!this.creatorIsMod_ &&
+ (!post_view.creator_banned_from_community ? (
+ <li>{this.modBanFromCommunityButton}</li>
+ ) : (
+ <li>{this.modUnbanFromCommunityButton}</li>
+ ))}
+ {!post_view.creator_banned_from_community && (
+ <li>{this.addModToCommunityButton}</li>
+ )}
+ </>
+ )}
+
+ {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
+ this.canAdmin_) &&
+ this.creatorIsMod_ && <li>{this.transferCommunityButton}</li>}
+
+ {/* Admins can ban from all, and appoint other admins */}
+ {this.canAdmin_ && (
+ <>
+ <li>
+ <hr className="dropdown-divider" />
+ </li>
+ {!this.creatorIsAdmin_ && (
+ <>
+ {!isBanned(post_view.creator) ? (
+ <li>{this.modBanButton}</li>
+ ) : (
+ <li>{this.modUnbanButton}</li>
+ )}
+ <li>{this.purgePersonButton}</li>
+ <li>{this.purgePostButton}</li>
+ </>
+ )}
+ {!isBanned(post_view.creator) && post_view.creator.local && (
+ <li>{this.toggleAdminButton}</li>
+ )}
+ </>
+ )}
</ul>
</div>
</>
get commentsButton() {
const post_view = this.postView;
+ const title = I18NextService.i18n.t("number_of_comments", {
+ count: Number(post_view.counts.comments),
+ formattedCount: Number(post_view.counts.comments),
+ });
+
return (
<Link
- className="btn btn-link text-muted pl-0 text-muted"
- title={i18n.t("number_of_comments", {
- count: Number(post_view.counts.comments),
- formattedCount: Number(post_view.counts.comments),
- })}
+ className="btn btn-link btn-sm text-muted ps-0"
+ title={title}
to={`/post/${post_view.post.id}?scrollToComments=true`}
+ data-tippy-content={title}
>
- <Icon icon="message-square" classes="mr-1" inline />
- <span className="mr-2">
- {i18n.t("number_of_comments", {
- count: Number(post_view.counts.comments),
- formattedCount: numToSI(post_view.counts.comments),
- })}
- </span>
+ <Icon icon="message-square" classes="me-1" inline />
+ {post_view.counts.comments}
{this.unreadCount && (
- <span className="small text-warning">
- ({this.unreadCount} {i18n.t("new")})
- </span>
+ <>
+ {" "}
+ <span className="fst-italic">
+ ({this.unreadCount} {I18NextService.i18n.t("new")})
+ </span>
+ </>
)}
</Link>
);
: pv.unread_comments;
}
- get mobileVotes() {
- // TODO: make nicer
- const tippy = showScores()
- ? { "data-tippy-content": this.pointsTippy }
- : {};
- return (
- <>
- <div>
- <button
- className={`btn-animate btn py-0 px-1 ${
- this.postView.my_vote === 1 ? "text-info" : "text-muted"
- }`}
- {...tippy}
- onClick={linkEvent(this, this.handleUpvote)}
- aria-label={i18n.t("upvote")}
- aria-pressed={this.postView.my_vote === 1}
- >
- {this.state.upvoteLoading ? (
- <Spinner />
- ) : (
- <>
- <Icon icon="arrow-up1" classes="icon-inline small" />
- {showScores() && (
- <span className="ml-2">
- {numToSI(this.postView.counts.upvotes)}
- </span>
- )}
- </>
- )}
- </button>
- {this.props.enableDownvotes && (
- <button
- className={`ml-2 btn-animate btn py-0 px-1 ${
- this.postView.my_vote === -1 ? "text-danger" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleDownvote)}
- {...tippy}
- aria-label={i18n.t("downvote")}
- aria-pressed={this.postView.my_vote === -1}
- >
- {this.state.downvoteLoading ? (
- <Spinner />
- ) : (
- <>
- <Icon icon="arrow-down1" classes="icon-inline small" />
- {showScores() && (
- <span
- className={classNames("ml-2", {
- invisible: this.postView.counts.downvotes === 0,
- })}
- >
- {numToSI(this.postView.counts.downvotes)}
- </span>
- )}
- </>
- )}
- </button>
- )}
- </div>
- </>
- );
- }
-
get saveButton() {
const saved = this.postView.saved;
- const label = saved ? i18n.t("unsave") : i18n.t("save");
+ const label = saved
+ ? I18NextService.i18n.t("unsave")
+ : I18NextService.i18n.t("save");
return (
<button
- className="btn btn-link btn-animate text-muted py-0"
+ className="btn btn-sm btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleSavePostClick)}
data-tippy-content={label}
aria-label={label}
get crossPostButton() {
return (
<Link
- className="btn btn-link btn-animate text-muted py-0"
+ className="btn btn-sm btn-animate text-muted py-0"
to={{
/* Empty string properties are required to satisfy type*/
pathname: "/create_post",
key: "",
search: "",
}}
- title={i18n.t("cross_post")}
- data-tippy-content={i18n.t("cross_post")}
- aria-label={i18n.t("cross_post")}
+ title={I18NextService.i18n.t("cross_post")}
+ data-tippy-content={I18NextService.i18n.t("cross_post")}
+ aria-label={I18NextService.i18n.t("cross_post")}
>
<Icon icon="copy" inline />
</Link>
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleShowReportDialog)}
- aria-label={i18n.t("show_report_dialog")}
+ aria-label={I18NextService.i18n.t("show_report_dialog")}
>
- <Icon classes="mr-1" icon="flag" inline />
- {i18n.t("create_report")}
+ <Icon classes="me-1" icon="flag" inline />
+ {I18NextService.i18n.t("create_report")}
</button>
);
}
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleBlockPersonClick)}
- aria-label={i18n.t("block_user")}
+ aria-label={I18NextService.i18n.t("block_user")}
>
{this.state.blockLoading ? (
<Spinner />
) : (
- <Icon classes="mr-1" icon="slash" inline />
+ <Icon classes="me-1" icon="slash" inline />
)}
- {i18n.t("block_user")}
+ {I18NextService.i18n.t("block_user")}
</button>
);
}
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleEditClick)}
- aria-label={i18n.t("edit")}
+ aria-label={I18NextService.i18n.t("edit")}
>
- <Icon classes="mr-1" icon="edit" inline />
- {i18n.t("edit")}
+ <Icon classes="me-1" icon="edit" inline />
+ {I18NextService.i18n.t("edit")}
</button>
);
}
get deleteButton() {
const deleted = this.postView.post.deleted;
- const label = !deleted ? i18n.t("delete") : i18n.t("restore");
+ const label = !deleted
+ ? I18NextService.i18n.t("delete")
+ : I18NextService.i18n.t("restore");
return (
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleDeleteClick)}
- aria-label={label}
>
{this.state.deleteLoading ? (
<Spinner />
<>
<Icon
icon="trash"
- classes={classNames("mr-1", { "text-danger": deleted })}
+ classes={classNames("me-1", { "text-danger": deleted })}
inline
/>
{label}
get viewSourceButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0"
+ className="btn btn-sm btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleViewSource)}
- data-tippy-content={i18n.t("view_source")}
- aria-label={i18n.t("view_source")}
+ data-tippy-content={I18NextService.i18n.t("view_source")}
+ aria-label={I18NextService.i18n.t("view_source")}
>
<Icon
icon="file-text"
get lockButton() {
const locked = this.postView.post.locked;
- const label = locked ? i18n.t("unlock") : i18n.t("lock");
+ const label = locked
+ ? I18NextService.i18n.t("unlock")
+ : I18NextService.i18n.t("lock");
return (
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
<>
<Icon
icon="lock"
- classes={classNames("mr-1", { "text-danger": locked })}
+ classes={classNames("me-1", { "text-danger": locked })}
inline
/>
- {label}
+ {capitalizeFirstLetter(label)}
</>
)}
</button>
get featureButtons() {
const featuredCommunity = this.postView.post.featured_community;
const labelCommunity = featuredCommunity
- ? i18n.t("unfeature_from_community")
- : i18n.t("feature_in_community");
+ ? I18NextService.i18n.t("unfeature_from_community")
+ : I18NextService.i18n.t("feature_in_community");
const featuredLocal = this.postView.post.featured_local;
const labelLocal = featuredLocal
- ? i18n.t("unfeature_from_local")
- : i18n.t("feature_in_local");
+ ? I18NextService.i18n.t("unfeature_from_local")
+ : I18NextService.i18n.t("feature_in_local");
return (
<>
<li>
<>
<Icon
icon="pin"
- classes={classNames("mr-1", {
+ classes={classNames("me-1", {
"text-success": featuredCommunity,
})}
inline
/>
- {i18n.t("community")}
+ {I18NextService.i18n.t("community")}
</>
)}
</button>
<>
<Icon
icon="pin"
- classes={classNames("mr-1", {
+ classes={classNames("me-1", {
"text-success": featuredLocal,
})}
inline
/>
- {i18n.t("local")}
+ {I18NextService.i18n.t("local")}
</>
)}
</button>
);
}
+ get modBanFromCommunityButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleModBanFromCommunityShow)}
+ >
+ {I18NextService.i18n.t("ban_from_community")}
+ </button>
+ );
+ }
+
+ get modUnbanFromCommunityButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}
+ >
+ {this.state.banLoading ? <Spinner /> : I18NextService.i18n.t("unban")}
+ </button>
+ );
+ }
+
+ get addModToCommunityButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleAddModToCommunity)}
+ >
+ {this.state.addModLoading ? (
+ <Spinner />
+ ) : this.creatorIsMod_ ? (
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_as_mod"))
+ ) : (
+ capitalizeFirstLetter(I18NextService.i18n.t("appoint_as_mod"))
+ )}
+ </button>
+ );
+ }
+
+ get modBanButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleModBanShow)}
+ >
+ {capitalizeFirstLetter(I18NextService.i18n.t("ban_from_site"))}
+ </button>
+ );
+ }
+
+ get modUnbanButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleModBanSubmit)}
+ >
+ {this.state.banLoading ? (
+ <Spinner />
+ ) : (
+ capitalizeFirstLetter(I18NextService.i18n.t("unban_from_site"))
+ )}
+ </button>
+ );
+ }
+
+ get purgePersonButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handlePurgePersonShow)}
+ >
+ {capitalizeFirstLetter(I18NextService.i18n.t("purge_user"))}
+ </button>
+ );
+ }
+
+ get purgePostButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handlePurgePostShow)}
+ >
+ {capitalizeFirstLetter(I18NextService.i18n.t("purge_post"))}
+ </button>
+ );
+ }
+
+ get toggleAdminButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleAddAdmin)}
+ >
+ {this.state.addAdminLoading ? (
+ <Spinner />
+ ) : this.creatorIsAdmin_ ? (
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_as_admin"))
+ ) : (
+ capitalizeFirstLetter(I18NextService.i18n.t("appoint_as_admin"))
+ )}
+ </button>
+ );
+ }
+
+ get transferCommunityButton() {
+ return (
+ <button
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+ onClick={linkEvent(this, this.handleShowConfirmTransferCommunity)}
+ >
+ {capitalizeFirstLetter(I18NextService.i18n.t("transfer_community"))}
+ </button>
+ );
+ }
+
get modRemoveButton() {
const removed = this.postView.post.removed;
return (
{this.state.removeLoading ? (
<Spinner />
) : !removed ? (
- i18n.t("remove")
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_post"))
) : (
- i18n.t("restore")
+ <>
+ {capitalizeFirstLetter(I18NextService.i18n.t("restore"))}{" "}
+ {I18NextService.i18n.t("post")}
+ </>
)}
</button>
);
}
- /**
- * Mod/Admin actions to be taken against the author.
- */
- userActionsLine() {
- // TODO: make nicer
- const post_view = this.postView;
- return (
- this.state.showAdvanced && (
- <>
- {this.canMod_ && (
- <>
- {!this.creatorIsMod_ &&
- (!post_view.creator_banned_from_community ? (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(
- this,
- this.handleModBanFromCommunityShow
- )}
- aria-label={i18n.t("ban_from_community")}
- >
- {i18n.t("ban_from_community")}
- </button>
- ) : (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(
- this,
- this.handleModBanFromCommunitySubmit
- )}
- aria-label={i18n.t("unban")}
- >
- {this.state.banLoading ? <Spinner /> : i18n.t("unban")}
- </button>
- ))}
- {!post_view.creator_banned_from_community && (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handleAddModToCommunity)}
- aria-label={
- this.creatorIsMod_
- ? i18n.t("remove_as_mod")
- : i18n.t("appoint_as_mod")
- }
- >
- {this.state.addModLoading ? (
- <Spinner />
- ) : this.creatorIsMod_ ? (
- i18n.t("remove_as_mod")
- ) : (
- i18n.t("appoint_as_mod")
- )}
- </button>
- )}
- </>
- )}
- {/* Community creators and admins can transfer community to another mod */}
- {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
- this.canAdmin_) &&
- this.creatorIsMod_ &&
- (!this.state.showConfirmTransferCommunity ? (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(
- this,
- this.handleShowConfirmTransferCommunity
- )}
- aria-label={i18n.t("transfer_community")}
- >
- {i18n.t("transfer_community")}
- </button>
- ) : (
- <>
- <button
- className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
- aria-label={i18n.t("are_you_sure")}
- >
- {i18n.t("are_you_sure")}
- </button>
- <button
- className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
- aria-label={i18n.t("yes")}
- onClick={linkEvent(this, this.handleTransferCommunity)}
- >
- {this.state.transferLoading ? <Spinner /> : i18n.t("yes")}
- </button>
- <button
- className="btn btn-link btn-animate text-muted py-0 d-inline-block"
- onClick={linkEvent(
- this,
- this.handleCancelShowConfirmTransferCommunity
- )}
- aria-label={i18n.t("no")}
- >
- {i18n.t("no")}
- </button>
- </>
- ))}
- {/* Admins can ban from all, and appoint other admins */}
- {this.canAdmin_ && (
- <>
- {!this.creatorIsAdmin_ && (
- <>
- {!isBanned(post_view.creator) ? (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handleModBanShow)}
- aria-label={i18n.t("ban_from_site")}
- >
- {i18n.t("ban_from_site")}
- </button>
- ) : (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handleModBanSubmit)}
- aria-label={i18n.t("unban_from_site")}
- >
- {this.state.banLoading ? (
- <Spinner />
- ) : (
- i18n.t("unban_from_site")
- )}
- </button>
- )}
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handlePurgePersonShow)}
- aria-label={i18n.t("purge_user")}
- >
- {i18n.t("purge_user")}
- </button>
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handlePurgePostShow)}
- aria-label={i18n.t("purge_post")}
- >
- {i18n.t("purge_post")}
- </button>
- </>
- )}
- {!isBanned(post_view.creator) && post_view.creator.local && (
- <button
- className="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handleAddAdmin)}
- aria-label={
- this.creatorIsAdmin_
- ? i18n.t("remove_as_admin")
- : i18n.t("appoint_as_admin")
- }
- >
- {this.state.addAdminLoading ? (
- <Spinner />
- ) : this.creatorIsAdmin_ ? (
- i18n.t("remove_as_admin")
- ) : (
- i18n.t("appoint_as_admin")
- )}
- </button>
- )}
- </>
- )}
- </>
- )
- );
- }
-
removeAndBanDialogs() {
const post = this.postView;
const purgeTypeText =
this.state.purgeType == PurgeType.Post
- ? i18n.t("purge_post")
- : `${i18n.t("purge")} ${post.creator.name}`;
+ ? I18NextService.i18n.t("purge_post")
+ : `${I18NextService.i18n.t("purge")} ${post.creator.name}`;
return (
<>
{this.state.showRemoveDialog && (
className="form-inline"
onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
>
- <label className="sr-only" htmlFor="post-listing-remove-reason">
- {i18n.t("reason")}
+ <label
+ className="visually-hidden"
+ htmlFor="post-listing-remove-reason"
+ >
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-remove-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
+ <button type="submit" className="btn btn-secondary">
+ {this.state.removeLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("remove_post")
+ )}
+ </button>
+ </form>
+ )}
+ {this.state.showConfirmTransferCommunity && (
+ <>
+ <button className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0">
+ {I18NextService.i18n.t("are_you_sure")}
+ </button>
+ <button
+ className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
+ onClick={linkEvent(this, this.handleTransferCommunity)}
+ >
+ {this.state.transferLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("yes")
+ )}
+ </button>
<button
- type="submit"
- className="btn btn-secondary"
- aria-label={i18n.t("remove_post")}
+ className="btn btn-link btn-animate text-muted py-0 d-inline-block"
+ onClick={linkEvent(
+ this,
+ this.handleCancelShowConfirmTransferCommunity
+ )}
+ aria-label={I18NextService.i18n.t("no")}
>
- {this.state.removeLoading ? <Spinner /> : i18n.t("remove_post")}
+ {I18NextService.i18n.t("no")}
</button>
- </form>
+ </>
)}
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
- <div className="form-group row col-12">
+ <div className="mb-3 row col-12">
<label
className="col-form-label"
htmlFor="post-listing-ban-reason"
>
- {i18n.t("reason")}
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-ban-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.banReason}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
- <label className="col-form-label" htmlFor={`mod-ban-expires`}>
- {i18n.t("expires")}
+ <label className="col-form-label" htmlFor="mod-ban-expires">
+ {I18NextService.i18n.t("expires")}
</label>
<input
type="number"
- id={`mod-ban-expires`}
- className="form-control mr-2"
- placeholder={i18n.t("number_of_days")}
+ id="mod-ban-expires"
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("number_of_days")}
value={this.state.banExpireDays}
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
/>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
<label
className="form-check-label"
htmlFor="mod-ban-remove-data"
- title={i18n.t("remove_content_more")}
+ title={I18NextService.i18n.t("remove_content_more")}
>
- {i18n.t("remove_content")}
+ {I18NextService.i18n.t("remove_content")}
</label>
</div>
</div>
</div>
{/* TODO hold off on expires until later */}
- {/* <div class="form-group row"> */}
+ {/* <div class="mb-3 row"> */}
{/* <label class="col-form-label">Expires</label> */}
- {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+ {/* <input type="date" class="form-control me-2" placeholder={I18NextService.i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
- <div className="form-group row">
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={i18n.t("ban")}
- >
+ <div className="mb-3 row">
+ <button type="submit" className="btn btn-secondary">
{this.state.banLoading ? (
<Spinner />
) : (
<span>
- {i18n.t("ban")} {post.creator.name}
+ {I18NextService.i18n.t("ban")} {post.creator.name}
</span>
)}
</button>
className="form-inline"
onSubmit={linkEvent(this, this.handleReportSubmit)}
>
- <label className="sr-only" htmlFor="post-report-reason">
- {i18n.t("reason")}
+ <label className="visually-hidden" htmlFor="post-report-reason">
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="post-report-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
required
value={this.state.reportReason}
onInput={linkEvent(this, this.handleReportReasonChange)}
/>
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={i18n.t("create_report")}
- >
- {this.state.reportLoading ? <Spinner /> : i18n.t("create_report")}
+ <button type="submit" className="btn btn-secondary">
+ {this.state.reportLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("create_report")
+ )}
</button>
</form>
)}
onSubmit={linkEvent(this, this.handlePurgeSubmit)}
>
<PurgeWarning />
- <label className="sr-only" htmlFor="purge-reason">
- {i18n.t("reason")}
+ <label className="visually-hidden" htmlFor="purge-reason">
+ {I18NextService.i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
- className="form-control mr-2"
- placeholder={i18n.t("reason")}
+ className="form-control me-2"
+ placeholder={I18NextService.i18n.t("reason")}
value={this.state.purgeReason}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
{this.state.purgeLoading ? (
<Spinner />
) : (
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={purgeTypeText}
- >
+ <button type="submit" className="btn btn-secondary">
{this.state.purgeLoading ? <Spinner /> : { purgeTypeText }}
</button>
)}
{this.postTitleLine()}
</div>
<div className="col-4">
- {/* Post body prev or thumbnail */}
+ {/* Post thumbnail */}
{!this.state.imageExpanded && this.thumbnail()}
</div>
</div>
);
}
- showMobilePreview() {
- const { body, id } = this.postView.post;
-
- return !this.showBody && body ? (
- <Link className="text-body" to={`/post/${id}`}>
- <div className="md-div mb-1 preview-lines">{body}</div>
- </Link>
- ) : (
- <></>
+ showPreviewButton() {
+ return (
+ <button
+ type="button"
+ className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
+ onClick={linkEvent(this, this.handleShowBody)}
+ >
+ <Icon
+ icon={!this.state.showBody ? "plus-square" : "minus-square"}
+ classes="icon-inline"
+ />
+ </button>
);
}
{/* If it has a thumbnail, do a right aligned thumbnail */}
{this.mobileThumbnail()}
- {/* Show a preview of the post body */}
- {this.showMobilePreview()}
-
{this.commentsLine(true)}
- {this.userActionsLine()}
{this.duplicatesLine()}
{this.removeAndBanDialogs()}
</div>
{/* The larger view*/}
<div className="d-none d-sm-block">
<article className="row post-container">
- {!this.props.viewOnly && this.voteBar()}
- <div className="col-sm-2 pr-0 post-media">
- <div className="">{this.thumbnail()}</div>
- </div>
- <div className="col-12 col-sm-9">
+ {!this.props.viewOnly && (
+ <div className="col flex-grow-0">
+ <VoteButtons
+ voteContentType={VoteContentType.Post}
+ id={this.postView.post.id}
+ onVote={this.props.onPostVote}
+ enableDownvotes={this.props.enableDownvotes}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ </div>
+ )}
+ <div className="col flex-grow-1">
<div className="row">
- <div className="col-12">
+ <div className="col flex-grow-0 px-0">
+ <div className="">{this.thumbnail()}</div>
+ </div>
+ <div className="col flex-grow-1">
{this.postTitleLine()}
{this.createdLine()}
{this.commentsLine()}
{this.duplicatesLine()}
- {this.userActionsLine()}
{this.removeAndBanDialogs()}
</div>
</div>
const body = post.body;
return body
- ? `${i18n.t("cross_posted_from")} ${post.ap_id}\n\n${body.replace(
- /^/gm,
- "> "
- )}`
+ ? `${I18NextService.i18n.t("cross_posted_from")} ${
+ post.ap_id
+ }\n\n${body.replace(/^/gm, "> ")}`
: undefined;
}
setupTippy();
}
- handleUpvote(i: PostListing) {
- i.setState({ upvoteLoading: true });
- i.props.onPostVote({
- post_id: i.postView.post.id,
- score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
- auth: myAuthRequired(),
- });
- }
-
- handleDownvote(i: PostListing) {
- i.setState({ downvoteLoading: true });
- i.props.onPostVote({
- post_id: i.postView.post.id,
- score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
- auth: myAuthRequired(),
- });
- }
-
get pointsTippy(): string {
- const points = i18n.t("number_of_points", {
+ const points = I18NextService.i18n.t("number_of_points", {
count: Number(this.postView.counts.score),
formattedCount: Number(this.postView.counts.score),
});
- const upvotes = i18n.t("number_of_upvotes", {
+ const upvotes = I18NextService.i18n.t("number_of_upvotes", {
count: Number(this.postView.counts.upvotes),
formattedCount: Number(this.postView.counts.upvotes),
});
- const downvotes = i18n.t("number_of_downvotes", {
+ const downvotes = I18NextService.i18n.t("number_of_downvotes", {
count: Number(this.postView.counts.downvotes),
formattedCount: Number(this.postView.counts.downvotes),
});
projects / lemmy-ui.git / blobdiff