Fix: PlanetNavigatorのHome削除 & SnippetsとBlueprintsはToggleができるように

Author: Rokt33r

browser/main/Components/PlanetNavigator.jsx

@@ -13,9 +13,8 @@ var PlanetNavigator = React.createClass({
     search: React.PropTypes.string,
     openLaunchModal: React.PropTypes.func,
     openAddUserModal: React.PropTypes.func,
-    showAll: React.PropTypes.func,
-    showOnlySnippets: React.PropTypes.func,
-    showOnlyBlueprints: React.PropTypes.func
+    toggleSnippetFilter: React.PropTypes.func,
+    toggleBlueprintFilter: React.PropTypes.func
   },
   getInitialState: function () {
     return {
@@ -53,13 +52,10 @@ var PlanetNavigator = React.createClass({
           <i className='fa fa-rocket fa-fw'/> Launch
         </button>
         <nav>
-          <a className={usingSnippetFilter === usingBlueprintFilter ? 'active' : ''} onClick={this.props.showAll}>
-            <i className='fa fa-home fa-fw'/> Home
-          </a>
-          <a className={usingSnippetFilter && !usingBlueprintFilter ? 'active' : ''} onClick={this.props.showOnlySnippets}>
+          <a className={usingSnippetFilter && !usingBlueprintFilter ? 'active' : ''} onClick={this.props.toggleSnippetFilter}>
             <i className='fa fa-code fa-fw'/> Snippets
           </a>
-          <a className={!usingSnippetFilter && usingBlueprintFilter ? 'active' : ''} onClick={this.props.showOnlyBlueprints}>
+          <a className={!usingSnippetFilter && usingBlueprintFilter ? 'active' : ''} onClick={this.props.toggleBlueprintFilter}>
             <i className='fa fa-file-text-o fa-fw'/> Blueprints
           </a>
         </nav>

browser/main/Containers/PlanetContainer.jsx

@@ -339,11 +339,57 @@ module.exports = React.createClass({
   showAll: function () {
     this.setState({search: ''})
   },
-  showOnlySnippets: function () {
-    this.setState({search: '$s'})
+  toggleSnippetFilter: function () {
+    var keywords = typeof this.state.search === 'string' ? this.state.search.split(' ') : []
+
+    var usingSnippetFilter = false
+    var usingBlueprintFilter = false
+    keywords = keywords.filter(function (keyword) {
+      if (keyword === '$b') {
+        usingBlueprintFilter = true
+        return false
+      }
+      if (keyword === '$s') usingSnippetFilter = true
+      return true
+    })
+
+    if (usingSnippetFilter && !usingBlueprintFilter) {
+      keywords = keywords.filter(function (keyword) {
+        return keyword !== '$s'
+      })
+    }
+
+    if (!usingSnippetFilter) {
+      keywords.unshift('$s')
+    }
+
+    this.setState({search: keywords.join(' ')})
   },
-  showOnlyBlueprints: function () {
-    this.setState({search: '$b'})
+  toggleBlueprintFilter: function () {
+    var keywords = typeof this.state.search === 'string' ? this.state.search.split(' ') : []
+
+    var usingSnippetFilter = false
+    var usingBlueprintFilter = false
+    keywords = keywords.filter(function (keyword) {
+      if (keyword === '$s') {
+        usingSnippetFilter = true
+        return false
+      }
+      if (keyword === '$b') usingBlueprintFilter = true
+      return true
+    })
+
+    if (usingBlueprintFilter && !usingSnippetFilter) {
+      keywords = keywords.filter(function (keyword) {
+        return keyword !== '$b'
+      })
+    }
+
+    if (!usingBlueprintFilter) {
+      keywords.unshift('$b')
+    }
+
+    this.setState({search: keywords.join(' ')})
   },
   showOnlyWithTag: function (tag) {
     return function () {
@@ -560,7 +606,7 @@ module.exports = React.createClass({
         <PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal}
           search={this.state.search}
           showAll={this.showAll}
-          showOnlySnippets={this.showOnlySnippets} showOnlyBlueprints={this.showOnlyBlueprints} currentPlanet={this.state.currentPlanet}/>
+          toggleSnippetFilter={this.toggleSnippetFilter} toggleBlueprintFilter={this.toggleBlueprintFilter} currentPlanet={this.state.currentPlanet}/>
 
         <PlanetArticleList showOnlyWithTag={this.showOnlyWithTag} ref='list' articles={filteredArticles}/>
 

browser/styles/main/containers/PlanetContainer.styl

@@ -111,10 +111,8 @@
       color textColor
       cursor pointer
       transition 0.1s
-      &:hover, &.hover
-        background-color hoverBackgroundColor
-      &:active, &.active
-        color brandColor
+      btnDefault()
+      border none
   .usersLabel
     margin-top 35px
     margin-bottom 5px

browser/styles/vars.styl

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