Skip to content

Commit 637af60

Browse files
mahestromahestro
authored
Merge pull request #90 from appirio-tech/community-fixes
Project search typeahead fix and styles clean up - connect-app issue #43
2 parents 3464ce0 + 24e0fef commit 637af60

File tree

11 files changed

+178
-67
lines changed

11 files changed

+178
-67
lines changed

‎components/Panel/Panel.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class Panel extends Component {
4242

4343
return (
4444
<div className="Panel">
45-
{header}
45+
{this.props.showHeader ? header : null}
4646
{body}
4747
</div>
4848
)
@@ -54,4 +54,8 @@ Panel.propTypes = {
5454
expandTrigger: PropTypes.string
5555
}
5656

57+
Panel.defaultProps = {
58+
showHeader : true
59+
}
60+
5761
export default Panel

‎components/Panel/Panel.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'topcoder/tc-includes';
1+
@import 'tc-includes';
22

33
$panel-header-text-color: #737380;
44
$panel-header-bg-color: #DFDFE1;
@@ -15,9 +15,12 @@ $panel-header-bg-color: #DFDFE1;
1515
}
1616

1717
.panel-body {
18-
border-left : 1px solid $accent-gray;
19-
border-right : 1px solid $accent-gray;
20-
border-bottom : 1px solid $accent-gray;
18+
border-left : 1px solid $tc-gray-40;
19+
border-right : 1px solid $tc-gray-40;
20+
border-bottom : 1px solid $tc-gray-40;
2121
padding: 10px;
22+
overflow-x: visible;
23+
overflow-y: scroll;
24+
max-height: 252px;
2225
}
23-
}
26+
}

‎components/SearchBar/SearchBar.jsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ class SearchBar extends Component {
2727
this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this)
2828
}
2929

30-
getQueryStringValue (key) {
30+
getQueryStringValue (key) {
3131
return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1'))
32-
}
32+
}
3333

3434
componentDidMount() {
3535
window.addEventListener('click', this.handleOutsideClick)
@@ -67,6 +67,7 @@ class SearchBar extends Component {
6767

6868
handleSuggestionsUpdate(requestNo, data) {
6969
if (requestNo === this.state.maxRequestNo) {
70+
console.log('SUGGESTIONS', data)
7071
this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null})
7172
}
7273
}
@@ -102,6 +103,8 @@ class SearchBar extends Component {
102103
this.refs.searchValue.value = null
103104
this.setState({ searchValue: this.refs.searchValue.value })
104105
this.setState({ searchState: 'empty' })
106+
this.setState({ suggestions: false })
107+
this.props.onClearSearch()
105108
}
106109

107110
onKeyUp(evt) {
@@ -190,14 +193,14 @@ class SearchBar extends Component {
190193

191194
const results = this.state.loading === true
192195
? <div className="loading-suggestions"><Loader /></div>
193-
: <SearchSuggestions recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } onSuggestionSelect={ this.handleSuggestionSelect } />
196+
: <SearchSuggestions hideSuggestionsWhenEmpty={ this.props.hideSuggestionsWhenEmpty } recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } showPopularSearchHeader={ this.props.showPopularSearchHeader } onSuggestionSelect={ this.handleSuggestionSelect } />
194197
return (
195198
<div className={ sbClasses }>
196-
<input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
197199
<span className="search-typeahead-text">{ typeaheadText }</span>
200+
<input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
198201
<img className="search-bar__clear" src={ require('./x-mark.svg') } onClick={ this.clearSearch }/>
199202
<div className="search-icon-wrap" onClick={ this.search }>
200-
<img className="search-bar__icon" src={ require('./ico-mobile-search-selected.svg') } />
203+
<img className="search-bar__icon" src={ require('./icon-search.png') } />
201204
</div>
202205
<div className="suggestions-panel">
203206
{results}
@@ -208,17 +211,22 @@ class SearchBar extends Component {
208211
}
209212
}
210213

211-
212214
SearchBar.propTypes = {
215+
hideSuggestionsWhenEmpty: PropTypes.func.bool,
213216
onSearch : PropTypes.func.isRequired,
217+
onClearSearch : PropTypes.func,
214218
onTermChange : PropTypes.func.isRequired,
215219
recentTerms : PropTypes.array,
216-
searchTermKey: PropTypes.string
220+
searchTermKey: PropTypes.string,
221+
showPopularSearchHeader: PropTypes.bool
217222
}
218223

219224
SearchBar.defaultProps = {
225+
hideSuggestionsWhenEmpty: false,
220226
recentTerms : [],
221-
searchTermKey : 'q'
227+
searchTermKey : 'q',
228+
onClearSearch : () => {},
229+
showPopularSearchHeader: true
222230
}
223231

224232
export default SearchBar

‎components/SearchBar/SearchBar.scss‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
@import "topcoder/tc-includes";
2-
3-
$border-color: #D8D8DB;
4-
$active-icon-wrap-bg: #888894;
1+
@import 'tc-includes';
52

63
.SearchBar {
7-
background-color: $white;
4+
@include roboto;
5+
background-color: white;
86
height: 40px;
97
width: 100%;
10-
border: 1px solid $border-color;
8+
border: 1px solid $tc-gray-20;
119
border-radius: 4px;
1210
position: relative;
1311
padding-left: 15px;
@@ -20,22 +18,19 @@ $active-icon-wrap-bg: #888894;
2018
}
2119

2220
&.state-empty:before {
23-
content: "Search Topcoder for challenges, people or content";
21+
content: "Search for projects";
2422
position: absolute;
2523
left: 15px;
2624
top: 50%;
25+
text-align: left;
2726
transform: translateY(-50%);
28-
color: $accent-gray;
29-
font-size: 15px;
27+
color: $tc-gray-40;
28+
font-size: 13px;
3029
line-height: 20px;
3130
width: 75%;
3231
white-space: nowrap;
3332
overflow-x: hidden;
3433
text-overflow: ellipsis;
35-
36-
@media screen and (max-width: 768px) {
37-
content: "Search Topcoder";
38-
}
3934
}
4035

4136
&.state-focused:before,
@@ -44,15 +39,14 @@ $active-icon-wrap-bg: #888894;
4439
}
4540

4641
&.state-focused {
47-
border-color: $accent-gray;
42+
border-color: $tc-gray-40;
4843

4944
.search-typeahead-text {
5045
display: block;
5146
}
5247

5348
.search-icon-wrap {
5449
cursor: pointer;
55-
background-color: $active-icon-wrap-bg;
5650
}
5751

5852
.suggestions-panel {
@@ -61,15 +55,15 @@ $active-icon-wrap-bg: #888894;
6155
}
6256

6357
&.state-filled {
64-
border-color: $border-color;
58+
border-color: $tc-gray-20;
6559

6660
.search-typeahead-text {
6761
display: none;
6862
}
6963

7064
.search-icon-wrap {
7165
cursor: pointer;
72-
background-color: $active-icon-wrap-bg;
66+
background-color: $tc-gray-50;
7367
}
7468

7569
.suggestions-panel {
@@ -79,20 +73,23 @@ $active-icon-wrap-bg: #888894;
7973

8074
.search-bar__text,
8175
.search-typeahead-text {
82-
font-family: "Roboto", Arial, Helvetica, sans-serif;
76+
@include roboto;
8377
outline: 0px;
8478
border: 0px none;
8579
font-size: 17px;
86-
color: $accent-gray-dark;
80+
color: $tc-gray-90;
8781
line-height: 20px;
88-
width: 90%;
82+
// NOTE: If uncommented, it causes problems with the proper alignment of
83+
// the typeahead text.
84+
// width: calc(100% - 15px - 46px);
8985
position: absolute;
9086
left: 15px;
9187
top: 50%;
9288
transform: translateY(-50%);
93-
background-color: transparent;
89+
background-color: transparent !important;
9490
z-index: 20;
9591
padding-left: 0px;
92+
height: 30px;
9693
}
9794

9895
.search-bar__text {
@@ -105,10 +102,11 @@ $active-icon-wrap-bg: #888894;
105102
}
106103

107104
.search-typeahead-text {
108-
color: $accent-gray;
105+
position: absolute;
106+
color: $tc-gray-40;
109107
display: none;
110108
z-index: 10;
111-
left: 16.5px;
109+
top: 19px;
112110
}
113111

114112
.search-bar__clear {
@@ -121,17 +119,19 @@ $active-icon-wrap-bg: #888894;
121119
}
122120

123121
.search-icon-wrap {
124-
width: 46px;
125-
height: 40px;
122+
height: 30px;
123+
width: 36px;
126124
position: absolute;
127125
top: -1px;
128126
right: -1px;
129-
background-color: $gray-light;
127+
background-color: $tc-gray-40;
130128
border-top-right-radius: 4px;
131129
border-bottom-right-radius: 4px;
132130

133131
.search-bar__icon {
134132
position: absolute;
133+
width: 17px;
134+
height: 17px;
135135
top: 50%;
136136
left: 50%;
137137
transform: translate(-50%, -50%);
@@ -141,7 +141,7 @@ $active-icon-wrap-bg: #888894;
141141
.suggestions-panel {
142142
display: none;
143143
position: absolute;
144-
top: 43px;
144+
top: 30px;
145145
left: 0;
146146
width: 100%;
147147
z-index: 1000;
@@ -155,4 +155,4 @@ $active-icon-wrap-bg: #888894;
155155
}
156156
}
157157
}
158-
}
158+
}

‎components/SearchBar/ico-mobile-search-selected.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎components/SearchBar/icon-search.png‎

1.57 KB
Loading

‎components/SearchBar/x-mark.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎components/SearchSuggestions/SearchSuggestions.jsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ class SearchSuggestions extends Component {
8383

8484
const popularSearch = !popularList ? '' :(
8585
<div className="popular-search-suggestions">
86-
<Panel>
86+
<Panel showHeader={this.props.showPopularSearchHeader}>
8787
<div className="panel-header">
8888
<div className="label">Popular</div>
8989
</div>
@@ -100,7 +100,11 @@ class SearchSuggestions extends Component {
100100
{ 'empty-state' : recentList && !popularList }
101101
)
102102

103-
return (
103+
const hide = this.props.hideSuggestionsWhenEmpty &&
104+
(!recentList || !recentList.length) &&
105+
(!popularList || !popularList.length)
106+
107+
return hide ? (<div></div>) : (
104108
<div className={ ssClasses }>
105109
{ popularSearch }
106110
{ recentSearches }
@@ -110,16 +114,20 @@ class SearchSuggestions extends Component {
110114
}
111115

112116
SearchSuggestions.propTypes = {
117+
hideWhenEmpty : PropTypes.bool,
113118
onSuggestionSelect : PropTypes.func.isRequired,
114119
recentSearch : PropTypes.array,
115120
popularSearch : PropTypes.array,
116-
searchTerm : PropTypes.string
121+
searchTerm : PropTypes.string,
122+
showPopularSearchHeader: PropTypes.bool
117123
}
118124

119125
SearchSuggestions.defaultProps = {
126+
hideWhenEmpty : true,
120127
recentSearch : [],
121128
popularSearch : [],
122-
searchTerm : ''
129+
searchTerm : '',
130+
showPopularSearchHeader: true
123131
}
124132

125-
export default SearchSuggestions
133+
export default SearchSuggestions

0 commit comments

Comments
 (0)