diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 0137db7ebf2..56744cf54e0 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -48,16 +48,21 @@ limitations under the License. .mx_RoomDirectory_listheader { display: block; margin-top: 13px; + + .mx_DirectorySearchBox { + margin-left: 0; + margin-right: 0; + } + + .mx_NetworkDropdown { + float: right; + } } .mx_RoomDirectory_searchbox { flex: 1 !important; } -.mx_RoomDirectory_listheader .mx_NetworkDropdown { - flex: 0 0 200px; -} - .mx_RoomDirectory_tableWrapper { overflow-y: auto; flex: 1 1 0; @@ -66,7 +71,7 @@ limitations under the License. margin-top: 24px; text-align: center; - > h5 { + >h5 { margin: 0; font-weight: $font-semi-bold; font-size: $font-15px; @@ -74,7 +79,7 @@ limitations under the License. color: $primary-content; } - > p { + >p { margin: 40px auto 60px; font-size: $font-14px; line-height: $font-20px; @@ -82,7 +87,7 @@ limitations under the License. max-width: 464px; // easier reading } - > hr { + >hr { margin: 0; border: none; height: 1px; diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index eadca7326bf..d8baaa8f397 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -15,16 +15,22 @@ limitations under the License. */ .mx_NetworkDropdown { - height: 32px; - position: relative; - width: max-content; - padding-right: 32px; - margin-left: auto; - margin-right: 9px; - margin-top: 12px; - - .mx_AccessibleButton { - width: max-content; + --gutterSize: 8px; + + border-radius: 8px; + display: inline-flex; + gap: var(--gutterSize); + padding: calc(var(--gutterSize) / 2) var(--gutterSize); + align-items: center; + + border: 1px solid currentColor; + color: $secondary-content; + font-size: $font-12px; + + &:hover, + &.mx_NetworkDropdown--open { + background-color: $system; + border-color: $system; } } @@ -49,7 +55,6 @@ limitations under the License. .mx_NetworkDropdown_server_title { padding: 0 10px; - font-size: $font-15px; font-weight: 600; line-height: $font-20px; margin-bottom: 4px; @@ -139,29 +144,16 @@ limitations under the License. } } -.mx_NetworkDropdown_handle { - position: relative; - - &::after { - content: ""; - position: absolute; - width: 26px; - height: 26px; - right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5) - top: -3px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg'); - background-color: $primary-content; - } +.mx_NetworkDropdown_dialog .mx_Dialog { + width: 45vw; +} - .mx_NetworkDropdown_handle_server { - color: $muted-fg-color; - font-size: $font-12px; - } +.mx_NetworkDropdown_chevron { + width: 1em; } -.mx_NetworkDropdown_dialog .mx_Dialog { - width: 45vw; +.mx_NetworkDropdown--open { + .mx_NetworkDropdown_chevron { + transform: rotate(180deg); + } } diff --git a/res/img/feather-customised/chevron-down.svg b/res/img/feather-customised/chevron-down.svg index a091913b42e..c7264474391 100644 --- a/res/img/feather-customised/chevron-down.svg +++ b/res/img/feather-customised/chevron-down.svg @@ -1,3 +1,3 @@ - + diff --git a/src/accessibility/context_menu/ContextMenuButton.tsx b/src/accessibility/context_menu/ContextMenuButton.tsx index e211a4c9333..456ccaa317a 100644 --- a/src/accessibility/context_menu/ContextMenuButton.tsx +++ b/src/accessibility/context_menu/ContextMenuButton.tsx @@ -24,17 +24,18 @@ interface IProps extends React.ComponentProps { label?: string; // whether or not the context menu is currently open isExpanded: boolean; + ref?: React.Ref | React.LegacyRef | React.ForwardedRef; } // Semantic component for representing the AccessibleButton which launches a -export const ContextMenuButton: React.FC = ({ +export const ContextMenuButton: React.FC = React.forwardRef(({ label, isExpanded, children, onClick, onContextMenu, ...props -}) => { +}, ref) => { return ( = ({ aria-label={label} aria-haspopup={true} aria-expanded={isExpanded} + inputRef={ref} > { children } ); -}; +}); diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx index 99aeb6f5478..77714629fe4 100644 --- a/src/components/structures/RoomDirectory.tsx +++ b/src/components/structures/RoomDirectory.tsx @@ -26,7 +26,7 @@ import dis from "../../dispatcher/dispatcher"; import Modal from "../../Modal"; import { _t } from '../../languageHandler'; import SdkConfig from '../../SdkConfig'; -import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils'; +import { ALL_ROOMS, instanceForInstanceId, protocolNameForInstanceId, Protocols } from '../../utils/DirectoryUtils'; import Analytics from '../../Analytics'; import NetworkDropdown from "../views/directory/NetworkDropdown"; import SettingsStore from "../../settings/SettingsStore"; @@ -43,7 +43,6 @@ import PosthogTrackers from "../../PosthogTrackers"; import { PublicRoomTile } from "../views/rooms/PublicRoomTile"; import { getFieldsForThirdPartyLocation, joinRoomByAlias, showRoom } from "../../utils/rooms"; import { GenericError } from "../../utils/error"; -import { ALL_ROOMS, Protocols } from "../../utils/DirectoryUtils"; const LAST_SERVER_KEY = "mx_last_room_directory_server"; const LAST_INSTANCE_KEY = "mx_last_room_directory_instance"; diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx index 5a9e4100e1d..afe0de44f85 100644 --- a/src/components/views/directory/NetworkDropdown.tsx +++ b/src/components/views/directory/NetworkDropdown.tsx @@ -17,6 +17,7 @@ limitations under the License. import React, { useEffect, useState } from "react"; import { MatrixError } from "matrix-js-sdk/src/http-api"; +import classnames from "classnames"; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { instanceForInstanceId } from '../../../utils/DirectoryUtils'; @@ -42,12 +43,13 @@ import { compare } from "../../../utils/strings"; import { SnakedObject } from "../../../utils/SnakedObject"; import { IConfigOptions } from "../../../IConfigOptions"; import { ALL_ROOMS, Protocols } from "../../../utils/DirectoryUtils"; +import { Icon as ChevronDownIcon } from "../../../../res/img/feather-customised/chevron-down.svg"; const SETTING_NAME = "room_directory_servers"; -const inPlaceOf = (elementRect: Pick) => ({ - right: UIStore.instance.windowWidth - elementRect.right, - top: elementRect.top, +const inPlaceOf = (elementRect: Pick) => ({ + right: UIStore.instance.windowWidth - elementRect.right - 16, + top: elementRect.top + elementRect.height, chevronOffset: 0, chevronFace: ChevronFace.None, }); @@ -272,35 +274,35 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s ; + } + + let currentValue; + if (selectedInstanceId === ALL_ROOMS) { + currentValue = _t("All rooms"); + } else if (selectedInstanceId) { + const instance = instanceForInstanceId(protocols, selectedInstanceId); + currentValue = _t("%(networkName)s rooms", { + networkName: instance.desc, + }); } else { - let currentValue; - if (selectedInstanceId === ALL_ROOMS) { - currentValue = _t("All rooms"); - } else if (selectedInstanceId) { - const instance = instanceForInstanceId(protocols, selectedInstanceId); - currentValue = _t("%(networkName)s rooms", { - networkName: instance.desc, - }); - } else { - currentValue = _t("Matrix rooms"); - } + currentValue = _t("Matrix rooms"); + } - content = + - - { currentValue } - - ({ selectedServerName }) - - ; - } - - return
+ { currentValue } ({ selectedServerName }) + + { content } -
; + ; }; export default NetworkDropdown; diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 3db6d0dfb05..0bc82f2f812 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -42,7 +42,7 @@ type AccessibleButtonKind = | 'primary' * implemented exactly like a normal onClick handler. */ interface IProps extends React.InputHTMLAttributes { - inputRef?: React.Ref; + inputRef?: React.RefObject | React.ForwardedRef | React.LegacyRef; element?: keyof ReactHTML; // The kind of button, similar to how Bootstrap works. // See available classes for AccessibleButton for options. @@ -58,7 +58,7 @@ interface IProps extends React.InputHTMLAttributes { } interface IAccessibleButtonProps extends React.InputHTMLAttributes { - ref?: React.Ref; + ref?: React.RefObject | React.ForwardedRef | React.LegacyRef; } /** @@ -133,9 +133,6 @@ export default function AccessibleButton({ }; } - // Pass through the ref - used for keyboard shortcut access to some buttons - newProps.ref = inputRef; - newProps.className = classnames( "mx_AccessibleButton", className, @@ -146,6 +143,10 @@ export default function AccessibleButton({ }, ); + if (inputRef) { + newProps.ref = inputRef; + } + // React.createElement expects InputHTMLAttributes return React.createElement(element, newProps, children); } diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index 6c3d1db26d0..12c4dcd32aa 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -7,7 +7,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl Threads - Show: All threads - + `; @@ -29,7 +29,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly Threads - Show: My threads - + `;