feat(@ui): migrate checkbox component

This commit is contained in:
Paul Makles 2022-05-29 16:34:54 +01:00
parent 20d31babce
commit 4bcfa601a5
18 changed files with 239 additions and 361 deletions

View file

@ -162,5 +162,8 @@
"repository": "https://github.com/revoltchat/revite.git",
"author": "Paul <paulmakles@gmail.com>",
"license": "MIT",
"packageManager": "yarn@3.2.0"
"packageManager": "yarn@3.2.0",
"resolutions": {
"@revoltchat/ui": "portal:../components"
}
}

View file

@ -6,13 +6,11 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import { SECTION_NSFW } from "../../mobx/stores/Layout";
import Checkbox from "../ui/Checkbox";
import { Children } from "../../types/Preact";
const Base = styled.div`
@ -81,10 +79,10 @@ export default observer((props: Props) => {
</span>
<Checkbox
checked={layout.getSectionState(SECTION_NSFW, false)}
onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
title={<Text id="app.main.channel.nsfw.confirm" />}
value={layout.getSectionState(SECTION_NSFW, false)}
onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
/>
<div className="actions">
<Button palette="secondary" onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />

View file

@ -1,11 +1,11 @@
import { User } from "revolt.js";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import { Checkbox } from "@revoltchat/ui";
import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User };
type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
export default function UserCheckbox({ user, ...props }: UserProps) {
return (

View file

@ -6,6 +6,8 @@ import pSBC from "shade-blend-color";
import { Text } from "preact-i18n";
import { Checkbox } from "@revoltchat/ui";
import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
import { useApplicationState } from "../../mobx/State";
@ -19,12 +21,10 @@ import {
MONOSPACE_FONT_KEYS,
} from "../../context/Theme";
import Checkbox from "../ui/Checkbox";
import ColourSwatches from "../ui/ColourSwatches";
import ComboBox from "../ui/ComboBox";
import Radio from "../ui/Radio";
import CategoryButton from "../ui/fluent/CategoryButton";
import { EmojiSelector } from "./appearance/EmojiSelector";
import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
@ -200,13 +200,13 @@ export const DisplayLigaturesShim = observer(() => {
return (
<>
<Checkbox
checked={settings.get("appearance:ligatures") ?? false}
value={settings.get("appearance:ligatures") ?? false}
onChange={(v) => settings.set("appearance:ligatures", v)}
title={<Text id="app.settings.pages.appearance.ligatures" />}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
}
/>
</>
);
});
@ -219,13 +219,15 @@ export const ShowSendButtonShim = observer(() => {
return (
<Checkbox
checked={settings.get("appearance:show_send_button") ?? false}
value={settings.get("appearance:show_send_button") ?? false}
onChange={(v) => settings.set("appearance:show_send_button", v)}
title={
<Text id="app.settings.pages.appearance.appearance_options.show_send" />
}
description={
<Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
}>
<Text id="app.settings.pages.appearance.appearance_options.show_send" />
</Checkbox>
}
/>
);
});
@ -237,13 +239,15 @@ export const DisplaySeasonalShim = observer(() => {
return (
<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
value={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
title={
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
}
description={
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
</Checkbox>
}
/>
);
});
@ -255,13 +259,15 @@ export const DisplayTransparencyShim = observer(() => {
return (
<Checkbox
checked={settings.get("appearance:transparency") ?? true}
value={settings.get("appearance:transparency") ?? true}
onChange={(v) => settings.set("appearance:transparency", v)}
title={
<Text id="app.settings.pages.appearance.theme_options.transparency" />
}
description={
<Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.transparency" />
</Checkbox>
}
/>
);
});

View file

@ -7,8 +7,7 @@ import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useMemo } from "preact/hooks";
import Checkbox from "../../ui/Checkbox";
import { OverrideSwitch } from "@revoltchat/ui";
import { Checkbox, OverrideSwitch } from "@revoltchat/ui";
interface PermissionSelectProps {
id: keyof typeof Permission;
@ -136,7 +135,7 @@ export function PermissionSelect({
) : (
<Checkbox
disabled={disabled}
checked={state === "Allow"}
value={state === "Allow"}
onChange={() =>
onChange(
Long.fromNumber(value, false)

View file

@ -1,123 +0,0 @@
import { Check } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components/macro";
import { Children } from "../../types/Preact";
export const CheckboxBase = styled.label`
gap: 4px;
z-index: 1;
display: flex;
margin-top: 20px;
align-items: center;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 18px;
user-select: none;
transition: 0.2s ease all;
input {
display: none;
}
&:hover {
.check {
background: var(--background);
}
}
&[disabled] {
opacity: 0.5;
cursor: not-allowed;
&:hover {
background: unset;
}
}
`;
const CheckboxContent = styled.span`
display: flex;
flex-grow: 1;
font-size: 14px;
gap: 2px;
font-weight: 600;
flex-direction: column;
`;
const CheckboxDescription = styled.span`
font-size: 0.75rem;
font-weight: 500;
color: var(--secondary-foreground);
`;
export const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
margin: 4px;
width: 24px;
height: 24px;
display: grid;
flex-shrink: 0;
place-items: center;
transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background);
svg {
color: var(--secondary-background);
}
${(props) =>
props.contrast &&
css`
background: var(--primary-background);
svg {
color: var(--primary-background);
}
`}
${(props) =>
props.checked &&
css`
background: var(--accent) !important;
`}
`;
export interface CheckboxProps {
checked: boolean;
disabled?: boolean;
contrast?: boolean;
className?: string;
children?: Children;
description?: Children;
onChange: (state: boolean) => void;
}
export default function Checkbox(props: CheckboxProps) {
return (
<CheckboxBase disabled={props.disabled} className={props.className}>
<CheckboxContent>
<span>{props.children}</span>
{props.description && (
<CheckboxDescription>
{props.description}
</CheckboxDescription>
)}
</CheckboxContent>
<input
type="checkbox"
checked={props.checked}
onChange={() =>
!props.disabled && props.onChange(!props.checked)
}
/>
<Checkmark
checked={props.checked}
contrast={props.contrast}
className="check">
<Check size={20} />
</Checkmark>
</CheckboxBase>
);
}

View file

@ -5,13 +5,12 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Checkbox } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import Checkbox from "../../../components/ui/Checkbox";
import InputBox from "../../../components/ui/InputBox";
interface Props {
@ -120,14 +119,14 @@ export default observer(({ channel }: Props) => {
""
) : (
<Checkbox
checked={nsfw ?? false}
value={nsfw ?? false}
onChange={(nsfwchange) => {
setNSFW(nsfwchange);
if (!changed) setChanged(true);
}}
description="Set this channel to NSFW.">
NSFW
</Checkbox>
title="NSFW"
description="Set this channel to NSFW."
/>
)}
<p>
<Button onClick={save} palette="secondary" disabled={!changed}>

View file

@ -3,14 +3,14 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import {
AVAILABLE_EXPERIMENTS,
EXPERIMENTS,
} from "../../../mobx/stores/Experiments";
import Checkbox from "../../../components/ui/Checkbox";
export const ExperimentsPage = observer(() => {
const experiments = useApplicationState().experiments;
@ -22,11 +22,11 @@ export const ExperimentsPage = observer(() => {
{AVAILABLE_EXPERIMENTS.map((key) => (
<Checkbox
key={key}
checked={experiments.isEnabled(key)}
value={experiments.isEnabled(key)}
onChange={(enabled) => experiments.setEnabled(key, enabled)}
description={EXPERIMENTS[key].description}>
{EXPERIMENTS[key].title}
</Checkbox>
description={EXPERIMENTS[key].description}
title={EXPERIMENTS[key].title}
/>
))}
{AVAILABLE_EXPERIMENTS.length === 0 && (
<div className={styles.empty}>

View file

@ -5,6 +5,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useMemo } from "preact/hooks";
import { Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import britannyFlagSVG from "../assets/flags/brittany.svg";
@ -21,7 +23,6 @@ import {
Languages as Langs,
} from "../../../../external/lang/Languages";
import Emoji from "../../../components/common/Emoji";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
type Key = [Language, LanguageEntry];
@ -41,66 +42,82 @@ function Entry({ entry: [x, lang], selected, onSelect }: Props) {
<Checkbox
key={x}
className={styles.entry}
checked={selected}
onChange={onSelect}>
<div className={styles.flag}>
{lang.i18n === "vec" ? (
<img
src={venetoFlagSVG}
width={42}
loading="lazy"
style={{ objectFit: "cover", borderRadius: "6px" }}
/>
) : lang.i18n === "br" ? (
<img
src={britannyFlagSVG}
width={42}
loading="lazy"
style={{ objectFit: "cover", borderRadius: "6px" }}
/>
) : lang.i18n === "ckb" ? (
<img
src={kurdistanFlagSVG}
width={42}
loading="lazy"
style={{ objectFit: "cover", borderRadius: "6px" }}
/>
) : lang.i18n === "eo" ? (
<img
src={esperantoFlagSVG}
width={42}
loading="lazy"
style={{ objectFit: "cover", borderRadius: "6px" }}
/>
) : lang.i18n === "ta" ? (
<img
src={tamilFlagPNG}
width={42}
loading="lazy"
style={{ objectFit: "cover" }}
/>
) : lang.emoji === "🙂" ? (
<img
src={tokiponaSVG}
width={42}
loading="lazy"
style={{ borderRadius: "6px" }}
/>
) : lang.emoji === "🪄" ? (
<img
src={enchantingTableWEBP}
width={42}
loading="lazy"
style={{ objectFit: "contain" }}
/>
) : (
<Emoji size={42} emoji={lang.emoji} />
)}
</div>
<span className={styles.description}>
{lang.display} {lang.verified && <Check size={16} />}
</span>
</Checkbox>
value={selected}
onChange={onSelect}
title={
<>
<div className={styles.flag}>
{lang.i18n === "vec" ? (
<img
src={venetoFlagSVG}
width={42}
loading="lazy"
style={{
objectFit: "cover",
borderRadius: "6px",
}}
/>
) : lang.i18n === "br" ? (
<img
src={britannyFlagSVG}
width={42}
loading="lazy"
style={{
objectFit: "cover",
borderRadius: "6px",
}}
/>
) : lang.i18n === "ckb" ? (
<img
src={kurdistanFlagSVG}
width={42}
loading="lazy"
style={{
objectFit: "cover",
borderRadius: "6px",
}}
/>
) : lang.i18n === "eo" ? (
<img
src={esperantoFlagSVG}
width={42}
loading="lazy"
style={{
objectFit: "cover",
borderRadius: "6px",
}}
/>
) : lang.i18n === "ta" ? (
<img
src={tamilFlagPNG}
width={42}
loading="lazy"
style={{ objectFit: "cover" }}
/>
) : lang.emoji === "🙂" ? (
<img
src={tokiponaSVG}
width={42}
loading="lazy"
style={{ borderRadius: "6px" }}
/>
) : lang.emoji === "🪄" ? (
<img
src={enchantingTableWEBP}
width={42}
loading="lazy"
style={{ objectFit: "contain" }}
/>
) : (
<Emoji size={42} emoji={lang.emoji} />
)}
</div>
<span className={styles.description}>
{lang.display} {lang.verified && <Check size={16} />}
</span>
</>
}
/>
);
}

View file

@ -11,7 +11,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useCallback, useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Checkbox } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { internalEmit } from "../../../lib/eventEmitter";
@ -28,7 +28,6 @@ import AutoComplete, {
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Checkbox from "../../../components/ui/Checkbox";
import InputBox from "../../../components/ui/InputBox";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@ -436,15 +435,14 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
/>
</CollapsibleSection>
<Checkbox
checked={data.public}
value={data.public}
disabled={saving}
contrast
title={<Text id="app.settings.pages.bots.public_bot" />}
description={
<Text id="app.settings.pages.bots.public_bot_desc" />
}
onChange={(v) => setData({ ...data, public: v })}>
<Text id="app.settings.pages.bots.public_bot" />
</Checkbox>
onChange={(v) => setData({ ...data, public: v })}
/>
<h3>
<Text id="app.settings.pages.bots.interactions_url" />
</h3>

View file

@ -2,12 +2,12 @@ import { Refresh } from "@styled-icons/boxicons-regular";
import { useEffect, useState } from "preact/hooks";
import { Button } from "@revoltchat/ui";
import { Button, Checkbox } from "@revoltchat/ui";
import RLogo from "../assets/revolt_r.svg";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
import RLogo from "../assets/revolt_r.svg";
export function Native() {
if (typeof window.native === "undefined") return null;
@ -30,7 +30,7 @@ export function Native() {
<Tip hideSeparator>Some options might require a restart.</Tip>
<h3>App Behavior</h3>
<Checkbox
checked={autoStart ?? false}
value={autoStart ?? false}
disabled={typeof autoStart === "undefined"}
onChange={async (v) => {
if (v) {
@ -41,12 +41,12 @@ export function Native() {
setAutoStart(v);
}}
description="Launch Revolt when you log into your computer.">
Start with computer
</Checkbox>
title="Start with computer"
description="Launch Revolt when you log into your computer."
/>
<Checkbox
checked={config.minimiseToTray}
value={config.minimiseToTray}
onChange={(minimiseToTray) => {
window.native.set("minimiseToTray", minimiseToTray);
setConfig({
@ -54,11 +54,11 @@ export function Native() {
minimiseToTray,
});
}}
description="Instead of closing, Revolt will hide in your tray.">
Minimise to Tray
</Checkbox>
title="Minimise to Tray"
description="Instead of closing, Revolt will hide in your tray."
/>
<Checkbox
checked={config.discordRPC}
value={config.discordRPC}
onChange={(discordRPC) => {
window.native.set("discordRPC", discordRPC);
setConfig({
@ -66,11 +66,11 @@ export function Native() {
discordRPC,
});
}}
description="Rep Revolt on your Discord status.">
Enable Discord status
</Checkbox>
title="Enable Discord status"
description="Rep Revolt on your Discord status."
/>
<Checkbox
checked={config.build === "nightly"}
value={config.build === "nightly"}
onChange={(nightly) => {
const build = nightly ? "nightly" : "stable";
window.native.set("build", build);
@ -80,12 +80,13 @@ export function Native() {
build,
});
}}
description="Use the beta branch of Revolt.">
Revolt Nightly
</Checkbox>
title="Revolt Nightly"
description="Use the beta branch of Revolt."
/>
<h3>Titlebar</h3>
<Checkbox
checked={!config.frame}
value={!config.frame}
onChange={(frame) => {
window.native.set("frame", !frame);
setHintRelaunch(true);
@ -94,12 +95,12 @@ export function Native() {
frame: !frame,
});
}}
description={<>Let Revolt use its own window frame.</>}>
Custom window frame
</Checkbox>
title="Custom window frame"
description="Let Revolt use its own window frame."
/>
<Checkbox //FIXME: In Titlebar.tsx, enable .quick css
disabled={true}
checked={!config.frame}
value={!config.frame}
onChange={(frame) => {
window.native.set("frame", !frame);
setHintRelaunch(true);
@ -108,12 +109,12 @@ export function Native() {
frame: !frame,
});
}}
description="Show mute/deafen buttons on the titlebar.">
Enable quick action buttons
</Checkbox>
title="Enable quick action buttons"
description="Show mute/deafen buttons on the titlebar."
/>
<h3>Advanced</h3>
<Checkbox
checked={config.hardwareAcceleration}
value={config.hardwareAcceleration}
onChange={async (hardwareAcceleration) => {
window.native.set(
"hardwareAcceleration",
@ -125,9 +126,10 @@ export function Native() {
hardwareAcceleration,
});
}}
description="Uses your GPU to render the app, disable if you run into visual issues.">
Hardware Acceleration
</Checkbox>
title="Hardware Acceleration"
description="Uses your GPU to render the app, disable if you run into visual issues."
/>
<p style={{ display: "flex", gap: "8px" }}>
<Button
palette="secondary"
@ -161,8 +163,9 @@ export function Native() {
) : (
<>
<Checkbox
checked={confirmDev}
value={confirmDev}
onChange={setConfirmDev}
title="I understand there's no going back."
description={
<>
This will change the app to the 'dev' branch,
@ -178,9 +181,8 @@ export function Native() {
<br />
<code>yarn dev --port 3001</code>
</>
}>
I understand there's no going back.
</Checkbox>
}
/>
<p>
<Button
palette="error"

View file

@ -4,6 +4,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Checkbox } from "@revoltchat/ui";
import { urlBase64ToUint8Array } from "../../../lib/conversion";
import { useApplicationState } from "../../../mobx/State";
@ -11,8 +13,6 @@ import { useApplicationState } from "../../../mobx/State";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Checkbox from "../../../components/ui/Checkbox";
export const Notifications = observer(() => {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
@ -38,7 +38,10 @@ export const Notifications = observer(() => {
</h3>
<Checkbox
disabled={!("Notification" in window)}
checked={settings.get("notifications:desktop", false)!}
value={settings.get("notifications:desktop", false)!}
title={
<Text id="app.settings.pages.notifications.enable_desktop" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
@ -56,12 +59,14 @@ export const Notifications = observer(() => {
}
settings.set("notifications:desktop", desktopEnabled);
}}>
<Text id="app.settings.pages.notifications.enable_desktop" />
</Checkbox>
}}
/>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
value={pushEnabled ?? false}
title={
<Text id="app.settings.pages.notifications.enable_push" />
}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
@ -102,21 +107,24 @@ export const Notifications = observer(() => {
} catch (err) {
console.error("Failed to enable push!", err);
}
}}>
<Text id="app.settings.pages.notifications.enable_push" />
</Checkbox>
}}
/>
<h3>
<Text id="app.settings.pages.notifications.sounds" />
</h3>
{settings.sounds.getState().map(({ id, enabled }) => (
<Checkbox
key={id}
checked={enabled}
value={enabled}
title={
<Text
id={`app.settings.pages.notifications.sound.${id}`}
/>
}
onChange={(enabled) =>
settings.sounds.setEnabled(id, enabled)
}>
<Text id={`app.settings.pages.notifications.sound.${id}`} />
</Checkbox>
}
/>
))}
</div>
);

View file

@ -485,7 +485,7 @@
}
}
.entry > span > span {
.entry > div div {
gap: 8px;
display: flex;
align-items: center;

View file

@ -1,15 +1,12 @@
import { Check } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import styled from "styled-components";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Button } from "@revoltchat/ui";
import { Button, Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
// Just keeping this here for general purpose. Should probably be exported
@ -21,45 +18,10 @@ interface Plugin {
enabled: boolean | undefined;
}
const CustomCheckboxBase = styled(CheckboxBase)`
margin-top: 0 !important;
`;
export interface CheckboxProps {
checked: boolean;
disabled?: boolean;
onChange: (state: boolean) => void;
}
function PluginCheckbox(props: CheckboxProps) {
// HACK HACK HACK(lexisother): THIS ENTIRE THING IS A HACK!!!!
/*
Until some reviewer points me in the right direction, I've resorted to
fabricating my own checkbox component.
"WHY?!", you might ask. Well, the normal `Checkbox` component can take
textual contents, and *also* adds a `margin-top` of 20 pixels.
We... don't need that. At all. *Especially* the margin. It makes our card
look disproportionate.
Apologies, @insert!
*/
return (
<CustomCheckboxBase disabled={props.disabled}>
<input
type="checkbox"
checked={props.checked}
onChange={() =>
!props.disabled && props.onChange(!props.checked)
}
/>
<Checkmark checked={props.checked} className="check">
<Check size={20} />
</Checkmark>
</CustomCheckboxBase>
);
}
interface CardProps {
plugin: Plugin;
}
function PluginCard({ plugin }: CardProps) {
const plugins = useApplicationState().plugins;
@ -70,12 +32,14 @@ function PluginCard({ plugin }: CardProps) {
<div key={plugin.id} className={styles.botCard}>
<div className={styles.infocontainer}>
<div className={styles.infoheader}>
<div className={styles.container}>
{plugin.namespace} / {plugin.id}
</div>
<PluginCheckbox
<Checkbox
key={plugin.id}
checked={plugin.enabled!}
value={plugin.enabled!}
title={
<>
{plugin.namespace} / {plugin.id}
</>
}
onChange={() => {
!plugin.enabled
? plugins.load(plugin.namespace, plugin.id)

View file

@ -3,11 +3,11 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { SyncKeys } from "../../../mobx/stores/Sync";
import Checkbox from "../../../components/ui/Checkbox";
export const Sync = observer(() => {
const sync = useApplicationState().sync;
@ -30,15 +30,15 @@ export const Sync = observer(() => {
).map(([key, title]) => (
<Checkbox
key={key}
checked={sync.isEnabled(key)}
value={sync.isEnabled(key)}
title={<Text id={`app.settings.pages.${title}`} />}
description={
<Text
id={`app.settings.pages.sync.descriptions.${key}`}
/>
}
onChange={() => sync.toggle(key)}>
<Text id={`app.settings.pages.${title}`} />
</Checkbox>
onChange={() => sync.toggle(key)}
/>
))}
{/*<h5 style={{ marginTop: "20px", color: "grey" }}>
Last sync at 12:00

View file

@ -9,11 +9,10 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useMemo, useState } from "preact/hooks";
import { Button, Preloader } from "@revoltchat/ui";
import { Button, Checkbox, Preloader } from "@revoltchat/ui";
import UserIcon from "../../../components/common/user/UserIcon";
import { Username } from "../../../components/common/user/UserShort";
import Checkbox from "../../../components/ui/Checkbox";
import IconButton from "../../../components/ui/IconButton";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
@ -54,7 +53,15 @@ const Inner = observer(({ member }: InnerProps) => {
return (
<Checkbox
key={key}
checked={roles.includes(key) ?? false}
value={roles.includes(key) ?? false}
title={
<span
style={{
color: role.colour,
}}>
{role.name}
</span>
}
onChange={(v) => {
if (v) {
setRoles([...roles, key]);
@ -63,14 +70,8 @@ const Inner = observer(({ member }: InnerProps) => {
roles.filter((x) => x !== key),
);
}
}}>
<span
style={{
color: role.colour,
}}>
{role.name}
</span>
</Checkbox>
}}
/>
);
})}
<Button

View file

@ -5,16 +5,21 @@ import { Server } from "revolt.js";
import { Text } from "preact-i18n";
import { useMemo, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
Button,
PermissionsLayout,
SpaceBetween,
H1,
Checkbox,
} from "@revoltchat/ui";
import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
import { Button, PermissionsLayout, SpaceBetween, H1 } from "@revoltchat/ui";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { PermissionList } from "../../../components/settings/roles/PermissionList";
import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import InputBox from "../../../components/ui/InputBox";
import Overline from "../../../components/ui/Overline";
interface Props {
server: Server;
@ -169,17 +174,19 @@ export const Roles = observer(({ server }: Props) => {
</Overline>
<p>
<Checkbox
checked={
value={
currentRoleValue.hoist ?? false
}
onChange={(hoist) =>
setValue({ ...value, hoist })
}
title={
<Text id="app.settings.permissions.hoist_role" />
}
description={
<Text id="app.settings.permissions.hoist_desc" />
}>
<Text id="app.settings.permissions.hoist_role" />
</Checkbox>
}
/>
</p>
</section>
<section>

View file

@ -2220,9 +2220,9 @@ __metadata:
languageName: node
linkType: hard
"@revoltchat/ui@npm:1.0.34":
version: 1.0.34
resolution: "@revoltchat/ui@npm:1.0.34"
"@revoltchat/ui@portal:../components::locator=client%40workspace%3A.":
version: 0.0.0-use.local
resolution: "@revoltchat/ui@portal:../components::locator=client%40workspace%3A."
dependencies:
"@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0
@ -2235,9 +2235,8 @@ __metadata:
react-device-detect: "*"
react-virtuoso: "*"
revolt.js: "*"
checksum: 576a147c945cc3c9c8fb0555007b1048017551139d6b6dd7f0e9af66a1f5e595a46e73b853258a5048563af80c470230048ab214784cf14f347cf61b56dbbc07
languageName: node
linkType: hard
linkType: soft
"@rollup/plugin-babel@npm:^5.2.0":
version: 5.3.0