-
+
diff --git a/components/Loader/LoaderStyle.scss b/components/Loader/LoaderStyle.scss
index db923a85e..4468d4958 100644
--- a/components/Loader/LoaderStyle.scss
+++ b/components/Loader/LoaderStyle.scss
@@ -10,14 +10,14 @@
justify-content: center;
align-items : center;
- .container {
+ .Loader__container {
padding : 25px;
// background-color: $primary-color;
opacity : .98;
border-radius : 10px;
}
- .loader {
+ .Loader__loader {
width: 50px;
height: 50px;
border-top : 10px solid $grey-light;
@@ -30,8 +30,8 @@
-webkit-animation: load8 .8s infinite linear;
animation : load8 .8s infinite linear;
}
- .loader,
- .loader:after {
+ .Loader__loader,
+ .Loader__loader:after {
border-radius: 50%;
}
diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx
index 112e80da1..919bd2ec9 100644
--- a/components/MenuBar/MenuBar.jsx
+++ b/components/MenuBar/MenuBar.jsx
@@ -30,7 +30,7 @@ export default class MenuBar extends Component {
const itemClass = classNames({
[orientation]: true,
mobile: this.state.mobile,
- selected: window.location.href.indexOf(item.link) !== -1
+ selected: item.selected || (item.regex && window.location.href.match(item.regex) !== null)
})
const linkTarget = item.target || '_self'
diff --git a/components/MenuBar/MenuBarExamples.jsx b/components/MenuBar/MenuBarExamples.jsx
index 72d37d6e1..58700351d 100644
--- a/components/MenuBar/MenuBarExamples.jsx
+++ b/components/MenuBar/MenuBarExamples.jsx
@@ -6,7 +6,7 @@ require('./MenuBarExamples.scss')
const primaryNavigationItems = [
{img: '../components/MenuBar/nav-community.svg', text: 'Community', link: '/community'},
{img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: '/compete', selected: true},
- {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: '/MenuBarExamples'}
+ {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: '/MenuBarExamples', regex: '/MenuBar*'}
]
const MenuBarExample = () => (
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
index 9392a2c19..b5f7b17cf 100755
--- a/components/Navbar/Navbar.jsx
+++ b/components/Navbar/Navbar.jsx
@@ -1,35 +1,99 @@
require('./Navbar.scss')
import MenuBar from '../MenuBar/MenuBar'
-import React, { Component } from 'react'
+import React, {PropTypes, Component} from 'react'
import SearchBar from '../SearchBar/SearchBar'
import QuickLinks from '../QuickLinks/QuickLinks'
import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
+import TopcoderLogo from '../Icons/TopcoderLogo'
+import TopcoderMobileLogo from '../Icons/TopcoderMobileLogo'
+import HamburgerIcon from '../Icons/HamburgerIcon'
+import MagnifyGlassIcon from '../Icons/MagnifyGlassIcon'
const primaryNavigationItems = [
- {img: '../components/MenuBar/nav-community.svg', text: 'Community', link: 'javascript:;'},
- {img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: 'javascript:;', selected: true},
- {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: 'javascript:;'}
+ {img: require('./nav-community.svg'), text: 'Community', link: '/community', regex: '/community?\?'},
+ {img: require('./nav-compete.svg'), text: 'Compete', link: '/compete', regex: '/compete?\?'},
+ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn', regex: '/learn?\?'}
]
+// properties: username, userImage, domain, mobileMenuUrl, mobileSearchUrl, searchSuggestionsFunc
+// searchSuggestionsFunc should return a Promise object
+
class Navbar extends Component {
+
+ constructor(props) {
+ super(props)
+ this.handleTermChange = this.handleTermChange.bind(this)
+ this.handleMobileClick = this.handleMobileClick.bind(this)
+ this.handleSearch = this.handleSearch.bind(this)
+ this.state = { recentTerms: [] }
+ }
+
+ handleTermChange(oldTerm, searchTerm, reqNo, callback) {
+ // TODO should we check for the return value of the search suggestion function to be promise?
+ this.props.searchSuggestionsFunc.apply(this, [searchTerm])
+ .then(data => {
+ callback.apply(null, [reqNo, data])
+ })
+ .catch(error => {
+ callback.apply(null, [reqNo, [], error])
+ })
+ }
+
+ handleSearch(searchTerm) {
+ this.props.onSearch.apply(this, [searchTerm])
+ }
+
+ handleMobileClick(se) {
+ const mobileMenuLink = se.target.querySelector('.mobile-wrap > a')
+ if (mobileMenuLink) {
+ mobileMenuLink.click()
+ }
+ }
+
render() {
+ const username = this.props.username
+ const userImage = this.props.userImage
+ const domain = this.props.domain
+ const mobileMenuUrl = this.props.mobileMenuUrl
+ const mobileSearchUrl = this.props.mobileSearchUrl
+ const homePageUrl = '//www.' + domain
return (
+
-
-
-
-
+
+
diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx
index 62a39f926..18b4ee291 100644
--- a/components/SearchBar/SearchBar.jsx
+++ b/components/SearchBar/SearchBar.jsx
@@ -1,34 +1,101 @@
require('./SearchBar.scss')
-import React, {Component} from 'react'
+import React, {Component, PropTypes} from 'react'
+import ReactDOM from 'react-dom'
import SearchSuggestions from '../SearchSuggestions/SearchSuggestions'
+import Loader from '../Loader/Loader'
+import classNames from 'classnames'
//states: empty, filled, focused
class SearchBar extends Component {
constructor(props) {
super(props)
- this.state = { searchState: 'empty' }
+ const initialTerm = this.getQueryStringValue(props.searchTermKey)
+ this.state = {
+ searchState: initialTerm.length > 0 ? 'filled' : 'empty',
+ suggestions: [],
+ searchValue: initialTerm
+ }
this.onFocus = this.onFocus.bind(this)
- this.onBlur = this.onBlur.bind(this)
+ this.onChange = this.onChange.bind(this)
this.onKeyUp = this.onKeyUp.bind(this)
this.clearSearch = this.clearSearch.bind(this)
+ this.search = this.search.bind(this)
+ this.handleSuggestionSelect = this.handleSuggestionSelect.bind(this)
+ this.handleOutsideClick = this.handleOutsideClick.bind(this)
+ this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this)
+ }
+
+ getQueryStringValue (key) {
+ return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1'))
+ }
+
+ componentDidMount() {
+ window.addEventListener('click', this.handleOutsideClick)
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('click', this.handleOutsideClick)
+ }
+
+ handleOutsideClick(evt) {
+ let t = evt.target
+ let i = 0
+ const searchBarNode = ReactDOM.findDOMNode(this)
+ let clickedInside = false
+ while(t !== null && i < 10) {
+ i++
+ if (t === searchBarNode) {
+ clickedInside = true
+ break
+ }
+ t = t.parentNode
+ }
+ if (!clickedInside) {
+ if(this.state.searchValue) {
+ this.setState({ searchState: 'filled' })
+ } else {
+ this.setState({ searchState: 'empty' })
+ }
+ }
}
onFocus() {
this.setState({ searchState: 'focused' })
}
- onBlur() {
- if(this.state.searchValue) {
- this.setState({ searchState: 'filled' })
- } else {
- this.setState({ searchState: 'empty' })
+ handleSuggestionsUpdate(requestNo, data) {
+ if (requestNo === this.state.maxRequestNo) {
+ this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null})
}
}
- onKeyUp() {
- this.setState({ searchValue: this.refs.searchValue.value })
+ onChange() {
+ const oldTerm = this.state.searchValue
+ const newTerm = this.refs.searchValue.value ? this.refs.searchValue.value.trim() : ''
+ this.setState(
+ function(prevState) {
+ const rc = prevState.requestNo ? prevState.requestNo + 1 : 1
+ return {
+ searchValue: this.refs.searchValue.value,
+ requestNo: rc,
+ maxRequestNo: rc,
+ loading: newTerm.length > 0,
+ searchState: 'focused'
+ }
+ },
+ function() {
+ if (newTerm.length > 0) {
+ this.props.onTermChange.apply(null, [
+ oldTerm,
+ newTerm,
+ this.state.requestNo,
+ this.handleSuggestionsUpdate
+ ])
+ }
+ }
+ )
}
clearSearch() {
@@ -37,59 +104,121 @@ class SearchBar extends Component {
this.setState({ searchState: 'empty' })
}
+ onKeyUp(evt) {
+ const eventKey = evt.keyCode
+ evt.stopPropagation()
+ evt.preventDefault()
+ // if return is pressed
+ if (eventKey === 13) {
+ this.setState({ searchState: 'filled' }, function() {
+ this.search()
+ })
+ } else if (eventKey === 39) { // right arrow key is pressed
+ const suggestion = this.state.suggestions[0]
+ if (suggestion) {
+ this.refs.searchValue.value = suggestion
+ // trigger the change event handler
+ this.onChange()
+ }
+ } else if (eventKey === 38) { // up arrow key
+ const currSelectedIdx = this.state.selectedSuggestionIdx
+ if (currSelectedIdx) { // index is none of (undefined, null, 0)
+ const suggestionIdx = currSelectedIdx - 1
+ const suggestion = this.state.suggestions[suggestionIdx]
+ this.refs.searchValue.value = suggestion
+ this.setState({
+ selectedSuggestionIdx : suggestionIdx,
+ searchValue: suggestion
+ })
+ }
+ } else if (eventKey === 40) { // down arrow key
+ const currSelectedIdx = this.state.selectedSuggestionIdx
+ // index is none of (undefined, null, 0)
+ if (typeof currSelectedIdx === 'undefined'
+ || currSelectedIdx === null
+ || this.state.suggestions.length > currSelectedIdx + 1) {
+ const suggestionIdx = typeof currSelectedIdx === 'number' ? currSelectedIdx + 1 : 0
+ const suggestion = this.state.suggestions[suggestionIdx]
+ this.refs.searchValue.value = suggestion
+ this.setState({
+ selectedSuggestionIdx: suggestionIdx,
+ searchValue: suggestion
+ })
+ }
+ }
+ }
+
+ handleSuggestionSelect(selectedTerm) {
+ this.setState({ searchValue: selectedTerm, searchState: 'filled' }, function() {
+ this.search()
+ })
+ }
+
+ search() {
+ const searchTerm = this.state.searchValue ? this.state.searchValue.trim() : ''
+ if(searchTerm.length > 0) {
+ this.props.onSearch.apply(this, [searchTerm])
+ }
+ }
+
render() {
- /* Sample JSON data */
- const recentList = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js']
- const popularList = ['Java', 'Javascript', 'CoffeeScript']
+ const recentList = this.props.recentTerms
+ const popularList = this.state.suggestions
const searchState = this.state.searchState
const searchValue = this.state.searchValue
- let classString = 'SearchBar'
let typeaheadText = ''
- let isPartial = false
- let popularForDisplay = []
if(searchValue) {
- for(let i=0; i{ searchValue }{ popularList[i].substring(searchValue.length) })
- }
}
-
} else {
- popularForDisplay = ''
typeaheadText = ''
}
- if(searchState === 'empty') {
- classString += ' state-empty'
- typeaheadText = ''
- } else if(searchState === 'focused') {
- classString += ' state-focused'
- } else if(searchState === 'filled') {
- classString += ' state-filled'
- }
+ const sbClasses = classNames('SearchBar', {
+ 'state-empty' : searchState === 'empty',
+ 'state-focused': searchState === 'focused',
+ 'state-filled' : searchState === 'filled'
+ })
+ const results = this.state.loading === true
+ ?
+
+ )
+ }
+ const challengeRender = (challenge) => {
+ return (
+ Handle: {member.handle}
+Rank: {member.rank}
+
+
+ )
+ }
+ const searchResults = this.props.results
+ let exactMatch = null
+ if (searchResults.member) {
+ exactMatch = Name: {challenge.name}
+Starte Date: {challenge.startDate}
+End Date: {challenge.endDate}
+Member
{ memberRender(searchResults.member) }Members
{ searchResults.members.map(memberRender) }Challenges
{ searchResults.challenges.map(challengeRender) }
+ { exactMatch }
+ { matchedMembers }
+ { matchedChallenges }
+
+ )
+ }
+}
+
+SearchResults.propTypes = {
+ memberMatch : PropTypes.object,
+ membersMatch : PropTypes.array,
+ challengesMatch : PropTypes.array
+}
+
+class NavbarExample extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {searchResults: {}}
+ this.search = this.search.bind(this)
+ }
+
+ search(searchTerm) {
+ let results = {}
+ if (searchTerm === 'Java') {
+ results = {
+ hasResults: true,
+ member: {
+ handle : 'Java',
+ color : 'blue',
+ rank : 1423
+ },
+ members: [{
+ handle : 'Javaone',
+ color : 'red',
+ rank : 2045
+ }, {
+ handle : 'ExpertJava',
+ color : 'yellow',
+ rank : 1608
+ }],
+ challenges: [{
+ name : 'Tags Lambda Service',
+ startDate : 'April 4, 2016',
+ endDate : 'April 20, 2016'
+ }, {
+ name : 'Member Search Service',
+ startDate : 'March 14, 2016',
+ endDate : 'March 27, 2016'
+ }]
+ }
+ }
+ this.setState({searchResults: results})
+ }
-const NavbarExample = () => (
-
+
+ )
+ }
+}
module.exports = NavbarExample
diff --git a/components/Navbar/NavbarExample.scss b/components/Navbar/NavbarExample.scss
new file mode 100644
index 000000000..abced894b
--- /dev/null
+++ b/components/Navbar/NavbarExample.scss
@@ -0,0 +1,15 @@
+@import "topcoder/tc-styles";
+
+.search-results {
+ .exact-match,
+ .members,
+ .challenges {
+ border-bottom: 1px solid $accent-gray;
+ margin: 10px 0px;
+ padding: 0px 10px 10px 10px;
+
+ h2 {
+ margin-bottom: 10px;
+ }
+ }
+}
diff --git a/components/Navbar/nav-community.svg b/components/Navbar/nav-community.svg
new file mode 100644
index 000000000..d3afe2b80
--- /dev/null
+++ b/components/Navbar/nav-community.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/components/Navbar/nav-compete.svg b/components/Navbar/nav-compete.svg
new file mode 100644
index 000000000..1e43d1940
--- /dev/null
+++ b/components/Navbar/nav-compete.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/components/Navbar/nav-learn.svg b/components/Navbar/nav-learn.svg
new file mode 100644
index 000000000..d45a64145
--- /dev/null
+++ b/components/Navbar/nav-learn.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/components/QuickLinks/QuickLinks.jsx b/components/QuickLinks/QuickLinks.jsx
index fcec8056d..94db46460 100644
--- a/components/QuickLinks/QuickLinks.jsx
+++ b/components/QuickLinks/QuickLinks.jsx
@@ -1,34 +1,32 @@
require('./QuickLinks.scss')
-import React, { Component } from 'react'
+import React from 'react'
import Dropdown from '../Dropdown/Dropdown'
import StandardListItem from '../StandardListItem/StandardListItem'
-class QuickLinks extends Component {
- render() {
- return (
- Logged In Example
+Non Logged In Example
+
+
+
-
- 
-
-
- )
- }
+const QuickLinks = ({domain}) => {
+ const orLink = '//software.' + domain
+ const arenaLink = '//arena.' + domain
+ const arenaAppletLink = '//' + domain + '/contest/arena/ContestAppletProd.jnlp'
+ return (
+ -
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
+
+
+
+
+ )
}
export default QuickLinks
\ No newline at end of file
diff --git a/components/QuickLinks/QuickLinks.scss b/components/QuickLinks/QuickLinks.scss
index 18238b450..8f1490c84 100644
--- a/components/QuickLinks/QuickLinks.scss
+++ b/components/QuickLinks/QuickLinks.scss
@@ -1,6 +1,6 @@
@import "topcoder/tc-includes";
-$logo-placeholder-bg: #B47DD6;
+$link-text-hover-color: #7A7F83;
.QuickLinks {
position: relative;
@@ -22,22 +22,22 @@ $logo-placeholder-bg: #B47DD6;
.dropdown-menu-list-item {
display: inline-block;
- cursor: pointer;
-
- .icon-placeholder {
- width: 30px;
- height: 30px;
- background-color: $logo-placeholder-bg;
- margin: 0 auto;
- margin-bottom: 6px;
- }
+ cursor: pointer;
.StandardListItem {
padding: 0;
+ &:active,
+ &:hover {
+ .label {
+ color: $link-text-hover-color;
+ }
+ }
+
.label {
font-size: 12px;
line-height: 26px;
+ color: $accent-gray-dark;
}
}
}
diff --git a/components/QuickLinks/QuickLinksExample.jsx b/components/QuickLinks/QuickLinksExample.jsx
index d7ff74f87..4a4727993 100644
--- a/components/QuickLinks/QuickLinksExample.jsx
+++ b/components/QuickLinks/QuickLinksExample.jsx
@@ -5,7 +5,7 @@ import QuickLinks from './QuickLinks'
const QuickLinksExample = () => (
-
+
-
+
+
+ -
+
+
+ -
+
+
+
-
)
diff --git a/components/QuickLinks/placeholder.svg b/components/QuickLinks/placeholder.svg
new file mode 100644
index 000000000..d3e7220e5
--- /dev/null
+++ b/components/QuickLinks/placeholder.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/components/Router/Router.jsx b/components/Router/Router.jsx
index 5d900da7b..f162f2c23 100644
--- a/components/Router/Router.jsx
+++ b/components/Router/Router.jsx
@@ -25,6 +25,8 @@ import SearchSuggestionsExamples from '../SearchSuggestions/SearchSuggestion
import SearchBarExample from '../SearchBar/SearchBarExamples.jsx'
import NavbarExample from '../Navbar/NavbarExample.jsx'
import TCFooterExamples from '../TCFooter/TCFooterExamples.jsx'
+import CarouselExamples from '../Carousel/CarouselExamples.jsx'
+import SubNavExamples from '../SubNav/SubNavExamples.jsx'
import TaggedValueExamples from '../TaggedValue/TaggedValueExamples.jsx'
import SubTrackDetailsExample from '../SubTrackDetails/SubTrackDetailsExample.jsx'
import PrizeExamples from '../Prize/PrizeExamples.jsx'
@@ -79,11 +81,15 @@ const Component = () => (
-
+
+
{ typeaheadText }
-
+
+ )
+ }
const recentSearches = !recentList ? '' : (
)
+ const ssClasses = classNames(
+ 'SearchSuggestions',
+ { 'empty-state' : recentList && !popularList }
+ )
return (
-
+
-
)
}
}
+
+SearchBar.propTypes = {
+ onSearch : PropTypes.func.isRequired,
+ onTermChange : PropTypes.func.isRequired,
+ recentTerms : PropTypes.array,
+ searchTermKey: PropTypes.string
+}
+
+SearchBar.defaultProps = {
+ recentTerms : [],
+ searchTermKey : 'q'
+}
+
export default SearchBar
diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss
index 6fb889678..63ce73fc0 100644
--- a/components/SearchBar/SearchBar.scss
+++ b/components/SearchBar/SearchBar.scss
@@ -51,10 +51,11 @@ $active-icon-wrap-bg: #888894;
}
.search-icon-wrap {
+ cursor: pointer;
background-color: $active-icon-wrap-bg;
}
- .SearchSuggestions {
+ .suggestions-panel {
display: block;
}
}
@@ -67,10 +68,11 @@ $active-icon-wrap-bg: #888894;
}
.search-icon-wrap {
+ cursor: pointer;
background-color: $active-icon-wrap-bg;
}
- .SearchSuggestions {
+ .suggestions-panel {
display: none;
}
}
@@ -90,6 +92,16 @@ $active-icon-wrap-bg: #888894;
transform: translateY(-50%);
background-color: transparent;
z-index: 20;
+ padding-left: 0px;
+ }
+
+ .search-bar__text {
+
+ &:hover,
+ &:focus {
+ border: none;
+ box-shadow: none;
+ }
}
.search-typeahead-text {
@@ -126,15 +138,21 @@ $active-icon-wrap-bg: #888894;
}
}
- .SearchSuggestions {
+ .suggestions-panel {
display: none;
position: absolute;
top: 43px;
left: 0;
width: 100%;
+ z-index: 1000;
+
+ .loading-suggestions {
+ }
- strong {
- font-weight: 600;
+ .SearchSuggestions {
+ strong {
+ font-weight: 600;
+ }
}
}
}
\ No newline at end of file
diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx
index 27b6957b0..d785914f5 100644
--- a/components/SearchBar/SearchBarExamples.jsx
+++ b/components/SearchBar/SearchBarExamples.jsx
@@ -1,8 +1,32 @@
import SearchBar from './SearchBar'
import React from 'react'
+const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js']
+
+const handleTermChange = (oldTerm, searchTerm, reqNo, callback) => {
+ const suggestions = []
+ setTimeout(() => {
+ if (searchTerm && 'java'.indexOf(searchTerm.toLowerCase()) !== -1) {
+ suggestions.push('Java')
+ suggestions.push('JavaScript')
+ } else if (searchTerm && 'javascript'.indexOf(searchTerm.toLowerCase()) !== -1) {
+ suggestions.push('JavaScript')
+ } else if (searchTerm && 'coffee'.indexOf(searchTerm.toLowerCase()) !== -1) {
+ suggestions.push('Coffee')
+ suggestions.push('CoffeeScript')
+ } else if (searchTerm && 'coffeescript'.indexOf(searchTerm.toLowerCase()) !== -1) {
+ suggestions.push('CoffeeScript')
+ }
+ callback.apply(null, [reqNo, suggestions])
+ }, Math.floor((Math.random() * 1000) + 800))
+}
+
+const search = (term) => {
+ console.log('Searched for term: ' + term)
+}
+
const SearchBarExamples = () => (
-
+ {results}
+
@@ -28,14 +67,10 @@ class SearchSuggestions extends Component {
-
- {
- !recentList ? '' : recentList.map((search, i) => {
- return
-
- {
- popularList.map((search, i) => {
- return
+
-
)
}
diff --git a/components/StandardListItem/StandardListItem.jsx b/components/StandardListItem/StandardListItem.jsx
index 6e0ff92ed..2e89f2aca 100644
--- a/components/StandardListItem/StandardListItem.jsx
+++ b/components/StandardListItem/StandardListItem.jsx
@@ -1,4 +1,4 @@
-import {PropTypes, Component } from 'react'
+import {PropTypes } from 'react'
import React from 'react'
require('./StandardListItemStyles.scss')
@@ -8,39 +8,45 @@ require('./StandardListItemStyles.scss')
// labelText: The text for the label
// placeIcon: defines the position of the icon. Either: top | left | right. Default to top
-class StandardListItem extends Component {
- constructor(props) {
- super(props)
- }
- render() {
- const classes = 'StandardListItem transition ' + this.props.placeIcon
- let label
- let icon
+const StandardListItem = ({showIcon, showLabel, imgSrc, labelText, linkUrl, linkTarget='_self', placeIcon='top'}) => {
+ const classes = 'StandardListItem transition ' + placeIcon
+ let label
+ let icon
+ let item
- if (this.props.showLabel){
- label = 
- }
+ if (showIcon) {
+ icon = 
+ }
- return (
)
diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx
new file mode 100644
index 000000000..68234a9d0
--- /dev/null
+++ b/components/SubNav/SubNav.jsx
@@ -0,0 +1,48 @@
+require('./SubNav.scss')
+
+import React from 'react'
+import Carousel from '../Carousel/Carousel'
+import StandardListItem from '../StandardListItem/StandardListItem'
+
+const tcSubNav = {
+ compete : [
+ {img: require('./placeholder.svg'), text: 'Design Challenges', link: '/challenges/design/active'},
+ {img: require('./placeholder.svg'), text: 'Development Challenges', link: '/challenges/develop/active'},
+ {img: require('./placeholder.svg'), text: 'Data Science Challenges', link: '/challenges/data/active'},
+ {img: require('./placeholder.svg'), text: 'Competitive Programming', link: process.env.ARENA_URL}
+ ],
+ learn : [
+ {img: require('./placeholder.svg'), text: 'Getting Started', link: '/getting-started'},
+ {img: require('./placeholder.svg'), text: 'Design Challenges', link: '/community/design'},
+ {img: require('./placeholder.svg'), text: 'Development Challenges', link: '/community/develop'},
+ {img: require('./placeholder.svg'), text: 'Data Science Challenges', link: '/community/data-science'},
+ {img: require('./placeholder.svg'), text: 'Competitive Programming', link: '/community/competitive programming/'}
+ ],
+ community : [
+ {img: require('./placeholder.svg'), text: 'Overview', link: '/community/members'},
+ {img: require('./placeholder.svg'), text: 'TCO16', link: process.env.TCO16_URL},
+ {img: require('./placeholder.svg'), text: 'Programs', link: '/community/member-overview'},
+ {img: require('./placeholder.svg'), text: 'Forums', link: process.env.FORUMS_APP_URL},
+ {img: require('./placeholder.svg'), text: 'Statistics', link: '/community/statistics'},
+ {img: require('./placeholder.svg'), text: 'Events', link: '/community/events'},
+ {img: require('./placeholder.svg'), text: 'Blog', link: '/blog'}
+ ]
+}
+
+const SubNav = ({ primaryMenu = 'compete' }) => {
+ const subNav = tcSubNav[primaryMenu]
+ const subNavMap = (item, idx) => {
+ return (
+
{ popularSearch }
{ recentSearches }
@@ -74,4 +109,17 @@ class SearchSuggestions extends Component {
}
}
+SearchSuggestions.propTypes = {
+ onSuggestionSelect : PropTypes.func.isRequired,
+ recentSearch : PropTypes.array,
+ popularSearch : PropTypes.array,
+ searchTerm : PropTypes.string
+}
+
+SearchSuggestions.defaultProps = {
+ recentSearch : [],
+ popularSearch : [],
+ searchTerm : ''
+}
+
export default SearchSuggestions
\ No newline at end of file
diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss
index 5658fc2a7..52668c273 100644
--- a/components/SearchSuggestions/SearchSuggestions.scss
+++ b/components/SearchSuggestions/SearchSuggestions.scss
@@ -68,6 +68,10 @@
padding: 0;
padding-bottom: 5px;
+ li.selected {
+ background-color: $gray-light;
+ }
+
.StandardListItem {
align-items: initial;
text-align: left;
@@ -83,6 +87,7 @@
text-overflow: ellipsis;
width: 95%;
overflow-x: hidden;
+ overflow-y: hidden;
}
}
diff --git a/components/SearchSuggestions/SearchSuggestionsExamples.jsx b/components/SearchSuggestions/SearchSuggestionsExamples.jsx
index a9ac097cb..48391bd78 100644
--- a/components/SearchSuggestions/SearchSuggestionsExamples.jsx
+++ b/components/SearchSuggestions/SearchSuggestionsExamples.jsx
@@ -4,12 +4,16 @@ import SearchSuggestions from './SearchSuggestions'
const recentList = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js']
const popularList = ['Java', 'Javascript', 'CoffeeScript']
+const handleSelection = (selectedTerm) => {
+ console.log('Selected term: ' + selectedTerm)
+}
+
const SearchSuggestionsExamples = () => {
return (
{this.props.labelText}
- } + if (showLabel) { + label ={labelText}
+ } - if (this.props.showIcon){ - icon ={label}{icon}
)
+ if (linkUrl) {
+ item =
+ {label}{icon}
+ } else {
+ item = {label}{icon}
}
+
+ return item
}
StandardListItem.propTypes = {
- showIcon : PropTypes.bool,
- showLabel : PropTypes.bool,
- imgSrc : PropTypes.string,
- labelText : PropTypes.node,
- placeIcon : PropTypes.string
+ showIcon : PropTypes.bool,
+ showLabel : PropTypes.bool,
+ imgSrc : PropTypes.string,
+ labelText : PropTypes.node,
+ linkUrl : PropTypes.string,
+ linkTarget : PropTypes.string,
+ placeIcon : PropTypes.string
}
StandardListItem.defaultProps = {
- showIcon: true,
- showLabel: true,
- placeIcon: 'top'
+ showIcon : true,
+ showLabel : true,
+ linkTarget : '_self',
+ placeIcon : 'top'
}
export default StandardListItem
diff --git a/components/StandardListItem/StandardListItemExamples.jsx b/components/StandardListItem/StandardListItemExamples.jsx
index f3b30c335..499ac6ccf 100644
--- a/components/StandardListItem/StandardListItemExamples.jsx
+++ b/components/StandardListItem/StandardListItemExamples.jsx
@@ -16,7 +16,7 @@ const StandardListItemExamples = () => (
Icon on the Right
-Icon Hidden
Label Hidden
With Link In Self
+With Link In New Tab
+Link: Icon on the Right
+Link: Icon on the Left
+
+
+ { subNav.map(subNavMap) }
+
+
+ )
+}
+
+export default SubNav
\ No newline at end of file
diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss
new file mode 100644
index 000000000..78fe29e69
--- /dev/null
+++ b/components/SubNav/SubNav.scss
@@ -0,0 +1,21 @@
+@import 'topcoder/tc-includes';
+
+$subnav-item-bg-color: #B47DD6;
+$subnav-item-text-color: #7A7F83;
+
+.SubNav {
+ background-color: $accent-gray-dark;
+
+ .StandardListItem {
+ padding: 20px 0px;
+
+ .label {
+ color: $subnav-item-text-color;
+ }
+
+ .label:active,
+ .label:hover {
+ color: $white;
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/SubNav/SubNavExamples.jsx b/components/SubNav/SubNavExamples.jsx
new file mode 100644
index 000000000..ebd0c60ab
--- /dev/null
+++ b/components/SubNav/SubNavExamples.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import SubNav from './SubNav'
+
+require('./SubNavExamples.scss')
+
+const SubNavExamples = () => (
+
+
+
+)
+
+module.exports = SubNavExamples
diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss
new file mode 100644
index 000000000..81bc13175
--- /dev/null
+++ b/components/SubNav/SubNavExamples.scss
@@ -0,0 +1,8 @@
+@import 'topcoder/tc-includes';
+
+.SubNavExamples {
+ > p {
+ border: 1px solid $accent-gray;
+ margin: 20px 0px;
+ }
+}
\ No newline at end of file
diff --git a/components/SubNav/placeholder.svg b/components/SubNav/placeholder.svg
new file mode 100644
index 000000000..d3e7220e5
--- /dev/null
+++ b/components/SubNav/placeholder.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx
index 0ebf8b393..f26453653 100644
--- a/components/UserDropdownMenu/UserDropdownMenu.jsx
+++ b/components/UserDropdownMenu/UserDropdownMenu.jsx
@@ -1,62 +1,75 @@
require('./UserDropdownMenu.scss')
-import React, { Component } from 'react'
+import React, {PropTypes} from 'react'
+import Avatar from '../Avatar/Avatar'
import Dropdown from '../Dropdown/Dropdown'
-const userDropdownLists = [
- [
- { label: 'My Profile', link: 'javascript:;', id: 0 },
- { label: 'Dashboard', link: 'javascript:;', id: 1 },
- { label: 'Settings', link: 'javascript:;', id: 2 },
- { label: 'Payments', link: 'javascript:;', id: 3 }
- ],
- [
- { label: 'Help', link: 'javascript:;', id: 0 }
- ],
- [
- { label: 'Log out', link: 'javascript:;', id: 0 }
+
+const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl}) => {
+
+ const userDropdownLists = [
+ [
+ { label: 'My Profile', link: '/profile/' + username, id: 0 },
+ { label: 'Dashboard', link: '/my-dashbaord', id: 1 },
+ { label: 'Settings', link: '/settings/profile', id: 2 },
+ { label: 'Payments', link: '//community.' + domain + '/PactsMemberServlet?module=PaymentHistory&full_list=false', id: 3 }
+ ],
+ [
+ { label: 'Help', link: '//help.' + domain, id: 0 }
+ ],
+ [
+ { label: 'Log out', link: '/logout', id: 0 }
+ ]
]
-]
-
-class UserDropdownMenu extends Component {
- constructor(props) {
- super(props)
-
- this.state = { isLoggedIn: true }
- }
-
- render() {
- const publicDOM =
-
- const loggedInDOM = (
- Compete Sub Navigation
+
+
+ Learn Sub Navigation
+
+
+ Community Sub Navigation
+
+
+
-
-
-
- )
-
- return this.state.isLoggedIn ? loggedInDOM : publicDOM
- }
+ const loggedInDOM = (
+
-
- { this.props.username }
-
-
+
+ const publicDOM = (
+
+ )
-
- {
- userDropdownLists.map((list, i) => {
- return (
- -
- {
- list.map((link, j) => {
- return
- { link.label } - }) - } -
+
+
+
+ )
+
+ return username ? loggedInDOM : publicDOM
+}
+
+UserDropdownMenu.propTypes = {
+ username : PropTypes.string,
+ userImage : PropTypes.string,
+ domain : PropTypes.string.isRequired,
+ loginUrl : PropTypes.string,
+ registerUrl : PropTypes.string
+}
+
+UserDropdownMenu.defaultProps = {
+ loginUrl : '/login',
+ registerUrl : '/register'
}
export default UserDropdownMenu
\ No newline at end of file
diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss
index fecdfcdb5..d7b8a02dc 100644
--- a/components/UserDropdownMenu/UserDropdownMenu.scss
+++ b/components/UserDropdownMenu/UserDropdownMenu.scss
@@ -1,4 +1,5 @@
@import "topcoder/tc-includes";
+@import "topcoder/tc-buttons";
$user-dropdown-bg: #FAFAFB;
$placeholder-bg: #B47DD6;
@@ -10,14 +11,26 @@ $username-color: #737380;
display: inline-block;
position: relative;
+ &.non-logged-in {
+ .login-button {
+ display: inline-block;
+ }
+
+ .join-button {
+ display: inline-block;
+ margin-left: 20px;
+ }
+ }
+
.dropdown-menu-header {
cursor: pointer;
+ display: flex;
+ align-items: center;
.user-image {
display: inline-block;
- width: 30px;
- height: 30px;
- background-color: $placeholder-bg;
+ width: 35px;
+ height: 35px;
margin-right: 10px;
border-radius: 50%;
vertical-align: middle;
@@ -28,8 +41,11 @@ $username-color: #737380;
font-size: 14px;
line-height: 16px;
color: $username-color;
+ @include ellipsis;
+ margin: 0px;
margin-right: 10px;
display: inline-block;
+ overflow: hidden;
@media screen and (max-width: 768px) {
display: none;
@@ -38,7 +54,7 @@ $username-color: #737380;
.dropdown-arrow {
position: relative;
- top: -2px;
+ top: 2px;
display: inline-block;
}
}
diff --git a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx
index 0fbc7ea5a..43bf33902 100644
--- a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx
+++ b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx
@@ -2,7 +2,14 @@ import React from 'react'
import UserDropdownMenu from './UserDropdownMenu'
const UserDropdownMenuExamples = () => {
- return
+
+
+
+ {
+ userDropdownLists.map((list, i) => {
+ return (
+ -
+ {
+ list.map((link, j) => {
+ return
- { link.label } + }) + } +
+
+ )
}
module.exports = UserDropdownMenuExamples
diff --git a/index.coffee b/index.coffee
index 187e73af2..ea8f95548 100644
--- a/index.coffee
+++ b/index.coffee
@@ -1,2 +1,6 @@
module.exports =
default: require './components/FileUploader/FileUploaderContainer.cjsx'
+ NavBar: require './components/Navbar/Navbar.jsx'
+ SearchBar: require './components/SearchBar/SearchBar.jsx'
+ UserDropdown: require './components/UserDropdownMenu/UserDropdownMenu.jsx'
+ TCFooter: require './components/TCFooter/TCFooter.jsx'
\ No newline at end of file
diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee
new file mode 100644
index 000000000..c5c14027c
--- /dev/null
+++ b/navbar.webpack.config.coffee
@@ -0,0 +1,28 @@
+webpackConfig = require 'appirio-tech-webpack-config'
+webpack = require('webpack')
+ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+config = webpackConfig
+ dirname: __dirname
+ template: './index.html'
+ entry:
+ TCNavComponents: [
+ './index.coffee'
+ ]
+
+# exports javascript as library
+config.output.filename = '[name].js';
+config.output.publicPath = 'https://s3.amazonaws.com/components.topcoder-dev.com/'
+config.output.library = '[name]';
+config.output.libraryTarget = 'var'
+
+# CSS file without hash name
+config.plugins.push new ExtractTextPlugin '[name].css'
+
+# React would be provided externally by the application using the components
+config.externals =
+ "react" : "React"
+ "react-dom" : "ReactDOM"
+ "moment" : "moment"
+
+module.exports = config
diff --git a/package.json b/package.json
index 5b964ee06..25e65f8b5 100644
--- a/package.json
+++ b/package.json
@@ -18,15 +18,16 @@
},
"scripts": {
"example": "webpack-dev-server -d --progress --inline --colors",
- "dev": "webpack-dev-server -d --progress --inline --colors --dev",
+ "dev": "webpack-dev-server -d --progress --inline --colors --dev --tc",
"clean": "rm -r dist",
"build": "webpack --config webpack.config.js; cp example/index.html dist/",
"lint": "eslint --format table --ext .js,.jsx .",
"test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel-core/register --require ignore-styles --recursive \"./components/**/*.spec.js\"",
- "test:watch": "npm run test -- --watch"
+ "test:watch": "npm run test -- --watch",
+ "build-navbar": "webpack $BUILD --tc --config navbar.webpack.config.coffee;"
},
"dependencies": {
- "appirio-styles": "0.0.25",
+ "appirio-styles": "0.0.26",
"appirio-tech-api-schemas": "^5.0.69",
"appirio-tech-client-app-layer": "^0.1.3",
"classnames": "^2.2.3",
@@ -37,6 +38,7 @@
"react-dom": "^0.14.7",
"react-dropzone": "^3.3.2",
"react-redux": "^4.2.1",
- "react-select": "^0.9.1"
+ "react-select": "^0.9.1",
+ "isomorphic-fetch": "^2.2.1"
}
}
diff --git a/setenv.sh b/setenv.sh
new file mode 100644
index 000000000..f8513d0fa
--- /dev/null
+++ b/setenv.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+if [ "$TRAVIS_BRANCH" = "dev" ]; then
+ export ENV=dev
+elif [ "$TRAVIS_BRANCH" = "release" ]; then
+ export ENV=qa
+ export BUILD_ARGS=--build
+elif [ "$TRAVIS_BRANCH" = "master" ]; then
+ export ENV=prod
+ export BUILD_ARGS=--build
+fi
\ No newline at end of file
Logged In state
+Logged Out state
+