diff --git a/components/Panel/Panel.jsx b/components/Panel/Panel.jsx index 07462debf..20f2dca02 100644 --- a/components/Panel/Panel.jsx +++ b/components/Panel/Panel.jsx @@ -42,7 +42,7 @@ class Panel extends Component { return (
- {header} + {this.props.showHeader ? header : null} {body}
) @@ -54,4 +54,8 @@ Panel.propTypes = { expandTrigger: PropTypes.string } +Panel.defaultProps = { + showHeader : true +} + export default Panel diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index a16519b1e..393d80cc8 100644 --- a/components/Panel/Panel.scss +++ b/components/Panel/Panel.scss @@ -1,4 +1,4 @@ -@import 'topcoder/tc-includes'; +@import 'tc-includes'; $panel-header-text-color: #737380; $panel-header-bg-color: #DFDFE1; @@ -15,9 +15,12 @@ $panel-header-bg-color: #DFDFE1; } .panel-body { - border-left : 1px solid $accent-gray; - border-right : 1px solid $accent-gray; - border-bottom : 1px solid $accent-gray; + border-left : 1px solid $tc-gray-40; + border-right : 1px solid $tc-gray-40; + border-bottom : 1px solid $tc-gray-40; padding: 10px; + overflow-x: visible; + overflow-y: scroll; + max-height: 252px; } -} \ No newline at end of file +} diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 18b4ee291..e73eeb6d1 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -27,9 +27,9 @@ class SearchBar extends Component { this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this) } - getQueryStringValue (key) { + getQueryStringValue (key) { return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1')) - } + } componentDidMount() { window.addEventListener('click', this.handleOutsideClick) @@ -67,6 +67,7 @@ class SearchBar extends Component { handleSuggestionsUpdate(requestNo, data) { if (requestNo === this.state.maxRequestNo) { + console.log('SUGGESTIONS', data) this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null}) } } @@ -102,6 +103,8 @@ class SearchBar extends Component { this.refs.searchValue.value = null this.setState({ searchValue: this.refs.searchValue.value }) this.setState({ searchState: 'empty' }) + this.setState({ suggestions: false }) + this.props.onClearSearch() } onKeyUp(evt) { @@ -190,14 +193,14 @@ class SearchBar extends Component { const results = this.state.loading === true ?
- : + : return (
- { typeaheadText } +
- +
{results} @@ -208,17 +211,22 @@ class SearchBar extends Component { } } - SearchBar.propTypes = { + hideSuggestionsWhenEmpty: PropTypes.func.bool, onSearch : PropTypes.func.isRequired, + onClearSearch : PropTypes.func, onTermChange : PropTypes.func.isRequired, recentTerms : PropTypes.array, - searchTermKey: PropTypes.string + searchTermKey: PropTypes.string, + showPopularSearchHeader: PropTypes.bool } SearchBar.defaultProps = { + hideSuggestionsWhenEmpty: false, recentTerms : [], - searchTermKey : 'q' + searchTermKey : 'q', + onClearSearch : () => {}, + showPopularSearchHeader: true } export default SearchBar diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 63ce73fc0..acbbf190d 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -1,13 +1,11 @@ -@import "topcoder/tc-includes"; - -$border-color: #D8D8DB; -$active-icon-wrap-bg: #888894; +@import 'tc-includes'; .SearchBar { - background-color: $white; + @include roboto; + background-color: white; height: 40px; width: 100%; - border: 1px solid $border-color; + border: 1px solid $tc-gray-20; border-radius: 4px; position: relative; padding-left: 15px; @@ -20,22 +18,19 @@ $active-icon-wrap-bg: #888894; } &.state-empty:before { - content: "Search Topcoder for challenges, people or content"; + content: "Search for projects"; position: absolute; left: 15px; top: 50%; + text-align: left; transform: translateY(-50%); - color: $accent-gray; - font-size: 15px; + color: $tc-gray-40; + font-size: 13px; line-height: 20px; width: 75%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; - - @media screen and (max-width: 768px) { - content: "Search Topcoder"; - } } &.state-focused:before, @@ -44,7 +39,7 @@ $active-icon-wrap-bg: #888894; } &.state-focused { - border-color: $accent-gray; + border-color: $tc-gray-40; .search-typeahead-text { display: block; @@ -52,7 +47,6 @@ $active-icon-wrap-bg: #888894; .search-icon-wrap { cursor: pointer; - background-color: $active-icon-wrap-bg; } .suggestions-panel { @@ -61,7 +55,7 @@ $active-icon-wrap-bg: #888894; } &.state-filled { - border-color: $border-color; + border-color: $tc-gray-20; .search-typeahead-text { display: none; @@ -69,7 +63,7 @@ $active-icon-wrap-bg: #888894; .search-icon-wrap { cursor: pointer; - background-color: $active-icon-wrap-bg; + background-color: $tc-gray-50; } .suggestions-panel { @@ -79,20 +73,23 @@ $active-icon-wrap-bg: #888894; .search-bar__text, .search-typeahead-text { - font-family: "Roboto", Arial, Helvetica, sans-serif; + @include roboto; outline: 0px; border: 0px none; font-size: 17px; - color: $accent-gray-dark; + color: $tc-gray-90; line-height: 20px; - width: 90%; + // NOTE: If uncommented, it causes problems with the proper alignment of + // the typeahead text. + // width: calc(100% - 15px - 46px); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); - background-color: transparent; + background-color: transparent !important; z-index: 20; padding-left: 0px; + height: 30px; } .search-bar__text { @@ -105,10 +102,11 @@ $active-icon-wrap-bg: #888894; } .search-typeahead-text { - color: $accent-gray; + position: absolute; + color: $tc-gray-40; display: none; z-index: 10; - left: 16.5px; + top: 19px; } .search-bar__clear { @@ -121,17 +119,19 @@ $active-icon-wrap-bg: #888894; } .search-icon-wrap { - width: 46px; - height: 40px; + height: 30px; + width: 36px; position: absolute; top: -1px; right: -1px; - background-color: $gray-light; + background-color: $tc-gray-40; border-top-right-radius: 4px; border-bottom-right-radius: 4px; .search-bar__icon { position: absolute; + width: 17px; + height: 17px; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -141,7 +141,7 @@ $active-icon-wrap-bg: #888894; .suggestions-panel { display: none; position: absolute; - top: 43px; + top: 30px; left: 0; width: 100%; z-index: 1000; @@ -155,4 +155,4 @@ $active-icon-wrap-bg: #888894; } } } -} \ No newline at end of file +} diff --git a/components/SearchBar/ico-mobile-search-selected.svg b/components/SearchBar/ico-mobile-search-selected.svg index 6bf51cd82..bc9981dd8 100644 --- a/components/SearchBar/ico-mobile-search-selected.svg +++ b/components/SearchBar/ico-mobile-search-selected.svg @@ -4,7 +4,7 @@ ico-mobile-search-selected Created with Sketch. - + diff --git a/components/SearchBar/icon-search.png b/components/SearchBar/icon-search.png new file mode 100644 index 000000000..b624a1d13 Binary files /dev/null and b/components/SearchBar/icon-search.png differ diff --git a/components/SearchBar/x-mark.svg b/components/SearchBar/x-mark.svg index 6c043bb74..e0b2c62ed 100644 --- a/components/SearchBar/x-mark.svg +++ b/components/SearchBar/x-mark.svg @@ -4,7 +4,7 @@ x-mark Created with Sketch. - + diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index 98b4eba6f..e1c7e9aee 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -83,7 +83,7 @@ class SearchSuggestions extends Component { const popularSearch = !popularList ? '' :(
- +
Popular
@@ -100,7 +100,11 @@ class SearchSuggestions extends Component { { 'empty-state' : recentList && !popularList } ) - return ( + const hide = this.props.hideSuggestionsWhenEmpty && + (!recentList || !recentList.length) && + (!popularList || !popularList.length) + + return hide ? (
) : (
{ popularSearch } { recentSearches } @@ -110,16 +114,20 @@ class SearchSuggestions extends Component { } SearchSuggestions.propTypes = { + hideWhenEmpty : PropTypes.bool, onSuggestionSelect : PropTypes.func.isRequired, recentSearch : PropTypes.array, popularSearch : PropTypes.array, - searchTerm : PropTypes.string + searchTerm : PropTypes.string, + showPopularSearchHeader: PropTypes.bool } SearchSuggestions.defaultProps = { + hideWhenEmpty : true, recentSearch : [], popularSearch : [], - searchTerm : '' + searchTerm : '', + showPopularSearchHeader: true } -export default SearchSuggestions \ No newline at end of file +export default SearchSuggestions diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 52668c273..e6220d1c4 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,16 +1,16 @@ -@import 'topcoder/tc-includes'; +@import 'tc-includes'; .SearchSuggestions { margin-bottom: 30px; - background-color: $white; - border: 1px solid $gray-dark; + background-color: white; + border: 1px solid $tc-gray-30; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); border-radius: 2px; - min-height: 303px; + // min-height: 303px; position: relative; .panel-header { - background-color: $gray-lighter; + background-color: $tc-gray-neutral-light; position: relative; height: 36px; padding-left: 14px; @@ -18,7 +18,7 @@ .label { font-size: 12px; line-height: 14px; - color: $gray-darker; + color: $tc-gray-30; position: relative; } @@ -37,7 +37,7 @@ a, a:visited { font-size: 12px; line-height: 14px; - color: $gray-darker; + color: $tc-gray-30; background-color: transparent; border: 0px; outline: 0px; @@ -55,7 +55,7 @@ .recent-search-panel-action { a, a:hover, a:active { - color: $dark-blue; + color: $tc-dark-blue; border: 0px; outline: 0px; } @@ -66,10 +66,10 @@ .panel-body { border: none; padding: 0; - padding-bottom: 5px; + // padding-bottom: 5px; li.selected { - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; } .StandardListItem { @@ -80,7 +80,7 @@ max-height: 36px; .label { - color: $accent-gray-dark; + color: $tc-gray-90; font-size: 16px; line-height: 30px; white-space: nowrap; @@ -92,7 +92,7 @@ } .StandardListItem:hover { - background-color: $gray-light; + background-color: $tc-gray-neutral-dark; } @@ -101,8 +101,8 @@ display:block; height: 40px; padding: 14px 15px; - background-color: $primary-lighter; - color: $accent-gray-dark; + background-color: $tc-dark-blue-10; + color: $tc-gray-90; font-size: 12px; line-height: 14px; position: absolute; @@ -111,12 +111,12 @@ outline: 0px none; white-space: nowrap; text-overflow: ellipsis; - overflow-x: hidden; + overflow: hidden; } .footer-link:hover, .footer-link:active { - background-color: $primary-light; - color: $black; + background-color: $tc-dark-blue-30; + color: $tc-black; border: 0px none; outline: 0px none; } @@ -127,4 +127,4 @@ .panel-body { padding-bottom: 45px; } -} \ No newline at end of file +} diff --git a/components/SwitchButton/SwitchButton.jsx b/components/SwitchButton/SwitchButton.jsx new file mode 100644 index 000000000..0c83e86cd --- /dev/null +++ b/components/SwitchButton/SwitchButton.jsx @@ -0,0 +1,15 @@ +import React from 'react' +require('./SwitchButton.scss') +const SwitchButton = ({label, ...props}) => { + return ( +
+ +
+ ) +} + +export default SwitchButton diff --git a/components/SwitchButton/SwitchButton.scss b/components/SwitchButton/SwitchButton.scss new file mode 100644 index 000000000..6b0aca522 --- /dev/null +++ b/components/SwitchButton/SwitchButton.scss @@ -0,0 +1,73 @@ +@import 'tc-includes'; + +.SwitchButton { + position: relative; + .label{ + width: 92px; + line-height: 20px; + font-size: 12px; + @include roboto; + color: $tc-gray-60; + float: left; + } + label{ + float: left; + margin: 0; + padding: 0; + display: block; + height: 20px; + margin-top: 5px; + } + input[type="checkbox"] { + max-height: 0; + max-width: 0; + opacity: 0; + margin: 0; + position: absolute; + z-index:-1; + &:checked + i:before { + width: 35px; + background: $tc-dark-blue-90; + } + &:checked + i:after { + left: 18px; + } + } + i { + display: inline-block; + position: relative; + text-indent: 60px; + height: 20px; + width: 35px; + border-radius: 10px; + margin: 0; + padding: 0; + background: $tc-gray-40; + float: left; + &:before { + content: ""; + position: absolute; + display: block; + height: 20px; + width: 20px; + top: 0; + left: 0; + border-radius: 10px; + background: $tc-gray-40; + -webkit-transition: .25s ease-in-out; + } + &:after { + content: ""; + position: absolute; + display: block; + height: 14px; + width: 14px; + top: 3px; + left: 3px; + border-radius: 7px; + background: $tc-white; + cursor: pointer; + -webkit-transition: .25s ease-in-out; + } + } +}