mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Add i18n to replies.
Add Fluent design category button. Update Account page with new design.
This commit is contained in:
Paul
parent
8cc92e0c42
commit
fe75f5a6ca
9 changed files with 229 additions and 222 deletions
2
external/lang
vendored
2
external/lang
vendored
|
|
@ -1 +1 @@
|
|||
Subproject commit da8e3f8bb3cc01867e2f3fb731e2a5a26cdab0f5
|
||||
Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
|
||||
|
|
@ -187,12 +187,18 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
|
|||
);
|
||||
}
|
||||
}}>
|
||||
{message.attachments && (
|
||||
{message.attachments &&
|
||||
message.attachments.length > 0 && (
|
||||
<>
|
||||
<File size={16} />
|
||||
<em>{message.attachments.length > 1 ?
|
||||
"Sent multiple attachments" :
|
||||
"Sent an attachment"}</em>
|
||||
<em>
|
||||
{message.attachments.length >
|
||||
0 ? (
|
||||
<Text id="app.main.channel.misc.sent_multiple_files" />
|
||||
) : (
|
||||
<Text id="app.main.channel.misc.sent_file" />
|
||||
)}
|
||||
</em>
|
||||
</>
|
||||
)}
|
||||
<Markdown
|
||||
|
|
|
|||
|
|
@ -33,24 +33,11 @@ const Base = styled.div`
|
|||
align-items: center;
|
||||
background: var(--message-box);
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
|
|
@ -59,6 +46,22 @@ const Base = styled.div`
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
|
||||
.actions > svg {
|
||||
height: 25px;
|
||||
|
|
@ -109,12 +112,18 @@ export default observer(({ channel, replies, setReplies }: Props) => {
|
|||
<UserShort user={message.author} size={16} />
|
||||
</div>
|
||||
<div class="message">
|
||||
{message.attachments && (
|
||||
{message.attachments &&
|
||||
message.attachments.length > 0 && (
|
||||
<>
|
||||
<File size={16} />
|
||||
<em>{message.attachments.length > 1 ?
|
||||
"Sent multiple attachments" :
|
||||
"Sent an attachment"}</em>
|
||||
<em>
|
||||
{message.attachments!.length >
|
||||
1 ? (
|
||||
<Text id="app.main.channel.misc.sent_multiple_files" />
|
||||
) : (
|
||||
<Text id="app.main.channel.misc.sent_file" />
|
||||
)}
|
||||
</em>
|
||||
</>
|
||||
)}
|
||||
{message.author_id === SYSTEM_USER_ID ? (
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
|
|||
error?: string;
|
||||
block?: boolean;
|
||||
spaced?: boolean;
|
||||
noMargin?: boolean;
|
||||
children?: Children;
|
||||
type?: "default" | "subtle" | "error";
|
||||
};
|
||||
|
||||
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
|
||||
display: inline;
|
||||
|
||||
${(props) =>
|
||||
!props.noMargin &&
|
||||
css`
|
||||
margin: 0.4em 0;
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
props.spaced &&
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import styled from "styled-components";
|
||||
import { ChevronRight } from "@styled-icons/boxicons-regular";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { Children } from "../../../types/Preact";
|
||||
|
||||
|
|
@ -14,13 +15,69 @@ const CategoryBase = styled.div`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
.description {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
typeof props.onClick !== "undefined" &&
|
||||
css`
|
||||
transition: 0.1s ease background-color;
|
||||
|
||||
&:hover {
|
||||
background: var(--tertiary-background);
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
icon?: Children;
|
||||
children?: Children;
|
||||
description?: Children;
|
||||
|
||||
onClick?: () => void;
|
||||
action?: "chevron" | Children;
|
||||
}
|
||||
|
||||
export default function CategoryButton({ icon, children }: Props) {
|
||||
return <CategoryBase>{icon}</CategoryBase>;
|
||||
export default function CategoryButton({
|
||||
icon,
|
||||
children,
|
||||
description,
|
||||
onClick,
|
||||
action,
|
||||
}: Props) {
|
||||
return (
|
||||
<CategoryBase onClick={onClick}>
|
||||
{icon}
|
||||
<div class="content">
|
||||
{children}
|
||||
<div className="description">{description}</div>
|
||||
</div>
|
||||
<div class="action">
|
||||
{typeof action === "string" ? (
|
||||
<ChevronRight size={24} />
|
||||
) : (
|
||||
action
|
||||
)}
|
||||
</div>
|
||||
</CategoryBase>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,9 +80,9 @@ export const Languages: { [key in Language]: LanguageEntry } = {
|
|||
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
|
||||
hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
|
||||
hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
|
||||
hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
|
||||
hu: { display: "Magyar", emoji: "🇭🇺", i18n: "hu" },
|
||||
id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
|
||||
it: { display: "italiano", emoji: "🇮🇹", i18n: "it" },
|
||||
it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
|
||||
lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
|
||||
mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
|
||||
nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export const stopPropagation = (
|
||||
ev: JSX.TargetedMouseEvent<HTMLDivElement>,
|
||||
ev: JSX.TargetedMouseEvent<HTMLElement>,
|
||||
_consume?: any,
|
||||
) => {
|
||||
ev.preventDefault();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import { At, Key, Block } from "@styled-icons/boxicons-regular";
|
||||
import { Envelope, HelpCircle, Lock, Trash } from "@styled-icons/boxicons-solid";
|
||||
import {
|
||||
Envelope,
|
||||
HelpCircle,
|
||||
Lock,
|
||||
Trash,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import { Profile } from "revolt-api/types/Users";
|
||||
|
|
@ -8,6 +13,8 @@ import styles from "./Panes.module.scss";
|
|||
import { Text } from "preact-i18n";
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { stopPropagation } from "../../../lib/stopPropagation";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import {
|
||||
ClientStatus,
|
||||
|
|
@ -18,7 +25,9 @@ import {
|
|||
import Tooltip from "../../../components/common/Tooltip";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
|
||||
|
||||
export const Account = observer(() => {
|
||||
const { openScreen, writeClipboard } = useIntermediate();
|
||||
|
|
@ -62,11 +71,17 @@ export const Account = observer(() => {
|
|||
<div className={styles.userDetail}>
|
||||
@{client.user!.username}
|
||||
<div className={styles.userid}>
|
||||
<Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.settings.pages.account.unique_id" />
|
||||
}>
|
||||
<HelpCircle size={16} />
|
||||
</Tooltip>
|
||||
<Tooltip content={<Text id="app.special.copy" />}>
|
||||
<a onClick={() => writeClipboard(client.user!._id)}>
|
||||
<a
|
||||
onClick={() =>
|
||||
writeClipboard(client.user!._id)
|
||||
}>
|
||||
{client.user!._id}
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
|
@ -74,13 +89,11 @@ export const Account = observer(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => switchPage("profile")}
|
||||
contrast>
|
||||
Edit Profile
|
||||
<Button onClick={() => switchPage("profile")} contrast>
|
||||
<Text id="app.settings.pages.profile.edit_profile" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.details}>
|
||||
<div>
|
||||
{(
|
||||
[
|
||||
["username", client.user!.username, <At size={24} />],
|
||||
|
|
@ -88,20 +101,19 @@ export const Account = observer(() => {
|
|||
["password", "•••••••••", <Key size={24} />],
|
||||
] as const
|
||||
).map(([field, value, icon]) => (
|
||||
<div>
|
||||
{icon}
|
||||
<div className={styles.detail}>
|
||||
<div className={styles.subtext}>
|
||||
<Text id={`login.${field}`} />
|
||||
</div>
|
||||
<div className={styles.entry}>
|
||||
{field === "email" ? (
|
||||
<CategoryButton
|
||||
icon={icon}
|
||||
description={
|
||||
field === "email" ? (
|
||||
revealEmail ? (
|
||||
<>
|
||||
{value}{" "}
|
||||
<a
|
||||
onClick={() =>
|
||||
setRevealEmail(false)
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
setRevealEmail(false),
|
||||
)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.hide" />
|
||||
</a>
|
||||
|
|
@ -110,8 +122,11 @@ export const Account = observer(() => {
|
|||
<>
|
||||
•••••••••••@{value.split("@").pop()}{" "}
|
||||
<a
|
||||
onClick={() =>
|
||||
setRevealEmail(true)
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
setRevealEmail(true),
|
||||
)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.reveal" />
|
||||
</a>
|
||||
|
|
@ -119,33 +134,31 @@ export const Account = observer(() => {
|
|||
)
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
)
|
||||
}
|
||||
action="chevron"
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "modify_account",
|
||||
field,
|
||||
})
|
||||
}
|
||||
plain>
|
||||
<Text id="app.settings.pages.account.change_field" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<Overline type="subtle" noMargin>
|
||||
<Text id={`login.${field}`} />
|
||||
</Overline>
|
||||
</CategoryButton>
|
||||
))}
|
||||
</div>
|
||||
<h3>
|
||||
<Text id="app.settings.pages.account.2fa.title" />
|
||||
</h3>
|
||||
<h5><Text id="app.settings.pages.account.2fa.description" /></h5>
|
||||
<div className={styles.entrytest}>
|
||||
<Lock size={24}/>
|
||||
<div className={styles.content}>
|
||||
Currently not available
|
||||
<div className={styles.description}>
|
||||
<h5>
|
||||
<Text id="app.settings.pages.account.2fa.description" />
|
||||
</h5>
|
||||
<CategoryButton
|
||||
icon={<Lock size={24} color="var(--error)" />}
|
||||
description={
|
||||
<>
|
||||
Two-factor auth is currently work-in-progress, see{" "}
|
||||
<a
|
||||
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
|
||||
|
|
@ -154,54 +167,45 @@ export const Account = observer(() => {
|
|||
tracking issue here
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
action={
|
||||
<Button accent compact disabled>
|
||||
<Text id="app.settings.pages.account.2fa.add_auth" />
|
||||
</Button>
|
||||
</div>
|
||||
}>
|
||||
Currently not available
|
||||
</CategoryButton>
|
||||
<h3>
|
||||
<Text id="app.settings.pages.account.manage.title" />
|
||||
</h3>
|
||||
<h5>
|
||||
<Text id="app.settings.pages.account.manage.description" />
|
||||
</h5>
|
||||
<div className={styles.entrytest}>
|
||||
<Block size={24}/>
|
||||
<div className={styles.content}>
|
||||
<Text id="app.settings.pages.account.manage.disable" />
|
||||
<div className={styles.description}>
|
||||
Disable your account. You won't be able to access it unless you log back in.
|
||||
</div>
|
||||
</div>
|
||||
<CategoryButton
|
||||
icon={<Block size={24} color="var(--error)" />}
|
||||
description={
|
||||
"Disable your account. You won't be able to access it unless you log back in."
|
||||
}
|
||||
action={
|
||||
<Button accent compact disabled>
|
||||
Unavailable
|
||||
<Text id="general.unavailable" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.entrytest}>
|
||||
<Trash size={24}/>
|
||||
<div className={styles.content}>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
<div className={styles.description}>
|
||||
Delete your account, including all of your data.
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<Text id="app.settings.pages.account.manage.disable" />
|
||||
</CategoryButton>
|
||||
<CategoryButton
|
||||
icon={<Trash size={24} color="var(--error)" />}
|
||||
description={"Delete your account, including all of your data."}
|
||||
action={
|
||||
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
|
||||
<Button error compact>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
{/* <Button contrast>
|
||||
<Text id="app.settings.pages.account.manage.disable" />
|
||||
</Button>
|
||||
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
|
||||
<Button error compact>
|
||||
}>
|
||||
<Text id="app.settings.pages.account.manage.delete" />
|
||||
</Button>
|
||||
</a>*/}
|
||||
</div>
|
||||
</CategoryButton>
|
||||
<Tip>
|
||||
<span>
|
||||
<Text id="app.settings.tips.account.a" />
|
||||
|
|
|
|||
|
|
@ -78,42 +78,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.subtext {
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-foreground);
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: .875rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
|
|
@ -152,40 +116,6 @@
|
|||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.entrytest {
|
||||
gap: 12px;
|
||||
/* padding: 4px; */
|
||||
height: 54px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
background: var(--secondary-header);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
> svg {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
.description {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
|
@ -236,9 +166,8 @@
|
|||
}
|
||||
|
||||
details {
|
||||
|
||||
summary {
|
||||
font-size: .8125rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-foreground);
|
||||
|
|
@ -297,15 +226,12 @@
|
|||
text-transform: unset;
|
||||
|
||||
a {
|
||||
|
||||
opacity: 0.7;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
|
@ -331,7 +257,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
min-width: 0;
|
||||
flex-grow: 1;
|
||||
padding: 8px;
|
||||
|
|
@ -352,7 +278,7 @@
|
|||
row-gap: 8px;
|
||||
display: grid;
|
||||
column-gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
margin-bottom: 20px;
|
||||
|
||||
.entry {
|
||||
|
|
@ -365,7 +291,7 @@
|
|||
flex: 1;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 8px;
|
||||
text-transform: capitalize;
|
||||
|
||||
|
|
@ -452,7 +378,6 @@
|
|||
border-bottom: 2px solid var(--primary-background);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&[data-deleting="true"] {
|
||||
|
|
@ -487,7 +412,7 @@
|
|||
.label {
|
||||
margin-bottom: 8px;
|
||||
color: var(--primary-text);
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -507,7 +432,7 @@
|
|||
}
|
||||
|
||||
.time {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--teriary-text);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
Loading…
Reference in a new issue