+import { myAuthRequired, newVote, showScores } from "@utils/app";
+import { canShare, share } from "@utils/browser";
+import { getExternalHost, getHttpBase } from "@utils/env";
+import {
+ capitalizeFirstLetter,
+ futureDaysToUnixTime,
+ hostname,
+ numToSI,
+} from "@utils/helpers";
+import { isImage, isVideo } from "@utils/media";
+import {
+ amAdmin,
+ amCommunityCreator,
+ amMod,
+ canAdmin,
+ canMod,
+ isAdmin,
+ isBanned,
+ isMod,
+} from "@utils/roles";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { Link } from "inferno-router";
SavePost,
TransferCommunity,
} from "lemmy-js-client";
-import { getExternalHost, getHttpBase } from "../../env";
-import { i18n } from "../../i18next";
+import { relTags } from "../../config";
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
-import { UserService } from "../../services";
-import {
- amAdmin,
- amCommunityCreator,
- amMod,
- canAdmin,
- canMod,
- canShare,
- futureDaysToUnixTime,
- hostname,
- isAdmin,
- isBanned,
- isImage,
- isMod,
- isVideo,
- mdNoImages,
- mdToHtml,
- mdToHtmlInline,
- myAuthRequired,
- newVote,
- numToSI,
- relTags,
- setupTippy,
- share,
- showScores,
-} from "../../utils";
+import { mdNoImages, 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";
const post = this.postView.post;
return (
- <div className="post-listing">
+ <div className="post-listing mt-2">
{!this.state.showEdit ? (
<>
{this.listing()}
}
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>
- </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 (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">
+ <a
+ className="d-inline-block"
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ >
+ <PictrsImage src={this.imageSrc} />
+ </a>
+ </div>
+ </>
+ );
+ }
+
+ const { post } = this.postView;
+ const { url } = post;
+
+ 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>
- </>
- ) : (
- <></>
- );
+ );
+ }
+
+ return <></>;
}
imgThumb(src: string) {
<a
href={this.imageSrc}
className="text-body d-inline-block position-relative mb-2"
- data-tippy-content={i18n.t("expand_here")}
+ 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" />
} else if (url) {
if (!this.props.hideImage && isVideo(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;
- const url = post_view.post.url;
- const body = post_view.post.body;
return (
- <ul className="list-inline mb-1 text-muted small">
- <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 && (
- <span>
- <span className="mx-1"> {i18n.t("to")} </span>
- <CommunityLink community={post_view.community} />
- </span>
- )}
- </li>
- {post_view.post.language_id !== 0 && (
- <span className="mx-1 badge">
- {
- this.props.allLanguages.find(
- lang => lang.id === post_view.post.language_id
- )?.name
- }
+ <span className="small">
+ <PersonListing person={post_view.creator} />
+ {this.creatorIsMod_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("mod")}
</span>
)}
- <li className="list-inline-item">•</li>
- {url && !(hostname(url) === getExternalHost()) && (
- <>
- <li className="list-inline-item">
- <a
- className="text-muted font-italic"
- href={url}
- title={url}
- rel={relTags}
- >
- {hostname(url)}
- </a>
- </li>
- <li className="list-inline-item">•</li>
- </>
+ {this.creatorIsAdmin_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("admin")}
+ </span>
)}
- <li className="list-inline-item">
- <span>
- <MomentTime
- published={post_view.post.published}
- updated={post_view.post.updated}
- />
+ {post_view.creator.bot_account && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("bot_account").toLowerCase()}
</span>
- </li>
- {body && (
+ )}
+ {this.props.showCommunity && (
<>
- <li className="list-inline-item">•</li>
- <li className="list-inline-item">
- <button
- className="text-muted btn btn-sm btn-link p-0"
- data-tippy-content={mdNoImages.render(body)}
- data-tippy-allowHtml={true}
- onClick={linkEvent(this, this.handleShowBody)}
- >
- <Icon icon="book-open" classes="icon-inline mr-1" />
- </button>
- </li>
+ {" "}
+ {I18NextService.i18n.t("to")}{" "}
+ <CommunityLink community={post_view.community} />
</>
)}
- </ul>
+ {post_view.post.language_id !== 0 && (
+ <span className="mx-1 badge text-bg-light">
+ {
+ this.props.allLanguages.find(
+ lang => lang.id === post_view.post.language_id
+ )?.name
+ }
+ </span>
+ )}{" "}
+ •{" "}
+ <MomentTime
+ published={post_view.post.published}
+ updated={post_view.post.updated}
+ />
+ </span>
);
}
voteBar() {
return (
- <div className={`vote-bar col-1 pr-0 small text-center`}>
+ <div className={`vote-bar col-1 pe-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")}
+ data-tippy-content={I18NextService.i18n.t("upvote")}
+ aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
</button>
{showScores() ? (
<div
- className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
+ className={`unselectable pointer text-muted px-1 post-score`}
data-tippy-content={this.pointsTippy}
>
{numToSI(this.postView.counts.score)}
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")}
+ data-tippy-content={I18NextService.i18n.t("downvote")}
+ aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
const post = this.postView.post;
return (
<Link
- className={`d-inline-block ${
+ className={`d-inline ${
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
}`}
to={`/post/${post.id}`}
- title={i18n.t("comments")}
+ title={I18NextService.i18n.t("comments")}
>
- <div
- className="d-inline-block"
+ <span
+ className="d-inline"
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
/>
</Link>
const url = post.url;
return (
- <div className="post-title overflow-hidden">
- <h5>
- {url ? (
- this.props.showBody ? (
+ <>
+ <div className="post-title overflow-hidden">
+ <h5 className="d-inline">
+ {url && this.props.showBody ? (
<a
- className={`d-inline-block ${
+ className={
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
- }`}
+ }
href={url}
title={url}
rel={relTags}
- >
- <div
- className="d-inline-block"
- dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
- />
- </a>
+ dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+ ></a>
) : (
this.postLink
- )
- ) : (
- 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")}
+ 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
</button>
))}
{post.removed && (
- <small className="ml-2 text-muted font-italic">
- {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 font-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 font-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")}
+ className="unselectable pointer ms-2 text-muted font-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")}
+ className="unselectable pointer ms-2 text-muted font-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 text-muted font-italic">
- {i18n.t("nsfw")}
+ <small className="ms-2 badge text-bg-danger">
+ {I18NextService.i18n.t("nsfw")}
</small>
)}
- </h5>
- </div>
+ </div>
+ {url && this.urlLine()}
+ </>
+ );
+ }
+
+ urlLine() {
+ const post = this.postView.post;
+ const url = post.url;
+
+ return (
+ <p className="d-flex text-muted align-items-center gap-1 small m-0">
+ {url && !(hostname(url) === getExternalHost()) && (
+ <a
+ className="text-muted font-italic"
+ href={url}
+ title={url}
+ rel={relTags}
+ >
+ {hostname(url)}
+ </a>
+ )}
+ </p>
);
}
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 mb-1">
+ <div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
{this.commentsButton}
{canShare() && (
<button
- className="btn 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 />
);
}
- get hasAdvancedButtons() {
+ showPreviewButton() {
+ const post_view = this.postView;
+ const body = post_view.post.body;
+
return (
- this.myPost ||
- (this.showBody && this.postView.post.body) ||
- amMod(this.props.moderators) ||
- amAdmin() ||
- this.canMod_ ||
- this.canAdmin_
+ <button
+ className="btn btn-sm 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 me-1", {
+ "text-success": this.state.showBody,
+ })}
+ />
+ </button>
);
}
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component.
const post_view = this.postView;
+ const post = post_view.post;
+
return (
<>
{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.hasAdvancedButtons && (
- <div className="dropdown">
- <button
- className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
- onClick={linkEvent(this, this.handleShowAdvanced)}
- data-tippy-content={i18n.t("more")}
- data-bs-toggle="dropdown"
- aria-expanded="false"
- aria-controls="advancedButtonsDropdown"
- aria-label={i18n.t("more")}
- >
- <Icon icon="more-vertical" inline />
- </button>
+ <div className="dropdown">
+ <button
+ className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
+ onClick={linkEvent(this, this.handleShowAdvanced)}
+ data-tippy-content={I18NextService.i18n.t("more")}
+ data-bs-toggle="dropdown"
+ aria-expanded="false"
+ aria-controls="advancedButtonsDropdown"
+ aria-label={I18NextService.i18n.t("more")}
+ >
+ <Icon icon="more-vertical" inline />
+ </button>
-
<ul className="dropdown-menu" id="advancedButtonsDropdown">
- {!this.myPost ? (
- <>
- <li>{this.reportButton}</li>
- <li>{this.blockButton}</li>
- </>
- ) : (
- <>
- <li>{this.editButton}</li>
- <li>{this.deleteButton}</li>
- </>
- )}
+ <ul className="dropdown-menu" id="advancedButtonsDropdown">
+ {!this.myPost ? (
+ <>
+ <li>{this.reportButton}</li>
+ <li>{this.blockButton}</li>
+ </>
+ ) : (
+ <>
+ <li>{this.editButton}</li>
+ <li>{this.deleteButton}</li>
+ </>
+ )}
- {/* Any mod can do these, not limited to hierarchy*/}
- {(amMod(this.props.moderators) || amAdmin()) && (
- <>
- <li>
- <hr className="dropdown-divider" />
- </li>
- <li>{this.lockButton}</li>
- {this.featureButtons}
- </>
- )}
+ {/* Any mod can do these, not limited to hierarchy*/}
+ {(amMod(this.props.moderators) || amAdmin()) && (
+ <>
+ <li>
+ <hr className="dropdown-divider" />
+ </li>
+ <li>{this.lockButton}</li>
+ {this.featureButtons}
+ </>
+ )}
- {(this.canMod_ || this.canAdmin_) && (
- <li>{this.modRemoveButton}</li>
- )}
- </ul>
- </div>
- )}
+ {(this.canMod_ || this.canAdmin_) && (
+ <li>{this.modRemoveButton}</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 py-0 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 className="text-muted fst-italic">
+ ({this.unreadCount} {I18NextService.i18n.t("new")})
</span>
)}
</Link>
}`}
{...tippy}
onClick={linkEvent(this, this.handleUpvote)}
- aria-label={i18n.t("upvote")}
+ aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
<>
<Icon icon="arrow-up1" classes="icon-inline small" />
{showScores() && (
- <span className="ml-2">
+ <span className="ms-2">
{numToSI(this.postView.counts.upvotes)}
</span>
)}
</button>
{this.props.enableDownvotes && (
<button
- className={`ml-2 btn-animate btn py-0 px-1 ${
+ className={`ms-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-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && (
<span
- className={classNames("ml-2", {
+ className={classNames("ms-2", {
invisible: this.postView.counts.downvotes === 0,
})}
>
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>
get reportButton() {
return (
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleShowReportDialog)}
- data-tippy-content={i18n.t("show_report_dialog")}
- aria-label={i18n.t("show_report_dialog")}
+ aria-label={I18NextService.i18n.t("show_report_dialog")}
>
- <Icon icon="flag" inline />
+ <Icon classes="me-1" icon="flag" inline />
+ {I18NextService.i18n.t("create_report")}
</button>
);
}
get blockButton() {
return (
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleBlockPersonClick)}
- data-tippy-content={i18n.t("block_user")}
- aria-label={i18n.t("block_user")}
+ aria-label={I18NextService.i18n.t("block_user")}
>
- {this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
+ {this.state.blockLoading ? (
+ <Spinner />
+ ) : (
+ <Icon classes="me-1" icon="slash" inline />
+ )}
+ {I18NextService.i18n.t("block_user")}
</button>
);
}
get editButton() {
return (
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ 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 d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleDeleteClick)}
aria-label={label}
>
<>
<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 d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModLock)}
aria-label={label}
>
<>
<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>
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
data-tippy-content={labelCommunity}
aria-label={labelCommunity}
<>
<Icon
icon="pin"
- classes={classNames("mr-1", {
+ classes={classNames("me-1", {
"text-success": featuredCommunity,
})}
inline
/>
- {i18n.t("community")}
+ {I18NextService.i18n.t("community")}
</>
)}
</button>
<li>
{amAdmin() && (
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
data-tippy-content={labelLocal}
aria-label={labelLocal}
<>
<Icon
icon="pin"
- classes={classNames("mr-1", {
+ classes={classNames("me-1", {
"text-success": featuredLocal,
})}
inline
/>
- {i18n.t("local")}
+ {I18NextService.i18n.t("local")}
</>
)}
</button>
const removed = this.postView.post.removed;
return (
<button
- className="btn btn-link d-flex align-items-center rounded-0 dropdown-item"
+ className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(
this,
!removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
{this.state.removeLoading ? (
<Spinner />
) : !removed ? (
- i18n.t("remove")
+ I18NextService.i18n.t("remove")
) : (
- i18n.t("restore")
+ I18NextService.i18n.t("restore")
)}
</button>
);
const post_view = this.postView;
return (
this.state.showAdvanced && (
- <>
+ <div className="mt-3">
{this.canMod_ && (
<>
{!this.creatorIsMod_ &&
this,
this.handleModBanFromCommunityShow
)}
- aria-label={i18n.t("ban_from_community")}
+ aria-label={I18NextService.i18n.t("ban_from_community")}
>
- {i18n.t("ban_from_community")}
+ {I18NextService.i18n.t("ban_from_community")}
</button>
) : (
<button
this,
this.handleModBanFromCommunitySubmit
)}
- aria-label={i18n.t("unban")}
+ aria-label={I18NextService.i18n.t("unban")}
>
- {this.state.banLoading ? <Spinner /> : i18n.t("unban")}
+ {this.state.banLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("unban")
+ )}
</button>
))}
{!post_view.creator_banned_from_community && (
onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={
this.creatorIsMod_
- ? i18n.t("remove_as_mod")
- : i18n.t("appoint_as_mod")
+ ? I18NextService.i18n.t("remove_as_mod")
+ : I18NextService.i18n.t("appoint_as_mod")
}
>
{this.state.addModLoading ? (
<Spinner />
) : this.creatorIsMod_ ? (
- i18n.t("remove_as_mod")
+ I18NextService.i18n.t("remove_as_mod")
) : (
- i18n.t("appoint_as_mod")
+ I18NextService.i18n.t("appoint_as_mod")
)}
</button>
)}
this,
this.handleShowConfirmTransferCommunity
)}
- aria-label={i18n.t("transfer_community")}
+ aria-label={I18NextService.i18n.t("transfer_community")}
>
- {i18n.t("transfer_community")}
+ {I18NextService.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")}
+ className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
+ aria-label={I18NextService.i18n.t("are_you_sure")}
>
- {i18n.t("are_you_sure")}
+ {I18NextService.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")}
+ className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
+ aria-label={I18NextService.i18n.t("yes")}
onClick={linkEvent(this, this.handleTransferCommunity)}
>
- {this.state.transferLoading ? <Spinner /> : i18n.t("yes")}
+ {this.state.transferLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("yes")
+ )}
</button>
<button
className="btn btn-link btn-animate text-muted py-0 d-inline-block"
this,
this.handleCancelShowConfirmTransferCommunity
)}
- aria-label={i18n.t("no")}
+ aria-label={I18NextService.i18n.t("no")}
>
- {i18n.t("no")}
+ {I18NextService.i18n.t("no")}
</button>
</>
))}
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanShow)}
- aria-label={i18n.t("ban_from_site")}
+ aria-label={I18NextService.i18n.t("ban_from_site")}
>
- {i18n.t("ban_from_site")}
+ {I18NextService.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")}
+ aria-label={I18NextService.i18n.t("unban_from_site")}
>
{this.state.banLoading ? (
<Spinner />
) : (
- i18n.t("unban_from_site")
+ I18NextService.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")}
+ aria-label={I18NextService.i18n.t("purge_user")}
>
- {i18n.t("purge_user")}
+ {I18NextService.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")}
+ aria-label={I18NextService.i18n.t("purge_post")}
>
- {i18n.t("purge_post")}
+ {I18NextService.i18n.t("purge_post")}
</button>
</>
)}
onClick={linkEvent(this, this.handleAddAdmin)}
aria-label={
this.creatorIsAdmin_
- ? i18n.t("remove_as_admin")
- : i18n.t("appoint_as_admin")
+ ? I18NextService.i18n.t("remove_as_admin")
+ : I18NextService.i18n.t("appoint_as_admin")
}
>
{this.state.addAdminLoading ? (
<Spinner />
) : this.creatorIsAdmin_ ? (
- i18n.t("remove_as_admin")
+ I18NextService.i18n.t("remove_as_admin")
) : (
- i18n.t("appoint_as_admin")
+ I18NextService.i18n.t("appoint_as_admin")
)}
</button>
)}
</>
)}
- </>
+ </div>
)
);
}
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"
- aria-label={i18n.t("remove_post")}
+ aria-label={I18NextService.i18n.t("remove_post")}
>
- {this.state.removeLoading ? <Spinner /> : i18n.t("remove_post")}
+ {this.state.removeLoading ? (
+ <Spinner />
+ ) : (
+ I18NextService.i18n.t("remove_post")
+ )}
</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")}
+ {I18NextService.i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
- className="form-control mr-2"
- placeholder={i18n.t("number_of_days")}
+ 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">
+ <div className="mb-3 row">
<button
type="submit"
className="btn btn-secondary"
- aria-label={i18n.t("ban")}
+ aria-label={I18NextService.i18n.t("ban")}
>
{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")}
+ aria-label={I18NextService.i18n.t("create_report")}
>
- {this.state.reportLoading ? <Spinner /> : i18n.t("create_report")}
+ {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)}
/>
);
}
- showMobilePreview() {
+ showBodyPreview() {
const { body, id } = this.postView.post;
return !this.showBody && body ? (
- <Link className="text-body" to={`/post/${id}`}>
+ <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
<div className="md-div mb-1 preview-lines">{body}</div>
</Link>
) : (
{this.mobileThumbnail()}
{/* Show a preview of the post body */}
- {this.showMobilePreview()}
+ {this.showBodyPreview()}
{this.commentsLine(true)}
{this.userActionsLine()}
<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="col-sm-2 pe-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9">
<div className="col-12">
{this.postTitleLine()}
{this.createdLine()}
+ {this.showBodyPreview()}
{this.commentsLine()}
{this.duplicatesLine()}
{this.userActionsLine()}
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;
}
}
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