From 1fbfddfa8ad6cc80fc4f065de2ede16667a87ed1 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 2 Nov 2018 15:29:18 +0100
Subject: [PATCH] hide search field when left panel is collapsed

also remove collapse/expand button in search field
---
 src/components/structures/LeftPanel.js |  6 +-
 src/components/structures/SearchBox.js | 86 ++++++++------------------
 2 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 989644304b..da5abed41b 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -194,12 +194,16 @@ const LeftPanel = React.createClass({
             },
         );
 
+        const searchBox = !this.props.collapsed ?
+            <SearchBox onSearch={ this.onSearch } /> :
+            undefined;
+
         return (
             <div className={containerClasses}>
                 { tagPanel }
                 <aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed }/>
-                    <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
+                    { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index d1f4cd30fa..40a0803024 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -28,7 +28,6 @@ module.exports = React.createClass({
     displayName: 'SearchBox',
 
     propTypes: {
-        collapsed: React.PropTypes.bool,
         onSearch: React.PropTypes.func,
     },
 
@@ -75,18 +74,6 @@ module.exports = React.createClass({
         100,
     ),
 
-    onToggleCollapse: function(show) {
-        if (show) {
-            dis.dispatch({
-                action: 'show_left_panel',
-            });
-        } else {
-            dis.dispatch({
-                action: 'hide_left_panel',
-            });
-        }
-    },
-
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.ESCAPE:
@@ -104,57 +91,38 @@ module.exports = React.createClass({
     render: function() {
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
 
-        const collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
-
-        let toggleCollapse;
-        if (this.props.collapsed) {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt={ _t("Expand panel") } />
-                </AccessibleButton>;
-        } else {
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt={ _t("Collapse panel") } />
-                </AccessibleButton>;
-        }
-
-        let searchControls;
-        if (!this.props.collapsed) {
-            searchControls = [
-                    this.state.searchTerm.length > 0 ?
-                    <AccessibleButton key="button"
-                            className="mx_SearchBox_closeButton"
-                            onClick={ ()=>{ this._clearSearch(); } }>
-                        <TintableSvg
-                            className="mx_SearchBox_searchButton"
-                            src="img/icons-close.svg" width="24" height="24"
-                        />
-                    </AccessibleButton>
-                    :
-                    <TintableSvg
-                        key="button"
-                        className="mx_SearchBox_searchButton"
-                        src="img/icons-search-copy.svg" width="13" height="13"
-                    />,
-                    <input
-                        key="searchfield"
-                        type="text"
-                        ref="search"
-                        className="mx_SearchBox_search"
-                        value={ this.state.searchTerm }
-                        onChange={ this.onChange }
-                        onKeyDown={ this._onKeyDown }
-                        placeholder={ _t('Filter room names') }
-                    />,
-                ];
-        }
+        const searchControls = [
+            this.state.searchTerm.length > 0 ?
+            <AccessibleButton key="button"
+                    className="mx_SearchBox_closeButton"
+                    onClick={ ()=>{ this._clearSearch(); } }>
+                <TintableSvg
+                    className="mx_SearchBox_searchButton"
+                    src="img/icons-close.svg" width="24" height="24"
+                />
+            </AccessibleButton>
+            :
+            <TintableSvg
+                key="button"
+                className="mx_SearchBox_searchButton"
+                src="img/icons-search-copy.svg" width="13" height="13"
+            />,
+            <input
+                key="searchfield"
+                type="text"
+                ref="search"
+                className="mx_SearchBox_search"
+                value={ this.state.searchTerm }
+                onChange={ this.onChange }
+                onKeyDown={ this._onKeyDown }
+                placeholder={ _t('Filter room names') }
+            />,
+        ];
 
         const self = this;
         return (
             <div className="mx_SearchBox">
                 { searchControls }
-                { toggleCollapse }
             </div>
         );
     },