mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 14:40:58 -05:00
feat(@ui): migrate colour swatches and combo box
This commit is contained in:
Paul Makles
parent
4bcfa601a5
commit
1bd138d6ef
8 changed files with 10 additions and 203 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useApplicationState } from "../../mobx/State";
|
||||
import { ComboBox } from "@revoltchat/ui";
|
||||
|
||||
import ComboBox from "../ui/ComboBox";
|
||||
import { useApplicationState } from "../../mobx/State";
|
||||
|
||||
import { Language, Languages } from "../../../external/lang/Languages";
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import pSBC from "shade-blend-color";
|
|||
|
||||
import { Text } from "preact-i18n";
|
||||
|
||||
import { Checkbox } from "@revoltchat/ui";
|
||||
import { Checkbox, ColourSwatches, ComboBox } from "@revoltchat/ui";
|
||||
|
||||
import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
|
||||
|
||||
|
|
@ -21,8 +21,6 @@ import {
|
|||
MONOSPACE_FONT_KEYS,
|
||||
} from "../../context/Theme";
|
||||
|
||||
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";
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
import { Check } from "@styled-icons/boxicons-regular";
|
||||
import { Palette } from "@styled-icons/boxicons-solid";
|
||||
import styled, { css } from "styled-components/macro";
|
||||
|
||||
import { RefObject } from "preact";
|
||||
import { useRef } from "preact/hooks";
|
||||
|
||||
import { useDebounceCallback } from "../../lib/debounce";
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const presets = [
|
||||
[
|
||||
"#7B68EE",
|
||||
"#3498DB",
|
||||
"#1ABC9C",
|
||||
"#F1C40F",
|
||||
"#FF7F50",
|
||||
"#FD6671",
|
||||
"#E91E63",
|
||||
"#D468EE",
|
||||
],
|
||||
[
|
||||
"#594CAD",
|
||||
"#206694",
|
||||
"#11806A",
|
||||
"#C27C0E",
|
||||
"#CD5B45",
|
||||
"#FF424F",
|
||||
"#AD1457",
|
||||
"#954AA8",
|
||||
],
|
||||
];
|
||||
|
||||
const SwatchesBase = styled.div`
|
||||
/*gap: 8px;*/
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 72px;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: relative;
|
||||
width: 0;
|
||||
|
||||
div {
|
||||
width: 8px;
|
||||
height: 68px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--primary-background),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: ${(props) => props.colour};
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
border: 3px solid var(--foreground);
|
||||
transition: border ease-in-out 0.07s;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.type === "small"
|
||||
? css`
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
/*stroke-width: 2;*/
|
||||
}
|
||||
`
|
||||
: css`
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Rows = styled.div`
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
padding-bottom: 4px;
|
||||
|
||||
> div {
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function ColourSwatches({ value, onChange }: Props) {
|
||||
const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
|
||||
const setValue = useDebounceCallback(
|
||||
(value) => onChange(value as string),
|
||||
[onChange],
|
||||
100,
|
||||
);
|
||||
|
||||
return (
|
||||
<SwatchesBase>
|
||||
<input
|
||||
type="color"
|
||||
value={value}
|
||||
ref={ref}
|
||||
onChange={(ev) => setValue(ev.currentTarget.value)}
|
||||
/>
|
||||
<Swatch
|
||||
colour={value}
|
||||
type="large"
|
||||
onClick={() => ref.current?.click()}>
|
||||
<Palette size={32} />
|
||||
</Swatch>
|
||||
|
||||
<div class="overlay">
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<Rows>
|
||||
{presets.map((row, i) => (
|
||||
<div key={i}>
|
||||
{row.map((swatch, i) => (
|
||||
<Swatch
|
||||
colour={swatch}
|
||||
type="small"
|
||||
key={i}
|
||||
onClick={() => onChange(swatch)}>
|
||||
{swatch === value && <Check size={22} />}
|
||||
</Swatch>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Rows>
|
||||
</SwatchesBase>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import styled from "styled-components/macro";
|
||||
|
||||
export default styled.select`
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
font-size: var(--text-size);
|
||||
color: var(--secondary-foreground);
|
||||
background: var(--secondary-background);
|
||||
|
||||
border: none;
|
||||
outline: 2px solid transparent;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
transition: outline-color 0.2s ease-in-out;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1.5pt var(--accent);
|
||||
}
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
`;
|
||||
|
|
@ -4,18 +4,16 @@ import styled from "styled-components/macro";
|
|||
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { Button } from "@revoltchat/ui";
|
||||
import { Button, ComboBox } from "@revoltchat/ui";
|
||||
|
||||
import { useClient } from "../../context/revoltjs/RevoltClient";
|
||||
|
||||
import UserIcon from "../../components/common/user/UserIcon";
|
||||
import ComboBox from "../../components/ui/ComboBox";
|
||||
import Markdown from "../../components/markdown/Markdown";
|
||||
import Overline from "../../components/ui/Overline";
|
||||
import Preloader from "../../components/ui/Preloader";
|
||||
import Tip from "../../components/ui/Tip";
|
||||
|
||||
import Markdown from "../../components/markdown/Markdown";
|
||||
|
||||
const BotInfo = styled.div`
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ import styles from "./Panes.module.scss";
|
|||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { Button } from "@revoltchat/ui";
|
||||
import { Button, ComboBox } from "@revoltchat/ui";
|
||||
|
||||
import { stopPropagation } from "../../../lib/stopPropagation";
|
||||
import { voiceState } from "../../../lib/vortex/VoiceState";
|
||||
|
||||
import ComboBox from "../../../components/ui/ComboBox";
|
||||
import opusSVG from "../assets/opus_logo.svg";
|
||||
|
||||
import Overline from "../../../components/ui/Overline";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import opusSVG from "../assets/opus_logo.svg";
|
||||
|
||||
{
|
||||
/*import OpusSVG from "../assets/opus_logo.svg";*/
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import styles from "./Panes.module.scss";
|
|||
import { Text } from "preact-i18n";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
import { Button } from "@revoltchat/ui";
|
||||
import { Button, ComboBox } from "@revoltchat/ui";
|
||||
|
||||
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
|
||||
import { noop } from "../../../lib/js";
|
||||
|
|
@ -15,7 +15,6 @@ import { noop } from "../../../lib/js";
|
|||
import { FileUploader } from "../../../context/revoltjs/FileUploads";
|
||||
import { getChannelName } from "../../../context/revoltjs/util";
|
||||
|
||||
import ComboBox from "../../../components/ui/ComboBox";
|
||||
import InputBox from "../../../components/ui/InputBox";
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ import {
|
|||
SpaceBetween,
|
||||
H1,
|
||||
Checkbox,
|
||||
ColourSwatches,
|
||||
} 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";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue