Compare commits
2 commits
main
...
search-err
Author | SHA1 | Date | |
---|---|---|---|
|
25ce4a6eb0 | ||
|
4cee18cd0b |
10 changed files with 39 additions and 81 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "lemmy-ui",
|
"name": "lemmy-ui",
|
||||||
"version": "0.18.1-rc.9",
|
"version": "0.18.1-rc.8",
|
||||||
"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",
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
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, UserService } from "../../services";
|
import { FirstLoadService, I18NextService } 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";
|
||||||
|
@ -26,13 +25,6 @@ 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;
|
||||||
|
@ -40,11 +32,7 @@ export class App extends Component<any, any> {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Provider i18next={I18NextService.i18n}>
|
<Provider i18next={I18NextService.i18n}>
|
||||||
<div
|
<div id="app" className="lemmy-site">
|
||||||
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 btn-link text-muted me-2"
|
className="btn btn-sm 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,7 +1461,6 @@ 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 btn-link rounded-0 text-muted"
|
className="btn btn-sm 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,39 +170,34 @@ export class MarkdownTextArea extends Component<
|
||||||
<EmojiPicker
|
<EmojiPicker
|
||||||
onEmojiClick={e => this.handleEmoji(this, e)}
|
onEmojiClick={e => this.handleEmoji(this, e)}
|
||||||
></EmojiPicker>
|
></EmojiPicker>
|
||||||
<label
|
<form className="btn btn-sm text-muted fw-bold">
|
||||||
htmlFor={`file-upload-${this.id}`}
|
<label
|
||||||
className={classNames("mb-0", {
|
htmlFor={`file-upload-${this.id}`}
|
||||||
pointer: UserService.Instance.myUserInfo,
|
// TODO: Fix this linting violation
|
||||||
})}
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
||||||
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
tabIndex={0}
|
||||||
>
|
className={`mb-0 ${
|
||||||
{this.state.imageUploadStatus ? (
|
UserService.Instance.myUserInfo && "pointer"
|
||||||
<Spinner />
|
}`}
|
||||||
) : (
|
data-tippy-content={I18NextService.i18n.t("upload_image")}
|
||||||
<button
|
>
|
||||||
type="button"
|
{this.state.imageUploadStatus ? (
|
||||||
className="btn btn-sm btn-link rounded-0 text-muted mb-0"
|
<Spinner />
|
||||||
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
|
id={`file-upload-${this.id}`}
|
||||||
id={`file-upload-${this.id}`}
|
type="file"
|
||||||
type="file"
|
accept="image/*,video/*"
|
||||||
accept="image/*,video/*"
|
name="file"
|
||||||
name="file"
|
className="d-none"
|
||||||
className="d-none"
|
multiple
|
||||||
multiple
|
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",
|
||||||
|
@ -353,7 +348,7 @@ export class MarkdownTextArea extends Component<
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-link rounded-0 text-muted"
|
className="btn btn-sm 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 btn-animate btn-sm btn-link py-0 px-1 ${
|
className={`btn-animate btn 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 btn-sm btn-link btn-animate btn py-0 px-1 ${
|
className={`ms-2 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">
|
<div className="post-title overflow-hidden">
|
||||||
<h1 className="h5 d-inline text-break">
|
<h1 className="h5 d-inline">
|
||||||
{url && this.props.showBody ? (
|
{url && this.props.showBody ? (
|
||||||
<a
|
<a
|
||||||
className={
|
className={
|
||||||
|
@ -1415,7 +1415,6 @@ 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 });
|
||||||
}
|
}
|
||||||
|
@ -1539,7 +1538,6 @@ 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,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1611,13 +1609,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,
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
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,7 +1,5 @@
|
||||||
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";
|
||||||
|
@ -9,9 +7,7 @@ import share from "./share";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
canShare,
|
canShare,
|
||||||
dataBsTheme,
|
|
||||||
isBrowser,
|
isBrowser,
|
||||||
isDark,
|
|
||||||
loadCss,
|
loadCss,
|
||||||
restoreScrollPosition,
|
restoreScrollPosition,
|
||||||
saveScrollPosition,
|
saveScrollPosition,
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
import isBrowser from "./is-browser";
|
|
||||||
|
|
||||||
export default function isDark() {
|
|
||||||
return (
|
|
||||||
isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in a new issue