--- /dev/null
+## Description
+
+<!-- Please describe exactly what this PR changes, including URLs and issue
+numbers. If it fixes an issue, add "Fixes #XXXX" -->
+
+## Screenshots
+
+<!-- Please include before and after screenshots if applicable -->
+
+### Before
+
+### After
{
"name": "lemmy-ui",
- "version": "0.18.1-rc.7",
+ "version": "0.18.1-rc.9",
"description": "An isomorphic UI for lemmy",
"repository": "https://github.com/LemmyNet/lemmy-ui",
"license": "AGPL-3.0",
}
const error = Object.values(routeData).find(
- res => res.state === "failed"
+ res => res.state === "failed" && res.msg !== "couldnt_find_object" // TODO: find a better way of handling errors
) as FailedRequestState | undefined;
// Redirect to the 404 if there's an API error
import {
colorList,
getCommentParentId,
- getRoleLabelPill,
myAuth,
myAuthRequired,
showScores,
import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
+import { UserBadges } from "../common/user-badges";
import { VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing";
>
<div className="d-flex flex-wrap align-items-center text-muted small">
<button
- className="btn btn-sm text-muted me-2"
+ className="btn btn-sm btn-link text-muted me-2"
onClick={linkEvent(this, this.handleCommentCollapse)}
aria-label={this.expandText}
data-tippy-content={this.expandText}
/>
</button>
- <span className="me-2">
- <PersonListing person={cv.creator} />
- </span>
+ <PersonListing person={cv.creator} />
{cv.comment.distinguished && (
- <Icon icon="shield" inline classes="text-danger me-2" />
+ <Icon icon="shield" inline classes="text-danger ms-1" />
)}
- {this.isPostCreator &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("op").toUpperCase(),
- tooltip: I18NextService.i18n.t("creator"),
- classes: "text-bg-info",
- shrink: false,
- })}
-
- {isMod_ &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("mod"),
- tooltip: I18NextService.i18n.t("mod"),
- classes: "text-bg-primary",
- })}
-
- {isAdmin_ &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("admin"),
- tooltip: I18NextService.i18n.t("admin"),
- classes: "text-bg-danger",
- })}
-
- {cv.creator.bot_account &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("bot_account").toLowerCase(),
- tooltip: I18NextService.i18n.t("bot_account"),
- })}
+ <UserBadges
+ classNames="ms-1"
+ isPostCreator={this.isPostCreator}
+ isMod={isMod_}
+ isAdmin={isAdmin_}
+ isBot={cv.creator.bot_account}
+ />
{this.props.showCommunity && (
<>
comment_id: i.commentId,
removed: !i.commentView.comment.removed,
auth: myAuthRequired(),
+ reason: i.state.removeReason,
});
}
const { searchText, selectedIndex, loadingEllipses } = this.state;
return (
- <div className="searchable-select dropdown">
+ <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
<button
id={id}
type="button"
--- /dev/null
+import classNames from "classnames";
+import { Component } from "inferno";
+import { I18NextService } from "../../services";
+
+interface UserBadgesProps {
+ isBanned?: boolean;
+ isDeleted?: boolean;
+ isPostCreator?: boolean;
+ isMod?: boolean;
+ isAdmin?: boolean;
+ isBot?: boolean;
+ classNames?: string;
+}
+
+export function getRoleLabelPill({
+ label,
+ tooltip,
+ classes,
+ shrink = true,
+}: {
+ label: string;
+ tooltip: string;
+ classes?: string;
+ shrink?: boolean;
+}) {
+ return (
+ <span
+ className={`badge ${classes ?? "text-bg-light"}`}
+ aria-label={tooltip}
+ data-tippy-content={tooltip}
+ >
+ {shrink ? label[0].toUpperCase() : label}
+ </span>
+ );
+}
+
+export class UserBadges extends Component<UserBadgesProps> {
+ render() {
+ return (
+ (this.props.isBanned ||
+ this.props.isPostCreator ||
+ this.props.isMod ||
+ this.props.isAdmin ||
+ this.props.isBot) && (
+ <span
+ className={classNames(
+ "row d-inline-flex gx-1",
+ this.props.classNames
+ )}
+ >
+ {this.props.isBanned && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("banned"),
+ tooltip: I18NextService.i18n.t("banned"),
+ classes: "text-bg-danger",
+ shrink: false,
+ })}
+ </span>
+ )}
+ {this.props.isDeleted && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("deleted"),
+ tooltip: I18NextService.i18n.t("deleted"),
+ classes: "text-bg-danger",
+ shrink: false,
+ })}
+ </span>
+ )}
+
+ {this.props.isPostCreator && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("op").toUpperCase(),
+ tooltip: I18NextService.i18n.t("creator"),
+ classes: "text-bg-info",
+ shrink: false,
+ })}
+ </span>
+ )}
+ {this.props.isMod && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("mod"),
+ tooltip: I18NextService.i18n.t("mod"),
+ classes: "text-bg-primary",
+ })}
+ </span>
+ )}
+ {this.props.isAdmin && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("admin"),
+ tooltip: I18NextService.i18n.t("admin"),
+ classes: "text-bg-danger",
+ })}
+ </span>
+ )}
+ {this.props.isBot && (
+ <span className="col">
+ {getRoleLabelPill({
+ label: I18NextService.i18n.t("bot_account").toLowerCase(),
+ tooltip: I18NextService.i18n.t("bot_account"),
+ })}
+ </span>
+ )}
+ </span>
+ )
+ );
+ }
+}
<>
<button
type="button"
- className={`btn-animate btn py-0 px-1 ${
+ className={`btn btn-animate btn-sm btn-link py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted"
}`}
data-tippy-content={tippy(this.props.counts)}
{this.props.enableDownvotes && (
<button
type="button"
- className={`ms-2 btn-animate btn py-0 px-1 ${
+ className={`ms-2 btn btn-sm btn-link btn-animate btn py-0 px-1 ${
this.props.my_vote === -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, handleDownvote)}
const { listingType, page } = this.getCommunitiesQueryParams();
return (
<div>
- <h1 className="h4">
+ <h1 className="h4 mb-4">
{I18NextService.i18n.t("list_of_communities")}
</h1>
<div className="row g-2 justify-content-between">
community && (
<div className="mb-2">
<BannerIconHeader banner={community.banner} icon={community.icon} />
- <h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
+ <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
<CommunityLink
community={community}
realLink
/>
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
- <h5>{I18NextService.i18n.t("create_community")}</h5>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("create_community")}
+ </h1>
<CommunityForm
onUpsertCommunity={this.handleCommunityCreate}
enableNsfw={enableNsfw(this.state.siteRes)}
return (
<div>
- <h5 className="mb-0">
+ <h2 className="h5 mb-0">
{this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
{I18NextService.i18n.t("nsfw")}
</small>
)}
- </h5>
+ </h2>
<CommunityLink
community={community}
realLink
role="tabpanel"
id="site-tab-pane"
>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("site_config")}
+ </h1>
<div className="row">
<div className="col-12 col-md-6">
<SiteForm
</div>
<div className="col-12 col-md-6">
{this.admins()}
+ <hr />
{this.bannedUsers()}
</div>
</div>
admins() {
return (
<>
- <h5>{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}</h5>
+ <h2 className="h5">
+ {capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
+ </h2>
<ul className="list-unstyled">
{this.state.siteRes.admins.map(admin => (
<li key={admin.person.id} className="list-inline-item">
const bans = this.state.bannedRes.data.banned;
return (
<>
- <h5>{I18NextService.i18n.t("banned_users")}</h5>
+ <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
<ul className="list-unstyled">
{bans.map(banned => (
<li key={banned.person.id} className="list-inline-item">
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
{customEmojisLookup.size > 0 && (
<div>
<EmojiMart
case "success": {
const instances = this.state.instancesRes.data.federated_instances;
return instances ? (
- <div className="row">
- <div className="col-md-6">
- <h5>{I18NextService.i18n.t("linked_instances")}</h5>
- {this.itemList(instances.linked)}
- </div>
- {instances.allowed && instances.allowed.length > 0 && (
- <div className="col-md-6">
- <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
- {this.itemList(instances.allowed)}
- </div>
- )}
- {instances.blocked && instances.blocked.length > 0 && (
+ <>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
+ <div className="row">
<div className="col-md-6">
- <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
- {this.itemList(instances.blocked)}
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("linked_instances")}
+ </h2>
+ {this.itemList(instances.linked)}
</div>
- )}
- </div>
+ </div>
+ <div className="row">
+ {instances.allowed && instances.allowed.length > 0 && (
+ <div className="col-md-6">
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("allowed_instances")}
+ </h2>
+ {this.itemList(instances.allowed)}
+ </div>
+ )}
+ {instances.blocked && instances.blocked.length > 0 && (
+ <div className="col-md-6">
+ <h2 className="h5 mb-3">
+ {I18NextService.i18n.t("blocked_instances")}
+ </h2>
+ {this.itemList(instances.blocked)}
+ </div>
+ )}
+ </div>
+ </>
) : (
<></>
);
loginResetForm() {
return (
<form onSubmit={linkEvent(this, this.handlePasswordReset)}>
- <h5>
+ <h1 className="h4 mb-4">
{capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
- </h5>
+ </h1>
<div className="form-group row">
<label className="col-form-label">
return (
<div>
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
- <h5>{I18NextService.i18n.t("login")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
<div className="mb-3 row">
<label
className="col-sm-2 col-form-label"
className="rate-limit-form"
onSubmit={linkEvent(this, submitRateLimitForm)}
>
- <h5>{I18NextService.i18n.t("rate_limit_header")}</h5>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("rate_limit_header")}
+ </h1>
<Tabs
tabs={rateLimitTypes.map(rateLimitType => ({
key: rateLimitType,
<Helmet title={this.documentTitle} />
<div className="row">
<div className="col-12 offset-lg-3 col-lg-6">
- <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("lemmy_instance_setup")}
+ </h1>
{!this.state.doneRegisteringUser ? (
this.registerUser()
) : (
registerUser() {
return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
- <h5>{I18NextService.i18n.t("setup_admin")}</h5>
+ <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
<div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="username">
{I18NextService.i18n.t("username")}
className="was-validated"
onSubmit={linkEvent(this, this.handleRegisterSubmit)}
>
- <h5>{this.titleName(siteView)}</h5>
+ <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
{this.isLemmyMl && (
<div className="mb-3 row">
!this.state.submitted
}
/>
- <h5>{`${
+ <h2 className="h5">{`${
siteSetup
? capitalizeFirstLetter(I18NextService.i18n.t("edit"))
: capitalizeFirstLetter(I18NextService.i18n.t("setup"))
- } ${I18NextService.i18n.t("your_site")}`}</h5>
+ } ${I18NextService.i18n.t("your_site")}`}</h2>
<div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="create-site-name">
{I18NextService.i18n.t("name")}
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
<div className="table-responsive col-12">
<table id="taglines_table" className="table table-sm table-hover">
<thead className="pointer">
path={this.context.router.route.match.url}
/>
- <div>
- <div
- className="alert alert-warning text-sm-start text-xs-center"
- role="alert"
- >
- <Icon
- icon="alert-triangle"
- inline
- classes="me-sm-2 mx-auto d-sm-inline d-block"
- />
- <T i18nKey="modlog_content_warning" class="d-inline">
- #<strong>#</strong>#
- </T>
- </div>
- {this.state.communityRes.state === "success" && (
- <h5>
- <Link
- className="text-body"
- to={`/c/${this.state.communityRes.data.community_view.community.name}`}
- >
- /c/{this.state.communityRes.data.community_view.community.name}{" "}
- </Link>
- <span>{I18NextService.i18n.t("modlog")}</span>
- </h5>
- )}
- <div className="row mb-2">
- <div className="col-sm-6">
- <select
- value={actionType}
- onChange={linkEvent(this, this.handleFilterActionChange)}
- className="form-select"
- aria-label="action"
- >
- <option disabled aria-hidden="true">
- {I18NextService.i18n.t("filter_by_action")}
- </option>
- <option value={"All"}>{I18NextService.i18n.t("all")}</option>
- <option value={"ModRemovePost"}>Removing Posts</option>
- <option value={"ModLockPost"}>Locking Posts</option>
- <option value={"ModFeaturePost"}>Featuring Posts</option>
- <option value={"ModRemoveComment"}>Removing Comments</option>
- <option value={"ModRemoveCommunity"}>
- Removing Communities
- </option>
- <option value={"ModBanFromCommunity"}>
- Banning From Communities
- </option>
- <option value={"ModAddCommunity"}>
- Adding Mod to Community
- </option>
- <option value={"ModTransferCommunity"}>
- Transferring Communities
- </option>
- <option value={"ModAdd"}>Adding Mod to Site</option>
- <option value={"ModBan"}>Banning From Site</option>
- </select>
- </div>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
+
+ <div
+ className="alert alert-warning text-sm-start text-xs-center"
+ role="alert"
+ >
+ <Icon
+ icon="alert-triangle"
+ inline
+ classes="me-sm-2 mx-auto d-sm-inline d-block"
+ />
+ <T i18nKey="modlog_content_warning" class="d-inline">
+ #<strong>#</strong>#
+ </T>
+ </div>
+ {this.state.communityRes.state === "success" && (
+ <h5>
+ <Link
+ className="text-body"
+ to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+ >
+ /c/{this.state.communityRes.data.community_view.community.name}{" "}
+ </Link>
+ <span>{I18NextService.i18n.t("modlog")}</span>
+ </h5>
+ )}
+ <div className="row mb-2">
+ <div className="col-sm-6">
+ <select
+ value={actionType}
+ onChange={linkEvent(this, this.handleFilterActionChange)}
+ className="form-select"
+ aria-label="action"
+ >
+ <option disabled aria-hidden="true">
+ {I18NextService.i18n.t("filter_by_action")}
+ </option>
+ <option value={"All"}>{I18NextService.i18n.t("all")}</option>
+ <option value={"ModRemovePost"}>Removing Posts</option>
+ <option value={"ModLockPost"}>Locking Posts</option>
+ <option value={"ModFeaturePost"}>Featuring Posts</option>
+ <option value={"ModRemoveComment"}>Removing Comments</option>
+ <option value={"ModRemoveCommunity"}>Removing Communities</option>
+ <option value={"ModBanFromCommunity"}>
+ Banning From Communities
+ </option>
+ <option value={"ModAddCommunity"}>Adding Mod to Community</option>
+ <option value={"ModTransferCommunity"}>
+ Transferring Communities
+ </option>
+ <option value={"ModAdd"}>Adding Mod to Site</option>
+ <option value={"ModBan"}>Banning From Site</option>
+ </select>
</div>
- <div className="row mb-2">
+ </div>
+ <div className="row mb-2">
+ <Filter
+ filterType="user"
+ onChange={this.handleUserChange}
+ onSearch={this.handleSearchUsers}
+ value={userId}
+ options={userSearchOptions}
+ loading={loadingUserSearch}
+ />
+ {!this.isoData.site_res.site_view.local_site
+ .hide_modlog_mod_names && (
<Filter
- filterType="user"
- onChange={this.handleUserChange}
- onSearch={this.handleSearchUsers}
- value={userId}
- options={userSearchOptions}
- loading={loadingUserSearch}
+ filterType="mod"
+ onChange={this.handleModChange}
+ onSearch={this.handleSearchMods}
+ value={modId}
+ options={modSearchOptions}
+ loading={loadingModSearch}
/>
- {!this.isoData.site_res.site_view.local_site
- .hide_modlog_mod_names && (
- <Filter
- filterType="mod"
- onChange={this.handleModChange}
- onSearch={this.handleSearchMods}
- value={modId}
- options={modSearchOptions}
- loading={loadingModSearch}
- />
- )}
- </div>
- {this.renderModlogTable()}
+ )}
</div>
+ {this.renderModlogTable()}
</div>
);
}
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="mb-2">
+ <h1 className="h4 mb-4">
{I18NextService.i18n.t("inbox")}
{inboxRss && (
<small>
/>
</small>
)}
- </h5>
+ </h1>
{this.hasUnreads && (
<button
- className="btn btn-secondary mb-2"
+ className="btn btn-secondary mb-2 mb-sm-3"
onClick={linkEvent(this, this.handleMarkAllAsRead)}
>
{this.state.markAllAsReadRes.state == "loading" ? (
unreadOrAllRadios() {
return (
- <div className="btn-group btn-group-toggle flex-wrap mb-2">
+ <div className="btn-group btn-group-toggle flex-wrap">
<label
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
messageTypeRadios() {
return (
- <div className="btn-group btn-group-toggle flex-wrap mb-2">
+ <div className="btn-group btn-group-toggle flex-wrap">
<label
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"}
selects() {
return (
- <div className="mb-2">
- <span className="me-3">{this.unreadOrAllRadios()}</span>
- <span className="me-3">{this.messageTypeRadios()}</span>
- <CommentSortSelect
- sort={this.state.sort}
- onChange={this.handleSortChange}
- />
+ <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+ <div className="col">{this.unreadOrAllRadios()}</div>
+ <div className="col">{this.messageTypeRadios()}</div>
+ <div className="col">
+ <CommentSortSelect
+ sort={this.state.sort}
+ onChange={this.handleSortChange}
+ />
+ </div>
</div>
);
}
this.state.messagesRes.state == "loading"
) {
return (
- <h5>
+ <h1 className="h4">
<Spinner large />
- </h5>
+ </h1>
);
} else {
return (
switch (this.state.repliesRes.state) {
case "loading":
return (
- <h5>
+ <h1 className="h4">
<Spinner large />
- </h5>
+ </h1>
);
case "success": {
const replies = this.state.repliesRes.data.replies;
switch (this.state.mentionsRes.state) {
case "loading":
return (
- <h5>
+ <h1 className="h4">
<Spinner large />
- </h5>
+ </h1>
);
case "success": {
const mentions = this.state.mentionsRes.data.mentions;
switch (this.state.messagesRes.state) {
case "loading":
return (
- <h5>
+ <h1 className="h4">
<Spinner large />
- </h5>
+ </h1>
);
case "success": {
const messages = this.state.messagesRes.data.private_messages;
/>
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
- <h5>{I18NextService.i18n.t("password_change")}</h5>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("password_change")}
+ </h1>
{this.passwordChangeForm()}
</div>
</div>
enableDownvotes,
enableNsfw,
getCommentParentId,
- getRoleLabelPill,
myAuth,
myAuthRequired,
setIsoData,
import { Icon, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { SortSelect } from "../common/sort-select";
+import { UserBadges } from "../common/user-badges";
import { CommunityLink } from "../community/community-link";
import { PersonDetails } from "./person-details";
import { PersonListing } from "./person-listing";
communityViews.length > 0 && (
<div className="card border-secondary mb-3">
<div className="card-body">
- <h5>{I18NextService.i18n.t(translationKey)}</h5>
+ <h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
<ul className="list-unstyled mb-0">
{communityViews.map(({ community }) => (
<li key={community.id}>
async fetchUserData() {
const { page, sort, view } = getProfileQueryParams();
- this.setState({ personRes: { state: "empty" } });
+ this.setState({ personRes: { state: "loading" } });
this.setState({
personRes: await HttpService.client.getPersonDetails({
username: this.props.match.params.username,
<div className="mb-0 d-flex flex-wrap">
<div>
{pv.person.display_name && (
- <h5 className="mb-0">{pv.person.display_name}</h5>
+ <h1 className="h4 mb-4">{pv.person.display_name}</h1>
)}
<ul className="list-inline mb-2">
<li className="list-inline-item">
hideAvatar
/>
</li>
- {isBanned(pv.person) && (
- <li className="list-inline-item">
- {getRoleLabelPill({
- label: I18NextService.i18n.t("banned"),
- tooltip: I18NextService.i18n.t("banned"),
- classes: "text-bg-danger",
- shrink: false,
- })}
- </li>
- )}
- {pv.person.deleted && (
- <li className="list-inline-item">
- {getRoleLabelPill({
- label: I18NextService.i18n.t("deleted"),
- tooltip: I18NextService.i18n.t("deleted"),
- classes: "text-bg-danger",
- shrink: false,
- })}
- </li>
- )}
- {pv.person.admin && (
- <li className="list-inline-item">
- {getRoleLabelPill({
- label: I18NextService.i18n.t("admin"),
- tooltip: I18NextService.i18n.t("admin"),
- shrink: false,
- })}
- </li>
- )}
- {pv.person.bot_account && (
- <li className="list-inline-item">
- {getRoleLabelPill({
- label: I18NextService.i18n
- .t("bot_account")
- .toLowerCase(),
- tooltip: I18NextService.i18n.t("bot_account"),
- shrink: false,
- })}
- </li>
- )}
+ <li className="list-inline-item">
+ <UserBadges
+ classNames="ms-1"
+ isBanned={isBanned(pv.person)}
+ isDeleted={pv.person.deleted}
+ isAdmin={pv.person.admin}
+ isBot={pv.person.bot_account}
+ />
+ </li>
</ul>
</div>
{this.banDialog(pv)}
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="mb-2">
+ <h1 className="h4 mb-4">
{I18NextService.i18n.t("registration_applications")}
- </h5>
+ </h1>
{this.selects()}
{this.applicationList(apps)}
<Paginator
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("reports")}</h1>
{this.selects()}
{this.section}
<Paginator
changePasswordHtmlForm() {
return (
<>
- <h5>{I18NextService.i18n.t("change_password")}</h5>
+ <h2 className="h5">{I18NextService.i18n.t("change_password")}</h2>
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
<div className="mb-3 row">
<label className="col-sm-5 col-form-label" htmlFor="user-password">
blockedUsersList() {
return (
<>
- <h5>{I18NextService.i18n.t("blocked_users")}</h5>
+ <h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
<ul className="list-unstyled mb-0">
{this.state.personBlocks.map(pb => (
<li key={pb.target.id}>
blockedCommunitiesList() {
return (
<>
- <h5>{I18NextService.i18n.t("blocked_communities")}</h5>
+ <h2 className="h5">{I18NextService.i18n.t("blocked_communities")}</h2>
<ul className="list-unstyled mb-0">
{this.state.communityBlocks.map(cb => (
<li key={cb.community.id}>
return (
<>
- <h5>{I18NextService.i18n.t("settings")}</h5>
+ <h2 className="h5">{I18NextService.i18n.t("settings")}</h2>
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
<div className="mb-3 row">
<label className="col-sm-3 col-form-label" htmlFor="display-name">
/>
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
- <h5>{I18NextService.i18n.t("verify_email")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("verify_email")}</h1>
{this.state.verifyRes.state == "loading" && (
<h5>
<Spinner large />
id="createPostForm"
className="col-12 col-lg-6 offset-lg-3 mb-4"
>
- <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("create_post")}
+ </h1>
<PostForm
onCreate={this.handlePostCreate}
params={locationState}
-import { getRoleLabelPill, myAuthRequired } from "@utils/app";
+import { myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
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";
return (
<div className="small mb-1 mb-md-0">
- <span className="me-1">
- <PersonListing person={post_view.creator} />
- </span>
- {this.creatorIsMod_ &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("mod"),
- tooltip: I18NextService.i18n.t("mod"),
- classes: "text-bg-primary",
- })}
- {this.creatorIsAdmin_ &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("admin"),
- tooltip: I18NextService.i18n.t("admin"),
- classes: "text-bg-danger",
- })}
- {post_view.creator.bot_account &&
- getRoleLabelPill({
- label: I18NextService.i18n.t("bot_account").toLowerCase(),
- tooltip: I18NextService.i18n.t("bot_account"),
- })}
+ <PersonListing person={post_view.creator} />
+ <UserBadges
+ classNames="ms-1"
+ isMod={this.creatorIsMod_}
+ isAdmin={this.creatorIsAdmin_}
+ isBot={post_view.creator.bot_account}
+ />
{this.props.showCommunity && (
<>
{" "}
return (
<>
<div className="post-title">
- <h5 className="d-inline text-break">
+ <h1 className="h5 d-inline text-break">
{url && this.props.showBody ? (
<a
className={
) : (
this.postLink
)}
- </h5>
+ </h1>
{/**
* If there is (a) a URL and an embed title, or (b) a post body, and
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,
return (
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
- <h1 className="h4">
+ <h1 className="h4 mb-4">
{I18NextService.i18n.t("create_private_message")}
</h1>
<PrivateMessageForm
loading: boolean;
}) => {
return (
- <div className="mb-3 col-sm-6">
- <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
+ <div className="col-sm-6">
+ <label className="mb-1" htmlFor={`${filterType}-filter`}>
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
</label>
<SearchableSelect
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5>{I18NextService.i18n.t("search")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
{this.selects}
{this.searchForm}
{this.displayResults(type)}
get searchForm() {
return (
- <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
- <div className="col-auto">
+ <form
+ className="row gx-2 gy-3"
+ onSubmit={linkEvent(this, this.handleSearchSubmit)}
+ >
+ <div className="col-auto flex-grow-1 flex-sm-grow-0">
<input
type="text"
className="form-control me-2 mb-2 col-sm-8"
communitiesRes.data.communities.length > 0;
return (
- <div className="mb-2">
- <select
- value={type}
- onChange={linkEvent(this, this.handleTypeChange)}
- className="form-select d-inline-block w-auto mb-2"
- aria-label={I18NextService.i18n.t("type")}
- >
- <option disabled aria-hidden="true">
- {I18NextService.i18n.t("type")}
- </option>
- {searchTypes.map(option => (
- <option value={option} key={option}>
- {I18NextService.i18n.t(
- option.toString().toLowerCase() as NoOptionI18nKeys
- )}
- </option>
- ))}
- </select>
- <span className="ms-2">
- <ListingTypeSelect
- type_={listingType}
- showLocal={showLocal(this.isoData)}
- showSubscribed
- onChange={this.handleListingTypeChange}
- />
- </span>
- <span className="ms-2">
- <SortSelect
- sort={sort}
- onChange={this.handleSortChange}
- hideHot
- hideMostComments
- />
- </span>
- <div className="row">
+ <>
+ <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+ <div className="col">
+ <select
+ value={type}
+ onChange={linkEvent(this, this.handleTypeChange)}
+ className="form-select d-inline-block w-auto"
+ aria-label={I18NextService.i18n.t("type")}
+ >
+ <option disabled aria-hidden="true">
+ {I18NextService.i18n.t("type")}
+ </option>
+ {searchTypes.map(option => (
+ <option value={option} key={option}>
+ {I18NextService.i18n.t(
+ option.toString().toLowerCase() as NoOptionI18nKeys
+ )}
+ </option>
+ ))}
+ </select>
+ </div>
+ <div className="col">
+ <ListingTypeSelect
+ type_={listingType}
+ showLocal={showLocal(this.isoData)}
+ showSubscribed
+ onChange={this.handleListingTypeChange}
+ />
+ </div>
+ <div className="col">
+ <SortSelect
+ sort={sort}
+ onChange={this.handleSortChange}
+ hideHot
+ hideMostComments
+ />
+ </div>
+ </div>
+ <div className="row gy-2 gx-4 mb-3">
{hasCommunities && (
<Filter
filterType="community"
loading={searchCreatorLoading}
/>
</div>
- </div>
+ </>
);
}
+++ /dev/null
-export default function getRoleLabelPill({
- label,
- tooltip,
- classes,
- shrink = true,
-}: {
- label: string;
- tooltip: string;
- classes?: string;
- shrink?: boolean;
-}) {
- return (
- <span
- className={`badge me-1 ${classes ?? "text-bg-light"}`}
- aria-label={tooltip}
- data-tippy-content={tooltip}
- >
- {shrink ? label[0].toUpperCase() : label}
- </span>
- );
-}
import getDepthFromComment from "./get-depth-from-comment";
import getIdFromProps from "./get-id-from-props";
import getRecipientIdFromProps from "./get-recipient-id-from-props";
-import getRoleLabelPill from "./get-role-label-pill";
import getUpdatedSearchId from "./get-updated-search-id";
import initializeSite from "./initialize-site";
import insertCommentIntoTree from "./insert-comment-into-tree";
getDepthFromComment,
getIdFromProps,
getRecipientIdFromProps,
- getRoleLabelPill,
getUpdatedSearchId,
initializeSite,
insertCommentIntoTree,