feat(@ui): migrate checkbox component

This commit is contained in:
Paul Makles
2022-05-29 16:34:54 +01:00
parent 52ad0b2095
commit 0fbbde0acb
18 changed files with 239 additions and 361 deletions

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)