diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx index 278959f2..f699767f 100644 --- a/browser/main/Components/PlanetNavigator.jsx +++ b/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({ Launch diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index 504b1d9a..f3998134 100644 --- a/browser/main/Containers/PlanetContainer.jsx +++ b/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({ + toggleSnippetFilter={this.toggleSnippetFilter} toggleBlueprintFilter={this.toggleBlueprintFilter} currentPlanet={this.state.currentPlanet}/> diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl index 1331e2ce..bbbd8a9b 100644 --- a/browser/styles/main/containers/PlanetContainer.styl +++ b/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 diff --git a/browser/styles/vars.styl b/browser/styles/vars.styl index 06de6ecb..4edf574d 100644 --- a/browser/styles/vars.styl +++ b/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