HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(@ui): migrate category / overline and header

Browse Source
This commit is contained in:
Paul Makles
2022-05-30 14:42:09 +01:00
parent 673efc0586
commit 68b9d5ea79
35 changed files with 187 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/context/Locale.tsx
View File

@@ -5,9 +5,11 @@ import update from "dayjs/plugin/updateLocale";
import defaultsDeep from "lodash.defaultsdeep";
import { observer } from "mobx-react-lite";
import { IntlProvider } from "preact-i18n";
import { IntlProvider, Text } from "preact-i18n";
import { useCallback, useEffect, useState } from "preact/hooks";
import { Error } from "@revoltchat/ui";
import { useApplicationState } from "../mobx/State";
import { Languages } from "../../external/lang/Languages";
@@ -143,3 +145,12 @@ function transformLanguage(source: Dictionary) {
return obj;
}
export function I18nError({ error, children }: { error: any; children?: any }) {
return (
<Error
error={error ? <Text id={error} children={error} /> : undefined}
children={children}
/>
);
}

16
src/context/intermediate/modals/Input.tsx
View File

@@ -4,11 +4,11 @@ import { Server } from "revolt.js";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { InputBox } from "@revoltchat/ui";
import { Category, InputBox } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Children } from "../../../types/Preact";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@@ -60,11 +60,15 @@ export function InputModal({
]}
onClose={onClose}>
{field ? (
<Overline error={error} block>
{field}
</Overline>
<Category>
<I18nError error={error}>{field}</I18nError>
</Category>
) : (
error && <Overline error={error} type="error" block />
error && (
<Category>
<I18nError error={error} />
</Category>
)
)}
<InputBox
value={value}

26
src/context/intermediate/modals/Prompt.tsx
View File

@@ -7,15 +7,15 @@ import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { InputBox, Radio } from "@revoltchat/ui";
import { Category, Error, InputBox, Radio } from "@revoltchat/ui";
import { TextReact } from "../../../lib/i18n";
import Message from "../../../components/common/messaging/Message";
import UserIcon from "../../../components/common/user/UserIcon";
import Modal, { Action } from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Children } from "../../../types/Preact";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
import { useIntermediate } from "../Intermediate";
@@ -44,7 +44,11 @@ export function PromptModal({
actions={actions}
onClose={onClose}
disabled={disabled}>
{error && <Overline error={error} type="error" />}
{error && (
<Category>
<I18nError error={error} />
</Category>
)}
{content}
</Modal>
);
@@ -385,9 +389,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
id="app.special.modals.prompt.confirm_ban"
fields={{ name: props.user?.username }}
/>
<Overline>
<Category>
<Text id="app.special.modals.prompt.confirm_ban_reason" />
</Overline>
</Category>
<InputBox
value={reason ?? ""}
onChange={(e) =>
@@ -452,9 +456,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
]}
content={
<>
<Overline block type="subtle">
<Category>
<Text id="app.main.servers.channel_type" />
</Overline>
</Category>
<Radio
title={
<Text id="app.main.servers.text_channel" />
@@ -469,9 +473,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
value={type === "Voice"}
onSelect={() => setType("Voice")}
/>
<Overline block type="subtle">
<Category>
<Text id="app.main.servers.channel_name" />
</Overline>
</Category>
<InputBox
value={name}
onChange={(e) => setName(e.currentTarget.value)}
@@ -527,9 +531,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
]}
content={
<>
<Overline block type="subtle">
<Category>
<Text id="app.main.servers.category_name" />
</Overline>
</Category>
<InputBox
value={name}
onChange={(e) => setName(e.currentTarget.value)}

12
src/context/intermediate/popovers/CreateBot.tsx
View File

@@ -4,10 +4,11 @@ import { API } from "revolt.js";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Category } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import FormField from "../../../pages/login/FormField";
import { I18nError } from "../../Locale";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@@ -70,9 +71,10 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
error={errors.name?.message}
/>
{error && (
<Overline type="error" error={error}>
<Text id="app.special.popovers.create_bot.failed" />
</Overline>
<Category>
<Text id="app.special.popovers.create_bot.failed" />{" "}
&middot; <I18nError error={error} />
</Category>
)}
</form>
</Modal>

14
src/context/intermediate/popovers/ModifyAccount.tsx
View File

@@ -3,9 +3,9 @@ import { SubmitHandler, useForm } from "react-hook-form";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Category, Error } from "@revoltchat/ui";
import Modal from "../../../components/ui/Modal";
import FormField from "../../../pages/login/FormField";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@@ -140,9 +140,13 @@ export function ModifyAccountModal({ onClose, field }: Props) {
disabled={processing}
/>
{error && (
<Overline type="error" error={error}>
<Text id="app.special.modals.account.failed" />
</Overline>
<Category compact>
<Error
error={
<Text id="app.special.modals.account.failed" />
}
/>
</Category>
)}
</form>
</Modal>

11
src/context/intermediate/popovers/ServerIdentityModal.tsx
View File

@@ -5,12 +5,11 @@ import styles from "./ServerIdentityModal.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button, InputBox } from "@revoltchat/ui";
import { Button, Category, InputBox } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { FileUploader } from "../../revoltjs/FileUploads";
import { useClient } from "../../revoltjs/RevoltClient";
@@ -47,9 +46,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
onClose={onClose}>
<div className={styles.identityMain}>
<div>
<Overline type="subtle">
<Category>
<Text id="app.special.popovers.server_identity.avatar" />
</Overline>
</Category>
<FileUploader
width={80}
height={80}
@@ -78,9 +77,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
/>
</div>
<div>
<Overline type="subtle">
<Category>
<Text id="app.special.popovers.server_identity.nickname" />
</Overline>
</Category>
<InputBox
value={nickname}
placeholder={client.user!.username}

3
src/context/intermediate/popovers/UserPicker.tsx
View File

@@ -4,7 +4,6 @@ import { useState } from "preact/hooks";
import UserCheckbox from "../../../components/common/user/UserCheckbox";
import Modal from "../../../components/ui/Modal";
import { useClient } from "../../revoltjs/RevoltClient";
interface Props {
@@ -42,7 +41,7 @@ export function UserPicker(props: Props) {
<UserCheckbox
key={x._id}
user={x}
checked={selected.includes(x._id)}
value={selected.includes(x._id)}
onChange={(v) => {
if (v) {
setSelected([...selected, x._id]);

21
src/context/intermediate/popovers/UserProfile.tsx
View File

@@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { Button, IconButton, Preloader } from "@revoltchat/ui";
import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
@@ -28,7 +28,6 @@ import { Username } from "../../../components/common/user/UserShort";
import UserStatus from "../../../components/common/user/UserStatus";
import Markdown from "../../../components/markdown/Markdown";
import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import {
ClientStatus,
StatusContext,
@@ -278,19 +277,19 @@ export const UserProfile = observer(
<div>
{flags & 1 ? (
/** ! FIXME: i18n this area */
<Overline type="error" block>
User is suspended
</Overline>
<Category>
<Error error="User is suspended" />
</Category>
) : undefined}
{flags & 2 ? (
<Overline type="error" block>
User deleted their account
</Overline>
<Category>
<Error error="User deleted their account" />
</Category>
) : undefined}
{flags & 4 ? (
<Overline type="error" block>
User is banned
</Overline>
<Category>
<Error error="User is banned" />
</Category>
) : undefined}
{user.bot ? (
<>