Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix layout inconsistencies with the room search minimized button #7824

Merged
merged 2 commits into from
Feb 17, 2022
Merged

Fix layout inconsistencies with the room search minimized button #7824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40675f3
Fix layout inconsistencies with the room search minimized button
t3chguy Feb 17, 2022
170ed9b
i18n
t3chguy Feb 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions res/css/structures/_RoomSearch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,15 @@ limitations under the License.
}

&.mx_RoomSearch_minimized {
height: auto;
width: auto;
padding: 5px;
height: 32px;
min-height: 32px;
Comment on lines +100 to +101
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need the two here? Wouldn't height by itself be enough?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It won't

image

Could flex-basis auto but constraining the height seems easier to reason about

width: 32px;
box-sizing: border-box;

.mx_RoomSearch_icon {
margin-left: 0;
margin: 0 auto;
padding: 1px;
align-self: center;
}

&:hover {
Expand Down
34 changes: 15 additions & 19 deletions src/components/structures/RoomSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
);

Expand All @@ -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;
}

Expand All @@ -241,14 +224,27 @@ 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 (
<div className={classes} onClick={this.focus}>
{ icon }
{ input }
{ shortcutPrompt }
{ clearButton }
<AccessibleButton
tabIndex={-1}
title={_t("Clear filter")}
className="mx_RoomSearch_clearButton"
onClick={this.clearInput}
/>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3097,8 +3097,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.",
Expand Down