mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
improvement(plugins-page): Refactor using card
I've (hackily so) written my own plugin card to replace the previous usage of the `Checkbox` component. Beware, ye who tread these lands, for they are decrepid.
This commit is contained in:
parent
0d6720e3b1
commit
cdc077ffa1
2 changed files with 95 additions and 17 deletions
|
@ -3,7 +3,7 @@ import styled, { css } from "styled-components/macro";
|
||||||
|
|
||||||
import { Children } from "../../types/Preact";
|
import { Children } from "../../types/Preact";
|
||||||
|
|
||||||
const CheckboxBase = styled.label`
|
export const CheckboxBase = styled.label`
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -52,7 +52,7 @@ const CheckboxDescription = styled.span`
|
||||||
color: var(--secondary-foreground);
|
color: var(--secondary-foreground);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
|
export const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
|
@ -1,13 +1,104 @@
|
||||||
|
import { Check } from "@styled-icons/boxicons-regular";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
import styles from "./Panes.module.scss";
|
import styles from "./Panes.module.scss";
|
||||||
import { Text } from "preact-i18n";
|
import { Text } from "preact-i18n";
|
||||||
|
|
||||||
import { useApplicationState } from "../../../mobx/State";
|
import { useApplicationState } from "../../../mobx/State";
|
||||||
|
|
||||||
import Checkbox from "../../../components/ui/Checkbox";
|
import Button from "../../../components/ui/Button";
|
||||||
|
import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
|
||||||
import Tip from "../../../components/ui/Tip";
|
import Tip from "../../../components/ui/Tip";
|
||||||
|
|
||||||
|
// Just keeping this here for general purpose. Should probably be exported
|
||||||
|
// elsewhere, though.
|
||||||
|
interface Plugin {
|
||||||
|
namespace: string;
|
||||||
|
id: string;
|
||||||
|
version: string;
|
||||||
|
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;
|
||||||
|
|
||||||
|
// TODO(lexisother): ...don't hijack bot cards? We need a general-purpose
|
||||||
|
// card component.
|
||||||
|
return (
|
||||||
|
<div className={styles.myBots}>
|
||||||
|
<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
|
||||||
|
key={plugin.id}
|
||||||
|
checked={plugin.enabled!}
|
||||||
|
onChange={() => {
|
||||||
|
!plugin.enabled
|
||||||
|
? plugins.load(plugin.namespace, plugin.id)
|
||||||
|
: plugins.unload(
|
||||||
|
plugin.namespace,
|
||||||
|
plugin.id,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.buttonRow}>
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
plugins.remove(plugin.namespace, plugin.id)
|
||||||
|
}>
|
||||||
|
<p>Delete</p>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export const PluginsPage = observer(() => {
|
export const PluginsPage = observer(() => {
|
||||||
const plugins = useApplicationState().plugins;
|
const plugins = useApplicationState().plugins;
|
||||||
return (
|
return (
|
||||||
|
@ -16,20 +107,7 @@ export const PluginsPage = observer(() => {
|
||||||
Warning: This feature is still in development.
|
Warning: This feature is still in development.
|
||||||
</Tip>
|
</Tip>
|
||||||
{plugins.list().map((plugin) => {
|
{plugins.list().map((plugin) => {
|
||||||
// TODO(lexisother): Stop using Checkbox, write a custom component
|
return <PluginCard key={plugin.id} plugin={plugin} />;
|
||||||
return (
|
|
||||||
<Checkbox
|
|
||||||
key={plugin.id}
|
|
||||||
checked={plugin.enabled!}
|
|
||||||
onChange={() => {
|
|
||||||
!plugin.enabled
|
|
||||||
? plugins.load(plugin.namespace, plugin.id)
|
|
||||||
: plugins.unload(plugin.namespace, plugin.id);
|
|
||||||
}}
|
|
||||||
description={""}>
|
|
||||||
{plugin.namespace} / {plugin.id}
|
|
||||||
</Checkbox>
|
|
||||||
);
|
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{plugins.list().length === 0 && (
|
{plugins.list().length === 0 && (
|
||||||
|
|
Loading…
Reference in a new issue