Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'main' into vaporwave

Browse source
This commit is contained in:
SleeplessOne1917 2023-07-04 00:05:45 +00:00 committed by GitHub
commit a841c55368
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 1873 additions and 1417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.github/pull_request_template.md vendored Normal file
View file

@ -0,0 +1,12 @@
## 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

2
package.json
View file

@ -1,6 +1,6 @@
{
"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",

11
src/assets/css/main.css
View file

@ -81,6 +81,7 @@
}
.vote-bar {
min-width: 5ch;
margin-top: -6.5px;
}
@ -253,10 +254,6 @@ hr {
-ms-filter: blur(10px);
}
.img-cover {
object-fit: cover;
}
.img-expanded {
max-height: 90vh;
}
@ -349,10 +346,12 @@ br.big {
}
.avatar-overlay {
width: 20%;
height: 20%;
width: 20vw;
height: 20vw;
max-width: 120px;
max-height: 120px;
min-width: 80px;
min-height: 80px;
}
.avatar-pushup {

2
src/server/handlers/catch-all-handler.tsx
View file

@ -90,7 +90,7 @@ export default async (req: Request, res: Response) => {
}
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

16
src/shared/components/app/app.tsx
View file

@ -1,10 +1,11 @@
import { isAuthPath, setIsoData } from "@utils/app";
import { dataBsTheme } from "@utils/browser";
import { Component, RefObject, createRef, linkEvent } from "inferno";
import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
import { IsoDataOptionalSite } from "../../interfaces";
import { routes } from "../../routes";
import { FirstLoadService, I18NextService } from "../../services";
import { FirstLoadService, I18NextService, UserService } from "../../services";
import AuthGuard from "../common/auth-guard";
import ErrorGuard from "../common/error-guard";
import { ErrorPage } from "./error-page";
@ -25,6 +26,13 @@ export class App extends Component<any, any> {
event.preventDefault();
this.mainContentRef.current?.focus();
}
user = UserService.Instance.myUserInfo;
componentDidMount() {
this.setState({ bsTheme: dataBsTheme(this.user) });
}
render() {
const siteRes = this.isoData.site_res;
const siteView = siteRes?.site_view;
@ -32,7 +40,11 @@ export class App extends Component<any, any> {
return (
<>
<Provider i18next={I18NextService.i18n}>
<div id="app" className="lemmy-site">
<div
id="app"
className="lemmy-site"
data-bs-theme={this.state?.bsTheme}
>
<button
type="button"
className="btn skip-link bg-light position-absolute start-0 z-3"

3
src/shared/components/app/error-page.tsx
View file

@ -1,4 +1,5 @@
import { setIsoData } from "@utils/app";
import { removeAuthParam } from "@utils/helpers";
import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
@ -58,7 +59,7 @@ export class ErrorPage extends Component<any, any> {
<T
i18nKey="error_code_message"
parent="p"
interpolation={{ error: errorPageData.error }}
interpolation={{ error: removeAuthParam(errorPageData.error) }}
>
#<strong className="text-danger">#</strong>#
</T>

45
src/shared/components/comment/comment-node.tsx
View file

@ -1,7 +1,6 @@
import {
colorList,
getCommentParentId,
getRoleLabelPill,
myAuth,
myAuthRequired,
showScores,
@ -63,6 +62,7 @@ import { I18NextService, UserService } from "../../services";
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";
@ -299,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
>
<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}
@ -310,41 +310,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
/>
</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 && (
<>
@ -1483,6 +1461,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
comment_id: i.commentId,
removed: !i.commentView.comment.removed,
auth: myAuthRequired(),
reason: i.state.removeReason,
});
}

52
src/shared/components/common/image-upload-form.tsx
View file

@ -1,4 +1,5 @@
import { randomStr } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { HttpService, I18NextService, UserService } from "../../services";
import { toast } from "../../toast";
@ -33,38 +34,35 @@ export class ImageUploadForm extends Component<
render() {
return (
<form className="image-upload-form d-inline">
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
{this.props.imageSrc ? (
<span className="d-inline-block position-relative">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
className={`img-fluid ${
this.props.rounded ? "rounded-circle" : ""
}`}
/>
<button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
type="button"
onClick={linkEvent(this, this.handleRemoveImage)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</button>
</span>
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>
)}
</label>
{this.props.imageSrc && (
<span className="d-inline-block position-relative mb-2">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
className={classNames({
"rounded-circle object-fit-cover": this.props.rounded,
"img-fluid": !this.props.rounded,
})}
/>
<button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
type="button"
onClick={linkEvent(this, this.handleRemoveImage)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</button>
</span>
)}
<input
id={this.id}
type="file"
accept="image/*,video/*"
className="small form-control"
name={this.id}
className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)}
/>

13
src/shared/components/common/markdown-textarea.tsx
View file

@ -173,6 +173,9 @@ export class MarkdownTextArea extends Component<
<form className="btn btn-sm text-muted fw-bold">
<label
htmlFor={`file-upload-${this.id}`}
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
@ -473,7 +476,7 @@ export class MarkdownTextArea extends Component<
// Keybind handler
// Keybinds inspired by github comment area
handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
if (event.ctrlKey) {
if (event.ctrlKey || event.metaKey) {
switch (event.key) {
case "k": {
i.handleInsertLink(i, event);
@ -702,18 +705,20 @@ export class MarkdownTextArea extends Component<
quoteInsert() {
const textarea: any = document.getElementById(this.id);
const selectedText = window.getSelection()?.toString();
const { content } = this.state;
let { content } = this.state;
if (selectedText) {
const quotedText =
selectedText
.split("\n")
.map(t => `> ${t}`)
.join("\n") + "\n\n";
if (!content) {
this.setState({ content: "" });
content = "";
} else {
this.setState({ content: `${content}\n` });
content = `${content}\n\n`;
}
this.setState({
content: `${content}${quotedText}`,
});

6
src/shared/components/common/pictrs-image.tsx
View file

@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner,
"thumbnail rounded":
"thumbnail rounded object-fit-cover":
this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw,
"img-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle img-cover avatar-overlay":
"object-fit-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay,
"avatar-pushup": this.props.pushup,
})}

2
src/shared/components/common/searchable-select.tsx
View file

@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
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"

112
src/shared/components/common/user-badges.tsx Normal file
View file

@ -0,0 +1,112 @@
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>
)
);
}
}

29
src/shared/components/common/vote-buttons.tsx
View file

@ -64,8 +64,6 @@ const handleUpvote = (i: VoteButtons) => {
auth: myAuthRequired(),
});
}
i.setState({ upvoteLoading: false });
};
const handleDownvote = (i: VoteButtons) => {
@ -86,7 +84,6 @@ const handleDownvote = (i: VoteButtons) => {
auth: myAuthRequired(),
});
}
i.setState({ downvoteLoading: false });
};
export class VoteButtonsCompact extends Component<
@ -102,12 +99,21 @@ export class VoteButtonsCompact extends Component<
super(props, context);
}
componentWillReceiveProps(nextProps: VoteButtonsProps) {
if (this.props !== nextProps) {
this.setState({
upvoteLoading: false,
downvoteLoading: false,
});
}
}
render() {
return (
<>
<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)}
@ -131,7 +137,7 @@ export class VoteButtonsCompact extends Component<
{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)}
@ -172,9 +178,18 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
super(props, context);
}
componentWillReceiveProps(nextProps: VoteButtonsProps) {
if (this.props !== nextProps) {
this.setState({
upvoteLoading: false,
downvoteLoading: false,
});
}
}
render() {
return (
<div className="vote-bar pe-0 small text-center">
<div className="vote-bar small text-center">
<button
type="button"
className={`btn-animate btn btn-link p-0 ${
@ -193,7 +208,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
</button>
{showScores() ? (
<div
className="unselectable pointer text-muted px-1 post-score"
className="unselectable pointer text-muted post-score"
data-tippy-content={tippy(this.props.counts)}
>
{numToSI(this.props.counts.score)}

2
src/shared/components/community/communities.tsx
View file

@ -102,7 +102,7 @@ export class Communities extends Component<any, CommunitiesState> {
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">

2
src/shared/components/community/community.tsx
View file

@ -485,7 +485,7 @@ export class Community extends Component<
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

4
src/shared/components/community/create-community.tsx
View file

@ -39,7 +39,9 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
/>
<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)}

6
src/shared/components/community/sidebar.tsx
View file

@ -169,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
return (
<div>
<h5 className="mb-0">
<h2 className="h5 mb-0">
{this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
@ -191,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{I18NextService.i18n.t("nsfw")}
</small>
)}
</h5>
</h2>
<CommunityLink
community={community}
realLink
@ -258,7 +258,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<Spinner />
) : (
<>
<Icon icon="check" classes="icon-inline text-success me-1" />
<Icon icon="check" classes="icon-inline me-1" />
{I18NextService.i18n.t("joined")}
</>
)}

10
src/shared/components/home/admin-settings.tsx
View file

@ -135,6 +135,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
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
@ -149,6 +152,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
</div>
<div className="col-12 col-md-6">
{this.admins()}
<hr />
{this.bannedUsers()}
</div>
</div>
@ -249,7 +253,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
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">
@ -289,7 +295,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
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">

54
src/shared/components/home/emojis-form.tsx
View file

@ -77,7 +77,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
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
@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
</div>
)}
<div className="table-responsive">
<table id="emojis_table" className="table table-sm table-hover">
<table
id="emojis_table"
className="table table-sm table-hover align-middle"
>
<thead className="pointer">
<tr>
<th>{I18NextService.i18n.t("column_emoji")}</th>
@ -129,30 +132,31 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
/>
)}
{cv.image_url.length === 0 && (
<form>
<label
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
<label
// TODO: Fix this linting violation
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
/>
</label>
)}
</td>
<td className="text-right">

45
src/shared/components/home/instances.tsx
View file

@ -85,24 +85,35 @@ export class Instances extends Component<any, InstancesState> {
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)}
<>
<h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
<div className="row">
<div className="col-md-6">
<h2 className="h5 mb-3">
{I18NextService.i18n.t("linked_instances")}
</h2>
{this.itemList(instances.linked)}
</div>
</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 && (
<div className="col-md-6">
<h5>{I18NextService.i18n.t("blocked_instances")}</h5>
{this.itemList(instances.blocked)}
</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>
</>
) : (
<></>
);

4
src/shared/components/home/login-reset.tsx
View file

@ -59,9 +59,9 @@ export class LoginReset extends Component<any, State> {
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">

2
src/shared/components/home/login.tsx
View file

@ -69,7 +69,7 @@ export class Login extends Component<any, State> {
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"

4
src/shared/components/home/rate-limit-form.tsx
View file

@ -145,7 +145,9 @@ export default class RateLimitsForm extends Component<
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,

6
src/shared/components/home/setup.tsx
View file

@ -63,7 +63,9 @@ export class Setup extends Component<any, State> {
<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()
) : (
@ -84,7 +86,7 @@ export class Setup extends Component<any, State> {
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")}

2
src/shared/components/home/signup.tsx
View file

@ -144,7 +144,7 @@ export class Signup extends Component<any, State> {
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">

42
src/shared/components/home/site-form.tsx
View file

@ -136,11 +136,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
!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")}
@ -158,28 +158,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</div>
</div>
<div className="input-group mb-3">
<label className="me-2 col-form-label">
<div className="row mb-3">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("icon")}
</label>
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
onUpload={this.handleIconUpload}
onRemove={this.handleIconRemove}
rounded
/>
<div className="col-sm-10">
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
onUpload={this.handleIconUpload}
onRemove={this.handleIconRemove}
rounded
/>
</div>
</div>
<div className="input-group mb-3">
<label className="me-2 col-form-label">
<div className="row mb-3">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("banner")}
</label>
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
onUpload={this.handleBannerUpload}
onRemove={this.handleBannerRemove}
/>
<div className="col-sm-10">
<ImageUploadForm
uploadTitle={I18NextService.i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
onUpload={this.handleBannerUpload}
onRemove={this.handleBannerRemove}
/>
</div>
</div>
<div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="site-desc">

2
src/shared/components/home/tagline-form.tsx
View file

@ -37,7 +37,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
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">

156
src/shared/components/modlog.tsx
View file

@ -751,87 +751,83 @@ export class Modlog extends Component<
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>
</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="mod"
onChange={this.handleModChange}
onSearch={this.handleSearchMods}
value={modId}
options={modSearchOptions}
loading={loadingModSearch}
/>
)}
</div>
{this.renderModlogTable()}
<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>
<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="mod"
onChange={this.handleModChange}
onSearch={this.handleSearchMods}
value={modId}
options={modSearchOptions}
loading={loadingModSearch}
/>
)}
</div>
{this.renderModlogTable()}
</div>
);
}

42
src/shared/components/person/inbox.tsx
View file

@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
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>
@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
/>
</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" ? (
@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
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"}
@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
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"}
@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
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>
);
}
@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
this.state.messagesRes.state == "loading"
) {
return (
<h5>
<h1 className="h4">
<Spinner large />
</h5>
</h1>
);
} else {
return (
@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
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;
@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
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;
@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
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;

4
src/shared/components/person/password-change.tsx
View file

@ -47,7 +47,9 @@ export class PasswordChange extends Component<any, State> {
/>
<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>

57
src/shared/components/person/profile.tsx
View file

@ -5,7 +5,6 @@ import {
enableDownvotes,
enableNsfw,
getCommentParentId,
getRoleLabelPill,
myAuth,
myAuthRequired,
setIsoData,
@ -85,6 +84,7 @@ import { HtmlTags } from "../common/html-tags";
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";
@ -137,7 +137,7 @@ const getCommunitiesListing = (
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}>
@ -232,7 +232,7 @@ export class Profile extends Component<
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,
@ -472,7 +472,7 @@ export class Profile extends Component<
<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">
@ -484,46 +484,15 @@ export class Profile extends Component<
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)}

4
src/shared/components/person/registration-applications.tsx
View file

@ -100,9 +100,9 @@ export class RegistrationApplications extends Component<
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

2
src/shared/components/person/reports.tsx
View file

@ -152,7 +152,7 @@ export class Reports extends Component<any, ReportsState> {
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

8
src/shared/components/person/settings.tsx
View file

@ -316,7 +316,7 @@ export class Settings extends Component<any, SettingsState> {
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">
@ -409,7 +409,7 @@ export class Settings extends Component<any, SettingsState> {
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}>
@ -453,7 +453,7 @@ export class Settings extends Component<any, SettingsState> {
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}>
@ -484,7 +484,7 @@ export class Settings extends Component<any, SettingsState> {
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">

2
src/shared/components/person/verify-email.tsx
View file

@ -60,7 +60,7 @@ export class VerifyEmail extends Component<any, State> {
/>
<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 />

4
src/shared/components/post/create-post.tsx
View file

@ -170,7 +170,9 @@ export class CreatePost extends Component<
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}

111
src/shared/components/post/post-form.tsx
View file

@ -349,32 +349,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<input
type="url"
id="post-url"
className="form-control"
className="form-control mb-3"
value={url}
onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, handleImageUploadPaste)}
/>
{this.renderSuggestedTitleCopy()}
<form>
<label
htmlFor="file-upload"
className={`${
UserService.Instance.myUserInfo && "pointer"
} d-inline-block float-right text-muted fw-bold`}
data-tippy-content={I18NextService.i18n.t("upload_image")}
>
<Icon icon="image" classes="icon-inline" />
</label>
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
</form>
{url && validURL(url) && (
<div>
<a
@ -404,56 +384,73 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</a>
</div>
)}
</div>
</div>
<div className="mb-3 row">
<label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
{capitalizeFirstLetter(I18NextService.i18n.t("image"))}
<Icon icon="image" classes="icon-inline ms-1" />
</label>
<div className="col-sm-10">
<input
id="file-upload"
type="file"
accept="image/*,video/*"
name="file"
className="small col-sm-10 form-control"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)}
/>
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
<img src={url} className="img-fluid mt-2" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
aria-label={I18NextService.i18n.t("delete")}
data-tippy-content={I18NextService.i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div>
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
showCommunity
posts={this.props.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
viewOnly
// All of these are unused, since its view only
onPostEdit={() => {}}
onPostVote={() => {}}
onPostReport={() => {}}
onBlockPerson={() => {}}
onLockPost={() => {}}
onDeletePost={() => {}}
onRemovePost={() => {}}
onSavePost={() => {}}
onFeaturePost={() => {}}
onPurgePerson={() => {}}
onPurgePost={() => {}}
onBanPersonFromCommunity={() => {}}
onBanPerson={() => {}}
onAddModToCommunity={() => {}}
onAddAdmin={() => {}}
onTransferCommunity={() => {}}
/>
</>
)}
</div>
<div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-title">
{I18NextService.i18n.t("title")}

52
src/shared/components/post/post-listing.tsx
View file

@ -1,4 +1,4 @@
import { getRoleLabelPill, myAuthRequired } from "@utils/app";
import { myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
@ -55,6 +55,7 @@ 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";
@ -333,7 +334,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return (
<button
type="button"
className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
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")}
@ -406,26 +407,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
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 && (
<>
{" "}
@ -477,8 +465,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
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={
@ -494,15 +482,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
) : (
this.postLink
)}
</h5>
</h1>
{/**
* 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.
* 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.
*/}
{!this.props.showBody &&
post.url &&
post.embed_title &&
((post.url && post.embed_title) || post.body) &&
this.showPreviewButton()}
{post.removed && (
@ -1427,6 +1415,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
UserService.Instance.myUserInfo?.local_user_view.person.id
);
}
handleEditClick(i: PostListing) {
i.setState({ showEdit: true });
}
@ -1550,6 +1539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
post_id: i.postView.post.id,
removed: !i.postView.post.removed,
auth: myAuthRequired(),
reason: i.state.removeReason,
});
}
@ -1621,13 +1611,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
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,

2
src/shared/components/private_message/create-private-message.tsx
View file

@ -115,7 +115,7 @@ export class CreatePrivateMessage extends Component<
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

1
src/shared/components/private_message/private-message.tsx
View file

@ -284,7 +284,6 @@ export class PrivateMessage extends Component<
<div className="row">
<div className="col-sm-6">
<PrivateMessageForm
privateMessageView={message_view}
replyType={true}
recipient={otherPerson}
onCreate={this.props.onCreate}

89
src/shared/components/search.tsx
View file

@ -181,8 +181,8 @@ const Filter = ({
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
@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
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)}
@ -500,8 +500,11 @@ export class Search extends Component<any, SearchState> {
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"
@ -542,41 +545,45 @@ export class Search extends Component<any, SearchState> {
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"
@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
loading={searchCreatorLoading}
/>
</div>
</div>
</>
);
}

1
src/shared/services/UserService.ts
View file

@ -38,6 +38,7 @@ export class UserService {
secure: isHttps(),
domain: location.hostname,
sameSite: true,
path: "/",
});
this.#setJwtInfo();
}

21
src/shared/utils/app/get-role-label-pill.tsx
View file

@ -1,21 +0,0 @@
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>
);
}

2
src/shared/utils/app/index.ts
View file

@ -29,7 +29,6 @@ import getDataTypeString from "./get-data-type-string";
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";
@ -87,7 +86,6 @@ export {
getDepthFromComment,
getIdFromProps,
getRecipientIdFromProps,
getRoleLabelPill,
getUpdatedSearchId,
initializeSite,
insertCommentIntoTree,

30
src/shared/utils/app/setup-date-fns.ts
View file

@ -1,10 +1,12 @@
import setDefaultOptions from "date-fns/setDefaultOptions";
import { I18NextService } from "../../services";
const EN_US = "en-US";
export default async function () {
let lang = I18NextService.i18n.language;
if (lang === "en") {
lang = "en-US";
lang = EN_US;
}
// if lang and country are the same, then date-fns expects only the lang
@ -17,12 +19,26 @@ export default async function () {
}
}
const locale = (
await import(
/* webpackExclude: /\.js\.flow$/ */
`date-fns/locale/${lang}`
)
).default;
let locale;
try {
locale = (
await import(
/* webpackExclude: /\.js\.flow$/ */
`date-fns/locale/${lang}`
)
).default;
} catch (e) {
console.log(
`Could not load locale ${lang} from date-fns, falling back to ${EN_US}`
);
locale = (
await import(
/* webpackExclude: /\.js\.flow$/ */
`date-fns/locale/${EN_US}`
)
).default;
}
setDefaultOptions({
locale,
});

11
src/shared/utils/browser/data-bs-theme.ts Normal file
View file

@ -0,0 +1,11 @@
import isDark from "./is-dark";
export default function dataBsTheme(user) {
return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
(user &&
["darkly", "darkly-red", "darkly-pureblack"].includes(
user.local_user_view.local_user.theme
))
? "dark"
: "light";
}

4
src/shared/utils/browser/index.ts
View file

@ -1,5 +1,7 @@
import canShare from "./can-share";
import dataBsTheme from "./data-bs-theme";
import isBrowser from "./is-browser";
import isDark from "./is-dark";
import loadCss from "./load-css";
import restoreScrollPosition from "./restore-scroll-position";
import saveScrollPosition from "./save-scroll-position";
@ -7,7 +9,9 @@ import share from "./share";
export {
canShare,
dataBsTheme,
isBrowser,
isDark,
loadCss,
restoreScrollPosition,
saveScrollPosition,

7
src/shared/utils/browser/is-dark.ts Normal file
View file

@ -0,0 +1,7 @@
import isBrowser from "./is-browser";
export default function isDark() {
return (
isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
);
}

2
src/shared/utils/helpers/index.ts
View file

@ -17,6 +17,7 @@ import isCakeDay from "./is-cake-day";
import numToSI from "./num-to-si";
import poll from "./poll";
import randomStr from "./random-str";
import removeAuthParam from "./remove-auth-param";
import sleep from "./sleep";
import validEmail from "./valid-email";
import validInstanceTLD from "./valid-instance-tld";
@ -43,6 +44,7 @@ export {
numToSI,
poll,
randomStr,
removeAuthParam,
sleep,
validEmail,
validInstanceTLD,

6
src/shared/utils/helpers/remove-auth-param.ts Normal file
View file

@ -0,0 +1,6 @@
export default function (err: any) {
return err
.toString()
.replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
.replace(new RegExp("([?&])auth=[^&]*&"), "$1");
}

2182
yarn.lock
View file

File diff suppressed because it is too large Load diff