mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 14:40:58 -05:00
Initial bot page stylings
This commit is contained in:
Snazzah
GitHub
parent
3628aeffdd
commit
86027f7b3d
5 changed files with 194 additions and 11 deletions
|
|
@ -24,6 +24,7 @@ export type Screen =
|
|||
| { id: "signed_out" }
|
||||
| { id: "error"; error: string }
|
||||
| { id: "clipboard"; text: string }
|
||||
| { id: "token_reveal"; token: string; username: string }
|
||||
| { id: "external_link_prompt"; link: string }
|
||||
| {
|
||||
id: "_prompt";
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { OnboardingModal } from "./modals/Onboarding";
|
|||
import { PromptModal } from "./modals/Prompt";
|
||||
import { SignedOutModal } from "./modals/SignedOut";
|
||||
import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
|
||||
import { TokenRevealModal } from "./modals/TokenReveal";
|
||||
|
||||
export interface Props {
|
||||
screen: Screen;
|
||||
|
|
@ -33,6 +34,8 @@ export default function Modals({ screen, openScreen }: Props) {
|
|||
return <SignedOutModal onClose={onClose} {...screen} />;
|
||||
case "clipboard":
|
||||
return <ClipboardModal onClose={onClose} {...screen} />;
|
||||
case "token_reveal":
|
||||
return <TokenRevealModal onClose={onClose} {...screen} />;
|
||||
case "onboarding":
|
||||
return <OnboardingModal onClose={onClose} {...screen} />;
|
||||
case "external_link_prompt":
|
||||
|
|
|
|||
27
src/context/intermediate/modals/TokenReveal.tsx
Normal file
27
src/context/intermediate/modals/TokenReveal.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { Text } from "preact-i18n";
|
||||
|
||||
import Modal from "../../../components/ui/Modal";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
token: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export function TokenRevealModal({ onClose, token,username }: Props) {
|
||||
return (
|
||||
<Modal
|
||||
visible={true}
|
||||
onClose={onClose}
|
||||
title={`${username}'s Token`}
|
||||
actions={[
|
||||
{
|
||||
onClick: onClose,
|
||||
confirmation: true,
|
||||
children: <Text id="app.special.modals.actions.close" />,
|
||||
},
|
||||
]}>
|
||||
<code style={{ userSelect: "all" }}>{token}</code>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,26 @@
|
|||
import { Key, Clipboard, Globe } from "@styled-icons/boxicons-regular";
|
||||
import { LockAlt } from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Bot } from "revolt-api/types/Bots";
|
||||
import styled from "styled-components";
|
||||
|
||||
import styles from "./Panes.module.scss";
|
||||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { stopPropagation } from "../../../lib/stopPropagation";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { useClient } from "../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import UserShort from "../../../components/common/user/UserShort";
|
||||
import Tooltip from "../../../components/common/Tooltip";
|
||||
import UserIcon from "../../../components/common/user/UserIcon";
|
||||
import Button from "../../../components/ui/Button";
|
||||
import Checkbox from "../../../components/ui/Checkbox";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
|
||||
|
||||
interface Data {
|
||||
_id: string;
|
||||
|
|
@ -20,6 +29,21 @@ interface Data {
|
|||
interactions_url?: string;
|
||||
}
|
||||
|
||||
const BotBadge = styled.div`
|
||||
display: inline-block;
|
||||
|
||||
height: 1.3em;
|
||||
padding: 0px 4px;
|
||||
font-size: 0.7em;
|
||||
user-select: none;
|
||||
margin-inline-start: 2px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: var(--foreground);
|
||||
background: var(--accent);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
`;
|
||||
|
||||
function BotEditor({ bot }: { bot: Data }) {
|
||||
const client = useClient();
|
||||
const [data, setData] = useState<Data>(bot);
|
||||
|
|
@ -78,10 +102,11 @@ export const MyBots = observer(() => {
|
|||
}, []);
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const { writeClipboard } = useIntermediate();
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const { writeClipboard, openScreen } = useIntermediate();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.myBots}>
|
||||
<Tip warning hideSeparator>
|
||||
This section is under construction.
|
||||
</Tip>
|
||||
|
|
@ -113,16 +138,80 @@ export const MyBots = observer(() => {
|
|||
key={bot._id}
|
||||
style={{
|
||||
background: "var(--secondary-background)",
|
||||
margin: "8px",
|
||||
margin: "8px 0",
|
||||
padding: "12px",
|
||||
}}>
|
||||
<UserShort user={user} />
|
||||
<p>
|
||||
token:{" "}
|
||||
<code style={{ userSelect: "all" }}>
|
||||
{bot.token}
|
||||
</code>
|
||||
</p>
|
||||
<div className={styles.infoheader}>
|
||||
<div className={styles.container}>
|
||||
<UserIcon
|
||||
className={styles.avatar}
|
||||
target={user!}
|
||||
size={48}
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "profile",
|
||||
user_id: user!._id,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div className={styles.userDetail}>
|
||||
<div className={styles.userName}>
|
||||
{user!.username}{" "}
|
||||
<BotBadge>
|
||||
<Text id="app.main.channel.bot" />
|
||||
</BotBadge>
|
||||
</div>
|
||||
|
||||
<div className={styles.userid}>
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.special.copy" />
|
||||
}>
|
||||
<a
|
||||
onClick={() =>
|
||||
writeClipboard(
|
||||
client.user!._id,
|
||||
)
|
||||
}>
|
||||
{client.user!._id}
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tooltip content={bot.public ? "Bot is public. Anyone can invite it." : "Bot is private. Only you can invite it."}>
|
||||
{bot.public ? <Globe size={24} /> : <LockAlt size={24} />}
|
||||
</Tooltip>
|
||||
{/* <Button onClick={() => switchPage("profile")} contrast>
|
||||
<Text id="app.settings.pages.profile.edit_profile" />
|
||||
</Button> */}
|
||||
</div>
|
||||
<CategoryButton
|
||||
account
|
||||
icon={<Key size={24} />}
|
||||
onClick={() => writeClipboard(bot.token)}
|
||||
description={
|
||||
<>
|
||||
{"••••••••••••••••••••••••••••••••••••"}{" "}
|
||||
<a
|
||||
onClick={(ev) =>
|
||||
stopPropagation(
|
||||
ev,
|
||||
openScreen({
|
||||
id: "token_reveal",
|
||||
token: bot.token,
|
||||
username: user!.username,
|
||||
}),
|
||||
)
|
||||
}>
|
||||
<Text id="app.special.modals.actions.reveal" />
|
||||
</a>
|
||||
</>
|
||||
}
|
||||
action={<Clipboard size={18} />}>
|
||||
Token
|
||||
</CategoryButton>
|
||||
<BotEditor
|
||||
bot={{
|
||||
...bot,
|
||||
|
|
|
|||
|
|
@ -523,6 +523,69 @@
|
|||
}
|
||||
}
|
||||
|
||||
.myBots {
|
||||
.infoheader {
|
||||
margin-bottom: 15px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 5px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.userDetail {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
gap: 2px;
|
||||
flex-direction: column;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.userName {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease filter;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
|
||||
.userid {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--tertiary-foreground);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue