[PLT-1412] Updated search buttons on mobile GH-5261 (#5306)

* Update search buttons on mobile

* removed commented codes in _mobile.scss

* deleted 'search_bar.cancel'  from webapp/i18n/en.json

webapp/components/search_bar.jsx

@@ -29,6 +29,7 @@ export default class SearchBar extends React.Component {
         this.onListenerChange = this.onListenerChange.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleUserFocus = this.handleUserFocus.bind(this);
+        this.handleClear = this.handleClear.bind(this);
         this.handleUserBlur = this.handleUserBlur.bind(this);
         this.performSearch = this.performSearch.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -72,10 +73,6 @@ export default class SearchBar extends React.Component {
         }
     }
 
-    clearFocus() {
-        $('.search-bar__container').removeClass('focused');
-    }
-
     handleClose(e) {
         e.preventDefault();
 
@@ -108,9 +105,12 @@ export default class SearchBar extends React.Component {
         this.setState({focused: false});
     }
 
+    handleClear() {
+        this.setState({searchTerm: ''});
+    }
+
     handleUserFocus() {
         this.setState({focused: true});
-        $('.search-bar__container').addClass('focused');
     }
 
     performSearch(terms, isMentionSearch) {
@@ -141,7 +141,6 @@ export default class SearchBar extends React.Component {
         e.preventDefault();
         this.performSearch(this.state.searchTerm.trim());
         $(this.search).find('input').blur();
-        this.clearFocus();
     }
 
     searchMentions(e) {
@@ -262,6 +261,11 @@ export default class SearchBar extends React.Component {
             );
         }
 
+        let clearClass = 'sidebar__clear-icon';
+        if (!this.state.isSearching && this.state.searchTerm && this.state.searchTerm.trim() !== '') {
+            clearClass += ' visible';
+        }
+
         return (
             <div>
                 <div
@@ -270,15 +274,6 @@ export default class SearchBar extends React.Component {
                 >
                     <span className='fa fa-angle-left'/>
                 </div>
-                <span
-                    className='search__clear'
-                    onClick={this.clearFocus}
-                >
-                    <FormattedMessage
-                        id='search_bar.cancel'
-                        defaultMessage='Cancel'
-                    />
-                </span>
                 <form
                     role='form'
                     className='search__form'
@@ -301,6 +296,12 @@ export default class SearchBar extends React.Component {
                         providers={this.suggestionProviders}
                         type='search'
                     />
+                    <span
+                        className={clearClass}
+                        onClick={this.handleClear}
+                    >
+                        <i className='fa fa-times'/>
+                    </span>
                     {isSearching}
                     {this.renderHintPopover(helpClass)}
                 </form>

webapp/i18n/en.json

@@ -1758,7 +1758,6 @@
   "rhs_root.mobile.flag": "Flag",
   "rhs_root.mobile.unflag": "Unflag",
   "rhs_root.permalink": "Permalink",
-  "search_bar.cancel": "Cancel",
   "search_bar.search": "Search",
   "search_bar.usage": "<h4>Search Options</h4><ul><li><span>Use </span><b>\"quotation marks\"</b><span> to search for phrases</span></li><li><span>Use </span><b>from:</b><span> to find posts from specific users and </span><b>in:</b><span> to find posts in specific channels</span></li></ul>",
   "search_header.results": "Search Results",

webapp/sass/components/_search.scss

@@ -15,18 +15,6 @@
     @include animation(spin .7s infinite linear);
 }
 
-.search__clear {
-    @include single-transition(all, .2s, linear);
-    @include translateX(60px);
-    cursor: pointer;
-    display: none;
-    line-height: 45px;
-    margin-right: 13px;
-    position: absolute;
-    right: 0;
-    z-index: 5;
-}
-
 .search-item-snippet {
     @include clearfix;
     text-overflow: ellipsis;
@@ -63,6 +51,18 @@
     top: 15px;
 }
 
+.sidebar__clear-icon {
+    @include opacity(.5);
+    color: $dark-gray;
+    width: 40px;
+    margin-right: 20px;
+    position: absolute;
+    top: 12px;
+    right: 0;
+    cursor: pointer;
+    visibility: hidden;
+}
+
 .search__form {
     position: relative;
 

webapp/sass/responsive/_mobile.scss

@@ -896,32 +896,12 @@
         }
     }
 
-    .search__clear {
-        display: block;
-    }
-
     .search-bar__container {
         @include flex(0 0 44px);
         background: $primary-color;
         color: $white;
         padding: 0;
 
-        &.focused {
-            .sidebar__collapse {
-                @include translateX(-45px);
-            }
-
-            .search__form {
-                @include translateX(-45px);
-                padding-left: 55px;
-                padding-right: 24px;
-            }
-
-            .search__clear {
-                @include translateX(0);
-            }
-        }
-
         .search__form {
             @include single-transition(all, .2s, linear);
             @include translateX(0);
@@ -945,7 +925,7 @@
                 background: $white;
                 border: none;
                 color: $dark-gray;
-                padding: 0 10px 0 31px;
+                padding: 0 31px 0 31px;
             }
         }
 
@@ -1102,6 +1082,17 @@
             display: block;
         }
 
+        .sidebar__clear-icon {
+            display: block;
+            &.visible {
+                visibility: visible;
+            }
+        }
+
+        .fa-times {
+            margin-left: 15px;
+        }
+
         .sidebar--right__close {
             display: none;
         }