Compare commits
10 commits
search-err
...
main
Author | SHA1 | Date | |
---|---|---|---|
|
26979b91c2 | ||
|
21c8b64cda | ||
|
b1292b958a | ||
|
8730f157da | ||
|
976812a446 | ||
|
b9d9231520 | ||
|
5a95a058ae | ||
|
e829b13053 | ||
|
a0cf54c0a0 | ||
|
8a163fedde |
11 changed files with 82 additions and 40 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "lemmy-ui",
|
"name": "lemmy-ui",
|
||||||
"version": "0.18.1-rc.8",
|
"version": "0.18.1-rc.9",
|
||||||
"description": "An isomorphic UI for lemmy",
|
"description": "An isomorphic UI for lemmy",
|
||||||
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
|
|
|
@ -90,7 +90,7 @@ export default async (req: Request, res: Response) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const error = Object.values(routeData).find(
|
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;
|
) as FailedRequestState | undefined;
|
||||||
|
|
||||||
// Redirect to the 404 if there's an API error
|
// Redirect to the 404 if there's an API error
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import { isAuthPath, setIsoData } from "@utils/app";
|
import { isAuthPath, setIsoData } from "@utils/app";
|
||||||
|
import { dataBsTheme } from "@utils/browser";
|
||||||
import { Component, RefObject, createRef, linkEvent } from "inferno";
|
import { Component, RefObject, createRef, linkEvent } from "inferno";
|
||||||
import { Provider } from "inferno-i18next-dess";
|
import { Provider } from "inferno-i18next-dess";
|
||||||
import { Route, Switch } from "inferno-router";
|
import { Route, Switch } from "inferno-router";
|
||||||
import { IsoDataOptionalSite } from "../../interfaces";
|
import { IsoDataOptionalSite } from "../../interfaces";
|
||||||
import { routes } from "../../routes";
|
import { routes } from "../../routes";
|
||||||
import { FirstLoadService, I18NextService } from "../../services";
|
import { FirstLoadService, I18NextService, UserService } from "../../services";
|
||||||
import AuthGuard from "../common/auth-guard";
|
import AuthGuard from "../common/auth-guard";
|
||||||
import ErrorGuard from "../common/error-guard";
|
import ErrorGuard from "../common/error-guard";
|
||||||
import { ErrorPage } from "./error-page";
|
import { ErrorPage } from "./error-page";
|
||||||
|
@ -25,6 +26,13 @@ export class App extends Component<any, any> {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.mainContentRef.current?.focus();
|
this.mainContentRef.current?.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
user = UserService.Instance.myUserInfo;
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.setState({ bsTheme: dataBsTheme(this.user) });
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const siteRes = this.isoData.site_res;
|
const siteRes = this.isoData.site_res;
|
||||||
const siteView = siteRes?.site_view;
|
const siteView = siteRes?.site_view;
|
||||||
|
@ -32,7 +40,11 @@ export class App extends Component<any, any> {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Provider i18next={I18NextService.i18n}>
|
<Provider i18next={I18NextService.i18n}>
|
||||||
<div id="app" className="lemmy-site">
|
<div
|
||||||
|
id="app"
|
||||||
|
className="lemmy-site"
|
||||||
|
data-bs-theme={this.state?.bsTheme}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn skip-link bg-light position-absolute start-0 z-3"
|
className="btn skip-link bg-light position-absolute start-0 z-3"
|
||||||
|
|
|
@ -299,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
>
|
>
|
||||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm text-muted me-2"
|
className="btn btn-sm btn-link text-muted me-2"
|
||||||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||||
aria-label={this.expandText}
|
aria-label={this.expandText}
|
||||||
data-tippy-content={this.expandText}
|
data-tippy-content={this.expandText}
|
||||||
|
@ -1461,6 +1461,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
comment_id: i.commentId,
|
comment_id: i.commentId,
|
||||||
removed: !i.commentView.comment.removed,
|
removed: !i.commentView.comment.removed,
|
||||||
auth: myAuthRequired(),
|
auth: myAuthRequired(),
|
||||||
|
reason: i.state.removeReason,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
||||||
return (
|
return (
|
||||||
<span className="emoji-picker">
|
<span className="emoji-picker">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm text-muted"
|
className="btn btn-sm btn-link rounded-0 text-muted"
|
||||||
data-tippy-content={I18NextService.i18n.t("emoji")}
|
data-tippy-content={I18NextService.i18n.t("emoji")}
|
||||||
aria-label={I18NextService.i18n.t("emoji")}
|
aria-label={I18NextService.i18n.t("emoji")}
|
||||||
disabled={this.props.disabled}
|
disabled={this.props.disabled}
|
||||||
|
|
|
@ -170,21 +170,27 @@ export class MarkdownTextArea extends Component<
|
||||||
<EmojiPicker
|
<EmojiPicker
|
||||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||||
></EmojiPicker>
|
></EmojiPicker>
|
||||||
<form className="btn btn-sm text-muted fw-bold">
|
|
||||||
<label
|
<label
|
||||||
htmlFor={`file-upload-${this.id}`}
|
htmlFor={`file-upload-${this.id}`}
|
||||||
// TODO: Fix this linting violation
|
className={classNames("mb-0", {
|
||||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
pointer: UserService.Instance.myUserInfo,
|
||||||
tabIndex={0}
|
})}
|
||||||
className={`mb-0 ${
|
|
||||||
UserService.Instance.myUserInfo && "pointer"
|
|
||||||
}`}
|
|
||||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||||
>
|
>
|
||||||
{this.state.imageUploadStatus ? (
|
{this.state.imageUploadStatus ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-sm btn-link rounded-0 text-muted mb-0"
|
||||||
|
onClick={() => {
|
||||||
|
document
|
||||||
|
.getElementById(`file-upload-${this.id}`)
|
||||||
|
?.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Icon icon="image" classes="icon-inline" />
|
<Icon icon="image" classes="icon-inline" />
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
|
@ -197,7 +203,6 @@ export class MarkdownTextArea extends Component<
|
||||||
disabled={!UserService.Instance.myUserInfo}
|
disabled={!UserService.Instance.myUserInfo}
|
||||||
onChange={linkEvent(this, this.handleImageUpload)}
|
onChange={linkEvent(this, this.handleImageUpload)}
|
||||||
/>
|
/>
|
||||||
</form>
|
|
||||||
{this.getFormatButton("header", this.handleInsertHeader)}
|
{this.getFormatButton("header", this.handleInsertHeader)}
|
||||||
{this.getFormatButton(
|
{this.getFormatButton(
|
||||||
"strikethrough",
|
"strikethrough",
|
||||||
|
@ -348,7 +353,7 @@ export class MarkdownTextArea extends Component<
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm text-muted"
|
className="btn btn-sm btn-link rounded-0 text-muted"
|
||||||
data-tippy-content={I18NextService.i18n.t(type)}
|
data-tippy-content={I18NextService.i18n.t(type)}
|
||||||
aria-label={I18NextService.i18n.t(type)}
|
aria-label={I18NextService.i18n.t(type)}
|
||||||
onClick={linkEvent(this, handleClick)}
|
onClick={linkEvent(this, handleClick)}
|
||||||
|
|
|
@ -113,7 +113,7 @@ export class VoteButtonsCompact extends Component<
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
type="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"
|
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
data-tippy-content={tippy(this.props.counts)}
|
data-tippy-content={tippy(this.props.counts)}
|
||||||
|
@ -137,7 +137,7 @@ export class VoteButtonsCompact extends Component<
|
||||||
{this.props.enableDownvotes && (
|
{this.props.enableDownvotes && (
|
||||||
<button
|
<button
|
||||||
type="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"
|
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(this, handleDownvote)}
|
onClick={linkEvent(this, handleDownvote)}
|
||||||
|
|
|
@ -465,8 +465,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="post-title overflow-hidden">
|
<div className="post-title">
|
||||||
<h1 className="h5 d-inline">
|
<h1 className="h5 d-inline text-break">
|
||||||
{url && this.props.showBody ? (
|
{url && this.props.showBody ? (
|
||||||
<a
|
<a
|
||||||
className={
|
className={
|
||||||
|
@ -1415,6 +1415,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
UserService.Instance.myUserInfo?.local_user_view.person.id
|
UserService.Instance.myUserInfo?.local_user_view.person.id
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEditClick(i: PostListing) {
|
handleEditClick(i: PostListing) {
|
||||||
i.setState({ showEdit: true });
|
i.setState({ showEdit: true });
|
||||||
}
|
}
|
||||||
|
@ -1538,6 +1539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
post_id: i.postView.post.id,
|
post_id: i.postView.post.id,
|
||||||
removed: !i.postView.post.removed,
|
removed: !i.postView.post.removed,
|
||||||
auth: myAuthRequired(),
|
auth: myAuthRequired(),
|
||||||
|
reason: i.state.removeReason,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1609,13 +1611,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
||||||
handlePurgeSubmit(i: PostListing, event: any) {
|
handlePurgeSubmit(i: PostListing, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ purgeLoading: true });
|
i.setState({ purgeLoading: true });
|
||||||
if (i.state.purgeType == PurgeType.Person) {
|
if (i.state.purgeType === PurgeType.Person) {
|
||||||
i.props.onPurgePerson({
|
i.props.onPurgePerson({
|
||||||
person_id: i.postView.creator.id,
|
person_id: i.postView.creator.id,
|
||||||
reason: i.state.purgeReason,
|
reason: i.state.purgeReason,
|
||||||
auth: myAuthRequired(),
|
auth: myAuthRequired(),
|
||||||
});
|
});
|
||||||
} else if (i.state.purgeType == PurgeType.Post) {
|
} else if (i.state.purgeType === PurgeType.Post) {
|
||||||
i.props.onPurgePost({
|
i.props.onPurgePost({
|
||||||
post_id: i.postView.post.id,
|
post_id: i.postView.post.id,
|
||||||
reason: i.state.purgeReason,
|
reason: i.state.purgeReason,
|
||||||
|
|
11
src/shared/utils/browser/data-bs-theme.ts
Normal file
11
src/shared/utils/browser/data-bs-theme.ts
Normal 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";
|
||||||
|
}
|
|
@ -1,5 +1,7 @@
|
||||||
import canShare from "./can-share";
|
import canShare from "./can-share";
|
||||||
|
import dataBsTheme from "./data-bs-theme";
|
||||||
import isBrowser from "./is-browser";
|
import isBrowser from "./is-browser";
|
||||||
|
import isDark from "./is-dark";
|
||||||
import loadCss from "./load-css";
|
import loadCss from "./load-css";
|
||||||
import restoreScrollPosition from "./restore-scroll-position";
|
import restoreScrollPosition from "./restore-scroll-position";
|
||||||
import saveScrollPosition from "./save-scroll-position";
|
import saveScrollPosition from "./save-scroll-position";
|
||||||
|
@ -7,7 +9,9 @@ import share from "./share";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
canShare,
|
canShare,
|
||||||
|
dataBsTheme,
|
||||||
isBrowser,
|
isBrowser,
|
||||||
|
isDark,
|
||||||
loadCss,
|
loadCss,
|
||||||
restoreScrollPosition,
|
restoreScrollPosition,
|
||||||
saveScrollPosition,
|
saveScrollPosition,
|
||||||
|
|
7
src/shared/utils/browser/is-dark.ts
Normal file
7
src/shared/utils/browser/is-dark.ts
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import isBrowser from "./is-browser";
|
||||||
|
|
||||||
|
export default function isDark() {
|
||||||
|
return (
|
||||||
|
isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in a new issue