From 1bd138d6ef10436f77f489502305713e2292b1df Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sun, 29 May 2022 16:38:09 +0100 Subject: [PATCH] feat(@ui): migrate colour swatches and combo box --- src/components/common/LocaleSelector.tsx | 4 +- src/components/settings/AppearanceShims.tsx | 4 +- src/components/ui/ColourSwatches.tsx | 162 -------------------- src/components/ui/ComboBox.tsx | 26 ---- src/pages/invite/InviteBot.tsx | 6 +- src/pages/settings/panes/Audio.tsx | 6 +- src/pages/settings/server/Overview.tsx | 3 +- src/pages/settings/server/Roles.tsx | 2 +- 8 files changed, 10 insertions(+), 203 deletions(-) delete mode 100644 src/components/ui/ColourSwatches.tsx delete mode 100644 src/components/ui/ComboBox.tsx diff --git a/src/components/common/LocaleSelector.tsx b/src/components/common/LocaleSelector.tsx index 5ac49279..934833c5 100644 --- a/src/components/common/LocaleSelector.tsx +++ b/src/components/common/LocaleSelector.tsx @@ -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"; diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index c725d225..7e4568dd 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -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"; diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx deleted file mode 100644 index a73e913f..00000000 --- a/src/components/ui/ColourSwatches.tsx +++ /dev/null @@ -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() as RefObject; - const setValue = useDebounceCallback( - (value) => onChange(value as string), - [onChange], - 100, - ); - - return ( - - setValue(ev.currentTarget.value)} - /> - ref.current?.click()}> - - - -
-
-
- - - {presets.map((row, i) => ( -
- {row.map((swatch, i) => ( - onChange(swatch)}> - {swatch === value && } - - ))} -
- ))} - - - ); -} diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx deleted file mode 100644 index 3267a856..00000000 --- a/src/components/ui/ComboBox.tsx +++ /dev/null @@ -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; -`; diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx index 59835c7a..6e573e5d 100644 --- a/src/pages/invite/InviteBot.tsx +++ b/src/pages/invite/InviteBot.tsx @@ -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; diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index e7194bee..62227d07 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -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";*/ diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index 537af0f1..f750b275 100644 --- a/src/pages/settings/server/Overview.tsx +++ b/src/pages/settings/server/Overview.tsx @@ -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 { diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 7c38e13d..11c27253 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -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";