mirror of https://github.com/vector-im/riot-web
Fix Shortcut prompt for Search showing in minimized Roomlist (#9014)
Janne Mareike Koschinski
GitHub
parent
4844cc14bd
commit
39816f67e4
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -304,14 +304,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
}
|
||||
};
|
||||
|
||||
private selectRoom = () => {
|
||||
const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".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<IProps, IState> {
|
|||
onBlur={this.onBlur}
|
||||
onKeyDown={this.onKeyDown}
|
||||
>
|
||||
<RoomSearch
|
||||
isMinimized={this.props.isMinimized}
|
||||
onSelectRoom={this.selectRoom}
|
||||
/>
|
||||
<RoomSearch isMinimized={this.props.isMinimized} />
|
||||
|
||||
{ dialPadButton }
|
||||
{ rightButton }
|
||||
|
|
|
|||
|
|
@ -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<IProps> {
|
||||
|
|
@ -67,9 +63,9 @@ export default class RoomSearch extends React.PureComponent<IProps> {
|
|||
<div className="mx_RoomSearch_icon" />
|
||||
);
|
||||
|
||||
const shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
|
||||
const shortcutPrompt = <kbd className="mx_RoomSearch_shortcutPrompt">
|
||||
{ IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
|
||||
</div>;
|
||||
</kbd>;
|
||||
|
||||
return <AccessibleButton onClick={this.openSpotlight} className={classes}>
|
||||
{ icon }
|
||||
|
|
|
|||
Loading…
Reference in New Issue