Skip to content

Commit 137a5c5

Browse files
mahestromahestro
authored
Merge pull request #93 from appirio-tech/revert-90-community-fixes
Revert "Project search typeahead fix and styles clean up - connect-app issue #43"
2 parents 637af60 + 4ac1241 commit 137a5c5

File tree

11 files changed

+67
-178
lines changed

11 files changed

+67
-178
lines changed

‎components/Panel/Panel.jsx‎

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

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

57-
Panel.defaultProps = {
58-
showHeader : true
59-
}
60-
6157
export default Panel

‎components/Panel/Panel.scss‎

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

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

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

‎components/SearchBar/SearchBar.jsx‎

Lines changed: 8 additions & 16 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,7 +67,6 @@ class SearchBar extends Component {
6767

6868
handleSuggestionsUpdate(requestNo, data) {
6969
if (requestNo === this.state.maxRequestNo) {
70-
console.log('SUGGESTIONS', data)
7170
this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null})
7271
}
7372
}
@@ -103,8 +102,6 @@ class SearchBar extends Component {
103102
this.refs.searchValue.value = null
104103
this.setState({ searchValue: this.refs.searchValue.value })
105104
this.setState({ searchState: 'empty' })
106-
this.setState({ suggestions: false })
107-
this.props.onClearSearch()
108105
}
109106

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

194191
const results = this.state.loading === true
195192
? <div className="loading-suggestions"><Loader /></div>
196-
: <SearchSuggestions hideSuggestionsWhenEmpty={ this.props.hideSuggestionsWhenEmpty } recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } showPopularSearchHeader={ this.props.showPopularSearchHeader } onSuggestionSelect={ this.handleSuggestionSelect } />
193+
: <SearchSuggestions recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } onSuggestionSelect={ this.handleSuggestionSelect } />
197194
return (
198195
<div className={ sbClasses }>
199-
<span className="search-typeahead-text">{ typeaheadText }</span>
200196
<input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
197+
<span className="search-typeahead-text">{ typeaheadText }</span>
201198
<img className="search-bar__clear" src={ require('./x-mark.svg') } onClick={ this.clearSearch }/>
202199
<div className="search-icon-wrap" onClick={ this.search }>
203-
<img className="search-bar__icon" src={ require('./icon-search.png') } />
200+
<img className="search-bar__icon" src={ require('./ico-mobile-search-selected.svg') } />
204201
</div>
205202
<div className="suggestions-panel">
206203
{results}
@@ -211,22 +208,17 @@ class SearchBar extends Component {
211208
}
212209
}
213210

211+
214212
SearchBar.propTypes = {
215-
hideSuggestionsWhenEmpty: PropTypes.func.bool,
216213
onSearch : PropTypes.func.isRequired,
217-
onClearSearch : PropTypes.func,
218214
onTermChange : PropTypes.func.isRequired,
219215
recentTerms : PropTypes.array,
220-
searchTermKey: PropTypes.string,
221-
showPopularSearchHeader: PropTypes.bool
216+
searchTermKey: PropTypes.string
222217
}
223218

224219
SearchBar.defaultProps = {
225-
hideSuggestionsWhenEmpty: false,
226220
recentTerms : [],
227-
searchTermKey : 'q',
228-
onClearSearch : () => {},
229-
showPopularSearchHeader: true
221+
searchTermKey : 'q'
230222
}
231223

232224
export default SearchBar

‎components/SearchBar/SearchBar.scss‎

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

36
.SearchBar {
4-
@include roboto;
5-
background-color: white;
7+
background-color: $white;
68
height: 40px;
79
width: 100%;
8-
border: 1px solid $tc-gray-20;
10+
border: 1px solid $border-color;
911
border-radius: 4px;
1012
position: relative;
1113
padding-left: 15px;
@@ -18,19 +20,22 @@
1820
}
1921

2022
&.state-empty:before {
21-
content: "Search for projects";
23+
content: "Search Topcoder for challenges, people or content";
2224
position: absolute;
2325
left: 15px;
2426
top: 50%;
25-
text-align: left;
2627
transform: translateY(-50%);
27-
color: $tc-gray-40;
28-
font-size: 13px;
28+
color: $accent-gray;
29+
font-size: 15px;
2930
line-height: 20px;
3031
width: 75%;
3132
white-space: nowrap;
3233
overflow-x: hidden;
3334
text-overflow: ellipsis;
35+
36+
@media screen and (max-width: 768px) {
37+
content: "Search Topcoder";
38+
}
3439
}
3540

3641
&.state-focused:before,
@@ -39,14 +44,15 @@
3944
}
4045

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

4449
.search-typeahead-text {
4550
display: block;
4651
}
4752

4853
.search-icon-wrap {
4954
cursor: pointer;
55+
background-color: $active-icon-wrap-bg;
5056
}
5157

5258
.suggestions-panel {
@@ -55,15 +61,15 @@
5561
}
5662

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

6066
.search-typeahead-text {
6167
display: none;
6268
}
6369

6470
.search-icon-wrap {
6571
cursor: pointer;
66-
background-color: $tc-gray-50;
72+
background-color: $active-icon-wrap-bg;
6773
}
6874

6975
.suggestions-panel {
@@ -73,23 +79,20 @@
7379

7480
.search-bar__text,
7581
.search-typeahead-text {
76-
@include roboto;
82+
font-family: "Roboto", Arial, Helvetica, sans-serif;
7783
outline: 0px;
7884
border: 0px none;
7985
font-size: 17px;
80-
color: $tc-gray-90;
86+
color: $accent-gray-dark;
8187
line-height: 20px;
82-
// NOTE: If uncommented, it causes problems with the proper alignment of
83-
// the typeahead text.
84-
// width: calc(100% - 15px - 46px);
88+
width: 90%;
8589
position: absolute;
8690
left: 15px;
8791
top: 50%;
8892
transform: translateY(-50%);
89-
background-color: transparent !important;
93+
background-color: transparent;
9094
z-index: 20;
9195
padding-left: 0px;
92-
height: 30px;
9396
}
9497

9598
.search-bar__text {
@@ -102,11 +105,10 @@
102105
}
103106

104107
.search-typeahead-text {
105-
position: absolute;
106-
color: $tc-gray-40;
108+
color: $accent-gray;
107109
display: none;
108110
z-index: 10;
109-
top: 19px;
111+
left: 16.5px;
110112
}
111113

112114
.search-bar__clear {
@@ -119,19 +121,17 @@
119121
}
120122

121123
.search-icon-wrap {
122-
height: 30px;
123-
width: 36px;
124+
width: 46px;
125+
height: 40px;
124126
position: absolute;
125127
top: -1px;
126128
right: -1px;
127-
background-color: $tc-gray-40;
129+
background-color: $gray-light;
128130
border-top-right-radius: 4px;
129131
border-bottom-right-radius: 4px;
130132

131133
.search-bar__icon {
132134
position: absolute;
133-
width: 17px;
134-
height: 17px;
135135
top: 50%;
136136
left: 50%;
137137
transform: translate(-50%, -50%);
@@ -141,7 +141,7 @@
141141
.suggestions-panel {
142142
display: none;
143143
position: absolute;
144-
top: 30px;
144+
top: 43px;
145145
left: 0;
146146
width: 100%;
147147
z-index: 1000;
@@ -155,4 +155,4 @@
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
Binary file not shown.

‎components/SearchBar/x-mark.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎components/SearchSuggestions/SearchSuggestions.jsx‎

Lines changed: 5 additions & 13 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 showHeader={this.props.showPopularSearchHeader}>
86+
<Panel>
8787
<div className="panel-header">
8888
<div className="label">Popular</div>
8989
</div>
@@ -100,11 +100,7 @@ class SearchSuggestions extends Component {
100100
{ 'empty-state' : recentList && !popularList }
101101
)
102102

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

116112
SearchSuggestions.propTypes = {
117-
hideWhenEmpty : PropTypes.bool,
118113
onSuggestionSelect : PropTypes.func.isRequired,
119114
recentSearch : PropTypes.array,
120115
popularSearch : PropTypes.array,
121-
searchTerm : PropTypes.string,
122-
showPopularSearchHeader: PropTypes.bool
116+
searchTerm : PropTypes.string
123117
}
124118

125119
SearchSuggestions.defaultProps = {
126-
hideWhenEmpty : true,
127120
recentSearch : [],
128121
popularSearch : [],
129-
searchTerm : '',
130-
showPopularSearchHeader: true
122+
searchTerm : ''
131123
}
132124

133-
export default SearchSuggestions
125+
export default SearchSuggestions

0 commit comments

Comments
 (0)