diff --git a/package.json b/package.json index fa2e6bb8..c8a2fc75 100644 --- a/package.json +++ b/package.json @@ -37,29 +37,7 @@ "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-visually-hidden": "^1.0.3", - "@react-aria/button": "^3.3.4", - "@react-aria/focus": "^3.5.0", - "@react-aria/interactions": "^3.9.1", - "@react-aria/listbox": "^3.5.1", - "@react-aria/menu": "^3.3.0", - "@react-aria/overlays": "^3.7.3", - "@react-aria/select": "^3.6.0", - "@react-aria/tabs": "^3.1.0", - "@react-aria/tooltip": "^3.1.3", - "@react-aria/utils": "^3.10.0", "@react-spring/web": "^9.4.4", - "@react-stately/collections": "^3.3.4", - "@react-stately/list": "^3.5.1", - "@react-stately/menu": "^3.3.1", - "@react-stately/select": "^3.1.3", - "@react-stately/tabs": "^3.1.1", - "@react-stately/tooltip": "^3.0.5", - "@react-stately/tree": "^3.2.0", - "@react-types/dialog": "^3.5.5", - "@react-types/menu": "^3.6.1", - "@react-types/overlays": "^3.6.1", - "@react-types/shared": "^3.13.1", - "@react-types/tabs": "^3.1.1", "@sentry/react": "^8.0.0", "@sentry/vite-plugin": "^2.0.0", "@testing-library/dom": "^10.1.0", diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index acecfc4f..0dd66420 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -4,8 +4,8 @@ }, "action": { "close": "Close", - "copy": "Copy", "copy_link": "Copy link", + "edit": "Edit", "go": "Go", "invite": "Invite", "no": "No", @@ -13,7 +13,8 @@ "remove": "Remove", "sign_in": "Sign in", "sign_out": "Sign out", - "submit": "Submit" + "submit": "Submit", + "upload_file": "Upload file" }, "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy and our <5>Cookie Policy.", "app_selection_modal": { @@ -43,7 +44,6 @@ "avatar": "Avatar", "back": "Back", "camera": "Camera", - "copied": "Copied!", "display_name": "Display name", "encrypted": "Encrypted", "error": "Error", @@ -130,7 +130,6 @@ "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)", "room_auth_view_join_button": "Join call now", "screenshare_button_label": "Share screen", - "select_input_unset_button": "Select an option", "settings": { "developer_settings_label": "Developer Settings", "developer_settings_label_description": "Expose developer settings in the settings window.", diff --git a/renovate.json b/renovate.json index 009174f4..91fc985a 100644 --- a/renovate.json +++ b/renovate.json @@ -44,29 +44,5 @@ "prHeader": "Please review modals on mobile for visual regressions." } ], - "semanticCommits": "disabled", - "ignoreDeps": [ - "@react-aria/button", - "@react-aria/focus", - "@react-aria/interactions", - "@react-aria/listbox", - "@react-aria/menu", - "@react-aria/overlays", - "@react-aria/select", - "@react-aria/tabs", - "@react-aria/tooltip", - "@react-aria/utils", - "@react-stately/collections", - "@react-stately/list", - "@react-stately/menu", - "@react-stately/select", - "@react-stately/tabs", - "@react-stately/tooltip", - "@react-stately/tree", - "@react-types/dialog", - "@react-types/menu", - "@react-types/overlays", - "@react-types/shared", - "@react-types/tabs" - ] + "semanticCommits": "disabled" } diff --git a/src/App.tsx b/src/App.tsx index bcd049b1..fc12af39 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,6 @@ import { useLocation, } from "react-router-dom"; import * as Sentry from "@sentry/react"; -import { OverlayProvider } from "@react-aria/overlays"; import { History } from "history"; import { TooltipProvider } from "@vector-im/compound-web"; @@ -92,23 +91,21 @@ export const App: FC = ({ history }) => { - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/src/Banner.module.css b/src/Banner.module.css deleted file mode 100644 index cd1b5272..00000000 --- a/src/Banner.module.css +++ /dev/null @@ -1,22 +0,0 @@ -/* -Copyright 2023 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.banner { - flex: 1; - border-radius: 8px; - padding: 16px; - background-color: var(--cpd-color-bg-subtle-primary); -} diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx index 4df2f39e..c6d8248f 100644 --- a/src/FullScreenView.tsx +++ b/src/FullScreenView.tsx @@ -20,9 +20,10 @@ import classNames from "classnames"; import { Trans, useTranslation } from "react-i18next"; import * as Sentry from "@sentry/react"; import { logger } from "matrix-js-sdk/src/logger"; +import { Button } from "@vector-im/compound-web"; import { Header, HeaderLogo, LeftNav, RightNav } from "./Header"; -import { LinkButton, Button } from "./button"; +import { LinkButton } from "./button"; import styles from "./FullScreenView.module.css"; import { TranslatedError } from "./TranslatedError"; import { Config } from "./config/Config"; @@ -81,21 +82,11 @@ export const ErrorView: FC = ({ error }) => { {!confineToRoom && (location.pathname === "/" ? ( - ) : ( - + {t("return_home_button")} ))} @@ -122,12 +113,7 @@ export const CrashView: FC = () => { )} - diff --git a/src/ListBox.module.css b/src/ListBox.module.css deleted file mode 100644 index 70da2cd8..00000000 --- a/src/ListBox.module.css +++ /dev/null @@ -1,49 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.listBox { - margin: 0; - padding: 0; - max-height: 150px; - overflow-y: auto; - list-style: none; - background-color: transparent; - border: 1px solid var(--cpd-color-border-interactive-secondary); - background-color: var(--cpd-color-bg-canvas-default); - border-radius: 8px; -} - -.option { - display: flex; - align-items: center; - justify-content: space-between; - background-color: transparent; - color: var(--cpd-color-text-primary); - padding: 8px 16px; - outline: none; - cursor: pointer; - font-size: var(--font-size-body); - min-height: 32px; -} - -.option.focused { - background-color: rgba(111, 120, 130, 0.2); -} - -.option.disabled { - color: var(--cpd-color-text-disabled); - background-color: var(--stopgap-bgColor3); -} diff --git a/src/ListBox.tsx b/src/ListBox.tsx deleted file mode 100644 index ea6e686b..00000000 --- a/src/ListBox.tsx +++ /dev/null @@ -1,116 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { - MutableRefObject, - PointerEvent, - ReactNode, - useCallback, - useRef, -} from "react"; -import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox"; -import { ListState } from "@react-stately/list"; -import { Node } from "@react-types/shared"; -import classNames from "classnames"; - -import styles from "./ListBox.module.css"; - -interface ListBoxProps extends AriaListBoxOptions { - optionClassName: string; - state: ListState; - className?: string; - listBoxRef?: MutableRefObject; -} - -export function ListBox({ - state, - optionClassName, - className, - listBoxRef, - ...rest -}: ListBoxProps): ReactNode { - const ref = useRef(null); - - const listRef = listBoxRef ?? ref; - - const { listBoxProps } = useListBox(rest, state, listRef); - - return ( -
    - {[...state.collection].map((item) => ( -
- ); -} - -interface OptionProps { - className: string; - state: ListState; - item: Node; -} - -function Option({ item, state, className }: OptionProps): ReactNode { - const ref = useRef(null); - const { optionProps, isSelected, isFocused, isDisabled } = useOption( - { key: item.key }, - state, - ref, - ); - - // Hack: remove the onPointerUp event handler and re-wire it to - // onClick. Chrome Android triggers a click event after the onpointerup - // event which leaks through to elements underneath the z-indexed select - // popover. preventDefault / stopPropagation don't have any effect, even - // adding just a dummy onClick handler still doesn't work, but it's fine - // if we handle just onClick. - // https://github.com/vector-im/element-call/issues/762 - const origPointerUp = optionProps.onPointerUp; - delete optionProps.onPointerUp; - optionProps.onClick = useCallback( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - (e) => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - origPointerUp(e as unknown as PointerEvent); - }, - [origPointerUp], - ); - - return ( -
  • - {item.rendered} -
    • - ); -} diff --git a/src/Menu.module.css b/src/Menu.module.css deleted file mode 100644 index bca12a8f..00000000 --- a/src/Menu.module.css +++ /dev/null @@ -1,73 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.menu { - width: 100%; - padding: 0; - margin: 0; - list-style: none; -} - -.menuItem { - cursor: pointer; - height: 48px; - display: flex; - align-items: center; - padding: 0 12px; - color: var(--cpd-color-text-primary); - font-size: var(--font-size-body); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.menuItem > * { - margin: 0 10px 0 0; -} - -.menuItem > :last-child { - margin-right: 0; -} - -.menuItem.focused, -.menuItem:hover { - background-color: var(--cpd-color-bg-action-secondary-hovered); -} - -.menuItem:active { - background-color: var(--cpd-color-bg-action-secondary-pressed); -} - -.menuItem.focused:first-child, -.menuItem:hover:first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} - -.menuItem.focused:last-child, -.menuItem:hover:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; -} - -.checkIcon { - position: absolute; - right: 16px; -} - -.checkIcon * { - stroke: var(--cpd-color-text-primary); -} diff --git a/src/Menu.tsx b/src/Menu.tsx deleted file mode 100644 index cfc0bc53..00000000 --- a/src/Menu.tsx +++ /dev/null @@ -1,102 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { Key, ReactNode, useRef, useState } from "react"; -import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu"; -import { TreeState, useTreeState } from "@react-stately/tree"; -import { mergeProps } from "@react-aria/utils"; -import { useFocus } from "@react-aria/interactions"; -import classNames from "classnames"; -import { Node } from "@react-types/shared"; - -import styles from "./Menu.module.css"; - -interface MenuProps extends AriaMenuOptions { - className?: string; - onClose: () => void; - onAction: (value: Key) => void; - label?: string; -} - -export function Menu({ - className, - onAction, - onClose, - label, - ...rest -}: MenuProps): ReactNode { - const state = useTreeState({ ...rest, selectionMode: "none" }); - const menuRef = useRef(null); - const { menuProps } = useMenu(rest, state, menuRef); - - return ( -
      - {[...state.collection].map((item) => ( - - ))} -
    - ); -} - -interface MenuItemProps { - item: Node; - state: TreeState; - onAction: (value: Key) => void; - onClose: () => void; -} - -function MenuItem({ - item, - state, - onAction, - onClose, -}: MenuItemProps): ReactNode { - const ref = useRef(null); - const { menuItemProps } = useMenuItem( - { - key: item.key, - onAction, - onClose, - }, - state, - ref, - ); - - const [isFocused, setFocused] = useState(false); - const { focusProps } = useFocus({ onFocusChange: setFocused }); - - return ( -
  • - {item.rendered} -
    • - ); -} diff --git a/src/Modal.module.css b/src/Modal.module.css index d6af51df..e59fe438 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -134,6 +134,10 @@ body[data-platform="ios"] .drawer { padding-block: var(--cpd-space-9x) var(--cpd-space-10x); } +.modal.tabbed .body { + padding-block-start: 0; +} + .handle { content: ""; position: absolute; diff --git a/src/Modal.tsx b/src/Modal.tsx index 4328dad2..e2d0ba14 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import { FC, ReactNode, useCallback } from "react"; -import { AriaDialogProps } from "@react-types/dialog"; import { useTranslation } from "react-i18next"; import { Root as DialogRoot, @@ -35,8 +34,7 @@ import styles from "./Modal.module.css"; import overlayStyles from "./Overlay.module.css"; import { useMediaQuery } from "./useMediaQuery"; -// TODO: Support tabs -export interface Props extends AriaDialogProps { +export interface Props { title: string; children: ReactNode; className?: string; @@ -52,6 +50,11 @@ export interface Props extends AriaDialogProps { * will be non-dismissable. */ onDismiss?: () => void; + /** + * Whether the modal content has tabs. + */ + // TODO: Better tabs support + tabbed?: boolean; } /** @@ -64,6 +67,7 @@ export const Modal: FC = ({ className, open, onDismiss, + tabbed, ...rest }) => { const { t } = useTranslation(); @@ -92,6 +96,7 @@ export const Modal: FC = ({ overlayStyles.overlay, styles.modal, styles.drawer, + { [styles.tabbed]: tabbed }, )} {...rest} > @@ -123,6 +128,7 @@ export const Modal: FC = ({ overlayStyles.animate, styles.modal, styles.dialog, + { [styles.tabbed]: tabbed }, )} >
    diff --git a/src/Tooltip.module.css b/src/Tooltip.module.css deleted file mode 100644 index 07219f75..00000000 --- a/src/Tooltip.module.css +++ /dev/null @@ -1,30 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.tooltip { - background-color: var(--cpd-color-bg-subtle-secondary); - flex-direction: row; - justify-content: center; - align-items: center; - padding: 10px; - color: var(--cpd-color-text-primary); - border-radius: 8px; - max-width: 135px; - width: max-content; - font-size: var(--font-size-caption); - font-weight: 500; - text-align: center; -} diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx deleted file mode 100644 index adaa18b3..00000000 --- a/src/Tooltip.tsx +++ /dev/null @@ -1,118 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { - ForwardedRef, - forwardRef, - ReactElement, - ReactNode, - useRef, -} from "react"; -import { - TooltipTriggerState, - useTooltipTriggerState, -} from "@react-stately/tooltip"; -import { FocusableProvider } from "@react-aria/focus"; -import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip"; -import { mergeProps, useObjectRef } from "@react-aria/utils"; -import classNames from "classnames"; -import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays"; -import { Placement } from "@react-types/overlays"; - -import styles from "./Tooltip.module.css"; - -interface TooltipProps { - className?: string; - state: TooltipTriggerState; - children: ReactNode; -} - -const Tooltip = forwardRef( - ( - { state, className, children, ...rest }: TooltipProps, - ref: ForwardedRef, - ) => { - const { tooltipProps } = useTooltip(rest, state); - - return ( -
    - {children} -
    - ); - }, -); - -Tooltip.displayName = "Tooltip"; - -interface TooltipTriggerProps { - children: ReactElement; - placement?: Placement; - delay?: number; - tooltip: () => string; -} - -export const TooltipTrigger = forwardRef( - ( - { children, placement, tooltip, ...rest }: TooltipTriggerProps, - ref: ForwardedRef, - ) => { - const tooltipTriggerProps = { delay: 250, ...rest }; - const tooltipState = useTooltipTriggerState(tooltipTriggerProps); - const triggerRef = useObjectRef(ref); - const overlayRef = useRef(null); - const { triggerProps, tooltipProps } = useTooltipTrigger( - tooltipTriggerProps, - tooltipState, - triggerRef, - ); - - const { overlayProps } = useOverlayPosition({ - placement: placement || "top", - targetRef: triggerRef, - overlayRef, - isOpen: tooltipState.isOpen, - offset: 12, - }); - - return ( - - ( - children.props, - rest, - )} - /> - {tooltipState.isOpen && ( - - - {tooltip()} - - - )} - - ); - }, -); - -TooltipTrigger.displayName = "TooltipTrigger"; diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css index 575b71b9..d4e06037 100644 --- a/src/UserMenu.module.css +++ b/src/UserMenu.module.css @@ -21,6 +21,14 @@ limitations under the License. flex-shrink: 0; } +.userButton { + appearance: none; + background: none; + border: none; + margin: 0; + cursor: pointer; +} + .userButton svg * { fill: var(--cpd-color-icon-primary); } diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx index 7cab4575..55ccc2c0 100644 --- a/src/UserMenu.tsx +++ b/src/UserMenu.tsx @@ -14,21 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { FC, ReactNode, useCallback, useMemo } from "react"; -import { Item } from "@react-stately/collections"; +import { FC, useMemo, useState } from "react"; import { useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; +import { Menu, MenuItem } from "@vector-im/compound-web"; -import { Button, LinkButton } from "./button"; -import { PopoverMenuTrigger } from "./popover/PopoverMenu"; -import { Menu } from "./Menu"; -import { TooltipTrigger } from "./Tooltip"; +import { LinkButton } from "./button"; import { Avatar, Size } from "./Avatar"; import UserIcon from "./icons/User.svg?react"; import SettingsIcon from "./icons/Settings.svg?react"; import LoginIcon from "./icons/Login.svg?react"; import LogoutIcon from "./icons/Logout.svg?react"; -import { Body } from "./typography/Typography"; import styles from "./UserMenu.module.css"; interface Props { @@ -91,7 +87,7 @@ export const UserMenu: FC = ({ return arr; }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]); - const tooltip = useCallback(() => t("common.profile"), [t]); + const [open, setOpen] = useState(false); if (!isAuthenticated) { return ( @@ -102,10 +98,15 @@ export const UserMenu: FC = ({ } return ( - - - - - { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (props: any): ReactNode => ( - - {items.map(({ key, icon: Icon, label, dataTestid }) => ( - - - {label} - - ))} - - ) + } - + > + {items.map(({ key, icon: Icon, label, dataTestid }) => ( + onAction(key)} + /> + ))} + ); }; diff --git a/src/auth/LoginPage.tsx b/src/auth/LoginPage.tsx index 167d30b2..5db36781 100644 --- a/src/auth/LoginPage.tsx +++ b/src/auth/LoginPage.tsx @@ -17,11 +17,11 @@ limitations under the License. import { FC, FormEvent, useCallback, useRef, useState } from "react"; import { useHistory, useLocation, Link } from "react-router-dom"; import { Trans, useTranslation } from "react-i18next"; +import { Button } from "@vector-im/compound-web"; import Logo from "../icons/LogoLarge.svg?react"; import { useClient } from "../ClientContext"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; -import { Button } from "../button"; import styles from "./LoginPage.module.css"; import { useInteractiveLogin } from "./useInteractiveLogin"; import { usePageTitle } from "../usePageTitle"; diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx index 467530d0..fc3d5b00 100644 --- a/src/auth/RegisterPage.tsx +++ b/src/auth/RegisterPage.tsx @@ -28,9 +28,9 @@ import { captureException } from "@sentry/react"; import { sleep } from "matrix-js-sdk/src/utils"; import { Trans, useTranslation } from "react-i18next"; import { logger } from "matrix-js-sdk/src/logger"; +import { Button } from "@vector-im/compound-web"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; -import { Button } from "../button"; import { useClientLegacy } from "../ClientContext"; import { useInteractiveRegistration } from "./useInteractiveRegistration"; import styles from "./LoginPage.module.css"; diff --git a/src/auth/useRecaptcha.ts b/src/auth/useRecaptcha.ts index 03a9fe49..00daa18c 100644 --- a/src/auth/useRecaptcha.ts +++ b/src/auth/useRecaptcha.ts @@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -// import "@types/grecaptcha"; + import { useEffect, useCallback, useRef, useState } from "react"; import { randomString } from "matrix-js-sdk/src/randomstring"; import { useTranslation } from "react-i18next"; @@ -23,7 +23,6 @@ import { translatedError } from "../TranslatedError"; declare global { interface Window { mxOnRecaptchaLoaded: () => void; - // grecaptcha: any; } } diff --git a/src/button/Button.module.css b/src/button/Button.module.css index 7f915648..516725be 100644 --- a/src/button/Button.module.css +++ b/src/button/Button.module.css @@ -1,5 +1,5 @@ /* -Copyright 2021 New Vector Ltd +Copyright 2024 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,240 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.button, -.toolbarButton, -.toolbarButtonSecondary, -.iconButton, -.iconCopyButton, -.secondary, -.secondaryHangup, -.copyButton, -.dropdownButton { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-color: transparent; - padding: 0; - border: none; - cursor: pointer; - text-decoration: none; - box-sizing: border-box; -} - -.secondary, -.secondaryHangup, -.button, -.copyButton { - padding: 8px 20px; - border-radius: 8px; - font-size: var(--font-size-body); - font-weight: 600; -} - -.button { - color: var(--stopgap-color-on-solid-accent); - background-color: var(--cpd-color-text-action-accent); -} - -.button:focus-visible, -.toolbarButton:focus-visible, -.toolbarButtonSecondary:focus-visible, -.iconButton:focus-visible, -.iconCopyButton:focus-visible, -.secondary:focus-visible, -.secondaryHangup:focus-visible, -.copyButton:focus-visible { - outline: auto; -} - -.toolbarButton:disabled { - background-color: var(--cpd-color-bg-action-primary-disabled); - box-shadow: none; -} - -.toolbarButton, -.toolbarButtonSecondary { - width: 50px; - height: 50px; - border-radius: 50px; - background-color: var(--cpd-color-bg-canvas-default); - color: var(--cpd-color-icon-primary); - border: 1px solid var(--cpd-color-gray-400); - box-shadow: var(--subtle-drop-shadow); -} - -.toolbarButton.on, -.toolbarButton.off { - background-color: var(--cpd-color-bg-action-primary-rest); - color: var(--cpd-color-icon-on-solid-primary); -} - -.toolbarButtonSecondary.on { - background-color: var(--cpd-color-text-success-primary); -} - -.toolbarButton:active, -.toolbarButtonSecondary:active { - background-color: var(--cpd-color-bg-subtle-primary); - border: none; - box-shadow: none; -} - -.toolbarButton.on:active, -.toolbarButton.off:active { - background-color: var(--cpd-color-bg-action-primary-pressed); -} - -.iconButton:not(.stroke) svg * { - fill: var(--cpd-color-bg-action-primary-rest); -} - -.iconButton:not(.stroke):tertiary svg * { - fill: var(--cpd-color-icon-accent-tertiary); -} - -.iconButton.on:not(.stroke) svg * { - fill: var(--cpd-color-icon-accent-tertiary); -} - -.iconButton.on.stroke svg * { - stroke: var(--cpd-color-icon-accent-tertiary); -} - -.hangupButton { - background-color: var(--cpd-color-bg-critical-primary); - border-color: var(--cpd-color-border-critical-subtle); +.endCall > svg { color: var(--stopgap-color-on-solid-accent); } - -.hangupButton:active { - background-color: var(--cpd-color-bg-critical-pressed); -} - -.secondary, -.copyButton { - color: var(--cpd-color-text-action-accent); - border: 2px solid var(--cpd-color-text-action-accent); - background-color: transparent; -} - -.secondaryHangup { - color: var(--cpd-color-text-critical-primary); - border: 2px solid var(--cpd-color-border-critical-primary); - background-color: transparent; -} - -.copyButton.secondaryCopy { - color: var(--cpd-color-text-primary); - border-color: var(--cpd-color-border-interactive-primary); -} - -.copyButton { - width: 100%; - height: 40px; - transition: - border-color 250ms, - background-color 250ms; -} - -.copyButton span { - font-weight: 600; - font-size: var(--font-size-body); - margin-right: 10px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.copyButton svg { - flex-shrink: 0; -} - -.copyButton:not(.on) svg * { - fill: var(--cpd-color-icon-accent-tertiary); -} - -.copyButton.on { - border-color: transparent; - background-color: var(--cpd-color-text-action-accent); - color: white; -} - -.copyButton.on svg * { - stroke: white; -} - -.copyButton.secondaryCopy:not(.on) svg * { - fill: var(--cpd-color-bg-action-primary-rest); -} - -.iconCopyButton svg * { - fill: var(--cpd-color-icon-secondary); -} - -.iconCopyButton.on svg *, -.iconCopyButton.on:hover svg * { - fill: transparent; - stroke: var(--cpd-color-text-action-accent); -} - -.dropdownButton { - color: var(--cpd-color-text-primary); - padding: 2px 8px; - border-radius: 8px; -} - -.dropdownButton:active, -.dropdownButton.on { - background-color: var(--cpd-color-bg-action-secondary-pressed); -} - -.dropdownButton svg { - margin-left: 8px; -} - -.dropdownButton svg * { - fill: var(--cpd-color-icon-primary); -} - -.lg { - height: 40px; -} - -.linkButton { - background-color: transparent; - border: none; - color: var(--cpd-color-text-action-accent); - cursor: pointer; -} - -@media (hover: hover) { - .toolbarButton:hover, - .toolbarButtonSecondary:hover { - background-color: var(--cpd-color-bg-subtle-primary); - border: none; - box-shadow: none; - } - - .toolbarButton.on:hover, - .toolbarButton.off:hover { - background-color: var(--cpd-color-bg-action-primary-hovered); - } - - .iconButton:not(.stroke):hover svg * { - fill: var(--cpd-color-icon-accent-tertiary); - } - - .hangupButton:hover { - background-color: var(--cpd-color-bg-critical-hovered); - } - - .iconCopyButton:hover svg * { - fill: var(--cpd-color-icon-accent-tertiary); - } - - .dropdownButton:hover { - background-color: var(--cpd-color-bg-action-secondary-hovered); - } -} diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 10c4dfd0..db578494 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -1,5 +1,5 @@ /* -Copyright 2022 - 2023 New Vector Ltd +Copyright 2022-2024 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,13 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { FC, forwardRef } from "react"; -import { PressEvent } from "@react-types/shared"; +import { ComponentPropsWithoutRef, FC } from "react"; import classNames from "classnames"; -import { useButton } from "@react-aria/button"; -import { mergeProps, useObjectRef } from "@react-aria/utils"; import { useTranslation } from "react-i18next"; -import { Tooltip } from "@vector-im/compound-web"; +import { Button as CpdButton, Tooltip } from "@vector-im/compound-web"; import { MicOnSolidIcon, MicOffSolidIcon, @@ -28,120 +25,15 @@ import { EndCallIcon, ShareScreenSolidIcon, SettingsSolidIcon, - ChevronDownIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import styles from "./Button.module.css"; -export type ButtonVariant = - | "default" - | "toolbar" - | "toolbarSecondary" - | "icon" - | "secondary" - | "copy" - | "secondaryCopy" - | "iconCopy" - | "secondaryHangup" - | "dropdown" - | "link"; - -export const variantToClassName = { - default: [styles.button], - toolbar: [styles.toolbarButton], - toolbarSecondary: [styles.toolbarButtonSecondary], - icon: [styles.iconButton], - secondary: [styles.secondary], - copy: [styles.copyButton], - secondaryCopy: [styles.secondaryCopy, styles.copyButton], - iconCopy: [styles.iconCopyButton], - secondaryHangup: [styles.secondaryHangup], - dropdown: [styles.dropdownButton], - link: [styles.linkButton], -}; - -export type ButtonSize = "lg"; - -export const sizeToClassName: { lg: string[] } = { - lg: [styles.lg], -}; -interface Props { - variant: ButtonVariant; - size: ButtonSize; - on: () => void; - off: () => void; - iconStyle: string; - className: string; - children: Element[]; - onPress: (e: PressEvent) => void; - onPressStart: (e: PressEvent) => void; - disabled: boolean; - // TODO: add all props for - ); - }, -); - -Button.displayName = "Button"; - -export const MicButton: FC<{ - muted: boolean; - // TODO: add all props for + ); }; -export const VideoButton: FC<{ +interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> { muted: boolean; - // TODO: add all props for + ); }; -export const ScreenshareButton: FC<{ +interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> { enabled: boolean; - className?: string; - // TODO: add all props for + ); }; -export const HangupButton: FC<{ - className?: string; - // TODO: add all props for + ); }; -export const SettingsButton: FC<{ - className?: string; - // TODO: add all props for + ); }; diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx deleted file mode 100644 index 247cd3c5..00000000 --- a/src/button/CopyButton.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { useTranslation } from "react-i18next"; -import useClipboard from "react-use-clipboard"; -import { FC } from "react"; - -import CheckIcon from "../icons/Check.svg?react"; -import CopyIcon from "../icons/Copy.svg?react"; -import { Button, ButtonVariant } from "./Button"; - -interface Props { - value: string; - children?: JSX.Element | string; - className?: string; - variant?: ButtonVariant; - copiedMessage?: string; -} - -export const CopyButton: FC = ({ - value, - children, - className, - variant, - copiedMessage, - ...rest -}) => { - const { t } = useTranslation(); - const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 }); - - return ( - - ); -}; diff --git a/src/button/Link.tsx b/src/button/Link.tsx new file mode 100644 index 00000000..686cfa83 --- /dev/null +++ b/src/button/Link.tsx @@ -0,0 +1,61 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { + ComponentPropsWithoutRef, + forwardRef, + MouseEvent, + useCallback, + useMemo, +} from "react"; +import { Link as CpdLink } from "@vector-im/compound-web"; +import { useHistory } from "react-router-dom"; +import { createPath, LocationDescriptor, Path } from "history"; + +export function useLink( + to: LocationDescriptor, +): [Path, (e: MouseEvent) => void] { + const history = useHistory(); + const path = useMemo( + () => (typeof to === "string" ? to : createPath(to)), + [to], + ); + const onClick = useCallback( + (e: MouseEvent) => { + e.preventDefault(); + history.push(to); + }, + [history, to], + ); + + return [path, onClick]; +} + +type Props = Omit< + ComponentPropsWithoutRef, + "href" | "onClick" +> & { to: LocationDescriptor }; + +/** + * A version of Compound's link component that integrates with our router setup. + */ +export const Link = forwardRef(function Link( + { to, ...props }, + ref, +) { + const [path, onClick] = useLink(to); + return ; +}); diff --git a/src/button/LinkButton.tsx b/src/button/LinkButton.tsx index eb30441c..3cff744d 100644 --- a/src/button/LinkButton.tsx +++ b/src/button/LinkButton.tsx @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2024 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,45 +14,24 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { FC, HTMLAttributes } from "react"; -import { Link } from "react-router-dom"; -import classNames from "classnames"; -import * as H from "history"; +import { ComponentPropsWithoutRef, forwardRef } from "react"; +import { Button } from "@vector-im/compound-web"; +import { LocationDescriptor } from "history"; -import { - variantToClassName, - sizeToClassName, - ButtonVariant, - ButtonSize, -} from "./Button"; +import { useLink } from "./Link"; -interface Props extends HTMLAttributes { - children: JSX.Element | string; - to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor); - size?: ButtonSize; - variant?: ButtonVariant; - className?: string; -} +type Props = Omit< + ComponentPropsWithoutRef>, + "as" | "href" +> & { to: LocationDescriptor }; -export const LinkButton: FC = ({ - children, - to, - size, - variant, - className, - ...rest -}) => { - return ( - - {children} - - ); -}; +/** + * A version of Compound's button component that acts as a link and integrates + * with our router setup. + */ +export const LinkButton = forwardRef( + function LinkButton({ to, ...props }, ref) { + const [path, onClick] = useLink(to); + return
    -
    ); }; diff --git a/src/home/JoinExistingCallModal.tsx b/src/home/JoinExistingCallModal.tsx index 85d4adde..bc60b8fb 100644 --- a/src/home/JoinExistingCallModal.tsx +++ b/src/home/JoinExistingCallModal.tsx @@ -14,19 +14,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { PressEvent } from "@react-types/shared"; import { useTranslation } from "react-i18next"; -import { FC } from "react"; +import { FC, MouseEvent } from "react"; +import { Button } from "@vector-im/compound-web"; import { Modal } from "../Modal"; -import { Button } from "../button"; import { FieldRow } from "../input/Input"; import styles from "./JoinExistingCallModal.module.css"; interface Props { open: boolean; onDismiss: () => void; - onJoin: (e: PressEvent) => void; + onJoin: (e: MouseEvent) => void; } export const JoinExistingCallModal: FC = ({ @@ -44,8 +43,8 @@ export const JoinExistingCallModal: FC = ({ >

    {t("join_existing_call_modal.text")}

    - - + diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx index f3b8d229..3335acd2 100644 --- a/src/home/RegisteredView.tsx +++ b/src/home/RegisteredView.tsx @@ -20,6 +20,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client"; import { useTranslation } from "react-i18next"; import { Heading } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; +import { Button } from "@vector-im/compound-web"; import { createRoom, @@ -32,7 +33,6 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import commonStyles from "./common.module.css"; import styles from "./RegisteredView.module.css"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; -import { Button } from "../button"; import { CallList } from "./CallList"; import { UserMenuContainer } from "../UserMenuContainer"; import { JoinExistingCallModal } from "./JoinExistingCallModal"; diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index 82e44991..ae222737 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -18,14 +18,13 @@ import { FC, useCallback, useState, FormEventHandler } from "react"; import { useHistory } from "react-router-dom"; import { randomString } from "matrix-js-sdk/src/randomstring"; import { Trans, useTranslation } from "react-i18next"; -import { Heading } from "@vector-im/compound-web"; +import { Button, Heading } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; import { useClient } from "../ClientContext"; import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import { UserMenuContainer } from "../UserMenuContainer"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; -import { Button } from "../button"; import { createRoom, getRelativeRoomUrl, diff --git a/src/icons/ArrowDown.svg b/src/icons/ArrowDown.svg deleted file mode 100644 index 37713a28..00000000 --- a/src/icons/ArrowDown.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/icons/Audio.svg b/src/icons/Audio.svg deleted file mode 100644 index 0be0da92..00000000 --- a/src/icons/Audio.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/icons/Copy.svg b/src/icons/Copy.svg deleted file mode 100644 index e5397118..00000000 --- a/src/icons/Copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/icons/Developer.svg b/src/icons/Developer.svg deleted file mode 100644 index 7d1a095f..00000000 --- a/src/icons/Developer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/icons/Edit.svg b/src/icons/Edit.svg deleted file mode 100644 index b9600405..00000000 --- a/src/icons/Edit.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/icons/Feedback.svg b/src/icons/Feedback.svg deleted file mode 100644 index d3842163..00000000 --- a/src/icons/Feedback.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/icons/Overflow.svg b/src/icons/Overflow.svg deleted file mode 100644 index 3d7f54c1..00000000 --- a/src/icons/Overflow.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/icons/Video.svg b/src/icons/Video.svg deleted file mode 100644 index f03bca26..00000000 --- a/src/icons/Video.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/index.css b/src/index.css index 816def33..134d2a57 100644 --- a/src/index.css +++ b/src/index.css @@ -20,9 +20,12 @@ limitations under the License. Therefore we define a unicode-range to load which excludes the glyphs (to avoid having to maintain a fork of Inter). */ -@import "normalize.css/normalize.css"; -@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"; -@import "@vector-im/compound-web/dist/style.css"; +@layer normalize, compound-legacy, compound; + +@import url("normalize.css/normalize.css") layer(normalize); +@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") +layer(compound); +@import url("@vector-im/compound-web/dist/style.css") layer(compound.components); :root { --font-scale: 1; @@ -195,87 +198,89 @@ body[data-platform="desktop"] { --cpd-font-family-sans: "Inter", sans-serif; } -h1, -h2, -h3, -h4, -h5, -h6, -p, -a { - margin-top: 0; -} +@layer compound-legacy { + h1, + h2, + h3, + h4, + h5, + h6, + p, + a { + margin-top: 0; + } -/* Headline Semi Bold */ -h1 { - font-weight: 600; - font-size: var(--font-size-headline); -} + /* Headline Semi Bold */ + h1 { + font-weight: 600; + font-size: var(--font-size-headline); + } -/* Title */ -h2 { - font-weight: 600; - font-size: var(--font-size-title); -} + /* Title */ + h2 { + font-weight: 600; + font-size: var(--font-size-title); + } -/* Subtitle */ -h3 { - font-weight: 600; - font-size: var(--font-size-subtitle); -} + /* Subtitle */ + h3 { + font-weight: 600; + font-size: var(--font-size-subtitle); + } -/* Body Semi Bold */ -h4 { - font-weight: 600; - font-size: var(--font-size-body); -} + /* Body Semi Bold */ + h4 { + font-weight: 600; + font-size: var(--font-size-body); + } -h1, -h2, -h3 { - line-height: 1.2; -} + h1, + h2, + h3 { + line-height: 1.2; + } -/* Body */ -p { - font-size: var(--font-size-body); - line-height: var(--font-size-title); -} + /* Body */ + p { + font-size: var(--font-size-body); + line-height: var(--font-size-title); + } -a { - color: var(--cpd-color-text-action-accent); - text-decoration: none; -} + a { + color: var(--cpd-color-text-action-accent); + text-decoration: none; + } -a:hover, -a:active { - opacity: 0.8; -} + a:hover, + a:active { + opacity: 0.8; + } -hr { - width: calc(100% - 24px); - border: none; - border-top: 1px solid var(--cpd-color-border-interactive-secondary); - color: var(--cpd-color-border-interactive-secondary); - overflow: visible; - text-align: center; - height: 5px; - font-weight: 600; - font-size: var(--font-size-body); - line-height: 24px; - margin: 0 12px; -} + hr { + width: calc(100% - 24px); + border: none; + border-top: 1px solid var(--cpd-color-border-interactive-secondary); + color: var(--cpd-color-border-interactive-secondary); + overflow: visible; + text-align: center; + height: 5px; + font-weight: 600; + font-size: var(--font-size-body); + line-height: 24px; + margin: 0 12px; + } -summary { - font-size: var(--font-size-body); -} + summary { + font-size: var(--font-size-body); + } -details > :not(summary) { - margin-left: var(--font-size-body); -} + details > :not(summary) { + margin-left: var(--font-size-body); + } -details[open] > summary { - margin-bottom: var(--font-size-body); + details[open] > summary { + margin-bottom: var(--font-size-body); + } } #root > [data-overlay-container] { diff --git a/src/input/AvatarInputField.module.css b/src/input/AvatarInputField.module.css index 49324d06..89227c66 100644 --- a/src/input/AvatarInputField.module.css +++ b/src/input/AvatarInputField.module.css @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2022-2024 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,45 +15,30 @@ limitations under the License. */ .avatarInputField { - display: flex; - flex-direction: column; - justify-content: center; -} - -.avatarContainer { position: relative; margin-bottom: 8px; } +.avatar { + display: block; +} + .fileInput { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; + display: none; +} + +.edit { + border-radius: var(--cpd-radius-pill-effect); + padding: 2px; + background: var(--cpd-color-bg-canvas-default); position: absolute; - z-index: -1; + inset-block-end: -2px; + inset-inline-end: -2px; } -.fileInput:focus + .fileInputButton { - outline: auto; -} - -.fileInputButton { - position: absolute; - bottom: 11px; - right: -4px; - background-color: var(--cpd-color-subtle-primary); - width: 20px; - height: 20px; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -} - -.removeButton { - color: var(--cpd-color-text-action-accent); - font-size: var(--font-size-caption); - padding: 6px 0; +.edit button { + min-block-size: 0; + block-size: var(--cpd-space-7x); + inline-size: var(--cpd-space-7x); + padding: var(--cpd-space-1x); } diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx index 8e2af744..e21637f7 100644 --- a/src/input/AvatarInputField.tsx +++ b/src/input/AvatarInputField.tsx @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2022-2024 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,21 +14,25 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useObjectRef } from "@react-aria/utils"; import { AllHTMLAttributes, useEffect, useCallback, useState, - forwardRef, ChangeEvent, + useRef, + FC, } from "react"; import classNames from "classnames"; import { useTranslation } from "react-i18next"; +import { Button, Menu, MenuItem } from "@vector-im/compound-web"; +import { + DeleteIcon, + EditIcon, + ShareIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { Avatar, Size } from "../Avatar"; -import { Button } from "../button"; -import EditIcon from "../icons/Edit.svg?react"; import styles from "./AvatarInputField.module.css"; interface Props extends AllHTMLAttributes { @@ -40,89 +44,115 @@ interface Props extends AllHTMLAttributes { onRemoveAvatar: () => void; } -export const AvatarInputField = forwardRef( - ( - { - id, - label, - className, - avatarUrl, - userId, - displayName, - onRemoveAvatar, - ...rest - }, - ref, - ) => { - const { t } = useTranslation(); +export const AvatarInputField: FC = ({ + id, + label, + className, + avatarUrl, + userId, + displayName, + onRemoveAvatar, + ...rest +}) => { + const { t } = useTranslation(); - const [removed, setRemoved] = useState(false); - const [objUrl, setObjUrl] = useState(undefined); + const [removed, setRemoved] = useState(false); + const [objUrl, setObjUrl] = useState(undefined); + const [menuOpen, setMenuOpen] = useState(false); - const fileInputRef = useObjectRef(ref); + const fileInputRef = useRef(null); - useEffect(() => { - const currentInput = fileInputRef.current; + useEffect(() => { + const currentInput = fileInputRef.current!; - const onChange = (e: Event): void => { - const inputEvent = e as unknown as ChangeEvent; - if (inputEvent.target.files && inputEvent.target.files.length > 0) { - setObjUrl(URL.createObjectURL(inputEvent.target.files[0])); - setRemoved(false); - } else { - setObjUrl(undefined); - } - }; + const onChange = (e: Event): void => { + const inputEvent = e as unknown as ChangeEvent; + if (inputEvent.target.files && inputEvent.target.files.length > 0) { + setObjUrl(URL.createObjectURL(inputEvent.target.files[0])); + setRemoved(false); + } else { + setObjUrl(undefined); + } + }; - currentInput.addEventListener("change", onChange); + currentInput.addEventListener("change", onChange); - return (): void => { - currentInput?.removeEventListener("change", onChange); - }; - }); + return (): void => { + currentInput?.removeEventListener("change", onChange); + }; + }); - const onPressRemoveAvatar = useCallback(() => { - setRemoved(true); - onRemoveAvatar(); - }, [onRemoveAvatar]); + const onSelectUpload = useCallback(() => { + fileInputRef.current!.click(); + }, [fileInputRef]); - return ( -
    -
    - - - {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/966 */} - {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - -
    - {(avatarUrl || objUrl) && !removed && ( - + + + + ) : ( +
    - ); - }, -); + + ); +}; AvatarInputField.displayName = "AvatarInputField"; diff --git a/src/input/SelectInput.module.css b/src/input/SelectInput.module.css deleted file mode 100644 index 472537ff..00000000 --- a/src/input/SelectInput.module.css +++ /dev/null @@ -1,60 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.selectInput { - position: relative; - display: inline-block; - margin-bottom: 28px; - max-width: 444px; -} - -.label { - margin-top: 0; - margin-bottom: 12px; -} - -.selectTrigger { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 12px; - background-color: var(--cpd-color-bg-canvas-default); - border-radius: 8px; - border: 1px solid var(--cpd-color-border-interactive-primary); - font-size: var(--font-size-body); - color: var(--cpd-color-text-primary); - height: 40px; - max-width: 100%; - width: 100%; -} - -.selectTrigger:focus { - outline: auto; -} - -.selectedItem { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 20px; -} - -.popover { - position: absolute; - margin-top: 5px; - width: 100%; - z-index: 1; -} diff --git a/src/input/SelectInput.tsx b/src/input/SelectInput.tsx deleted file mode 100644 index b2ae3f2f..00000000 --- a/src/input/SelectInput.tsx +++ /dev/null @@ -1,80 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { useRef } from "react"; -import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select"; -import { useButton } from "@react-aria/button"; -import { useSelectState } from "@react-stately/select"; -import classNames from "classnames"; -import { useTranslation } from "react-i18next"; - -import { Popover } from "../popover/Popover"; -import { ListBox } from "../ListBox"; -import styles from "./SelectInput.module.css"; -import ArrowDownIcon from "../icons/ArrowDown.svg?react"; - -interface Props extends AriaSelectOptions { - className?: string; -} - -export function SelectInput(props: Props): JSX.Element { - const { t } = useTranslation(); - const state = useSelectState(props); - - const ref = useRef(null); - const { labelProps, triggerProps, valueProps, menuProps } = useSelect( - props, - state, - ref, - ); - - const { buttonProps } = useButton(triggerProps, ref); - - return ( -
    -

    - {props.label} -

    - - - {state.isOpen && ( - - - - )} -
    - ); -} diff --git a/src/popover/Popover.module.css b/src/popover/Popover.module.css deleted file mode 100644 index e19d133c..00000000 --- a/src/popover/Popover.module.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.popover { - display: flex; - flex-direction: column; - width: 194px; - background: var(--cpd-color-bg-subtle-secondary); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 8px; -} diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx deleted file mode 100644 index 65ec27a6..00000000 --- a/src/popover/Popover.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { forwardRef, HTMLAttributes } from "react"; -import { DismissButton, useOverlay } from "@react-aria/overlays"; -import { FocusScope } from "@react-aria/focus"; -import classNames from "classnames"; -import { useObjectRef } from "@react-aria/utils"; - -import styles from "./Popover.module.css"; - -interface Props extends HTMLAttributes { - isOpen: boolean; - onClose: () => void; - className?: string; - children?: JSX.Element; -} - -export const Popover = forwardRef( - ({ isOpen = true, onClose, className, children, ...rest }, ref) => { - const popoverRef = useObjectRef(ref); - - const { overlayProps } = useOverlay( - { - isOpen, - onClose, - shouldCloseOnBlur: true, - isDismissable: true, - }, - popoverRef, - ); - - return ( - -
    - {children} - -
    -     - ); - }, -); - -Popover.displayName = "Popover"; diff --git a/src/popover/PopoverMenu.module.css b/src/popover/PopoverMenu.module.css deleted file mode 100644 index 5c874384..00000000 --- a/src/popover/PopoverMenu.module.css +++ /dev/null @@ -1,20 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.popoverMenuTrigger { - position: relative; - display: inline-block; -} diff --git a/src/popover/PopoverMenu.tsx b/src/popover/PopoverMenu.tsx deleted file mode 100644 index 46913a05..00000000 --- a/src/popover/PopoverMenu.tsx +++ /dev/null @@ -1,98 +0,0 @@ -/* -Copyright 2022 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { forwardRef, useRef } from "react"; -import { useMenuTriggerState } from "@react-stately/menu"; -import { useMenuTrigger } from "@react-aria/menu"; -import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays"; -import { mergeProps, useObjectRef } from "@react-aria/utils"; -import classNames from "classnames"; -import { MenuTriggerProps } from "@react-types/menu"; -import { Placement } from "@react-types/overlays"; - -import styles from "./PopoverMenu.module.css"; -import { Popover } from "./Popover"; - -interface PopoverMenuTriggerProps extends MenuTriggerProps { - children: JSX.Element; - placement: Placement; - className: string; - disableOnState: boolean; - [index: string]: unknown; -} - -export const PopoverMenuTrigger = forwardRef< - HTMLDivElement, - PopoverMenuTriggerProps ->(({ children, placement, className, disableOnState, ...rest }, ref) => { - const popoverMenuState = useMenuTriggerState(rest); - const buttonRef = useObjectRef(ref); - const { menuTriggerProps, menuProps } = useMenuTrigger( - {}, - popoverMenuState, - buttonRef, - ); - - const popoverRef = useRef(null); - - const { overlayProps } = useOverlayPosition({ - targetRef: buttonRef, - overlayRef: popoverRef, - placement: placement || "top", - offset: 5, - isOpen: popoverMenuState.isOpen, - }); - - if ( - !Array.isArray(children) || - children.length > 2 || - typeof children[1] !== "function" - ) { - throw new Error( - "PopoverMenu must have two props. The first being a button and the second being a render prop.", - ); - } - - const [popoverTrigger, popoverMenu] = children; - - return ( -
    - - {popoverMenuState.isOpen && ( - - - {popoverMenu({ - ...menuProps, - autoFocus: popoverMenuState.focusStrategy, - onClose: popoverMenuState.close, - })} - - - )} -
    - ); -}); - -PopoverMenuTrigger.displayName = "PopoverMenuTrigger"; diff --git a/src/room/CallEndedView.module.css b/src/room/CallEndedView.module.css index 12409d4e..9a43ccb4 100644 --- a/src/room/CallEndedView.module.css +++ b/src/room/CallEndedView.module.css @@ -42,9 +42,8 @@ limitations under the License. } .callEndedButton { + margin: auto; margin-top: 54px; - margin-left: 30px; - margin-right: 30px !important; } .submitButton { diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx index 3cb928aa..99686775 100644 --- a/src/room/CallEndedView.tsx +++ b/src/room/CallEndedView.tsx @@ -18,17 +18,19 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { Trans, useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; +import { Button } from "@vector-im/compound-web"; import styles from "./CallEndedView.module.css"; import feedbackStyle from "../input/FeedbackInput.module.css"; -import { Button, LinkButton } from "../button"; import { useProfile } from "../profile/useProfile"; -import { Body, Link, Headline } from "../typography/Typography"; +import { Body, Headline } from "../typography/Typography"; import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { FieldRow, InputField } from "../input/Input"; import { StarRatingInput } from "../input/StarRatingInput"; import { RageshakeButton } from "../settings/RageshakeButton"; +import { Link } from "../button/Link"; +import { LinkButton } from "../button"; interface Props { client: MatrixClient; @@ -95,12 +97,7 @@ export const CallEndedView: FC = ({ calls

    - + {t("call_ended_view.create_account_button")} @@ -136,8 +133,6 @@ export const CallEndedView: FC = ({
    @@ -169,9 +164,7 @@ export const CallEndedView: FC = ({ {!confineToRoom && ( - - {t("return_home_button")} - + {t("return_home_button")} )} @@ -198,9 +191,7 @@ export const CallEndedView: FC = ({ {!confineToRoom && ( - - {t("call_ended_view.not_now_button")} - + {t("call_ended_view.not_now_button")} )} diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 22b6be8c..ebda4271 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -19,7 +19,6 @@ import { RoomContext, useLocalParticipant, } from "@livekit/components-react"; -import { usePreventScroll } from "@react-aria/overlays"; import { ConnectionState, Room } from "livekit-client"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { @@ -44,10 +43,10 @@ import LogoMark from "../icons/LogoMark.svg?react"; import LogoType from "../icons/LogoType.svg?react"; import type { IWidgetApiRequest } from "matrix-widget-api"; import { - HangupButton, + EndCallButton, MicButton, VideoButton, - ScreenshareButton, + ShareScreenButton, SettingsButton, } from "../button"; import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header"; @@ -175,7 +174,6 @@ export const InCallView: FC = ({ connState, onShareClick, }) => { - usePreventScroll(); useWakeLock(); useEffect(() => { @@ -492,14 +490,14 @@ export const InCallView: FC = ({ , , @@ -507,21 +505,21 @@ export const InCallView: FC = ({ if (!reducedControls) { if (canScreenshare && !hideScreensharing) { buttons.push( - , ); } - buttons.push(); + buttons.push(); } buttons.push( - = ({ const recentsButtonInFooter = useMediaQuery("(max-height: 500px)"); const recentsButton = !confineToRoom && ( - + {t("lobby.leave_button")} ); @@ -140,16 +141,16 @@ export const LobbyView: FC = ({
    - - {!confineToRoom && } + + {!confineToRoom && }
    diff --git a/src/room/RageshakeRequestModal.tsx b/src/room/RageshakeRequestModal.tsx index 5d3280e0..4dcbb81d 100644 --- a/src/room/RageshakeRequestModal.tsx +++ b/src/room/RageshakeRequestModal.tsx @@ -16,9 +16,9 @@ limitations under the License. import { FC, useEffect } from "react"; import { useTranslation } from "react-i18next"; +import { Button } from "@vector-im/compound-web"; import { Modal, Props as ModalProps } from "../Modal"; -import { Button } from "../button"; import { FieldRow, ErrorMessage } from "../input/Input"; import { useSubmitRageshake } from "../settings/submit-rageshake"; import { Body } from "../typography/Typography"; @@ -52,7 +52,7 @@ export const RageshakeRequestModal: FC = ({ {t("rageshake_request_modal.body")}