From 20d31babced955ab03944b28a9a73bf4aa013395 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sun, 29 May 2022 15:43:36 +0100 Subject: [PATCH 01/18] feat(@ui): migrate Banner component --- src/components/navigation/items/ConnectionStatus.tsx | 4 ++-- src/components/ui/Banner.tsx | 10 ---------- 2 files changed, 2 insertions(+), 12 deletions(-) delete mode 100644 src/components/ui/Banner.tsx diff --git a/src/components/navigation/items/ConnectionStatus.tsx b/src/components/navigation/items/ConnectionStatus.tsx index de0d42b7..899b3d8e 100644 --- a/src/components/navigation/items/ConnectionStatus.tsx +++ b/src/components/navigation/items/ConnectionStatus.tsx @@ -1,14 +1,14 @@ import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; +import { Banner } from "@revoltchat/ui"; + import { ClientStatus, StatusContext, useClient, } from "../../../context/revoltjs/RevoltClient"; -import Banner from "../../ui/Banner"; - export default function ConnectionStatus() { const status = useContext(StatusContext); const client = useClient(); diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx deleted file mode 100644 index ca4704d9..00000000 --- a/src/components/ui/Banner.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styled from "styled-components/macro"; - -export default styled.div` - padding: 8px; - font-size: 14px; - text-align: center; - - color: var(--accent); - background: var(--primary-background); -`; From 4bcfa601a53bf8f19b63642139e64d932cbaf804 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sun, 29 May 2022 16:34:54 +0100 Subject: [PATCH 02/18] feat(@ui): migrate checkbox component --- package.json | 5 +- src/components/common/AgeGate.tsx | 12 +- src/components/common/user/UserCheckbox.tsx | 4 +- src/components/settings/AppearanceShims.tsx | 42 +++--- .../settings/roles/PermissionSelect.tsx | 5 +- src/components/ui/Checkbox.tsx | 123 ---------------- src/pages/settings/channel/Overview.tsx | 11 +- src/pages/settings/panes/Experiments.tsx | 12 +- src/pages/settings/panes/Languages.tsx | 139 ++++++++++-------- src/pages/settings/panes/MyBots.tsx | 12 +- src/pages/settings/panes/Native.tsx | 72 ++++----- src/pages/settings/panes/Notifications.tsx | 36 +++-- src/pages/settings/panes/Panes.module.scss | 2 +- src/pages/settings/panes/Plugins.tsx | 54 ++----- src/pages/settings/panes/Sync.tsx | 12 +- src/pages/settings/server/Members.tsx | 23 +-- src/pages/settings/server/Roles.tsx | 27 ++-- yarn.lock | 9 +- 18 files changed, 239 insertions(+), 361 deletions(-) delete mode 100644 src/components/ui/Checkbox.tsx diff --git a/package.json b/package.json index 8b587394..bc2077b9 100644 --- a/package.json +++ b/package.json @@ -162,5 +162,8 @@ "repository": "https://github.com/revoltchat/revite.git", "author": "Paul ", "license": "MIT", - "packageManager": "yarn@3.2.0" + "packageManager": "yarn@3.2.0", + "resolutions": { + "@revoltchat/ui": "portal:../components" + } } diff --git a/src/components/common/AgeGate.tsx b/src/components/common/AgeGate.tsx index 825721b8..fc0fbdfa 100644 --- a/src/components/common/AgeGate.tsx +++ b/src/components/common/AgeGate.tsx @@ -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) => { layout.toggleSectionState(SECTION_NSFW, false)}> - - + title={} + value={layout.getSectionState(SECTION_NSFW, false)} + onChange={() => layout.toggleSectionState(SECTION_NSFW, false)} + />
); diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index ff5c3321..159d7342 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -485,7 +485,7 @@ } } - .entry > span > span { + .entry > div div { gap: 8px; display: flex; align-items: center; diff --git a/src/pages/settings/panes/Plugins.tsx b/src/pages/settings/panes/Plugins.tsx index 8bf45a86..cc6c6fc3 100644 --- a/src/pages/settings/panes/Plugins.tsx +++ b/src/pages/settings/panes/Plugins.tsx @@ -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 ( - - - !props.disabled && props.onChange(!props.checked) - } - /> - - - - - ); -} - interface CardProps { plugin: Plugin; } + function PluginCard({ plugin }: CardProps) { const plugins = useApplicationState().plugins; @@ -70,12 +32,14 @@ function PluginCard({ plugin }: CardProps) {
-
- {plugin.namespace} / {plugin.id} -
- + {plugin.namespace} / {plugin.id} + + } onChange={() => { !plugin.enabled ? plugins.load(plugin.namespace, plugin.id) diff --git a/src/pages/settings/panes/Sync.tsx b/src/pages/settings/panes/Sync.tsx index f426c4d4..a6d26c6a 100644 --- a/src/pages/settings/panes/Sync.tsx +++ b/src/pages/settings/panes/Sync.tsx @@ -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]) => ( } description={ } - onChange={() => sync.toggle(key)}> - - + onChange={() => sync.toggle(key)} + /> ))} {/*
Last sync at 12:00 diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index d7cd740e..99e3e89b 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -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 ( + {role.name} + + } onChange={(v) => { if (v) { setRoles([...roles, key]); @@ -63,14 +70,8 @@ const Inner = observer(({ member }: InnerProps) => { roles.filter((x) => x !== key), ); } - }}> - - {role.name} - - + }} + /> ); })}
{ diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index cd786d63..10756648 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,7 +11,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; -import { Button, Checkbox } from "@revoltchat/ui"; +import { Button, Checkbox, InputBox } 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 InputBox from "../../../components/ui/InputBox"; import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; @@ -450,6 +449,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) { { placeholder="Search for a specific user..." value={query} onChange={(e) => setQuery(e.currentTarget.value)} - contrast + palette="secondary" />
{data?.length ?? 0} Members
{members ? ( diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index f750b275..4a333bab 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, ComboBox } from "@revoltchat/ui"; +import { Button, ComboBox, InputBox } from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { noop } from "../../../lib/js"; @@ -15,8 +15,6 @@ import { noop } from "../../../lib/js"; import { FileUploader } from "../../../context/revoltjs/FileUploads"; import { getChannelName } from "../../../context/revoltjs/util"; -import InputBox from "../../../components/ui/InputBox"; - interface Props { server: Server; } @@ -70,9 +68,9 @@ export const Overview = observer(({ server }: Props) => { { setName(e.currentTarget.value); if (!changed) setChanged(true); diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 11c27253..8aada1f6 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -12,13 +12,13 @@ import { H1, Checkbox, ColourSwatches, + InputBox, } from "@revoltchat/ui"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { PermissionList } from "../../../components/settings/roles/PermissionList"; import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection"; -import InputBox from "../../../components/ui/InputBox"; import Overline from "../../../components/ui/Overline"; interface Props { @@ -148,7 +148,7 @@ export const Roles = observer(({ server }: Props) => { name: e.currentTarget.value, }) } - contrast + palette="secondary" />

@@ -205,7 +205,7 @@ export const Roles = observer(({ server }: Props) => { ), }) } - contrast + palette="secondary" />

From ab77d4a8124788d36cc642de7bf8b548399a7876 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:29:56 +0100 Subject: [PATCH 08/18] feat(@ui): migrate radio --- src/components/settings/AppearanceShims.tsx | 20 ++-- src/components/ui/Radio.tsx | 112 -------------------- src/context/intermediate/modals/Prompt.tsx | 23 ++-- 3 files changed, 25 insertions(+), 130 deletions(-) delete mode 100644 src/components/ui/Radio.tsx diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index 7e4568dd..737dba5f 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, ColourSwatches, ComboBox } from "@revoltchat/ui"; +import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui"; import TextAreaAutoSize from "../../lib/TextAreaAutoSize"; @@ -21,7 +21,6 @@ import { MONOSPACE_FONT_KEYS, } from "../../context/Theme"; -import Radio from "../ui/Radio"; import CategoryButton from "../ui/fluent/CategoryButton"; import { EmojiSelector } from "./appearance/EmojiSelector"; import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector"; @@ -117,19 +116,24 @@ export const DisplayCompactShim = () => {
+ } description={ } - checked> - - + value={true} + /> + } description={ } - disabled> - - + value={false} + disabled + />
); diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx deleted file mode 100644 index 5681ec0c..00000000 --- a/src/components/ui/Radio.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Circle } from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../types/Preact"; - -interface Props { - children: Children; - description?: Children; - - checked?: boolean; - disabled?: boolean; - onSelect?: () => void; -} - -interface BaseProps { - selected: boolean; -} - -const RadioBase = styled.label` - gap: 4px; - z-index: 1; - padding: 4px; - display: flex; - cursor: pointer; - align-items: center; - - font-size: 1rem; - font-weight: 600; - user-select: none; - transition: 0.2s ease all; - border-radius: var(--border-radius); - - &:hover { - background: var(--hover); - } - - > input { - display: none; - } - - > div { - margin: 4px; - width: 24px; - height: 24px; - display: grid; - place-items: center; - background: var(--foreground); - border-radius: var(--border-radius-half); - - svg { - color: var(--foreground); - /*stroke-width: 2;*/ - } - } - - ${(props) => - props.selected && - css` - color: white; - cursor: default; - background: var(--accent); - - > div { - background: white; - } - - > div svg { - color: var(--accent); - } - - &:hover { - background: var(--accent); - } - `} -`; - -const RadioDescription = styled.span` - font-size: 0.8em; - font-weight: 400; - color: var(--secondary-foreground); - - ${(props) => - props.selected && - css` - color: white; - `} -`; - -export default function Radio(props: Props) { - const selected = props.checked ?? false; - return ( - - !props.disabled && props.onSelect && props.onSelect() - }> -
- -
- - - {props.children} - {props.description && ( - - {props.description} - - )} - - - ); -} diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx index 6d0d8966..74c11b98 100644 --- a/src/context/intermediate/modals/Prompt.tsx +++ b/src/context/intermediate/modals/Prompt.tsx @@ -7,7 +7,7 @@ import styles from "./Prompt.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { InputBox } from "@revoltchat/ui"; +import { InputBox, Radio } from "@revoltchat/ui"; import { TextReact } from "../../../lib/i18n"; @@ -15,7 +15,6 @@ import Message from "../../../components/common/messaging/Message"; import UserIcon from "../../../components/common/user/UserIcon"; import Modal, { Action } from "../../../components/ui/Modal"; import Overline from "../../../components/ui/Overline"; -import Radio from "../../../components/ui/Radio"; import { Children } from "../../../types/Preact"; import { AppContext } from "../../revoltjs/RevoltClient"; import { takeError } from "../../revoltjs/util"; @@ -457,15 +456,19 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { setType("Text")}> - - + title={ + + } + value={type === "Text"} + onSelect={() => setType("Text")} + /> setType("Voice")}> - - + title={ + + } + value={type === "Voice"} + onSelect={() => setType("Voice")} + /> From b4777e98168342381648257ec813e7a35174cee9 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:40:01 +0100 Subject: [PATCH 09/18] feat(@ui): migrate line divider, preloader and save status --- .../common/messaging/attachments/TextFile.tsx | 5 +- .../common/messaging/embed/EmbedInvite.tsx | 3 +- src/components/navigation/right/Search.tsx | 3 +- src/components/ui/LineDivider.tsx | 9 -- src/components/ui/Preloader.tsx | 104 ------------------ src/components/ui/SaveStatus.tsx | 32 ------ src/context/index.tsx | 8 +- .../intermediate/modals/Onboarding.tsx | 3 +- .../intermediate/popovers/UserProfile.tsx | 3 +- src/context/revoltjs/FileUploads.tsx | 3 +- src/context/revoltjs/RequiresOnline.tsx | 2 +- src/context/revoltjs/RevoltClient.tsx | 6 +- src/lib/ContextMenus.tsx | 3 +- src/lib/contextmenu/CMNotifications.tsx | 4 +- src/pages/app.tsx | 3 +- src/pages/channels/messaging/MessageArea.tsx | 4 +- .../channels/messaging/MessageRenderer.tsx | 12 +- src/pages/discover/Discover.tsx | 3 +- src/pages/invite/Invite.tsx | 4 +- src/pages/invite/InviteBot.tsx | 3 +- src/pages/login/forms/CaptchaBlock.tsx | 4 +- src/pages/login/forms/Form.tsx | 7 +- src/pages/login/forms/FormVerify.tsx | 5 +- src/pages/settings/GenericSettings.tsx | 3 +- src/pages/settings/ServerSettings.tsx | 5 +- src/pages/settings/Settings.tsx | 4 +- src/pages/settings/panes/Sessions.tsx | 3 +- src/pages/settings/server/Bans.tsx | 3 +- src/pages/settings/server/Categories.tsx | 7 +- src/pages/settings/server/Invites.tsx | 3 +- 30 files changed, 55 insertions(+), 206 deletions(-) delete mode 100644 src/components/ui/LineDivider.tsx delete mode 100644 src/components/ui/Preloader.tsx delete mode 100644 src/components/ui/SaveStatus.tsx diff --git a/src/components/common/messaging/attachments/TextFile.tsx b/src/components/common/messaging/attachments/TextFile.tsx index b967c11a..b119bcae 100644 --- a/src/components/common/messaging/attachments/TextFile.tsx +++ b/src/components/common/messaging/attachments/TextFile.tsx @@ -5,15 +5,14 @@ import styles from "./Attachment.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; +import { Button, Preloader } from "@revoltchat/ui"; + import RequiresOnline from "../../../../context/revoltjs/RequiresOnline"; import { AppContext, StatusContext, } from "../../../../context/revoltjs/RevoltClient"; -import Preloader from "../../../ui/Preloader"; -import { Button } from "@revoltchat/ui"; - interface Props { attachment: API.File; } diff --git a/src/components/common/messaging/embed/EmbedInvite.tsx b/src/components/common/messaging/embed/EmbedInvite.tsx index c8566f56..45d6c538 100644 --- a/src/components/common/messaging/embed/EmbedInvite.tsx +++ b/src/components/common/messaging/embed/EmbedInvite.tsx @@ -7,7 +7,7 @@ import styled, { css } from "styled-components/macro"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, Preloader } from "@revoltchat/ui"; import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice"; @@ -20,7 +20,6 @@ import { takeError } from "../../../../context/revoltjs/util"; import ServerIcon from "../../../../components/common/ServerIcon"; import Overline from "../../../ui/Overline"; -import Preloader from "../../../ui/Preloader"; const EmbedInviteBase = styled.div` width: 400px; diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx index 94576ff9..2f021471 100644 --- a/src/components/navigation/right/Search.tsx +++ b/src/components/navigation/right/Search.tsx @@ -5,13 +5,12 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { Button, InputBox } from "@revoltchat/ui"; +import { Button, InputBox, Preloader } from "@revoltchat/ui"; import { useClient } from "../../../context/revoltjs/RevoltClient"; import Message from "../../common/messaging/Message"; import Overline from "../../ui/Overline"; -import Preloader from "../../ui/Preloader"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; type SearchState = diff --git a/src/components/ui/LineDivider.tsx b/src/components/ui/LineDivider.tsx deleted file mode 100644 index b158c8ce..00000000 --- a/src/components/ui/LineDivider.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from "styled-components/macro"; - -export default styled.div` - height: 0; - opacity: 0.6; - flex-shrink: 0; - margin: 8px 15px; - border-top: 1px solid var(--tertiary-foreground); -`; diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx deleted file mode 100644 index 8eed522c..00000000 --- a/src/components/ui/Preloader.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import styled, { keyframes } from "styled-components/macro"; - -const skSpinner = keyframes` - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); - } - 40% { - -webkit-transform: scale(1.0); - transform: scale(1.0); - } -`; - -const prRing = keyframes` - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -`; - -const PreloaderBase = styled.div` - width: 100%; - height: 100%; - - display: flex; - align-items: center; - justify-content: center; - - .spinner { - width: 58px; - display: flex; - text-align: center; - margin: 100px auto 0; - justify-content: space-between; - } - - .spinner > div { - width: 14px; - height: 14px; - background-color: var(--tertiary-foreground); - - border-radius: 100%; - display: inline-block; - animation: ${skSpinner} 1.4s infinite ease-in-out both; - } - - .spinner div:nth-child(1) { - animation-delay: -0.32s; - } - - .spinner div:nth-child(2) { - animation-delay: -0.16s; - } - - .ring { - display: inline-block; - position: relative; - width: 48px; - height: 52px; - } - - .ring div { - width: 32px; - margin: 8px; - height: 32px; - display: block; - position: absolute; - box-sizing: border-box; - border: 2px solid #fff; - border-radius: var(--border-radius-half); - animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: #fff transparent transparent transparent; - } - - .ring div:nth-child(1) { - animation-delay: -0.45s; - } - - .ring div:nth-child(2) { - animation-delay: -0.3s; - } - - .ring div:nth-child(3) { - animation-delay: -0.15s; - } -`; - -interface Props { - type: "spinner" | "ring"; -} - -export default function Preloader({ type }: Props) { - return ( - -
-
-
-
-
- - ); -} diff --git a/src/components/ui/SaveStatus.tsx b/src/components/ui/SaveStatus.tsx deleted file mode 100644 index 6e813cd6..00000000 --- a/src/components/ui/SaveStatus.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Check, CloudUpload } from "@styled-icons/boxicons-regular"; -import { Pencil } from "@styled-icons/boxicons-solid"; -import styled from "styled-components/macro"; - -const StatusBase = styled.div` - gap: 4px; - padding: 4px; - display: flex; - align-items: center; - text-transform: capitalize; -`; - -export type EditStatus = "saved" | "editing" | "saving"; -interface Props { - status: EditStatus; -} - -export default function SaveStatus({ status }: Props) { - return ( - - {status === "saved" ? ( - - ) : status === "editing" ? ( - - ) : ( - - )} - {/* FIXME: add i18n */} - {status} - - ); -} diff --git a/src/context/index.tsx b/src/context/index.tsx index 0d48a5bb..277f0126 100644 --- a/src/context/index.tsx +++ b/src/context/index.tsx @@ -4,11 +4,15 @@ import { ContextMenuTrigger } from "preact-context-menu"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { LinkProvider, TextProvider, TrigProvider } from "@revoltchat/ui"; +import { + LinkProvider, + Preloader, + TextProvider, + TrigProvider, +} from "@revoltchat/ui"; import { hydrateState } from "../mobx/State"; -import Preloader from "../components/ui/Preloader"; import { Children } from "../types/Preact"; import Locale from "./Locale"; import Theme from "./Theme"; diff --git a/src/context/intermediate/modals/Onboarding.tsx b/src/context/intermediate/modals/Onboarding.tsx index 9e6c492c..af21e930 100644 --- a/src/context/intermediate/modals/Onboarding.tsx +++ b/src/context/intermediate/modals/Onboarding.tsx @@ -4,9 +4,8 @@ import styles from "./Onboarding.module.scss"; import { Text } from "preact-i18n"; import { useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, Preloader } from "@revoltchat/ui"; -import Preloader from "../../../components/ui/Preloader"; import wideSVG from "/assets/wide.svg"; import FormField from "../../../pages/login/FormField"; diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index a1d9088e..e14692f4 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss"; import { Localizer, Text } from "preact-i18n"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; -import { Button, IconButton } from "@revoltchat/ui"; +import { Button, IconButton, Preloader } from "@revoltchat/ui"; import { noop } from "../../../lib/js"; @@ -29,7 +29,6 @@ import UserStatus from "../../../components/common/user/UserStatus"; import Markdown from "../../../components/markdown/Markdown"; import Modal from "../../../components/ui/Modal"; import Overline from "../../../components/ui/Overline"; -import Preloader from "../../../components/ui/Preloader"; import { ClientStatus, StatusContext, diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx index c08ec266..db246144 100644 --- a/src/context/revoltjs/FileUploads.tsx +++ b/src/context/revoltjs/FileUploads.tsx @@ -7,11 +7,10 @@ import classNames from "classnames"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { IconButton } from "@revoltchat/ui"; +import { IconButton, Preloader } from "@revoltchat/ui"; import { determineFileSize } from "../../lib/fileSize"; -import Preloader from "../../components/ui/Preloader"; import { useIntermediate } from "../intermediate/Intermediate"; import { AppContext } from "./RevoltClient"; import { takeError } from "./util"; diff --git a/src/context/revoltjs/RequiresOnline.tsx b/src/context/revoltjs/RequiresOnline.tsx index f3595a5d..4400bcc6 100644 --- a/src/context/revoltjs/RequiresOnline.tsx +++ b/src/context/revoltjs/RequiresOnline.tsx @@ -4,7 +4,7 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; -import Preloader from "../../components/ui/Preloader"; +import { Preloader } from "@revoltchat/ui"; import { Children } from "../../types/Preact"; import { ClientStatus, StatusContext } from "./RevoltClient"; diff --git a/src/context/revoltjs/RevoltClient.tsx b/src/context/revoltjs/RevoltClient.tsx index b4fefcce..44681b80 100644 --- a/src/context/revoltjs/RevoltClient.tsx +++ b/src/context/revoltjs/RevoltClient.tsx @@ -3,12 +3,12 @@ import { observer } from "mobx-react-lite"; import { Client } from "revolt.js"; import { createContext } from "preact"; -import { useContext, useEffect, useMemo, useState } from "preact/hooks"; +import { useContext, useEffect, useState } from "preact/hooks"; + +import { Preloader } from "@revoltchat/ui"; import { useApplicationState } from "../../mobx/State"; -import Preloader from "../../components/ui/Preloader"; - import { Children } from "../../types/Preact"; import { useIntermediate } from "../intermediate/Intermediate"; import { registerEvents } from "./events"; diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 32b37d4d..9eeebd06 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -13,7 +13,7 @@ import { import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; -import { IconButton } from "@revoltchat/ui"; +import { IconButton, LineDivider } from "@revoltchat/ui"; import { useApplicationState } from "../mobx/State"; import { QueuedMessage } from "../mobx/stores/MessageQueue"; @@ -30,7 +30,6 @@ import CMNotifications from "./contextmenu/CMNotifications"; import Tooltip from "../components/common/Tooltip"; import UserStatus from "../components/common/user/UserStatus"; -import LineDivider from "../components/ui/LineDivider"; import { Children } from "../types/Preact"; import { internalEmit } from "./eventEmitter"; import { getRenderer } from "./renderer/Singleton"; diff --git a/src/lib/contextmenu/CMNotifications.tsx b/src/lib/contextmenu/CMNotifications.tsx index 0c235ede..ec65b54d 100644 --- a/src/lib/contextmenu/CMNotifications.tsx +++ b/src/lib/contextmenu/CMNotifications.tsx @@ -15,11 +15,11 @@ import { Server } from "revolt.js"; import { ContextMenuWithData, MenuItem } from "preact-context-menu"; import { Text } from "preact-i18n"; +import { LineDivider } from "@revoltchat/ui"; + import { useApplicationState } from "../../mobx/State"; import { NotificationState } from "../../mobx/stores/NotificationOptions"; -import LineDivider from "../../components/ui/LineDivider"; - import { Children } from "../../types/Preact"; interface Action { diff --git a/src/pages/app.tsx b/src/pages/app.tsx index ca3e1d1d..0fa90d89 100644 --- a/src/pages/app.tsx +++ b/src/pages/app.tsx @@ -2,7 +2,7 @@ import { Route, Switch } from "react-router-dom"; import { lazy, Suspense } from "preact/compat"; -import { Masks } from "@revoltchat/ui"; +import { Masks, Preloader } from "@revoltchat/ui"; import ErrorBoundary from "../lib/ErrorBoundary"; import FakeClient from "../lib/FakeClient"; @@ -10,7 +10,6 @@ import FakeClient from "../lib/FakeClient"; import Context from "../context"; import { CheckAuth } from "../context/revoltjs/CheckAuth"; -import Preloader from "../components/ui/Preloader"; import Invite from "./invite/Invite"; const Login = lazy(() => import("./login/Login")); diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx index e954eac3..4a1e031e 100644 --- a/src/pages/channels/messaging/MessageArea.tsx +++ b/src/pages/channels/messaging/MessageArea.tsx @@ -16,6 +16,8 @@ import { useState, } from "preact/hooks"; +import { Preloader } from "@revoltchat/ui"; + import { defer } from "../../../lib/defer"; import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter"; import { getRenderer } from "../../../lib/renderer/Singleton"; @@ -28,8 +30,6 @@ import { StatusContext, } from "../../../context/revoltjs/RevoltClient"; -import Preloader from "../../../components/ui/Preloader"; - import ConversationStart from "./ConversationStart"; import MessageRenderer from "./MessageRenderer"; diff --git a/src/pages/channels/messaging/MessageRenderer.tsx b/src/pages/channels/messaging/MessageRenderer.tsx index 1813190a..6195e29b 100644 --- a/src/pages/channels/messaging/MessageRenderer.tsx +++ b/src/pages/channels/messaging/MessageRenderer.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-hooks/rules-of-hooks */ import { X } from "@styled-icons/boxicons-regular"; +import dayjs from "dayjs"; import isEqual from "lodash.isequal"; import { observer } from "mobx-react-lite"; import { API } from "revolt.js"; @@ -11,7 +12,7 @@ import { decodeTime } from "ulid"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { MessageDivider } from "@revoltchat/ui"; +import { MessageDivider, Preloader } from "@revoltchat/ui"; import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter"; import { ChannelRenderer } from "../../../lib/renderer/Singleton"; @@ -23,11 +24,9 @@ import { useClient } from "../../../context/revoltjs/RevoltClient"; import Message from "../../../components/common/messaging/Message"; import { SystemMessage } from "../../../components/common/messaging/SystemMessage"; -import Preloader from "../../../components/ui/Preloader"; import { Children } from "../../../types/Preact"; import ConversationStart from "./ConversationStart"; import MessageEditor from "./MessageEditor"; -import dayjs from "dayjs"; interface Props { last_id?: string; @@ -126,7 +125,12 @@ export default observer(({ last_id, renderer, highlight }: Props) => { } if (unread || date) { - render.push(); + render.push( + , + ); head = true; } diff --git a/src/pages/discover/Discover.tsx b/src/pages/discover/Discover.tsx index d596ea72..7894dc32 100644 --- a/src/pages/discover/Discover.tsx +++ b/src/pages/discover/Discover.tsx @@ -5,6 +5,8 @@ import styled, { css } from "styled-components/macro"; import { useEffect, useMemo, useRef, useState } from "preact/hooks"; +import { Preloader } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { useApplicationState } from "../../mobx/State"; @@ -13,7 +15,6 @@ import { Overrides } from "../../context/Theme"; import { useIntermediate } from "../../context/intermediate/Intermediate"; import Header from "../../components/ui/Header"; -import Preloader from "../../components/ui/Preloader"; const Container = styled.div` flex-grow: 1; diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index 363e1a39..2e28da93 100644 --- a/src/pages/invite/Invite.tsx +++ b/src/pages/invite/Invite.tsx @@ -7,9 +7,8 @@ import styles from "./Invite.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, Preloader } from "@revoltchat/ui"; -import { defer } from "../../lib/defer"; import { TextReact } from "../../lib/i18n"; import { useApplicationState } from "../../mobx/State"; @@ -25,7 +24,6 @@ import { takeError } from "../../context/revoltjs/util"; import ServerIcon from "../../components/common/ServerIcon"; import UserIcon from "../../components/common/user/UserIcon"; import Overline from "../../components/ui/Overline"; -import Preloader from "../../components/ui/Preloader"; export default function Invite() { const history = useHistory(); diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx index 6e573e5d..72b09fcf 100644 --- a/src/pages/invite/InviteBot.tsx +++ b/src/pages/invite/InviteBot.tsx @@ -4,14 +4,13 @@ import styled from "styled-components/macro"; import { useEffect, useState } from "preact/hooks"; -import { Button, ComboBox } from "@revoltchat/ui"; +import { Button, ComboBox, Preloader } from "@revoltchat/ui"; import { useClient } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../../components/common/user/UserIcon"; import Markdown from "../../components/markdown/Markdown"; import Overline from "../../components/ui/Overline"; -import Preloader from "../../components/ui/Preloader"; import Tip from "../../components/ui/Tip"; const BotInfo = styled.div` diff --git a/src/pages/login/forms/CaptchaBlock.tsx b/src/pages/login/forms/CaptchaBlock.tsx index 91124b38..9dc8888c 100644 --- a/src/pages/login/forms/CaptchaBlock.tsx +++ b/src/pages/login/forms/CaptchaBlock.tsx @@ -5,9 +5,9 @@ import styles from "../Login.module.scss"; import { Text } from "preact-i18n"; import { useEffect } from "preact/hooks"; -import { useApplicationState } from "../../../mobx/State"; +import { Preloader } from "@revoltchat/ui"; -import Preloader from "../../../components/ui/Preloader"; +import { useApplicationState } from "../../../mobx/State"; export interface CaptchaProps { onSuccess: (token?: string) => void; diff --git a/src/pages/login/forms/Form.tsx b/src/pages/login/forms/Form.tsx index 3f7e32e8..8bc2b224 100644 --- a/src/pages/login/forms/Form.tsx +++ b/src/pages/login/forms/Form.tsx @@ -6,17 +6,16 @@ import styles from "../Login.module.scss"; import { Text } from "preact-i18n"; import { useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, Preloader } from "@revoltchat/ui"; +import { Tip } from "@revoltchat/ui"; import { useApplicationState } from "../../../mobx/State"; import { takeError } from "../../../context/revoltjs/util"; -import Overline from "../../../components/ui/Overline"; -import Preloader from "../../../components/ui/Preloader"; import WaveSVG from "../../settings/assets/wave.svg"; -import { Tip } from "@revoltchat/ui"; +import Overline from "../../../components/ui/Overline"; import FormField from "../FormField"; import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock"; import { MailProvider } from "./MailProvider"; diff --git a/src/pages/login/forms/FormVerify.tsx b/src/pages/login/forms/FormVerify.tsx index f7ecd1b9..b2145f8a 100644 --- a/src/pages/login/forms/FormVerify.tsx +++ b/src/pages/login/forms/FormVerify.tsx @@ -2,14 +2,13 @@ import { useHistory, useParams } from "react-router-dom"; import { useContext, useEffect, useState } from "preact/hooks"; +import { Preloader } from "@revoltchat/ui"; + import { useApplicationState } from "../../../mobx/State"; -import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { takeError } from "../../../context/revoltjs/util"; import Overline from "../../../components/ui/Overline"; -import Preloader from "../../../components/ui/Preloader"; - import { Form } from "./Form"; export function FormResend() { diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index c8b90d53..8e3721a9 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -13,7 +13,7 @@ import { useState, } from "preact/hooks"; -import { IconButton } from "@revoltchat/ui"; +import { IconButton, LineDivider } from "@revoltchat/ui"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; @@ -22,7 +22,6 @@ import { useApplicationState } from "../../mobx/State"; import ButtonItem from "../../components/navigation/items/ButtonItem"; import Category from "../../components/ui/Category"; import Header from "../../components/ui/Header"; -import LineDivider from "../../components/ui/LineDivider"; import { Children } from "../../types/Preact"; interface Props { diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx index 61a34448..f495329e 100644 --- a/src/pages/settings/ServerSettings.tsx +++ b/src/pages/settings/ServerSettings.tsx @@ -13,13 +13,12 @@ import { Route, Switch, useHistory, useParams } from "react-router-dom"; import styles from "./Settings.module.scss"; import { Text } from "preact-i18n"; +import { LineDivider } from "@revoltchat/ui"; + import { useIntermediate } from "../../context/intermediate/Intermediate"; import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import { useClient } from "../../context/revoltjs/RevoltClient"; -import Category from "../../components/ui/Category"; -import LineDivider from "../../components/ui/LineDivider"; - import ButtonItem from "../../components/navigation/items/ButtonItem"; import { GenericSettings } from "./GenericSettings"; import { Bans } from "./server/Bans"; diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index a3a0619d..28743654 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -29,6 +29,8 @@ import { openContextMenu } from "preact-context-menu"; import { Text } from "preact-i18n"; import { useContext } from "preact/hooks"; +import { LineDivider } from "@revoltchat/ui"; + import { useApplicationState } from "../../mobx/State"; import { useIntermediate } from "../../context/intermediate/Intermediate"; @@ -38,8 +40,6 @@ import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../../components/common/user/UserIcon"; import { Username } from "../../components/common/user/UserShort"; import UserStatus from "../../components/common/user/UserStatus"; -import LineDivider from "../../components/ui/LineDivider"; - import ButtonItem from "../../components/navigation/items/ButtonItem"; import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision"; import { APP_VERSION } from "../../version"; diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 24bb1bb2..8905f38f 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -18,13 +18,12 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, Preloader } from "@revoltchat/ui"; import { dayjs } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import Preloader from "../../../components/ui/Preloader"; import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; diff --git a/src/pages/settings/server/Bans.tsx b/src/pages/settings/server/Bans.tsx index 2613a194..ed458946 100644 --- a/src/pages/settings/server/Bans.tsx +++ b/src/pages/settings/server/Bans.tsx @@ -8,10 +8,9 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useMemo, useState } from "preact/hooks"; -import { IconButton, InputBox } from "@revoltchat/ui"; +import { IconButton, InputBox, Preloader } from "@revoltchat/ui"; import UserIcon from "../../../components/common/user/UserIcon"; -import Preloader from "../../../components/ui/Preloader"; interface InnerProps { ban: API.ServerBan; diff --git a/src/pages/settings/server/Categories.tsx b/src/pages/settings/server/Categories.tsx index 5dd9e74c..9d73dd26 100644 --- a/src/pages/settings/server/Categories.tsx +++ b/src/pages/settings/server/Categories.tsx @@ -8,6 +8,8 @@ import { ulid } from "ulid"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useMemo, useState } from "preact/hooks"; +import { SaveStatus } from "@revoltchat/ui"; + import { useAutosave } from "../../../lib/debounce"; import { Draggable, Droppable } from "../../../lib/dnd"; import { noop } from "../../../lib/js"; @@ -15,7 +17,6 @@ import { noop } from "../../../lib/js"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import ChannelIcon from "../../../components/common/ChannelIcon"; -import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus"; const KanbanEntry = styled.div` padding: 2px 4px; @@ -132,7 +133,9 @@ interface Props { } export const Categories = observer(({ server }: Props) => { - const [status, setStatus] = useState("saved"); + const [status, setStatus] = useState<"saved" | "editing" | "saving">( + "saved", + ); const [categories, setCategories] = useState( server.categories ?? [], ); diff --git a/src/pages/settings/server/Invites.tsx b/src/pages/settings/server/Invites.tsx index 204c3a94..cbd6abbb 100644 --- a/src/pages/settings/server/Invites.tsx +++ b/src/pages/settings/server/Invites.tsx @@ -7,13 +7,12 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { IconButton } from "@revoltchat/ui"; +import { IconButton, Preloader } from "@revoltchat/ui"; import { getChannelName } from "../../../context/revoltjs/util"; import UserIcon from "../../../components/common/user/UserIcon"; import { Username } from "../../../components/common/user/UserShort"; -import Preloader from "../../../components/ui/Preloader"; interface InnerProps { invite: API.Invite; From f3bdbe52d9cd8489f9ba49a7ee5ba44b8f0302cb Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:47:13 +0100 Subject: [PATCH 10/18] feat(@ui): migrate textarea and tip --- src/components/ui/TextArea.module.scss | 31 -- src/components/ui/TextArea.tsx | 58 ---- src/components/ui/Tip.tsx | 72 ----- src/lib/TextAreaAutoSize.tsx | 3 +- src/pages/invite/InviteBot.tsx | 7 +- src/pages/settings/panes/Account.tsx | 4 +- src/pages/settings/panes/Audio.tsx | 7 +- src/pages/settings/panes/Languages.tsx | 20 +- src/pages/settings/panes/MyBots.tsx | 7 +- src/pages/settings/panes/Native.tsx | 5 +- src/pages/settings/panes/Plugins.tsx | 6 +- src/pages/settings/panes/Profile.tsx | 15 +- src/pages/settings/panes/Sessions.tsx | 14 +- src/pages/settings/panes/ThemeShop.tsx | 399 ------------------------- 14 files changed, 41 insertions(+), 607 deletions(-) delete mode 100644 src/components/ui/TextArea.module.scss delete mode 100644 src/components/ui/TextArea.tsx delete mode 100644 src/components/ui/Tip.tsx delete mode 100644 src/pages/settings/panes/ThemeShop.tsx diff --git a/src/components/ui/TextArea.module.scss b/src/components/ui/TextArea.module.scss deleted file mode 100644 index b6e1ab0f..00000000 --- a/src/components/ui/TextArea.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.container { - font-size: .875rem; - line-height: 20px; - position: relative; -} - -.textarea { - width: 100%; - white-space: pre-wrap; - - textarea::placeholder { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -.hide { - width: 100%; - overflow: hidden; - position: relative; -} - -.ghost { - width: 100%; - white-space: pre-wrap; - - top: 0; - position: absolute; - visibility: hidden; -} diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx deleted file mode 100644 index 01c4e136..00000000 --- a/src/components/ui/TextArea.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -export interface TextAreaProps { - code?: boolean; - padding?: string; - lineHeight?: string; - hideBorder?: boolean; -} - -export const TEXT_AREA_BORDER_WIDTH = 2; -export const DEFAULT_TEXT_AREA_PADDING = 16; -export const DEFAULT_LINE_HEIGHT = 20; - -export default styled.textarea` - width: 100%; - resize: none; - display: block; - color: var(--foreground); - background: var(--secondary-background); - padding: ${(props) => props.padding ?? "var(--textarea-padding)"}; - line-height: ${(props) => - props.lineHeight ?? "var(--textarea-line-height)"}; - - ${(props) => - props.hideBorder && - css` - border: none; - `} - - ${(props) => - !props.hideBorder && - css` - border-radius: var(--border-radius); - transition: border-color 0.2s ease-in-out; - border: var(--input-border-width) solid transparent; - `} - - &:focus { - outline: none; - - ${(props) => - !props.hideBorder && - css` - border: var(--input-border-width) solid var(--accent); - `} - } - - ${(props) => - props.code - ? css` - font-family: var(--monospace-font), monospace; - ` - : css` - font-family: inherit; - `} - - font-variant-ligatures: var(--ligatures); -`; diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx deleted file mode 100644 index 46f9e239..00000000 --- a/src/components/ui/Tip.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { InfoCircle } from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../types/Preact"; - -interface Props { - warning?: boolean; - error?: boolean; -} - -export const Separator = styled.div` - height: 1px; - width: calc(100% - 10px); - background: var(--secondary-header); - margin: 18px auto; -`; - -export const TipBase = styled.div` - display: flex; - padding: 12px; - font-weight: 500; - overflow: hidden; - align-items: center; - - font-size: 14px; - background: var(--primary-header); - border-radius: var(--border-radius); - border: 2px solid var(--secondary-header); - - a { - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - - svg { - flex-shrink: 0; - margin-inline-end: 10px; - } - - ${(props) => - props.warning && - css` - color: var(--warning); - border: 2px solid var(--warning); - background: var(--secondary-header); - `} - - ${(props) => - props.error && - css` - color: white; - border: 2px solid var(--error); - background: var(--error); - `} -`; - -export default function Tip( - props: Props & { children: Children; hideSeparator?: boolean }, -) { - const { children, hideSeparator, ...tipProps } = props; - return ( - <> - {!hideSeparator && } - - - {children} - - - ); -} diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx index 51ae17b8..805d1145 100644 --- a/src/lib/TextAreaAutoSize.tsx +++ b/src/lib/TextAreaAutoSize.tsx @@ -3,7 +3,8 @@ import styled from "styled-components/macro"; import { RefObject } from "preact"; import { useEffect, useLayoutEffect, useRef } from "preact/hooks"; -import TextArea, { TextAreaProps } from "../components/ui/TextArea"; +import { TextArea } from "@revoltchat/ui"; +import type { TextAreaProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/TextArea"; import { internalSubscribe } from "./eventEmitter"; import { isTouchscreenDevice } from "./isTouchscreenDevice"; diff --git a/src/pages/invite/InviteBot.tsx b/src/pages/invite/InviteBot.tsx index 72b09fcf..99a863a9 100644 --- a/src/pages/invite/InviteBot.tsx +++ b/src/pages/invite/InviteBot.tsx @@ -4,14 +4,13 @@ import styled from "styled-components/macro"; import { useEffect, useState } from "preact/hooks"; -import { Button, ComboBox, Preloader } from "@revoltchat/ui"; +import { Button, ComboBox, Preloader, Tip } from "@revoltchat/ui"; import { useClient } from "../../context/revoltjs/RevoltClient"; import UserIcon from "../../components/common/user/UserIcon"; import Markdown from "../../components/markdown/Markdown"; import Overline from "../../components/ui/Overline"; -import Tip from "../../components/ui/Tip"; const BotInfo = styled.div` gap: 12px; @@ -46,9 +45,7 @@ export default function InviteBot() { return (
- - This section is under construction. - + This section is under construction. {typeof data === "undefined" && } {data && ( <> diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 65b4be55..d1687f1e 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -14,7 +14,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, LineDivider, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; @@ -27,7 +27,6 @@ import { import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export const Account = observer(() => { @@ -227,6 +226,7 @@ export const Account = observer(() => { + diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 62227d07..3333b7ee 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -2,7 +2,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { Button, ComboBox } from "@revoltchat/ui"; +import { Button, ComboBox, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; import { voiceState } from "../../../lib/vortex/VoiceState"; @@ -10,7 +10,6 @@ import { voiceState } from "../../../lib/vortex/VoiceState"; 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";*/ @@ -96,13 +95,13 @@ export function Audio() { <>
{!permission && ( - + )} {error && permission === "prompt" && ( - + diff --git a/src/pages/settings/panes/Languages.tsx b/src/pages/settings/panes/Languages.tsx index 7a62875d..c347de52 100644 --- a/src/pages/settings/panes/Languages.tsx +++ b/src/pages/settings/panes/Languages.tsx @@ -5,7 +5,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useMemo } from "preact/hooks"; -import { Checkbox } from "@revoltchat/ui"; +import { Checkbox, LineDivider, Tip } from "@revoltchat/ui"; import { useApplicationState } from "../../../mobx/State"; @@ -23,7 +23,6 @@ import { Languages as Langs, } from "../../../../external/lang/Languages"; import Emoji from "../../../components/common/Emoji"; -import Tip from "../../../components/ui/Tip"; type Key = [Language, LanguageEntry]; @@ -198,16 +197,17 @@ export const Languages = observer(() => { .filter(([, lang]) => lang.cat === "alt") .map(EntryFactory)}
+ - - {" "} - - - + {" "} + + + +
); diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index 10756648..c68f238b 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,7 +11,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, InputBox } from "@revoltchat/ui"; +import { Button, Checkbox, InputBox, Tip } 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 Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; interface Data { @@ -465,9 +464,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) { {error && (
- - {error} - + {error}
)} diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index c02e131d..f1e75837 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/src/pages/settings/panes/Native.tsx @@ -2,11 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular"; import { useEffect, useState } from "preact/hooks"; -import { Button, Checkbox } from "@revoltchat/ui"; +import { Button, Checkbox, Tip } from "@revoltchat/ui"; import RLogo from "../assets/revolt_r.svg"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export function Native() { @@ -27,7 +26,7 @@ export function Native() { return (
- Some options might require a restart. + Some options might require a restart.

App Behavior

{ const plugins = useApplicationState().plugins; return (
- + {plugins.list().map((plugin) => { diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx index 45fe95fb..ff1dd44b 100644 --- a/src/pages/settings/panes/Profile.tsx +++ b/src/pages/settings/panes/Profile.tsx @@ -7,7 +7,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useContext, useEffect, useState } from "preact/hooks"; -import { Button } from "@revoltchat/ui"; +import { Button, LineDivider, Tip } from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { useTranslation } from "../../../lib/i18n"; @@ -23,7 +23,6 @@ import { import AutoComplete, { useAutoComplete, } from "../../../components/common/AutoComplete"; -import Tip from "../../../components/ui/Tip"; export const Profile = observer(() => { const status = useContext(StatusContext); @@ -203,11 +202,15 @@ export const Profile = observer(() => {

+ + - Want to change your username?{" "} - switchPage("account")}> - Head over to your account settings. - + + Want to change your username?{" "} + switchPage("account")}> + Head over to your account settings. + +
); diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 8905f38f..4652c069 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -18,13 +18,12 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, Preloader } from "@revoltchat/ui"; +import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui"; import { dayjs } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import Tip from "../../../components/ui/Tip"; import CategoryButton from "../../../components/ui/fluent/CategoryButton"; dayjs.extend(relativeTime); @@ -248,13 +247,14 @@ export function Sessions() { + - - {" "} - switchPage("account")}> - - + {" "} + switchPage("account")}> + + +
); diff --git a/src/pages/settings/panes/ThemeShop.tsx b/src/pages/settings/panes/ThemeShop.tsx deleted file mode 100644 index ea010736..00000000 --- a/src/pages/settings/panes/ThemeShop.tsx +++ /dev/null @@ -1,399 +0,0 @@ -/** - * ! DEPRECATED FILE - * ! DO NOT IMPORT - * - * Replaced by Revolt Discover - */ -import { Check } from "@styled-icons/boxicons-regular"; -import { - Star, - Brush, - Bookmark, - BarChartAlt2, -} from "@styled-icons/boxicons-solid"; -import styled from "styled-components/macro"; - -import { Text } from "preact-i18n"; -import { useEffect, useState } from "preact/hooks"; - -import { useApplicationState } from "../../../mobx/State"; - -import { Theme, generateVariables } from "../../../context/Theme"; - -import Tip from "../../../components/ui/Tip"; -import previewPath from "../assets/preview.svg"; - -import { GIT_REVISION } from "../../../revision"; - -export const fetchManifest = (): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/manifest.json`).then((res) => - res.json(), - ); - -export const fetchTheme = (slug: string): Promise => - fetch(`${import.meta.env.VITE_THEMES_URL}/theme_${slug}.json`).then((res) => - res.json(), - ); - -export interface ThemeMetadata { - name: string; - creator: string; - commit?: string; - description: string; -} - -export type Manifest = { - generated: string; - themes: Record; -}; - -// TODO: ability to preview / display the settings set like in the appearance pane -const ThemeInfo = styled.article` - display: flex; - flex-direction: column; - gap: 10px; - padding: 1rem; - border-radius: var(--border-radius); - background: var(--secondary-background); - - &[data-loaded] { - .preview { - opacity: 1; - } - } - - .preview { - grid-area: preview; - aspect-ratio: 323 / 202; - - background-color: var(--secondary-background); - border-radius: calc(var(--border-radius) / 2); - - // prep style for later - outline: 3px solid transparent; - - // hide random svg parts, crop border on firefox - overflow: hidden; - - // hide until loaded - opacity: 0; - - // style button - border: 0; - margin: 0; - padding: 0; - - transition: 0.25s opacity, 0.25s outline; - - > * { - grid-area: 1 / 1; - } - - svg { - height: 100%; - width: 100%; - object-fit: contain; - } - - &:hover, - &:active, - &:focus-visible { - outline: 3px solid var(--tertiary-background); - } - } - - .name { - margin-top: 5px !important; - grid-area: name; - margin: 0; - } - - .creator { - grid-area: creator; - justify-self: end; - font-size: 0.75rem; - } - - .description { - margin-bottom: 5px; - grid-area: desc; - } - - .previewBox { - position: relative; - height: 100%; - width: 100%; - - .hover { - opacity: 0; - font-family: var(--font), sans-serif; - font-variant-ligatures: var(--ligatures); - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - color: white; - height: 100%; - width: 100%; - z-index: 10; - position: absolute; - background: rgba(0, 0, 0, 0.5); - cursor: pointer; - transition: opacity 0.2s ease-in-out; - - &:hover { - opacity: 1; - } - } - - > svg { - height: 100%; - } - } -`; - -const ThemeList = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1rem; -`; - -const Banner = styled.div` - display: flex; - flex-direction: column; -`; - -const Category = styled.div` - display: flex; - gap: 8px; - align-items: center; - - .title { - display: flex; - align-items: center; - gap: 8px; - flex-grow: 1; - } - - .view { - font-size: 12px; - } -`; - -const ActiveTheme = styled.div` - display: flex; - flex-direction: column; - background: var(--secondary-background); - padding: 0; - border-radius: var(--border-radius); - gap: 8px; - overflow: hidden; - - .active-indicator { - display: flex; - gap: 6px; - align-items: center; - background: var(--accent); - width: 100%; - padding: 5px 10px; - font-size: 13px; - font-weight: 400; - color: white; - } - .title { - font-size: 1.2rem; - font-weight: 600; - } - - .author { - font-size: 12px; - margin-bottom: 5px; - } - - .theme { - width: 124px; - height: 80px; - background: var(--tertiary-background); - border-radius: 4px; - } - - .container { - display: flex; - gap: 16px; - padding: 10px 16px 16px; - } -`; - -const ThemedSVG = styled.svg<{ theme: Theme }>` - ${(props) => props.theme && generateVariables(props.theme)} -`; - -type ThemePreviewProps = Omit, "as"> & { - slug?: string; - theme?: Theme; - onThemeLoaded?: (theme: Theme) => void; -}; - -const ThemePreview = ({ theme, ...props }: ThemePreviewProps) => { - return ( - - ); -}; - -const ThemeShopRoot = styled.div` - display: grid; - gap: 1rem; - - h5 { - margin-bottom: 0; - } -`; - -export function ThemeShop() { - // setThemeList is for adding more / lazy loading in the future - const [themeList, setThemeList] = useState< - [string, ThemeMetadata][] | null - >(null); - const [themeData, setThemeData] = useState>({}); - - const themes = useApplicationState().settings.theme; - - async function fetchThemeList() { - const manifest = await fetchManifest(); - setThemeList( - Object.entries(manifest.themes).filter((x) => - x[1].commit ? x[1].commit === GIT_REVISION : true, - ), - ); - } - - async function getTheme(slug: string) { - const theme = await fetchTheme(slug); - setThemeData((data) => ({ ...data, [slug]: theme })); - } - - useEffect(() => { - fetchThemeList(); - }, []); - - useEffect(() => { - themeList?.forEach(([slug]) => { - getTheme(slug); - }); - }, [themeList]); - - return ( - -
- -
- {/* -
- Oops! Couldn't load the theme shop. Make sure you're - connected to the internet and try again. -
- */} - - The Theme Shop is currently under construction. - - - {/* FIXME INTEGRATE WITH MOBX */} - {/* -
- - -
-
-
theme svg goes here
-
-
Theme Title
-
- {" "} - Author -
-
This is a theme description.
-
-
- - " contrast /> - -
- - -
- - - - - - -
- - -
- - - - - - -
- - -
- - - - - - -
- - -
- - - - */} -
- - {themeList?.map(([slug, theme]) => ( - - -

{theme.name}

- {/* Maybe id's of the users should be included as well / instead? */} -
- {" "} - {theme.creator} -
-
{theme.description}
- - ))} - - - ); -} From 74f8c552edf5f71b08fee889dd9a5ac4d35ab391 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:56:47 +0100 Subject: [PATCH 11/18] feat(@ui): port category button --- src/components/settings/AppearanceShims.tsx | 12 +- src/components/ui/fluent/CategoryButton.tsx | 172 -------------------- src/pages/home/Home.tsx | 6 +- src/pages/settings/panes/Account.tsx | 3 +- src/pages/settings/panes/Feedback.tsx | 6 +- src/pages/settings/panes/MyBots.tsx | 9 +- src/pages/settings/panes/Native.tsx | 4 +- src/pages/settings/panes/Sessions.tsx | 10 +- src/sw.ts | 2 +- 9 files changed, 30 insertions(+), 194 deletions(-) delete mode 100644 src/components/ui/fluent/CategoryButton.tsx diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index 737dba5f..4e7ea7e8 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -6,7 +6,13 @@ import pSBC from "shade-blend-color"; import { Text } from "preact-i18n"; -import { Checkbox, ColourSwatches, ComboBox, Radio } from "@revoltchat/ui"; +import { + CategoryButton, + Checkbox, + ColourSwatches, + ComboBox, + Radio, +} from "@revoltchat/ui"; import TextAreaAutoSize from "../../lib/TextAreaAutoSize"; @@ -21,7 +27,6 @@ import { MONOSPACE_FONT_KEYS, } from "../../context/Theme"; -import CategoryButton from "../ui/fluent/CategoryButton"; import { EmojiSelector } from "./appearance/EmojiSelector"; import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector"; @@ -54,8 +59,7 @@ export const ThemeShopShim = () => { action="chevron" description={ - } - hover> + }> diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx deleted file mode 100644 index 923d1f40..00000000 --- a/src/components/ui/fluent/CategoryButton.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { - ChevronRight, - LinkExternal, - Pencil, -} from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../../types/Preact"; - -interface BaseProps { - readonly hover?: boolean; - readonly account?: boolean; - readonly disabled?: boolean; - readonly largeDescription?: boolean; -} - -const CategoryBase = styled.div` - padding: 9.8px 12px; - border-radius: var(--border-radius); - margin-bottom: 10px; - color: var(--foreground); - background: var(--secondary-header); - gap: 12px; - display: flex; - align-items: center; - flex-direction: row; - overflow: hidden; - - > svg { - flex-shrink: 0; - } - - .action { - display: flex; - align-items: center; - } - - .content { - display: flex; - flex-grow: 1; - flex-direction: column; - font-weight: 600; - font-size: 14px; - - .title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - } - - .description { - ${(props) => - props.largeDescription - ? css` - font-size: 14px; - ` - : css` - font-size: 11px; - `} - - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - font-weight: 500; - color: var(--secondary-foreground); - - a:hover { - text-decoration: underline; - } - } - } - - ${(props) => - props.hover && - css` - cursor: pointer; - opacity: 1; - transition: 0.1s ease background-color; - - &:hover { - background: var(--secondary-background); - } - `} - - ${(props) => - props.disabled && - css` - opacity: 0.4; - /*.content, - .action { - color: var(--tertiary-foreground); - }*/ - - .action { - font-size: 14px; - } - `} - - ${(props) => - props.account && - css` - height: 54px; - - .content { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - .title { - text-transform: uppercase; - font-size: 12px; - color: var(--secondary-foreground); - } - - .description { - font-size: 15px; - font-weight: 500 !important; - color: var(--foreground); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - } - `} -`; - -interface Props extends BaseProps { - icon?: Children; - children?: Children; - description?: Children; - - onClick?: () => void; - action?: "chevron" | "external" | Children; -} - -export default function CategoryButton({ - icon, - children, - description, - account, - disabled, - onClick, - hover, - action, -}: Props) { - return ( - - {icon} -
-
{children}
- -
{description}
-
-
- {typeof action === "string" ? ( - action === "chevron" ? ( - - ) : ( - - ) - ) : ( - action - )} -
- - ); -} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index ef66bca9..56c5cfa1 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -17,6 +17,8 @@ import "./snow.scss"; import { Text } from "preact-i18n"; import { useContext, useMemo } from "preact/hooks"; +import { CategoryButton } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { useApplicationState } from "../../mobx/State"; @@ -24,10 +26,10 @@ import { useApplicationState } from "../../mobx/State"; import { useIntermediate } from "../../context/intermediate/Intermediate"; import { AppContext } from "../../context/revoltjs/RevoltClient"; -import { PageHeader } from "../../components/ui/Header"; -import CategoryButton from "../../components/ui/fluent/CategoryButton"; import wideSVG from "/assets/wide.svg"; +import { PageHeader } from "../../components/ui/Header"; + const Overlay = styled.div` display: grid; height: 100%; diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index d1687f1e..90fa2773 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -14,7 +14,7 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, LineDivider, Tip } from "@revoltchat/ui"; +import { Button, CategoryButton, LineDivider, Tip } from "@revoltchat/ui"; import { stopPropagation } from "../../../lib/stopPropagation"; @@ -27,7 +27,6 @@ import { import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; export const Account = observer(() => { const { openScreen, writeClipboard } = useIntermediate(); diff --git a/src/pages/settings/panes/Feedback.tsx b/src/pages/settings/panes/Feedback.tsx index 106159db..66125beb 100644 --- a/src/pages/settings/panes/Feedback.tsx +++ b/src/pages/settings/panes/Feedback.tsx @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; +import { CategoryButton } from "@revoltchat/ui"; export function Feedback() { return ( @@ -15,7 +15,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -29,7 +28,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -43,7 +41,6 @@ export function Feedback() { target="_blank" rel="noreferrer"> } description={ @@ -55,7 +52,6 @@ export function Feedback() { } description="You can report issues and discuss improvements with us directly here."> diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx index c68f238b..c3a49d70 100644 --- a/src/pages/settings/panes/MyBots.tsx +++ b/src/pages/settings/panes/MyBots.tsx @@ -11,7 +11,13 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, InputBox, Tip } from "@revoltchat/ui"; +import { + Button, + CategoryButton, + Checkbox, + InputBox, + Tip, +} from "@revoltchat/ui"; import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; import { internalEmit } from "../../../lib/eventEmitter"; @@ -28,7 +34,6 @@ import AutoComplete, { import CollapsibleSection from "../../../components/common/CollapsibleSection"; import Tooltip from "../../../components/common/Tooltip"; import UserIcon from "../../../components/common/user/UserIcon"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; interface Data { _id: string; diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index f1e75837..da02d777 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/src/pages/settings/panes/Native.tsx @@ -2,12 +2,10 @@ import { Refresh } from "@styled-icons/boxicons-regular"; import { useEffect, useState } from "preact/hooks"; -import { Button, Checkbox, Tip } from "@revoltchat/ui"; +import { Button, CategoryButton, Checkbox, Tip } from "@revoltchat/ui"; import RLogo from "../assets/revolt_r.svg"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; - export function Native() { if (typeof window.native === "undefined") return null; /* eslint-disable react-hooks/rules-of-hooks */ diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx index 4652c069..0e951f4c 100644 --- a/src/pages/settings/panes/Sessions.tsx +++ b/src/pages/settings/panes/Sessions.tsx @@ -18,14 +18,18 @@ import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, LineDivider, Preloader, Tip } from "@revoltchat/ui"; +import { + Button, + CategoryButton, + LineDivider, + Preloader, + Tip, +} from "@revoltchat/ui"; import { dayjs } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import CategoryButton from "../../../components/ui/fluent/CategoryButton"; - dayjs.extend(relativeTime); export function Sessions() { diff --git a/src/sw.ts b/src/sw.ts index 5daf6258..af71b0e2 100644 --- a/src/sw.ts +++ b/src/sw.ts @@ -11,7 +11,7 @@ cleanupOutdatedCaches(); // Generate list using scripts/locale.js // prettier-ignore -var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vi","zh_Hans","zh_Hant"]; +var locale_keys = ["af","am","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","be","bg","bi","bm","bn","bo","br","bs","ca","cs","cv","cy","da","de-at","de-ch","de","dv","el","en-au","en-ca","en-gb","en-ie","en-il","en-in","en-nz","en-sg","en-tt","en","eo","es-do","es-pr","es-us","es","et","eu","fa","fi","fo","fr-ca","fr-ch","fr","fy","ga","gd","gl","gom-latn","gu","he","hi","hr","ht","hu","hy-am","id","is","it-ch","it","ja","jv","ka","kk","km","kn","ko","ku","ky","lb","lo","lt","lv","me","mi","mk","ml","mn","mr","ms-my","ms","mt","my","nb","ne","nl-be","nl","nn","oc-lnc","pa-in","pl","pt-br","pt","ro","ru","rw","sd","se","si","sk","sl","sq","sr-cyrl","sr","ss","sv-fi","sv","sw","ta","te","tet","tg","th","tk","tl-ph","tlh","tr","tzl","tzm-latn","tzm","ug-cn","uk","ur","uz-latn","uz","vi","x-pseudo","yo","zh-cn","zh-hk","zh-tw","zh","ang","ar","az","be","bg","bn","bottom","br","ca","ca@valencia","ckb","contributors","cs","cy","da","de","de_CH","el","en","en_US","enchantment","enm","eo","es","et","eu","fa","fi","fil","fr","frm","ga","got","he","hi","hr","hu","id","it","ja","kmr","ko","la","lb","leet","li","lt","lv","mk","ml","ms","mt","nb_NO","nl","owo","peo","piglatin","pl","pr","pt_BR","pt_PT","ro","ro_MD","ru","si","sk","sl","sq","sr","sv","ta","te","th","tlh-qaak","tokipona","tr","uk","vec","vi","zh_Hans","zh_Hant"]; precacheAndRoute( self.__WB_MANIFEST.filter((entry) => { From 673efc0586431f34f5d4761429a0af8f0e28ef4c Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 12:57:30 +0100 Subject: [PATCH 12/18] fix: make context menu line divider compact --- src/lib/ContextMenus.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 9eeebd06..43645bda 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -480,7 +480,7 @@ export default function ContextMenus() { function pushDivider() { if (lastDivider || elements.length === 0) return; lastDivider = true; - elements.push(); + elements.push(); } if (server_list) { @@ -1033,7 +1033,7 @@ export default function ContextMenus() {
- + - + From 68b9d5ea797e7acc15e065a04ac3f7f9bfa9fd3d Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 30 May 2022 14:42:09 +0100 Subject: [PATCH 13/18] feat(@ui): migrate category / overline and header --- src/components/common/messaging/Message.tsx | 9 +- .../common/messaging/embed/EmbedInvite.tsx | 10 +- src/components/common/user/UserHeader.tsx | 5 +- .../navigation/left/HomeSidebar.tsx | 25 +++-- .../navigation/left/ServerListSidebar.tsx | 3 + .../navigation/left/ServerSidebar.tsx | 8 +- src/components/navigation/right/Search.tsx | 15 +-- src/components/ui/Category.tsx | 55 ----------- src/components/ui/Header.tsx | 79 +--------------- src/components/ui/Overline.tsx | 91 ------------------- src/context/Locale.tsx | 13 ++- src/context/intermediate/modals/Input.tsx | 16 ++-- src/context/intermediate/modals/Prompt.tsx | 26 +++--- .../intermediate/popovers/CreateBot.tsx | 12 ++- .../intermediate/popovers/ModifyAccount.tsx | 14 ++- .../popovers/ServerIdentityModal.tsx | 11 +-- .../intermediate/popovers/UserPicker.tsx | 3 +- .../intermediate/popovers/UserProfile.tsx | 21 ++--- src/pages/Open.tsx | 8 +- src/pages/channels/ChannelHeader.tsx | 20 +--- src/pages/developer/Developer.tsx | 2 +- src/pages/discover/Discover.tsx | 6 +- src/pages/friends/Friends.tsx | 5 +- src/pages/home/Home.tsx | 2 +- src/pages/invite/Invite.tsx | 7 +- src/pages/invite/InviteBot.tsx | 7 +- src/pages/login/FormField.tsx | 12 ++- src/pages/login/forms/Form.tsx | 12 ++- src/pages/login/forms/FormVerify.tsx | 10 +- src/pages/settings/ChannelSettings.tsx | 2 - src/pages/settings/GenericSettings.tsx | 25 ++--- src/pages/settings/panes/Account.tsx | 1 - src/pages/settings/panes/Audio.tsx | 14 ++- src/pages/settings/server/Members.tsx | 4 +- src/pages/settings/server/Roles.tsx | 18 ++-- 35 files changed, 187 insertions(+), 384 deletions(-) delete mode 100644 src/components/ui/Category.tsx delete mode 100644 src/components/ui/Overline.tsx diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 82928e8e..5962fce7 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -5,16 +5,17 @@ import { useTriggerEvents } from "preact-context-menu"; import { memo } from "preact/compat"; import { useEffect, useState } from "preact/hooks"; +import { Category } from "@revoltchat/ui"; + import { internalEmit } from "../../../lib/eventEmitter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { QueuedMessage } from "../../../mobx/stores/MessageQueue"; +import { I18nError } from "../../../context/Locale"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useClient } from "../../../context/revoltjs/RevoltClient"; -import Overline from "../../ui/Overline"; - import { Children } from "../../../types/Preact"; import Markdown from "../../markdown/Markdown"; import UserIcon from "../user/UserIcon"; @@ -162,7 +163,9 @@ const Message = observer( {replacement ?? } {!queued && } {queued?.error && ( - + + + )} {message.attachments?.map((attachment, index) => ( )} - {joinError && } + {joinError && ( + + + + )} ); } diff --git a/src/components/common/user/UserHeader.tsx b/src/components/common/user/UserHeader.tsx index e1572dd2..0ab85bfd 100644 --- a/src/components/common/user/UserHeader.tsx +++ b/src/components/common/user/UserHeader.tsx @@ -7,13 +7,12 @@ import styled from "styled-components/macro"; import { openContextMenu } from "preact-context-menu"; import { Text, Localizer } from "preact-i18n"; -import { IconButton } from "@revoltchat/ui"; +import { Header, IconButton } from "@revoltchat/ui"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; -import Header from "../../ui/Header"; import Tooltip from "../Tooltip"; import UserStatus from "./UserStatus"; @@ -52,7 +51,7 @@ export default observer(({ user }: Props) => { const { writeClipboard } = useIntermediate(); return ( -
+
}> diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index bb471340..220f542c 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -1,3 +1,4 @@ +import { Plus } from "@styled-icons/boxicons-regular"; import { Home, UserDetail, @@ -11,6 +12,8 @@ import styled, { css } from "styled-components/macro"; import { Text } from "preact-i18n"; import { useContext, useEffect } from "preact/hooks"; +import { Category, IconButton } from "@revoltchat/ui"; + import ConditionalLink from "../../../lib/ConditionalLink"; import PaintCounter from "../../../lib/PaintCounter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; @@ -20,7 +23,6 @@ import { useApplicationState } from "../../../mobx/State"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { AppContext } from "../../../context/revoltjs/RevoltClient"; -import Category from "../../ui/Category"; import placeholderSVG from "../items/placeholder.svg"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; @@ -125,15 +127,18 @@ export default observer(() => { )} - } - action={() => - openScreen({ - id: "special_input", - type: "create_group", - }) - } - /> + + + + openScreen({ + id: "special_input", + type: "create_group", + }) + }> + + + {channels.length === 0 && ( )} diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 23d2b869..4d7c5381 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -30,11 +30,14 @@ export default observer(() => { return ( diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index 0e228fa4..4a771701 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/src/components/navigation/left/ServerSidebar.tsx @@ -1,12 +1,12 @@ import { observer } from "mobx-react-lite"; import { Redirect, useParams } from "react-router"; -import { Server } from "revolt.js"; import styled, { css } from "styled-components/macro"; -import { Ref } from "preact"; import { useTriggerEvents } from "preact-context-menu"; import { useEffect } from "preact/hooks"; +import { Category } from "@revoltchat/ui"; + import ConditionalLink from "../../../lib/ConditionalLink"; import PaintCounter from "../../../lib/PaintCounter"; import { internalEmit } from "../../../lib/eventEmitter"; @@ -18,8 +18,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient"; import CollapsibleSection from "../../common/CollapsibleSection"; import ServerHeader from "../../common/ServerHeader"; -import Category from "../../ui/Category"; - import { ChannelButton } from "../items/ButtonItem"; import ConnectionStatus from "../items/ConnectionStatus"; @@ -126,7 +124,7 @@ export default observer(() => { }> + summary={{category.title}}> {channels} , ); diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx index 2f021471..8694ab11 100644 --- a/src/components/navigation/right/Search.tsx +++ b/src/components/navigation/right/Search.tsx @@ -5,12 +5,11 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { Button, InputBox, Preloader } from "@revoltchat/ui"; +import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui"; import { useClient } from "../../../context/revoltjs/RevoltClient"; import Message from "../../common/messaging/Message"; -import Overline from "../../ui/Overline"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; type SearchState = @@ -100,12 +99,14 @@ export function SearchSidebar({ close }: Props) { - - « back to members - - + + « back to members} + /> + + - + e.key === "Enter" && search()} diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx deleted file mode 100644 index baaa50df..00000000 --- a/src/components/ui/Category.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Plus } from "@styled-icons/boxicons-regular"; -import styled, { css } from "styled-components/macro"; - -import { Children } from "../../types/Preact"; - -const CategoryBase = styled.div>` - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - - margin-top: 4px; - padding: 6px 0 6px 8px; - margin-bottom: 4px; - white-space: nowrap; - - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - - svg { - cursor: pointer; - } - - &:first-child { - margin-top: 0; - padding-top: 0; - } - - ${(props) => - props.variant === "uniform" && - css` - padding-top: 6px; - `} -`; - -type Props = Omit< - JSX.HTMLAttributes, - "children" | "as" | "action" -> & { - text: Children; - action?: () => void; - variant?: "default" | "uniform"; -}; - -export default function Category(props: Props) { - const { text, action, ...otherProps } = props; - - return ( - - {text} - {action && } - - ); -} diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 4ff01ea5..860a294d 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -7,6 +7,8 @@ import { observer } from "mobx-react-lite"; import { useLocation } from "react-router-dom"; import styled, { css } from "styled-components/macro"; +import { Header } from "@revoltchat/ui"; + import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { useApplicationState } from "../../mobx/State"; @@ -18,82 +20,11 @@ interface Props { topBorder?: boolean; bottomBorder?: boolean; - background?: boolean; - transparent?: boolean; + withBackground?: boolean; + withTransparency?: boolean; placement: "primary" | "secondary"; } -const Header = styled.div` - gap: 10px; - flex: 0 auto; - display: flex; - flex-shrink: 0; - padding: 0 16px; - font-weight: 600; - user-select: none; - align-items: center; - - height: var(--header-height); - - background-size: cover !important; - background-position: center !important; - - svg { - flex-shrink: 0; - } - - .menu { - margin-inline-end: 8px; - color: var(--secondary-foreground); - } - - ${(props) => - props.transparent - ? css` - background-color: rgba( - var(--primary-header-rgb), - max(var(--min-opacity), 0.75) - ); - backdrop-filter: blur(20px); - z-index: 20; - position: absolute; - width: 100%; - ` - : css` - background-color: var(--primary-header); - `} - - ${(props) => - props.background && - css` - height: 120px !important; - align-items: flex-end; - - text-shadow: 0px 0px 1px black; - `} - - ${(props) => - props.placement === "secondary" && - css` - background-color: var(--secondary-header); - padding: 14px; - `} - - ${(props) => - props.topBorder && - css` - border-start-start-radius: 8px; - `} - - ${(props) => - props.bottomBorder && - css` - border-end-start-radius: 8px; - `} -`; - -export default Header; - const IconContainer = styled.div` display: flex; align-items: center; @@ -128,7 +59,7 @@ export const PageHeader = observer( return (
{!noBurger && } diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx deleted file mode 100644 index be34e010..00000000 --- a/src/components/ui/Overline.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import styled, { css } from "styled-components/macro"; - -import { Text } from "preact-i18n"; - -import { Children } from "../../types/Preact"; - -type Props = Omit, "children" | "as"> & { - error?: string; - hover?: boolean; - block?: boolean; - spaced?: boolean; - noMargin?: boolean; - children?: Children; - type?: "default" | "subtle" | "error" | "accent"; -}; - -const OverlineBase = styled.div>` - display: inline; - transition: 0.2s ease filter; - - ${(props) => - props.hover && - css` - cursor: pointer; - transition: 0.2s ease filter; - - &:hover { - filter: brightness(1.2); - } - `} - - ${(props) => - !props.noMargin && - css` - margin: 0.4em 0; - `} - - ${(props) => - props.spaced && - css` - margin-top: 0.8em; - `} - - font-size: 14px; - font-weight: 600; - color: var(--foreground); - text-transform: uppercase; - - ${(props) => - props.type === "subtle" && - css` - font-size: 12px; - color: var(--secondary-foreground); - `} - - ${(props) => - props.type === "error" && - css` - font-size: 12px; - font-weight: 400; - color: var(--error); - `} - - ${(props) => - props.type === "accent" && - css` - font-size: 12px; - font-weight: 400; - color: var(--accent); - `} - - ${(props) => - props.block && - css` - display: block; - `} -`; - -export default function Overline(props: Props) { - return ( - - {props.children} - {props.children && props.error && <> · } - {props.error && ( - - {props.error} - - )} - - ); -} diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx index ab7ce398..ce115a9b 100644 --- a/src/context/Locale.tsx +++ b/src/context/Locale.tsx @@ -5,9 +5,11 @@ import update from "dayjs/plugin/updateLocale"; import defaultsDeep from "lodash.defaultsdeep"; import { observer } from "mobx-react-lite"; -import { IntlProvider } from "preact-i18n"; +import { IntlProvider, Text } from "preact-i18n"; import { useCallback, useEffect, useState } from "preact/hooks"; +import { Error } from "@revoltchat/ui"; + import { useApplicationState } from "../mobx/State"; import { Languages } from "../../external/lang/Languages"; @@ -143,3 +145,12 @@ function transformLanguage(source: Dictionary) { return obj; } + +export function I18nError({ error, children }: { error: any; children?: any }) { + return ( + : undefined} + children={children} + /> + ); +} diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx index 767bfa8e..446a2921 100644 --- a/src/context/intermediate/modals/Input.tsx +++ b/src/context/intermediate/modals/Input.tsx @@ -4,11 +4,11 @@ import { Server } from "revolt.js"; import { Text } from "preact-i18n"; import { useContext, useState } from "preact/hooks"; -import { InputBox } from "@revoltchat/ui"; +import { Category, InputBox } from "@revoltchat/ui"; import Modal from "../../../components/ui/Modal"; -import Overline from "../../../components/ui/Overline"; import { Children } from "../../../types/Preact"; +import { I18nError } from "../../Locale"; import { AppContext } from "../../revoltjs/RevoltClient"; import { takeError } from "../../revoltjs/util"; @@ -60,11 +60,15 @@ export function InputModal({ ]} onClose={onClose}> {field ? ( - - {field} - + + {field} + ) : ( - error && + error && ( + + + + ) )} - {error && } + {error && ( + + + + )} {content} ); @@ -385,9 +389,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { id="app.special.modals.prompt.confirm_ban" fields={{ name: props.user?.username }} /> - + - + @@ -452,9 +456,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { ]} content={ <> - + - + @@ -469,9 +473,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { value={type === "Voice"} onSelect={() => setType("Voice")} /> - + - + setName(e.currentTarget.value)} @@ -527,9 +531,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => { ]} content={ <> - + - + setName(e.currentTarget.value)} diff --git a/src/context/intermediate/popovers/CreateBot.tsx b/src/context/intermediate/popovers/CreateBot.tsx index da57562b..42beded7 100644 --- a/src/context/intermediate/popovers/CreateBot.tsx +++ b/src/context/intermediate/popovers/CreateBot.tsx @@ -4,10 +4,11 @@ import { API } from "revolt.js"; import { Text } from "preact-i18n"; import { useContext, useState } from "preact/hooks"; -import Modal from "../../../components/ui/Modal"; -import Overline from "../../../components/ui/Overline"; +import { Category } from "@revoltchat/ui"; +import Modal from "../../../components/ui/Modal"; import FormField from "../../../pages/login/FormField"; +import { I18nError } from "../../Locale"; import { AppContext } from "../../revoltjs/RevoltClient"; import { takeError } from "../../revoltjs/util"; @@ -70,9 +71,10 @@ export function CreateBotModal({ onClose, onCreate }: Props) { error={errors.name?.message} /> {error && ( - - - + + {" "} + · + )} diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx index c001a14d..6d241a90 100644 --- a/src/context/intermediate/popovers/ModifyAccount.tsx +++ b/src/context/intermediate/popovers/ModifyAccount.tsx @@ -3,9 +3,9 @@ import { SubmitHandler, useForm } from "react-hook-form"; import { Text } from "preact-i18n"; import { useContext, useState } from "preact/hooks"; -import Modal from "../../../components/ui/Modal"; -import Overline from "../../../components/ui/Overline"; +import { Category, Error } from "@revoltchat/ui"; +import Modal from "../../../components/ui/Modal"; import FormField from "../../../pages/login/FormField"; import { AppContext } from "../../revoltjs/RevoltClient"; import { takeError } from "../../revoltjs/util"; @@ -140,9 +140,13 @@ export function ModifyAccountModal({ onClose, field }: Props) { disabled={processing} /> {error && ( - - - + + + } + /> + )} diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx index 00b2f8aa..c9136004 100644 --- a/src/context/intermediate/popovers/ServerIdentityModal.tsx +++ b/src/context/intermediate/popovers/ServerIdentityModal.tsx @@ -5,12 +5,11 @@ import styles from "./ServerIdentityModal.module.scss"; import { Text } from "preact-i18n"; import { useEffect, useState } from "preact/hooks"; -import { Button, InputBox } from "@revoltchat/ui"; +import { Button, Category, InputBox } from "@revoltchat/ui"; import { noop } from "../../../lib/js"; import Modal from "../../../components/ui/Modal"; -import Overline from "../../../components/ui/Overline"; import { FileUploader } from "../../revoltjs/FileUploads"; import { useClient } from "../../revoltjs/RevoltClient"; @@ -47,9 +46,9 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => { onClose={onClose}>
- + - + { />
- + - + { if (v) { setSelected([...selected, x._id]); diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index e14692f4..701cce8c 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -15,7 +15,7 @@ import styles from "./UserProfile.module.scss"; import { Localizer, Text } from "preact-i18n"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; -import { Button, IconButton, Preloader } from "@revoltchat/ui"; +import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui"; import { noop } from "../../../lib/js"; @@ -28,7 +28,6 @@ import { Username } from "../../../components/common/user/UserShort"; import UserStatus from "../../../components/common/user/UserStatus"; import Markdown from "../../../components/markdown/Markdown"; import Modal from "../../../components/ui/Modal"; -import Overline from "../../../components/ui/Overline"; import { ClientStatus, StatusContext, @@ -278,19 +277,19 @@ export const UserProfile = observer(
{flags & 1 ? ( /** ! FIXME: i18n this area */ - - User is suspended - + + + ) : undefined} {flags & 2 ? ( - - User deleted their account - + + + ) : undefined} {flags & 4 ? ( - - User is banned - + + + ) : undefined} {user.bot ? ( <> diff --git a/src/pages/Open.tsx b/src/pages/Open.tsx index bd686e79..20f9b3fa 100644 --- a/src/pages/Open.tsx +++ b/src/pages/Open.tsx @@ -4,6 +4,8 @@ import { useHistory, useParams } from "react-router-dom"; import { Text } from "preact-i18n"; import { useContext, useEffect } from "preact/hooks"; +import { Header } from "@revoltchat/ui"; + import { useIntermediate } from "../context/intermediate/Intermediate"; import { AppContext, @@ -11,8 +13,6 @@ import { StatusContext, } from "../context/revoltjs/RevoltClient"; -import Header from "../components/ui/Header"; - export default function Open() { const history = useHistory(); const client = useContext(AppContext); @@ -22,7 +22,7 @@ export default function Open() { if (status !== ClientStatus.ONLINE) { return ( -
+
); @@ -72,7 +72,7 @@ export default function Open() { }); return ( -
+
); diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index 69f32d50..46860e4b 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -1,31 +1,19 @@ -import { - At, - ChevronLeft, - ChevronRight, - Hash, -} from "@styled-icons/boxicons-regular"; +import { At, Hash } from "@styled-icons/boxicons-regular"; import { Notepad, Group } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { Channel } from "revolt.js"; import { User } from "revolt.js"; -import styled, { css } from "styled-components/macro"; +import styled from "styled-components/macro"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; -import { useApplicationState } from "../../mobx/State"; -import { SIDEBAR_CHANNELS, SIDEBAR_MEMBERS } from "../../mobx/stores/Layout"; - import { useIntermediate } from "../../context/intermediate/Intermediate"; import { getChannelName } from "../../context/revoltjs/util"; import { useStatusColour } from "../../components/common/user/UserIcon"; import UserStatus from "../../components/common/user/UserStatus"; -import Header, { - HamburgerAction, - PageHeader, -} from "../../components/ui/Header"; - import Markdown from "../../components/markdown/Markdown"; +import { PageHeader } from "../../components/ui/Header"; import HeaderActions from "./actions/HeaderActions"; export interface ChannelHeaderProps { @@ -98,7 +86,7 @@ export default observer(({ channel }: ChannelHeaderProps) => { } return ( - + {name} {isTouchscreenDevice && diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx index d64cf5f6..46733c44 100644 --- a/src/pages/developer/Developer.tsx +++ b/src/pages/developer/Developer.tsx @@ -7,7 +7,7 @@ import { TextReact } from "../../lib/i18n"; import { AppContext } from "../../context/revoltjs/RevoltClient"; -import Header, { PageHeader } from "../../components/ui/Header"; +import { PageHeader } from "../../components/ui/Header"; export default function Developer() { // const voice = useContext(VoiceContext); diff --git a/src/pages/discover/Discover.tsx b/src/pages/discover/Discover.tsx index 7894dc32..7102c532 100644 --- a/src/pages/discover/Discover.tsx +++ b/src/pages/discover/Discover.tsx @@ -5,7 +5,7 @@ import styled, { css } from "styled-components/macro"; import { useEffect, useMemo, useRef, useState } from "preact/hooks"; -import { Preloader } from "@revoltchat/ui"; +import { Header, Preloader } from "@revoltchat/ui"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; @@ -14,8 +14,6 @@ import { useApplicationState } from "../../mobx/State"; import { Overrides } from "../../context/Theme"; import { useIntermediate } from "../../context/intermediate/Intermediate"; -import Header from "../../components/ui/Header"; - const Container = styled.div` flex-grow: 1; display: flex; @@ -165,7 +163,7 @@ export default function Discover() { return ( {isTouchscreenDevice && ( -
+
Discover
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index 63ba7e21..df5fa24c 100644 --- a/src/pages/friends/Friends.tsx +++ b/src/pages/friends/Friends.tsx @@ -68,7 +68,10 @@ export default observer(() => { const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0; return ( <> - } transparent noBurger> + } + withTransparency + noBurger>
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 56c5cfa1..2a5e0da6 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -86,7 +86,7 @@ export default observer(() => {
)}
- } transparent> + } withTransparency>
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index 2e28da93..b11f0d96 100644 --- a/src/pages/invite/Invite.tsx +++ b/src/pages/invite/Invite.tsx @@ -7,7 +7,7 @@ import styles from "./Invite.module.scss"; import { Text } from "preact-i18n"; import { useContext, useEffect, useState } from "preact/hooks"; -import { Button, Preloader } from "@revoltchat/ui"; +import { Button, Category, Error, Preloader } from "@revoltchat/ui"; import { TextReact } from "../../lib/i18n"; @@ -23,7 +23,6 @@ import { takeError } from "../../context/revoltjs/util"; import ServerIcon from "../../components/common/ServerIcon"; import UserIcon from "../../components/common/user/UserIcon"; -import Overline from "../../components/ui/Overline"; export default function Invite() { const history = useHistory(); @@ -149,7 +148,9 @@ export default function Invite() { }} /> - + + +
- Add to server + Add to server - Add to group + Add to group
diff --git a/src/pages/settings/server/Members.tsx b/src/pages/settings/server/Members.tsx index 73661a6f..ff2f08b2 100644 --- a/src/pages/settings/server/Members.tsx +++ b/src/pages/settings/server/Members.tsx @@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from "preact/hooks"; import { Button, + Category, Checkbox, IconButton, InputBox, @@ -19,7 +20,6 @@ import { import UserIcon from "../../../components/common/user/UserIcon"; import { Username } from "../../../components/common/user/UserShort"; -import Overline from "../../../components/ui/Overline"; interface InnerProps { member: Member; @@ -51,7 +51,7 @@ const Inner = observer(({ member }: InnerProps) => {
{open && (
- Roles + Roles {Object.keys(server_roles).map((key) => { const role = server_roles[key]; return ( diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx index 8aada1f6..aa70f81f 100644 --- a/src/pages/settings/server/Roles.tsx +++ b/src/pages/settings/server/Roles.tsx @@ -13,13 +13,13 @@ import { Checkbox, ColourSwatches, InputBox, + Category, } from "@revoltchat/ui"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { PermissionList } from "../../../components/settings/roles/PermissionList"; import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection"; -import Overline from "../../../components/ui/Overline"; interface Props { server: Server; @@ -136,9 +136,9 @@ export const Roles = observer(({ server }: Props) => { {selected !== "default" && ( <>
- + - +

{

- + - +

{

- + - +

{

- + - +

Date: Mon, 30 May 2022 15:45:14 +0100 Subject: [PATCH 14/18] feat(@ui): port Modal component --- src/components/ui/Modal.tsx | 263 ------------------ src/context/intermediate/Intermediate.tsx | 6 +- src/context/intermediate/Modals.tsx | 13 +- src/context/intermediate/Popovers.tsx | 8 +- src/context/intermediate/modals/Clipboard.tsx | 3 +- src/context/intermediate/modals/Error.tsx | 3 +- .../modals/ExternalLinkPrompt.tsx | 5 +- src/context/intermediate/modals/Input.tsx | 4 +- src/context/intermediate/modals/Prompt.tsx | 5 +- .../intermediate/modals/SessionsPrompt.tsx | 3 +- src/context/intermediate/modals/SignedOut.tsx | 3 +- .../intermediate/modals/TokenReveal.tsx | 3 +- .../intermediate/popovers/ChannelInfo.tsx | 4 +- .../intermediate/popovers/CreateBot.tsx | 4 +- .../intermediate/popovers/ImageViewer.tsx | 6 +- .../intermediate/popovers/ModifyAccount.tsx | 4 +- .../intermediate/popovers/PendingRequests.tsx | 3 +- .../popovers/ServerIdentityModal.tsx | 4 +- .../intermediate/popovers/UserPicker.tsx | 4 +- .../intermediate/popovers/UserProfile.tsx | 31 ++- src/pages/settings/panes/Panes.module.scss | 5 +- 21 files changed, 58 insertions(+), 326 deletions(-) delete mode 100644 src/components/ui/Modal.tsx diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx deleted file mode 100644 index 06eaf0d5..00000000 --- a/src/components/ui/Modal.tsx +++ /dev/null @@ -1,263 +0,0 @@ -/* eslint-disable react-hooks/rules-of-hooks */ -import styled, { css, keyframes } from "styled-components/macro"; - -import { createPortal, useCallback, useEffect, useState } from "preact/compat"; - -import { Button } from "@revoltchat/ui"; -import { Props as ButtonProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/Button"; - -import { internalSubscribe } from "../../lib/eventEmitter"; - -import { Children } from "../../types/Preact"; - -const open = keyframes` - 0% {opacity: 0;} - 70% {opacity: 0;} - 100% {opacity: 1;} -`; - -const close = keyframes` - 0% {opacity: 1;} - 70% {opacity: 0;} - 100% {opacity: 0;} -`; - -const zoomIn = keyframes` - 0% {transform: scale(0.5);} - 98% {transform: scale(1.01);} - 100% {transform: scale(1);} -`; - -const zoomOut = keyframes` - 0% {transform: scale(1);} - 100% {transform: scale(0.5);} -`; - -const ModalBase = styled.div` - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 9999; - position: fixed; - max-height: 100%; - user-select: none; - - animation-name: ${open}; - animation-duration: 0.2s; - - display: grid; - overflow-y: auto; - place-items: center; - - color: var(--foreground); - background: rgba(0, 0, 0, 0.8); - - &.closing { - animation-name: ${close}; - animation-fill-mode: forwards; - } - - &.closing > div { - animation-name: ${zoomOut}; - } -`; - -const ModalContainer = styled.div` - overflow: hidden; - max-width: calc(100vw - 20px); - border-radius: var(--border-radius); - - animation-name: ${zoomIn}; - animation-duration: 0.25s; - animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1); -`; - -const ModalContent = styled.div< - { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean } ->` - text-overflow: ellipsis; - border-radius: var(--border-radius); - - h3 { - font-size: 14px; - text-transform: uppercase; - margin: 0; - margin-bottom: 10px; - color: var(--foreground); - } - - h5 { - margin: 0; - font-size: 13px; - font-weight: 500; - color: var(--secondary-foreground); - } - - form { - display: flex; - flex-direction: column; - gap: 8px; - - > div { - margin: 0; - color: var(--secondary-foreground); - font-size: 12px; - } - } - - .description { - color: var(--tertiary-foreground); - font-size: 90%; - } - - ${(props) => - !props.noBackground && - css` - background: var(--secondary-header); - `} - - ${(props) => - props.padding && - css` - padding: 1rem; - min-width: 450px; - `} - - ${(props) => - props.attachment && - css` - border-radius: var(--border-radius) var(--border-radius) 0 0; - `} - - ${(props) => - props.border && - css` - border-radius: var(--border-radius); - border: 2px solid var(--secondary-background); - `} -`; - -const ModalActions = styled.div` - gap: 8px; - display: flex; - flex-direction: row-reverse; - padding: 1rem; - background: var(--secondary-background); - border-radius: 0 0 var(--border-radius) var(--border-radius); -`; - -export type Action = Omit< - JSX.HTMLAttributes, - "as" | "onClick" -> & { - palette?: ButtonProps["palette"]; - confirmation?: boolean; - onClick: () => void; -}; - -interface Props { - children?: Children; - title?: Children; - description?: Children; - - disallowClosing?: boolean; - noBackground?: boolean; - dontModal?: boolean; - padding?: boolean; - - onClose?: () => void; - actions?: Action[]; - disabled?: boolean; - palette?: ButtonProps["palette"]; - border?: boolean; - visible: boolean; -} - -export let isModalClosing = false; - -export default function Modal(props: Props) { - if (!props.visible) return null; - - const content = ( - - {props.title &&

{props.title}

} - - {props.description &&
{props.description}
} - {props.children} - - ); - - if (props.dontModal) { - return content; - } - - const [animateClose, setAnimateClose] = useState(false); - isModalClosing = animateClose; - const onClose = useCallback(() => { - setAnimateClose(true); - setTimeout(() => props.onClose!(), 2e2); - }, [setAnimateClose, props]); - - useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]); - - useEffect(() => { - if (props.disallowClosing) return; - - function keyDown(e: KeyboardEvent) { - if (e.key === "Escape") { - onClose(); - } - } - - document.body.addEventListener("keydown", keyDown); - return () => document.body.removeEventListener("keydown", keyDown); - }, [props.disallowClosing, onClose]); - - const confirmationAction = props.actions?.find( - (action) => action.confirmation, - ); - - useEffect(() => { - if (!confirmationAction) return; - - // ! TODO: this may be done better if we - // ! can focus the button although that - // ! doesn't seem to work... - function keyDown(e: KeyboardEvent) { - if (e.key === "Enter") { - confirmationAction!.onClick(); - } - } - - document.body.addEventListener("keydown", keyDown); - return () => document.body.removeEventListener("keydown", keyDown); - }, [confirmationAction]); - - return createPortal( - - (e.cancelBubble = true)}> - {content} - {props.actions && ( - - {props.actions.map((x, index) => ( -