diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 7f66279158..fbf8341592 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -122,38 +122,6 @@ $roomListCollapsedWidth: 68px; margin-top: 12px; } - .mx_RoomSearch_shortcutPrompt { - border-radius: 6px; - background-color: $panel-actions; - padding: 2px 4px; - user-select: none; - font-size: $font-12px; - line-height: $font-15px; - font-weight: $font-semi-bold; - color: $light-fg-color; - margin-right: 6px; - } - - .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery { - .mx_RoomSearch_shortcutPrompt { - display: none; - } - - & + .mx_LeftPanel_exploreButton, - & + .mx_LeftPanel_recentsButton { - // Cheaty way to return the occupied space to the filter input - flex-basis: 0; - margin: 0; - width: 0; - - // Don't forget to hide the masked ::before icon, - // using display:none or visibility:hidden would break accessibility - &::before { - content: none; - } - } - } - .mx_LeftPanel_dialPadButton { width: 32px; height: 32px; diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index 4437480bc8..8753137600 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/res/css/structures/_RoomSearch.scss @@ -17,6 +17,7 @@ limitations under the License. // Note: this component expects to be contained within a flexbox .mx_RoomSearch { flex: 1; + min-width: 0; border-radius: 8px; background-color: $panel-actions; // keep border thickness consistent to prevent movement @@ -28,6 +29,8 @@ limitations under the License. display: flex; align-items: center; + cursor: pointer; + .mx_RoomSearch_icon { width: 16px; height: 16px; @@ -36,11 +39,35 @@ limitations under the License. background-color: $secondary-content; margin-left: 7px; margin-bottom: 2px; + flex-shrink: 0; } .mx_RoomSearch_spotlightTriggerText { font-size: $font-12px; line-height: $font-16px; + color: $tertiary-content; + flex: 1; + min-width: 0; + // the following rules are to match that of a real input field + overflow: hidden; + margin: 9px; + font-weight: $font-semi-bold; + } + + .mx_RoomSearch_shortcutPrompt { + border-radius: 6px; + background-color: $panel-actions; + padding: 2px 4px; + user-select: none; + font-size: $font-12px; + line-height: $font-15px; + font-family: inherit; + font-weight: $font-semi-bold; + color: $light-fg-color; + margin-right: 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } &.mx_RoomSearch_minimized { @@ -55,44 +82,25 @@ limitations under the License. align-self: center; } - &:hover { - background-color: $tertiary-content; - - .mx_RoomSearch_icon { - background-color: $background; - } + .mx_RoomSearch_shortcutPrompt { + display: none; } } - &.mx_RoomSearch_spotlightTrigger { - cursor: pointer; - min-width: 0; + &:hover { + background-color: $tertiary-content; .mx_RoomSearch_spotlightTriggerText { - color: $tertiary-content; - flex: 1; - min-width: 0; - // the following rules are to match that of a real input field - overflow: hidden; - margin: 9px; - font-weight: $font-semi-bold; + color: $background; } - &:hover { - background-color: $tertiary-content; + .mx_RoomSearch_shortcutPrompt { + background-color: $background; + color: $secondary-content; + } - .mx_RoomSearch_spotlightTriggerText { - color: $background; - } - - .mx_RoomSearch_shortcutPrompt { - background-color: $background; - color: $secondary-content; - } - - .mx_RoomSearch_icon { - background-color: $background; - } + .mx_RoomSearch_icon { + background-color: $background; } } } diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index b7cdec1434..ab8620a26d 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -304,14 +304,6 @@ export default class LeftPanel extends React.Component { } }; - private selectRoom = () => { - const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile"); - if (firstRoom) { - firstRoom.click(); - return true; // to get the field to clear - } - }; - private renderBreadcrumbs(): React.ReactNode { if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) { return ( @@ -357,10 +349,7 @@ export default class LeftPanel extends React.Component { onBlur={this.onBlur} onKeyDown={this.onKeyDown} > - + { dialPadButton } { rightButton } diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx index 9af39a5cc3..4cc36e1794 100644 --- a/src/components/structures/RoomSearch.tsx +++ b/src/components/structures/RoomSearch.tsx @@ -28,10 +28,6 @@ import AccessibleButton from "../views/elements/AccessibleButton"; interface IProps { isMinimized: boolean; - /** - * @returns true if a room has been selected and the search field should be cleared - */ - onSelectRoom(): boolean; } export default class RoomSearch extends React.PureComponent { @@ -67,9 +63,9 @@ export default class RoomSearch extends React.PureComponent {
); - const shortcutPrompt =
+ const shortcutPrompt = { IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" } -
; + ; return { icon }