cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 17:47:18 -04:00
Code Issues Projects Releases Packages Wiki Activity

feat(@ui): migrate radio

Browse source
This commit is contained in:
Paul Makles 2022-05-30 12:29:56 +01:00
parent 1d243d4762
commit ab77d4a812
3 changed files with 25 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/settings/AppearanceShims.tsx
View file

@ -6,7 +6,7 @@ import pSBC from "shade-blend-color";
import { Text } from "preact-i18n";
import { Checkbox, ColourSwatches, ComboBox } from "@revoltchat/ui";
import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui";
import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
@ -21,7 +21,6 @@ import {
MONOSPACE_FONT_KEYS,
} from "../../context/Theme";
import Radio from "../ui/Radio";
import CategoryButton from "../ui/fluent/CategoryButton";
import { EmojiSelector } from "./appearance/EmojiSelector";
import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
@ -117,19 +116,24 @@ export const DisplayCompactShim = () => {
</h3>
<div /* className={styles.display} */>
<Radio
title={
<Text id="app.settings.pages.appearance.display.default" />
}
description={
<Text id="app.settings.pages.appearance.display.default_description" />
}
checked>
<Text id="app.settings.pages.appearance.display.default" />
</Radio>
value={true}
/>
<Radio
title={
<Text id="app.settings.pages.appearance.display.compact" />
}
description={
<Text id="app.settings.pages.appearance.display.compact_description" />
}
disabled>
<Text id="app.settings.pages.appearance.display.compact" />
</Radio>
value={false}
disabled
/>
</div>
</>
);

112
src/components/ui/Radio.tsx
View file

@ -1,112 +0,0 @@
import { Circle } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components/macro";
import { Children } from "../../types/Preact";
interface Props {
children: Children;
description?: Children;
checked?: boolean;
disabled?: boolean;
onSelect?: () => void;
}
interface BaseProps {
selected: boolean;
}
const RadioBase = styled.label<BaseProps>`
gap: 4px;
z-index: 1;
padding: 4px;
display: flex;
cursor: pointer;
align-items: center;
font-size: 1rem;
font-weight: 600;
user-select: none;
transition: 0.2s ease all;
border-radius: var(--border-radius);
&:hover {
background: var(--hover);
}
> input {
display: none;
}
> div {
margin: 4px;
width: 24px;
height: 24px;
display: grid;
place-items: center;
background: var(--foreground);
border-radius: var(--border-radius-half);
svg {
color: var(--foreground);
/*stroke-width: 2;*/
}
}
${(props) =>
props.selected &&
css`
color: white;
cursor: default;
background: var(--accent);
> div {
background: white;
}
> div svg {
color: var(--accent);
}
&:hover {
background: var(--accent);
}
`}
`;
const RadioDescription = styled.span<BaseProps>`
font-size: 0.8em;
font-weight: 400;
color: var(--secondary-foreground);
${(props) =>
props.selected &&
css`
color: white;
`}
`;
export default function Radio(props: Props) {
const selected = props.checked ?? false;
return (
<RadioBase
selected={selected}
disabled={props.disabled}
onClick={() =>
!props.disabled && props.onSelect && props.onSelect()
}>
<div>
<Circle size={12} />
</div>
<input type="radio" checked={props.checked} />
<span>
<span>{props.children}</span>
{props.description && (
<RadioDescription selected={selected}>
{props.description}
</RadioDescription>
)}
</span>
</RadioBase>
);
}

23
src/context/intermediate/modals/Prompt.tsx
View file

@ -7,7 +7,7 @@ import styles from "./Prompt.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { InputBox } from "@revoltchat/ui";
import { InputBox, Radio } from "@revoltchat/ui";
import { TextReact } from "../../../lib/i18n";
@ -15,7 +15,6 @@ 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 Radio from "../../../components/ui/Radio";
import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
@ -457,15 +456,19 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
<Text id="app.main.servers.channel_type" />
</Overline>
<Radio
checked={type === "Text"}
onSelect={() => setType("Text")}>
<Text id="app.main.servers.text_channel" />
</Radio>
title={
<Text id="app.main.servers.text_channel" />
}
value={type === "Text"}
onSelect={() => setType("Text")}
/>
<Radio
checked={type === "Voice"}
onSelect={() => setType("Voice")}>
<Text id="app.main.servers.voice_channel" />
</Radio>
title={
<Text id="app.main.servers.voice_channel" />
}
value={type === "Voice"}
onSelect={() => setType("Voice")}
/>
<Overline block type="subtle">
<Text id="app.main.servers.channel_name" />
</Overline>