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

matrix-org · Feb 17, 2022 · 4292381 · 4292381
1 parent 3be74d3
commit 4292381
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
@@ -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 {

diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
@@ -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,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>
         );
     }

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -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.",