PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve ease of focusing on Room list Search (#7255)

Browse source
This commit is contained in:
Michael Telatynski 2021-12-02 13:43:02 +00:00 committed by GitHub
parent 675901f629
commit 5169bca570
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_LeftPanel.scss
View file

@ -120,7 +120,6 @@ $roomListCollapsedWidth: 68px;
background-color: $panel-actions; background-color: $panel-actions;
padding: 2px 4px; padding: 2px 4px;
user-select: none; user-select: none;
pointer-events: none;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;

10
src/components/structures/RoomSearch.tsx
View file

@ -46,7 +46,7 @@ interface IState {
@replaceableComponent("structures.RoomSearch") @replaceableComponent("structures.RoomSearch")
export default class RoomSearch extends React.PureComponent<IProps, IState> { export default class RoomSearch extends React.PureComponent<IProps, IState> {
private dispatcherRef: string; private readonly dispatcherRef: string;
private inputRef: React.RefObject<HTMLInputElement> = createRef(); private inputRef: React.RefObject<HTMLInputElement> = createRef();
private searchFilter: NameFilterCondition = new NameFilterCondition(); private searchFilter: NameFilterCondition = new NameFilterCondition();
@ -136,9 +136,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
} }
}; };
public focus(): void { public focus = (): void => {
this.inputRef.current?.focus(); this.inputRef.current?.focus();
} };
public render(): React.ReactNode { public render(): React.ReactNode {
const classes = classNames({ const classes = classNames({
@ -154,7 +154,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
}); });
let icon = ( let icon = (
<div className='mx_RoomSearch_icon' /> <div className="mx_RoomSearch_icon" onClick={this.focus} />
); );
let input = ( let input = (
<input <input
@ -178,7 +178,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
onClick={this.clearInput} onClick={this.clearInput}
/> />
); );
let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt"> let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt" onClick={this.focus}>
{ isMac ? "⌘ K" : "Ctrl K" } { isMac ? "⌘ K" : "Ctrl K" }
</div>; </div>;