mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
feat(@ui): migrate radio
This commit is contained in:
Paul Makles
parent
1d243d4762
commit
ab77d4a812
3 changed files with 25 additions and 130 deletions
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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")}>
|
||||
title={
|
||||
<Text id="app.main.servers.text_channel" />
|
||||
</Radio>
|
||||
}
|
||||
value={type === "Text"}
|
||||
onSelect={() => setType("Text")}
|
||||
/>
|
||||
<Radio
|
||||
checked={type === "Voice"}
|
||||
onSelect={() => setType("Voice")}>
|
||||
title={
|
||||
<Text id="app.main.servers.voice_channel" />
|
||||
</Radio>
|
||||
}
|
||||
value={type === "Voice"}
|
||||
onSelect={() => setType("Voice")}
|
||||
/>
|
||||
<Overline block type="subtle">
|
||||
<Text id="app.main.servers.channel_name" />
|
||||
</Overline>
|
||||
|
|
|
|||
Loading…
Reference in a new issue