mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 03:35:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix layout inconsistencies with the room search minimized button (#7824)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-17 10:33:36 +00:00 committed by GitHub
parent 3be74d38d6
commit 4292381202
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
res/css/structures/_RoomSearch.scss
View file

@ -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 {

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

@ -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>
);
}

2
src/i18n/strings/en_EN.json
View file

@ -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.",