Add: Refresh button

browser/main/Components/PlanetHeader.jsx

@@ -1,6 +1,10 @@
 var React = require('react/addons')
+var ReactRouter = require('react-router')
+
+var PlanetActions = require('../Actions/PlanetActions')
 
 var PlanetHeader = React.createClass({
+  mixins: [ReactRouter.State],
   propTypes: {
     openSettingModal: React.PropTypes.func,
     currentPlanet: React.PropTypes.object,
@@ -18,6 +22,10 @@ var PlanetHeader = React.createClass({
   interceptClick: function (e) {
     e.stopPropagation()
   },
+  refreshPlanet: function () {
+    var params = this.getParams()
+    PlanetActions.fetchPlanet(params.userName, params.planetName)
+  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
     var currentUserName = this.props.currentPlanet.userName
@@ -36,6 +44,8 @@ var PlanetHeader = React.createClass({
             <i className='fa fa-search'/>
             <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </div>
+          <button onClick={this.refreshPlanet} className='refreshButton'><i className='fa fa-refresh'/></button>
+          <button className='settingButton'><i className='fa fa-gears'/></button>
         </div>
       </div>
     )

browser/main/Containers/PlanetContainer.jsx

@@ -363,7 +363,9 @@ module.exports = React.createClass({
       keywords.unshift('$s')
     }
 
-    this.setState({search: keywords.join(' ')})
+    this.setState({search: keywords.join(' ')}, function () {
+      this.selectArticleByIndex(0)
+    })
   },
   toggleBlueprintFilter: function () {
     var keywords = typeof this.state.search === 'string' ? this.state.search.split(' ') : []
@@ -389,7 +391,9 @@ module.exports = React.createClass({
       keywords.unshift('$b')
     }
 
-    this.setState({search: keywords.join(' ')})
+    this.setState({search: keywords.join(' ')}, function () {
+      this.selectArticleByIndex(0)
+    })
   },
   showOnlyWithTag: function (tag) {
     return function () {

browser/styles/main/containers/PlanetContainer.styl

@@ -81,6 +81,26 @@
         top 8px
         left 12px
         color inactiveTextColor
+    .refreshButton, .settingButton
+      display block
+      position absolute
+      top 12px
+      font-size em
+      btnDefault()
+      box-sizing border-box
+      circle()
+      width 28px
+      height 28px
+      text-align center
+      cursor pointer
+      transition 0.1s
+      &:focus, &.focus
+        outline none
+    .refreshButton
+      right 45px
+    .settingButton
+      right 10px
+
 
 .PlanetNavigator
   absolute bottom left

browser/styles/vars.styl

@@ -7,8 +7,7 @@ buttonBorderColor = #4C4C4C
 
 lightButtonColor = #898989
 
-hoverBackgroundColor= transparentify(#444, 10%)
-activeBackgroundColor= transparentify(#888, 10%)
+hoverBackgroundColor= transparentify(#444, 3%)
 
 // v0.2.0
 inactiveTextColor = #888