调整搜索框。

Author: oldj

app/ui/bundle.js

@@ -6,6 +6,7 @@
 'use strict'
 
 import React from 'react'
+import { Input, Icon } from 'antd'
 import Agent from '../Agent'
 import './searchbar.less'
 
@@ -44,6 +45,12 @@ export default class SearchBar extends React.Component {
     Agent.emit('search', '')
   }
 
+  emptySearch () {
+    this.setState({keyword: ''})
+    Agent.emit('search', '')
+    this.refs.keyword.focus()
+  }
+
   doSearch (kw) {
     this.setState({
       keyword: kw
@@ -65,10 +72,11 @@ export default class SearchBar extends React.Component {
     }
     return (
       <div id="sh-searchbar">
-        <input
+        <Input
           ref="keyword"
-          type="text"
-          placeholder="keyword"
+          size="large"
+          //placeholder="keyword"
+          suffix={this.state.keyword ? <Icon type="close-circle" onClick={this.emptySearch.bind(this)}/> : null}
           value={this.state.keyword}
           onChange={(e) => this.doSearch(e.target.value)}
           onKeyDown={(e) => (e.keyCode === 27 && SearchBar.onCancel())}

ui/panel/searchbar.jsx

@@ -6,7 +6,7 @@
   left: 0;
   bottom: 30px;
   background: @bg_left_search;
-  padding: 6px 20px 5px 18px;
+  padding: 3px 10px 5px 10px;
   border-top: solid 1px @bg_left * 0.9;
 
   input {
@@ -15,5 +15,14 @@
     outline: 0;
     color: #fff;
     font-size: 13px;
+
+    &::placeholder {
+      color: #333;
+    }
+  }
+
+  i {
+    color: @font_color_left;
+    cursor: pointer;
   }
 }