Fix layout inconsistencies with the room search minimized button (#7824)
This commit is contained in:
parent
3be74d38d6
commit
4292381202
3 changed files with 23 additions and 24 deletions
|
@ -97,12 +97,15 @@ limitations under the License.
|
|||
}
|
||||
|
||||
&.mx_RoomSearch_minimized {
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 5px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
width: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
margin-left: 0;
|
||||
margin: 0 auto;
|
||||
padding: 1px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -188,7 +188,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
|
||||
});
|
||||
|
||||
let icon = (
|
||||
const icon = (
|
||||
<div className="mx_RoomSearch_icon" />
|
||||
);
|
||||
|
||||
|
@ -207,29 +207,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
/>
|
||||
);
|
||||
|
||||
let clearButton = (
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
title={_t("Clear filter")}
|
||||
className="mx_RoomSearch_clearButton"
|
||||
onClick={this.clearInput}
|
||||
/>
|
||||
);
|
||||
|
||||
let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
|
||||
{ isMac ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
|
||||
</div>;
|
||||
|
||||
if (this.props.isMinimized) {
|
||||
icon = (
|
||||
<AccessibleButton
|
||||
title={_t("Filter rooms and people")}
|
||||
className="mx_RoomSearch_icon mx_RoomSearch_minimizedHandle"
|
||||
onClick={this.openSearch}
|
||||
/>
|
||||
);
|
||||
input = null;
|
||||
clearButton = null;
|
||||
shortcutPrompt = null;
|
||||
}
|
||||
|
||||
|
@ -241,6 +224,14 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
</div> }
|
||||
{ shortcutPrompt }
|
||||
</AccessibleButton>;
|
||||
} else if (this.props.isMinimized) {
|
||||
return <AccessibleButton
|
||||
onClick={this.openSearch}
|
||||
className="mx_RoomSearch mx_RoomSearch_minimized"
|
||||
title={_t("Filter rooms and people")}
|
||||
>
|
||||
{ icon }
|
||||
</AccessibleButton>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -248,7 +239,12 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
{ icon }
|
||||
{ input }
|
||||
{ shortcutPrompt }
|
||||
{ clearButton }
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
title={_t("Clear filter")}
|
||||
className="mx_RoomSearch_clearButton"
|
||||
onClick={this.clearInput}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3100,8 +3100,8 @@
|
|||
"If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.",
|
||||
"Explore rooms in %(communityName)s": "Explore rooms in %(communityName)s",
|
||||
"Filter": "Filter",
|
||||
"Clear filter": "Clear filter",
|
||||
"Filter rooms and people": "Filter rooms and people",
|
||||
"Clear filter": "Clear filter",
|
||||
"You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
|
||||
"Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
|
||||
"Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.",
|
||||
|
|
Loading…
Reference in a new issue