LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-01 10:09:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into added-darkly-compact-552

Browse source
This commit is contained in:
dankxiaobong 2023-06-21 16:29:01 +02:00 committed by GitHub
commit a8320c2fa4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 136 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "lemmy-ui",
"version": "0.18.0-rc.3",
"version": "0.18.0-rc.4",
"description": "An isomorphic UI for lemmy",
"repository": "https://github.com/LemmyNet/lemmy-ui",
"license": "AGPL-3.0",

26
src/shared/components/common/tabs.tsx
View file

@ -1,8 +1,9 @@
import classNames from "classnames";
import { Component, InfernoNode, linkEvent } from "inferno";
interface TabItem {
key: string;
getNode: () => InfernoNode;
getNode: (isSelected: boolean) => InfernoNode;
label: string;
}
@ -30,24 +31,33 @@ export default class Tabs extends Component<TabsProps, TabsState> {
render() {
return (
<div>
<ul className="nav nav-tabs mb-2">
<ul className="nav nav-tabs mb-2" role="tablist">
{this.props.tabs.map(({ key, label }) => (
<li key={key} className="nav-item">
<button
type="button"
className={`nav-link btn${
this.state?.currentTab === key ? " active" : ""
}`}
className={classNames("nav-link", {
active: this.state?.currentTab === key,
})}
onClick={linkEvent({ ctx: this, tab: key }, handleSwitchTab)}
aria-controls={`${key}-tab-pane`}
{...(this.state?.currentTab === key && {
...{
"aria-current": "page",
"aria-selected": "true",
},
})}
>
{label}
</button>
</li>
))}
</ul>
{this.props.tabs
.find(tab => tab.key === this.state?.currentTab)
?.getNode()}
<div className="tab-content">
{this.props.tabs.map(({ key, getNode }) => {
return getNode(this.state?.currentTab === key);
})}
</div>
</div>
);
}

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

@ -1,3 +1,4 @@
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import {
BannedPersonsResponse,
@ -130,7 +131,14 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
{
key: "site",
label: i18n.t("site"),
getNode: () => (
getNode: isSelected => (
<div
className={classNames("tab-pane show", {
active: isSelected,
})}
role="tabpanel"
id="site-tab-pane"
>
<div className="row">
<div className="col-12 col-md-6">
<SiteForm
@ -148,12 +156,20 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
{this.bannedUsers()}
</div>
</div>
</div>
),
},
{
key: "rate_limiting",
label: "Rate Limiting",
getNode: () => (
getNode: isSelected => (
<div
className={classNames("tab-pane", {
active: isSelected,
})}
role="tabpanel"
id="rate_limiting-tab-pane"
>
<RateLimitForm
rateLimits={
this.state.siteRes.site_view.local_site_rate_limit
@ -161,12 +177,20 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onSaveSite={this.handleEditSite}
loading={this.state.loading}
/>
</div>
),
},
{
key: "taglines",
label: i18n.t("taglines"),
getNode: () => (
getNode: isSelected => (
<div
className={classNames("tab-pane", {
active: isSelected,
})}
role="tabpanel"
id="taglines-tab-pane"
>
<div className="row">
<TaglineForm
taglines={this.state.siteRes.taglines}
@ -174,12 +198,20 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
loading={this.state.loading}
/>
</div>
</div>
),
},
{
key: "emojis",
label: i18n.t("emojis"),
getNode: () => (
getNode: isSelected => (
<div
className={classNames("tab-pane", {
active: isSelected,
})}
role="tabpanel"
id="emojis-tab-pane"
>
<div className="row">
<EmojiForm
onCreate={this.handleCreateEmoji}
@ -188,6 +220,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
loading={this.state.emojiLoading}
/>
</div>
</div>
),
},
]}

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

@ -1,3 +1,4 @@
import classNames from "classnames";
import { Component, FormEventHandler, linkEvent } from "inferno";
import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
import { i18n } from "../../i18next";
@ -19,6 +20,7 @@ interface RateLimitsProps {
handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
rateLimitValue?: number;
rateLimitPerSecondValue?: number;
className?: string;
}
interface RateLimitFormProps {
@ -49,9 +51,10 @@ function RateLimits({
handleRateLimitPerSecond,
rateLimitPerSecondValue,
rateLimitValue,
className,
}: RateLimitsProps) {
return (
<div className="mb-3 row">
<div role="tabpanel" className={classNames("mb-3 row", className)}>
<div className="col-md-6">
<label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
<input
@ -142,8 +145,11 @@ export default class RateLimitsForm extends Component<
tabs={rateLimitTypes.map(rateLimitType => ({
key: rateLimitType,
label: i18n.t(`rate_limit_${rateLimitType}`),
getNode: () => (
getNode: isSelected => (
<RateLimits
className={classNames("tab-pane show", {
active: isSelected,
})}
handleRateLimit={linkEvent(
{ rateLimitType, ctx: this },
handleRateLimitChange

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

@ -1,4 +1,5 @@
import { debounce } from "@utils/helpers";
import classNames from "classnames";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import {
@ -265,8 +266,15 @@ export class Settings extends Component<any, SettingsState> {
);
}
userSettings() {
userSettings(isSelected) {
return (
<div
className={classNames("tab-pane show", {
active: isSelected,
})}
role="tabpanel"
id="settings-tab-pane"
>
<div className="row">
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
@ -279,11 +287,19 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
</div>
</div>
);
}
blockCards() {
blockCards(isSelected) {
return (
<div
className={classNames("tab-pane", {
active: isSelected,
})}
role="tabpanel"
id="blocks-tab-pane"
>
<div className="row">
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
@ -296,6 +312,7 @@ export class Settings extends Component<any, SettingsState> {
</div>
</div>
</div>
</div>
);
}