-import { myAuthRequired } from "@utils/app";
+import { myAuth, myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
FeaturePost,
Language,
LockPost,
+ MarkPostAsRead,
PersonView,
PostView,
PurgePerson,
PurgeType,
VoteContentType,
} from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+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";
allLanguages: Language[];
siteLanguages: number[];
showCommunity?: boolean;
+ /**
+ * Controls whether to show both the body *and* the metadata preview card
+ */
showBody?: boolean;
hideImage?: boolean;
enableDownvotes?: boolean;
onAddModToCommunity(form: AddModToCommunity): void;
onAddAdmin(form: AddAdmin): void;
onTransferCommunity(form: TransferCommunity): void;
+ onMarkPostAsRead(form: MarkPostAsRead): void;
}
export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleEditCancel = this.handleEditCancel.bind(this);
}
+ componentWillReceiveProps(nextProps: PostListingProps) {
+ if (this.props !== nextProps) {
+ this.setState({
+ purgeLoading: false,
+ reportLoading: false,
+ blockLoading: false,
+ lockLoading: false,
+ deleteLoading: false,
+ removeLoading: false,
+ saveLoading: false,
+ featureCommunityLoading: false,
+ featureLocalLoading: false,
+ banLoading: false,
+ addModLoading: false,
+ addAdminLoading: false,
+ transferLoading: false,
+ });
+ }
+ }
+
get postView(): PostView {
return this.props.post_view;
}
<>
{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()}
const url = post.url;
const thumbnail = post.thumbnail_url;
- if (url && isImage(url)) {
- if (url.includes("pictrs")) {
- return url;
- } else if (thumbnail) {
- return thumbnail;
- } else {
- return url;
- }
- } else if (thumbnail) {
+ if (thumbnail) {
return thumbnail;
+ } else if (url && isImage(url)) {
+ return url;
} else {
return undefined;
}
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="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={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}
+ target={this.linkTarget}
>
{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) {
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
+ target={this.linkTarget}
>
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="play" classes="d-flex align-items-center" />
);
} else {
return (
- <a className="text-body" href={url} title={url} rel={relTags}>
+ <a
+ className="text-body"
+ href={url}
+ title={url}
+ rel={relTags}
+ target={this.linkTarget}
+ >
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="external-link" classes="d-flex align-items-center" />
</div>
className="text-body"
to={`/post/${post.id}`}
title={I18NextService.i18n.t("comments")}
+ target={this.linkTarget}
>
<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 (
- <span className="small">
- <PersonListing person={post_view.creator} muted={true} />
- {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 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 && (
<>
{" "}
<span className="mx-1 badge text-bg-light">
{
this.props.allLanguages.find(
- lang => lang.id === post_view.post.language_id
+ lang => lang.id === post_view.post.language_id,
)?.name
}
</span>
published={post_view.post.published}
updated={post_view.post.updated}
/>
- </span>
+ </div>
);
}
return (
<>
- <div className="post-title overflow-hidden">
- <h5 className="d-inline">
+ <div className="post-title">
+ <h1 className="h5 d-inline text-break">
{url && this.props.showBody ? (
<a
className={
) : (
this.postLink
)}
- </h5>
- {(url && isImage(url)) ||
- (post.thumbnail_url && (
- <button
- className="btn btn-sm text-monospace text-muted d-inline-block"
- data-tippy-content={I18NextService.i18n.t("expand_here")}
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <Icon
- icon={
- !this.state.imageExpanded ? "plus-square" : "minus-square"
- }
- classes="icon-inline"
- />
- </button>
- ))}
+ </h1>
{/**
- * 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.
+ * If there is (a) a URL and an embed title, or (b) a post body, and
+ * we were not told to show the body by the parent component, show the
+ * MetadataCard/body toggle.
*/}
- {(post.url || (post.body && !this.props.showBody)) && (
- <button
- className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
- data-tippy-content={post.body && mdNoImages.render(post.body)}
- data-tippy-allowHtml={true}
- onClick={linkEvent(this, this.handleShowBody)}
- >
- <Icon
- icon={!this.state.showBody ? "plus-square" : "minus-square"}
- classes="icon-inline"
- />
- </button>
- )}
+ {!this.props.showBody &&
+ ((post.url && post.embed_title) || post.body) &&
+ this.showPreviewButton()}
{post.removed && (
<small className="ms-2 badge text-bg-secondary">
{I18NextService.i18n.t("removed")}
</small>
)}
+
{post.deleted && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
)}
+
{post.locked && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
+
{post.featured_community && (
<small
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t(
- "featured_in_community"
+ "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 ms-2 text-muted fst-italic"
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
+
{post.nsfw && (
<small className="ms-2 badge text-bg-danger">
{I18NextService.i18n.t("nsfw")}
{this.commentsButton}
{canShare() && (
<button
- className="btn btn-sm btn-animate text-muted py-0"
+ className="btn btn-sm btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShare)}
type="button"
>
)}
{!post.local && (
<a
- className="btn btn-sm btn-animate text-muted py-0"
+ className="btn btn-sm btn-link btn-animate text-muted py-0"
title={I18NextService.i18n.t("link")}
href={post.ap_id}
>
<div className="dropdown">
<button
- className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
+ className="btn btn-sm btn-link btn-animate text-muted py-0 dropdown-toggle"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={I18NextService.i18n.t("more")}
data-bs-toggle="dropdown"
{(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>
</>
);
}
+ public get linkTarget(): string {
+ return UserService.Instance.myUserInfo?.local_user_view.local_user
+ .open_links_in_new_tab
+ ? "_blank"
+ : // _self is the default target on links when the field is not specified
+ "_self";
+ }
+
get commentsButton() {
const post_view = this.postView;
const title = I18NextService.i18n.t("number_of_comments", {
title={title}
to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title}
+ target={this.linkTarget}
>
<Icon icon="message-square" classes="me-1" inline />
{post_view.counts.comments}
get unreadCount(): number | undefined {
const pv = this.postView;
- return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0
+ return pv.unread_comments === pv.counts.comments || pv.unread_comments === 0
? undefined
: pv.unread_comments;
}
: I18NextService.i18n.t("save");
return (
<button
- className="btn btn-sm btn-animate text-muted py-0"
+ className="btn btn-sm btn-link 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-sm btn-animate text-muted py-0"
+ className="btn btn-sm btn-link btn-animate text-muted py-0"
to={{
/* Empty string properties are required to satisfy type*/
pathname: "/create_post",
get viewSourceButton() {
return (
<button
- className="btn btn-sm btn-animate text-muted py-0"
+ className="btn btn-sm btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={I18NextService.i18n.t("view_source")}
aria-label={I18NextService.i18n.t("view_source")}
get modBanFromCommunityButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModBanFromCommunityShow)}
- aria-label={I18NextService.i18n.t("ban_from_community")}
>
{I18NextService.i18n.t("ban_from_community")}
</button>
get modUnbanFromCommunityButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}
- aria-label={I18NextService.i18n.t("unban")}
>
{this.state.banLoading ? <Spinner /> : I18NextService.i18n.t("unban")}
</button>
get addModToCommunityButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleAddModToCommunity)}
- aria-label={
- this.creatorIsMod_
- ? I18NextService.i18n.t("remove_as_mod")
- : I18NextService.i18n.t("appoint_as_mod")
- }
>
{this.state.addModLoading ? (
<Spinner />
) : this.creatorIsMod_ ? (
- I18NextService.i18n.t("remove_as_mod")
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_as_mod"))
) : (
- I18NextService.i18n.t("appoint_as_mod")
+ capitalizeFirstLetter(I18NextService.i18n.t("appoint_as_mod"))
)}
</button>
);
get modBanButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModBanShow)}
- aria-label={I18NextService.i18n.t("ban_from_site")}
>
- {I18NextService.i18n.t("ban_from_site")}
+ {capitalizeFirstLetter(I18NextService.i18n.t("ban_from_site"))}
</button>
);
}
get modUnbanButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModBanSubmit)}
- aria-label={I18NextService.i18n.t("unban_from_site")}
>
{this.state.banLoading ? (
<Spinner />
) : (
- I18NextService.i18n.t("unban_from_site")
+ capitalizeFirstLetter(I18NextService.i18n.t("unban_from_site"))
)}
</button>
);
get purgePersonButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handlePurgePersonShow)}
- aria-label={I18NextService.i18n.t("purge_user")}
>
- {I18NextService.i18n.t("purge_user")}
+ {capitalizeFirstLetter(I18NextService.i18n.t("purge_user"))}
</button>
);
}
get purgePostButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handlePurgePostShow)}
- aria-label={I18NextService.i18n.t("purge_post")}
>
- {I18NextService.i18n.t("purge_post")}
+ {capitalizeFirstLetter(I18NextService.i18n.t("purge_post"))}
</button>
);
}
get toggleAdminButton() {
return (
<button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
+ 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_ ? (
- I18NextService.i18n.t("remove_as_admin")
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_as_admin"))
) : (
- I18NextService.i18n.t("appoint_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 (
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(
this,
- !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
+ !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit,
)}
>
{/* TODO: Find an icon for this. */}
{this.state.removeLoading ? (
<Spinner />
) : !removed ? (
- I18NextService.i18n.t("remove")
+ capitalizeFirstLetter(I18NextService.i18n.t("remove_post"))
) : (
- I18NextService.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 && (
- <div className="mt-3 user-actions-line">
- {this.canMod_ && (
- <>
- {!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>
- )}
- </>
- )}
-
- {/* 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 ? (
- <li>
- <button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
- onClick={linkEvent(
- this,
- this.handleShowConfirmTransferCommunity
- )}
- aria-label={I18NextService.i18n.t("transfer_community")}
- >
- {I18NextService.i18n.t("transfer_community")}
- </button>
- </li>
- ) : (
- <>
- <li>
- <button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
- aria-label={I18NextService.i18n.t("are_you_sure")}
- >
- {I18NextService.i18n.t("are_you_sure")}
- </button>
- </li>
- <li>
- <button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
- aria-label={I18NextService.i18n.t("yes")}
- onClick={linkEvent(this, this.handleTransferCommunity)}
- >
- {this.state.transferLoading ? (
- <Spinner />
- ) : (
- I18NextService.i18n.t("yes")
- )}
- </button>
- </li>
- <li>
- <button
- className="btn btn-link btn-animate text-muted py-0 dropdown-item"
- onClick={linkEvent(
- this,
- this.handleCancelShowConfirmTransferCommunity
- )}
- aria-label={I18NextService.i18n.t("no")}
- >
- {I18NextService.i18n.t("no")}
- </button>
- </li>
- </>
- ))}
- {/* Admins can ban from all, and appoint other admins */}
- {this.canAdmin_ && (
- <>
- {!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>
- )}
- </>
- )}
- </div>
- )
- );
- }
-
removeAndBanDialogs() {
const post = this.postView;
const purgeTypeText =
- this.state.purgeType == PurgeType.Post
+ this.state.purgeType === PurgeType.Post
? I18NextService.i18n.t("purge_post")
: `${I18NextService.i18n.t("purge")} ${post.creator.name}`;
return (
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={I18NextService.i18n.t("remove_post")}
- >
+ <button type="submit" className="btn btn-secondary">
{this.state.removeLoading ? (
<Spinner />
) : (
</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
+ className="btn btn-link btn-animate text-muted py-0 d-inline-block"
+ onClick={linkEvent(
+ this,
+ this.handleCancelShowConfirmTransferCommunity,
+ )}
+ aria-label={I18NextService.i18n.t("no")}
+ >
+ {I18NextService.i18n.t("no")}
+ </button>
+ </>
+ )}
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
<div className="mb-3 row col-12">
{/* <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="mb-3 row">
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={I18NextService.i18n.t("ban")}
- >
+ <button type="submit" className="btn btn-secondary">
{this.state.banLoading ? (
<Spinner />
) : (
value={this.state.reportReason}
onInput={linkEvent(this, this.handleReportReasonChange)}
/>
- <button
- type="submit"
- className="btn btn-secondary"
- aria-label={I18NextService.i18n.t("create_report")}
- >
+ <button type="submit" className="btn btn-secondary">
{this.state.reportLoading ? (
<Spinner />
) : (
{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>
)}
const post = this.postView.post;
return post.thumbnail_url || (post.url && isImage(post.url)) ? (
<div className="row">
- <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
+ <div className={`${this.state.imageExpanded ? "col-12" : "col-9"}`}>
{this.postTitleLine()}
</div>
- <div className="col-4">
+ <div className="col-3 mobile-thumbnail-container">
{/* Post thumbnail */}
{!this.state.imageExpanded && this.thumbnail()}
</div>
);
}
+ 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>
+ );
+ }
+
listing() {
return (
<>
{this.mobileThumbnail()}
{this.commentsLine(true)}
- {this.userActionsLine()}
{this.duplicatesLine()}
{this.removeAndBanDialogs()}
</div>
<div className="d-none d-sm-block">
<article className="row post-container">
{!this.props.viewOnly && (
- <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 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-sm-2 pe-0 post-media">
- <div className="">{this.thumbnail()}</div>
- </div>
- <div className="col-12 col-sm-9">
+ <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>
private get myPost(): boolean {
return (
- this.postView.creator.id ==
+ this.postView.creator.id ===
UserService.Instance.myUserInfo?.local_user_view.person.id
);
}
+
handleEditClick(i: PostListing) {
i.setState({ showEdit: true });
}
post_id: i.postView.post.id,
removed: !i.postView.post.removed,
auth: myAuthRequired(),
+ reason: i.state.removeReason,
});
}
handlePurgeSubmit(i: PostListing, event: any) {
event.preventDefault();
i.setState({ purgeLoading: true });
- if (i.state.purgeType == PurgeType.Person) {
+ if (i.state.purgeType === PurgeType.Person) {
i.props.onPurgePerson({
person_id: i.postView.creator.id,
reason: i.state.purgeReason,
auth: myAuthRequired(),
});
- } else if (i.state.purgeType == PurgeType.Post) {
+ } else if (i.state.purgeType === PurgeType.Post) {
i.props.onPurgePost({
post_id: i.postView.post.id,
reason: i.state.purgeReason,
const ban = !i.props.post_view.creator_banned_from_community;
// If its an unban, restore all their data
- if (ban == false) {
+ if (ban === false) {
i.setState({ removeData: false });
}
const person_id = i.props.post_view.creator.id;
const reason = i.state.banReason;
const expires = futureDaysToUnixTime(i.state.banExpireDays);
- if (i.state.banType == BanType.Community) {
+ if (i.state.banType === BanType.Community) {
const community_id = i.postView.community.id;
i.props.onBanPersonFromCommunity({
community_id,
event.preventDefault();
i.setState({ imageExpanded: !i.state.imageExpanded });
setupTippy();
+
+ const auth = myAuth();
+ if (auth && !i.props.post_view.read) {
+ i.props.onMarkPostAsRead({
+ post_id: i.props.post_view.post.id,
+ read: true,
+ auth: auth,
+ });
+ }
}
handleViewSource(i: PostListing) {
this.props.moderators,
this.props.admins,
undefined,
- true
+ true,
);
}
return canMod(
this.postView.creator.id,
this.props.moderators,
- this.props.admins
+ this.props.admins,
);
}