From 276999c88220367ea920c28f7ab796b80b200359 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:03:55 +0530 Subject: [PATCH 01/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Added new web pack config for navbar components, to publish it as library -- Fixed issues with NavBar and SearchBar --- .gitignore | 3 ++- components/Navbar/Navbar.jsx | 6 +++--- components/Navbar/Navbar.scss | 3 --- components/Navbar/nav-community.svg | 14 ++++++++++++++ components/Navbar/nav-compete.svg | 12 ++++++++++++ components/Navbar/nav-learn.svg | 18 ++++++++++++++++++ components/SearchBar/SearchBar.scss | 1 + index.coffee | 6 ++++++ navbar.webpack.config.coffee | 20 ++++++++++++++++++++ package.json | 8 ++++++-- 10 files changed, 82 insertions(+), 9 deletions(-) create mode 100644 components/Navbar/nav-community.svg create mode 100644 components/Navbar/nav-compete.svg create mode 100644 components/Navbar/nav-learn.svg create mode 100644 navbar.webpack.config.coffee diff --git a/.gitignore b/.gitignore index f319765e2..cee3f39e9 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ coverage .idea .env npm-debug.log -.DS_Store \ No newline at end of file +.DS_Store +dist \ No newline at end of file diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 9392a2c19..7c8f84834 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -7,9 +7,9 @@ import QuickLinks from '../QuickLinks/QuickLinks' import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu' 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: 'javascript:;'}, + {img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true}, + {img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'} ] class Navbar extends Component { diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index d78258c95..fc2474296 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -13,9 +13,6 @@ $super-wide: 1376px; background-color: $navbar-bg; border-bottom: 1px solid $border-color; padding: 10px 20px; - position: fixed; - top: 0; - left: 0; width: 100%; @media screen and (max-width: $mobile) { 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 @@ + + + + nav-community + Created with Sketch. + + + + + + + + + \ 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 @@ + + + + nav-compete + Created with Sketch. + + + + + + + \ 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 @@ + + + + nav-learn + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 6fb889678..2c2b612d9 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -132,6 +132,7 @@ $active-icon-wrap-bg: #888894; top: 43px; left: 0; width: 100%; + z-index: 1000; strong { font-weight: 600; diff --git a/index.coffee b/index.coffee index 187e73af2..00c9c9ff8 100644 --- a/index.coffee +++ b/index.coffee @@ -1,2 +1,8 @@ +Router = require './components/Router/Router.cjsx' + 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..43537038d --- /dev/null +++ b/navbar.webpack.config.coffee @@ -0,0 +1,20 @@ +webpackConfig = require 'appirio-tech-webpack-config' +webpack = require('webpack') + +config = webpackConfig + dirname: __dirname + template: './index.html' + entry: + TCNavComponents: [ + './index.coffee' + ] + +config.output.filename = 'TCNavComponents.[name].js'; +config.output.publicPath = 'http://local.topcoder.com/mf/js/app/header/partials/' +config.output.libraryTarget = 'var' +console.log config.output + + +config.externals = {"react" : "React"} + +module.exports = config diff --git a/package.json b/package.json index 804bb39a5..5c428b535 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "build": "webpack --config webpack.config.js; cp example/index.html dist/", "lint": "eslint --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 --config navbar.webpack.config.coffee; cp index.html dist/", }, "dependencies": { "appirio-styles": "0.0.25", @@ -38,6 +39,9 @@ "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", + "url-loader": "^0.5.7", + "img-loader": "^1.2.0", + "file-loader": "^0.8.4" } } From f38f6f34713fdf3a5bb0b88e194008f7f3f7c63b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:04:44 +0530 Subject: [PATCH 02/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Trying with travis.yml --- .travis.yml | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/.travis.yml b/.travis.yml index 74f00c3ae..fb39aacdc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,22 +1,33 @@ language: node_js node_js: -- 5.2.0 +- 5.5.0 install: - npm install script: -- npm run lint +- npm run lint && npm run build-navbar sudo: false -before_deploy: -- npm-prepublish --verbose deploy: -- provider: npm - email: "$NPM_EMAIL" - api_key: "$NPM_API_KEY" +- provider: s3 + cache_control: private, no-store, no-cache, must-revalidate, max-age=0 + detect_encoding: true + access_key_id: $AWS_KEY + secret_access_key: $AWS_SECRET + bucket: app.topcoder-dev.com + skip_cleanup: true + local_dir: dist on: - tags: true + branch: dev env: + matrix: + - CXX=g++-4.8 global: - # NPM_EMAIL - - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90=" - # NPM_API_KEY - - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI=" + # DEV_AWS_KEY + - secure: a5X4QlY2JD/sJnEBkT5WwwfWjYKq3ldRf/+Dh5x2oHB0swGzYyFxzVlezddPF8xDML+CcVoLHkd8WNM2F7qcxHZTDC5spH/ym2gX6YlRwFRTTFBRCJehgYs8Vit/s14f8gkuVV8fe2ubMiV+fpAw80tb3E+t+nCckmXwe8gDqDbHto5VIozTiqDOV/WvkPzaRQofTeNzSqjrAH/iRq8hJUx16shCO2ccdiLu7rnOuys+UwjWFRyjdLP01UZXd5u6a5XK3vigLGPBAqsEwSMgScATJjNIHwYofE5Q3ztD85jz/JoQatQf7LCnQUqkLT+xldMkOZuTlTHvzmVUOl2WYpVxWV9hXwBemvyuRPPtzIrZkKXi6OUgvpYwGgWn8eS1qulB1DYPrUWBtIYGQoxEchfNlmcrCIJ7BrbL9xiNUM8J+ZCWtNS01eSapMHdhAIUMLEsAjxBY+ArLuYAD+URB0d+JZrr9cORGnrGDB+1wI12Z/Qu5LEDp/TMOisK2PXEsaqzlaazr9lj2FXTYJQyyFMMWzq1v1o5lZ5mEJ5ea36eGApV1iQNmPrg7omhDHwKtBpMDFQWZ0Y1SrkIk3QTX6JfzsrehwAhAK2fZ25EaC6zcppAo0ia5/VZoWzxHFQyhkC47hRrM7C6nCriQPDc9kKsmTSX5rp5e/DNpiZ67qM= + # DEV_AWS_SECRET + - secure: p+od0xD/9vpMbR2AI6gZWknNAtvvIfq6jXIF98DEsDlqrrMFv4SwtuXLlCmX5PBnB/cWOkwgRhymI7/3+fLrDC+wqlhDEWyzSpVOvAcVAb5LEP7IDen0W8kTj2q9I2VRX+keL7lxQCknAf/21sRZeJfJhLGR+O3NcytEdsjlpFCopA6luZYv1QSd+nRJiTsI7I69T0hr7jZk+YioyjEEp/4qzI2qyJH7E5Ry+DD3gXnC3zva48Huq6rvOtLpgFmio1b1rNAcA55Q9Y3vb1jJyZhKpRvtel9OM9ekTxANEGJVaMzxyZXT7EFTxwxS+ub5c2HRzxedMnD3tY29ku2JJx7Ofm+Yxt9DZXSK7EV99xxE71kIhI9lZFiWZviym08MHGc4pee6+Cl6ZkiV44v4XnwbgUq8GCOkmDMQBQtGhXq7dC6jB/r7P7CJs+DIGDF7qNt/xizVOC1THS8GUCN68aWMVperP+IlUXo5d2XekhO6vjHk6o44K8A1s7yblBWXj54B6NfJnBzUK2X0g6Y2xdW6tmoKtad1r1I3062skc+UiU+6m4fGS8pLFElJNj+8N7QANoEw9oJDZfuQ47uVQzPjAA1/qdcy3ksMek0siNFbpZnMqzOJTPf2Xe7YgKuCPg0QczESXIjOeEIU0om7SWmGEIuMFqt6obQW0M3VHn0= +addons: + apt: + sources: + - ubuntu-toolchain-r-test + packages: + - g++-4.8 \ No newline at end of file From 7d483dd5ceb95db28e45151777b5e9a52e94d22c Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:07:37 +0530 Subject: [PATCH 03/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Parse error fixes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5c428b535..9d4f3ee0c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "lint": "eslint --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", - "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/", + "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25", From 21841c8da6d080233add1bb5672ecc0e459bfa65 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:23:31 +0530 Subject: [PATCH 04/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Fixed module name --- components/MenuBar/MenuBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index 643ce89ae..112e80da1 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -1,5 +1,5 @@ import React, { PropTypes, Component } from 'react' -import classNames from 'classNames' +import classNames from 'classnames' require('./MenuBar.scss') From 5e4827161c39145f908cdbbd493d4d1768c48f66 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:28:32 +0530 Subject: [PATCH 05/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Changed bucket name --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index fb39aacdc..928f3aa65 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,7 +12,7 @@ deploy: detect_encoding: true access_key_id: $AWS_KEY secret_access_key: $AWS_SECRET - bucket: app.topcoder-dev.com + bucket: components.topcoder-dev.com skip_cleanup: true local_dir: dist on: From aab6f642cddcd707dea9afa2a5da8f7cf1592d71 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 17:50:01 +0530 Subject: [PATCH 06/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Cleanup of web pack config --- navbar.webpack.config.coffee | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee index 43537038d..bf62da78a 100644 --- a/navbar.webpack.config.coffee +++ b/navbar.webpack.config.coffee @@ -1,5 +1,6 @@ webpackConfig = require 'appirio-tech-webpack-config' webpack = require('webpack') +ExtractTextPlugin = require('extract-text-webpack-plugin') config = webpackConfig dirname: __dirname @@ -9,12 +10,16 @@ config = webpackConfig './index.coffee' ] -config.output.filename = 'TCNavComponents.[name].js'; +# exports javascript as library +config.output.filename = '[name].js'; config.output.publicPath = 'http://local.topcoder.com/mf/js/app/header/partials/' +config.output.library = '[name]'; config.output.libraryTarget = 'var' -console.log config.output +# 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"} module.exports = config From 19f86a98e0c50062e8bdca36e2e5cb73e591d0bf Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 18:13:08 +0530 Subject: [PATCH 07/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Updated CDN prefix. --- navbar.webpack.config.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee index bf62da78a..c25b18c90 100644 --- a/navbar.webpack.config.coffee +++ b/navbar.webpack.config.coffee @@ -12,7 +12,7 @@ config = webpackConfig # exports javascript as library config.output.filename = '[name].js'; -config.output.publicPath = 'http://local.topcoder.com/mf/js/app/header/partials/' +config.output.publicPath = 'http://components.topcoder-dev.com/' config.output.library = '[name]'; config.output.libraryTarget = 'var' From 01d6a7b52e2540f7bfa235cdf3ddd5b2750d0e1d Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 15:00:50 +0530 Subject: [PATCH 08/82] AS#102852633435507, Create Carousel React component -- Carousel component created -- It behaves same on both mobile and desktop -- Swipe is not yet supported for mobile devices --- components/Carousel/Carousel.jsx | 122 ++++++++++++++++++++++ components/Carousel/Carousel.scss | 48 +++++++++ components/Carousel/CarouselExamples.jsx | 40 +++++++ components/Carousel/CarouselExamples.scss | 17 +++ components/Carousel/placeholder.svg | 4 + components/Icons/LeftArrowIcon.jsx | 19 ++++ components/Icons/PlaceholderIcon.jsx | 12 +++ components/Icons/RightArrowIcon.jsx | 17 +++ components/Router/Router.cjsx | 3 + 9 files changed, 282 insertions(+) create mode 100644 components/Carousel/Carousel.jsx create mode 100644 components/Carousel/Carousel.scss create mode 100644 components/Carousel/CarouselExamples.jsx create mode 100644 components/Carousel/CarouselExamples.scss create mode 100644 components/Carousel/placeholder.svg create mode 100644 components/Icons/LeftArrowIcon.jsx create mode 100644 components/Icons/PlaceholderIcon.jsx create mode 100644 components/Icons/RightArrowIcon.jsx diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx new file mode 100644 index 000000000..e8278c505 --- /dev/null +++ b/components/Carousel/Carousel.jsx @@ -0,0 +1,122 @@ +require('./Carousel.scss') +import classNames from 'classnames' + +import React, { Component } from 'react' +import ReactDOM from 'react-dom' + +import LeftArrowIcon from '../Icons/LeftArrowIcon' +import RightArrowIcon from '../Icons/RightArrowIcon' + +export default class Carousel extends Component { + componentWillMount() { + this.handleResize = this.handleResize.bind(this) + window.addEventListener('resize', this.handleResize) + this.handlePageUp = this.handlePageUp.bind(this) + this.handlePageDown = this.handlePageDown.bind(this) + this.setState({firstVisibleItem: this.props.firstVisibleItem || 0}) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize) + } + + handleResize() { + this.validatePagers() + } + + componentDidMount() { + this.validatePagers() + } + + componentDidUpdate() { + this.validatePagers() + } + + validatePagers() { + const pageDownClass = classNames({ + 'page-down' : true, + 'hidden': this.state.firstVisibleItem == 0 + }) + const pageUpClass = classNames({ + 'page-up' : true, + 'hidden': this.lastElementVisible(this.state.firstVisibleItem) + }) + const node = ReactDOM.findDOMNode(this) + const pageDownNode = node.querySelector(".page-down") + const pageUpNode = node.querySelector(".page-up") + pageDownNode.className = pageDownClass + pageUpNode.className = pageUpClass + } + + + lastElementVisible(firstVisibleItem) { + const node = ReactDOM.findDOMNode(this) + const parentNode = node.parentNode + const maxWidth = parentNode.getBoundingClientRect().width + const visibleAreaNode = node.querySelector(".visible-area") + visibleAreaNode.style.width = maxWidth + "px" + const itemNodes = visibleAreaNode.children + let width = 0 + if (firstVisibleItem > 0) { + // if first item is not visible, account 20px for page-down element + width += 20 + // account the right margin for page-down (see Carousel.scss) + width += 15 + } + for (var i = 0; i < itemNodes.length; i++) { + var itemNode = itemNodes[i] + width += itemNode.getBoundingClientRect().width + if (i < itemNodes.length - 1) { + // account 30px for every carousel-item (see Carousel.scss) + width += 30 + } + if (width > maxWidth) { + return false + } + } + return true + } + + handlePageUp() { + if (!this.lastElementVisible(this.state.firstVisibleItem + 1)) { + const nextFirstVisibleItem = this.state.firstVisibleItem + 1 + this.setState({firstVisibleItem: nextFirstVisibleItem}) + } + } + + handlePageDown() { + if (this.state.firstVisibleItem > 0) { + const nextFirstVisibleItem = this.state.firstVisibleItem - 1 + this.setState({firstVisibleItem: nextFirstVisibleItem}) + } + } + + render() { + const carouselItem = (item, idx) => { + if (idx < this.state.firstVisibleItem) { + return + } + + return ( +
+ {item} +
+ ) + } + const windowWidth = window.innerWidth + + return ( +
+
+ +
+
+ { this.props.children.map(carouselItem) } +
+
+ +
+
+ ) + } +} \ No newline at end of file diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss new file mode 100644 index 000000000..7b6be6f4b --- /dev/null +++ b/components/Carousel/Carousel.scss @@ -0,0 +1,48 @@ +@import 'topcoder/tc-includes'; + +$pager-bg-color: #737380; + +.Carousel { + display: flex; + flex-direction: row; + &.hidden { + // visibility: hidden; + } + + .page-down { + width: 20px; + margin-right: 15px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } + } + + .page-up { + width: 20px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } + } + + .visible-area { + display: flex; + flex-direction: row; + overflow: hidden; + + .carousel-item:not(:first-child) { + margin-left: 30px; + } + } +} \ No newline at end of file diff --git a/components/Carousel/CarouselExamples.jsx b/components/Carousel/CarouselExamples.jsx new file mode 100644 index 000000000..e4301aec7 --- /dev/null +++ b/components/Carousel/CarouselExamples.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import Carousel from './Carousel' + +import StandardListItem from '../StandardListItem/StandardListItem' +import PlaceholderIcon from '../Icons/PlaceholderIcon' + +require('./CarouselExamples.scss') + + +const CarouselExamples = () => ( + +
+

With limited width

+
+ + + + + +
+

With full width

+
+ + + + + +
+

With limited width and custom first visible element

+
+ + + + + +
+
+) + +module.exports = CarouselExamples diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss new file mode 100644 index 000000000..d6d4c8b34 --- /dev/null +++ b/components/Carousel/CarouselExamples.scss @@ -0,0 +1,17 @@ +@import 'topcoder/tc-includes'; + +.Carousel { + .StandardListItem { + padding: 0px; + } +} + +.CarouselExamples { + > p { + border: 1px solid $accent-gray; + margin: 20px 0px; + } + .limited-width { + width: 200px; + } +} \ No newline at end of file diff --git a/components/Carousel/placeholder.svg b/components/Carousel/placeholder.svg new file mode 100644 index 000000000..d3e7220e5 --- /dev/null +++ b/components/Carousel/placeholder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/Icons/LeftArrowIcon.jsx b/components/Icons/LeftArrowIcon.jsx new file mode 100644 index 000000000..a4e5b13fe --- /dev/null +++ b/components/Icons/LeftArrowIcon.jsx @@ -0,0 +1,19 @@ +import React from 'react' + +const LeftArrowIcon = ({ width, height, fill }) => { + const f = (fill || '#A3A3AE') + return ( + + ico-arrow-big-left + Created with Sketch. + + + + + + + + ) +} + +export default LeftArrowIcon diff --git a/components/Icons/PlaceholderIcon.jsx b/components/Icons/PlaceholderIcon.jsx new file mode 100644 index 000000000..66beca645 --- /dev/null +++ b/components/Icons/PlaceholderIcon.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +const PlaceholderIcon = ({ width, height, fill }) => { + const f = (fill || '#B47DD6') + return ( + + + + ) +} + +export default PlaceholderIcon \ No newline at end of file diff --git a/components/Icons/RightArrowIcon.jsx b/components/Icons/RightArrowIcon.jsx new file mode 100644 index 000000000..73c438db9 --- /dev/null +++ b/components/Icons/RightArrowIcon.jsx @@ -0,0 +1,17 @@ +import React from 'react' + +const RightArrowIcon = ({ width, height, fill }) => { + const f = (fill || '#A3A3AE') + return ( + + ico-arrow-big-right + Created with Sketch. + + + + + + ) +} + +export default RightArrowIcon diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx index 5c097682b..3384204b1 100644 --- a/components/Router/Router.cjsx +++ b/components/Router/Router.cjsx @@ -27,6 +27,7 @@ SearchSuggestionsExamples = require '../SearchSuggestions/SearchSuggestionsE SearchBarExample = require '../SearchBar/SearchBarExamples.jsx' NavbarExample = require '../Navbar/NavbarExample.jsx' TCFooterExamples = require '../TCFooter/TCFooterExamples.jsx' +CarouselExamples = require '../Carousel/CarouselExamples.jsx' { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router' @@ -75,6 +76,8 @@ component = -> + + From dab88ea74b8f030d9edbcca674d806b84e605e92 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 15:14:32 +0530 Subject: [PATCH 09/82] AS#102852633435507, Create Carousel React component -- Fixing lint errors --- components/Carousel/Carousel.jsx | 17 ++++++++--------- components/Carousel/CarouselExamples.jsx | 19 +++++++++---------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index e8278c505..6e6ea3bff 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -35,15 +35,15 @@ export default class Carousel extends Component { validatePagers() { const pageDownClass = classNames({ 'page-down' : true, - 'hidden': this.state.firstVisibleItem == 0 + hidden: this.state.firstVisibleItem === 0 }) const pageUpClass = classNames({ 'page-up' : true, - 'hidden': this.lastElementVisible(this.state.firstVisibleItem) + hidden: this.lastElementVisible(this.state.firstVisibleItem) }) const node = ReactDOM.findDOMNode(this) - const pageDownNode = node.querySelector(".page-down") - const pageUpNode = node.querySelector(".page-up") + const pageDownNode = node.querySelector('.page-down') + const pageUpNode = node.querySelector('.page-up') pageDownNode.className = pageDownClass pageUpNode.className = pageUpClass } @@ -53,8 +53,8 @@ export default class Carousel extends Component { const node = ReactDOM.findDOMNode(this) const parentNode = node.parentNode const maxWidth = parentNode.getBoundingClientRect().width - const visibleAreaNode = node.querySelector(".visible-area") - visibleAreaNode.style.width = maxWidth + "px" + const visibleAreaNode = node.querySelector('.visible-area') + visibleAreaNode.style.width = maxWidth + 'px' const itemNodes = visibleAreaNode.children let width = 0 if (firstVisibleItem > 0) { @@ -63,8 +63,8 @@ export default class Carousel extends Component { // account the right margin for page-down (see Carousel.scss) width += 15 } - for (var i = 0; i < itemNodes.length; i++) { - var itemNode = itemNodes[i] + for (let i = 0; i < itemNodes.length; i++) { + const itemNode = itemNodes[i] width += itemNode.getBoundingClientRect().width if (i < itemNodes.length - 1) { // account 30px for every carousel-item (see Carousel.scss) @@ -103,7 +103,6 @@ export default class Carousel extends Component { ) } - const windowWidth = window.innerWidth return (
diff --git a/components/Carousel/CarouselExamples.jsx b/components/Carousel/CarouselExamples.jsx index e4301aec7..54597e001 100644 --- a/components/Carousel/CarouselExamples.jsx +++ b/components/Carousel/CarouselExamples.jsx @@ -2,7 +2,6 @@ import React from 'react' import Carousel from './Carousel' import StandardListItem from '../StandardListItem/StandardListItem' -import PlaceholderIcon from '../Icons/PlaceholderIcon' require('./CarouselExamples.scss') @@ -13,25 +12,25 @@ const CarouselExamples = () => (

With limited width

- - - + + +

With full width

- - - + + +

With limited width and custom first visible element

- - - + + +
From 3912480f5fc06bcbaea767a568fe8186c11bf927 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 18:07:29 +0530 Subject: [PATCH 10/82] AS#101448607854424, Create Sub Navigation React component -- Added component for SubNav using the Carousel component. --- components/Router/Router.cjsx | 3 ++ components/SubNav/SubNav.jsx | 51 +++++++++++++++++++++++++++ components/SubNav/SubNav.scss | 22 ++++++++++++ components/SubNav/SubNavExamples.jsx | 24 +++++++++++++ components/SubNav/SubNavExamples.scss | 8 +++++ components/SubNav/placeholder.svg | 4 +++ 6 files changed, 112 insertions(+) create mode 100644 components/SubNav/SubNav.jsx create mode 100644 components/SubNav/SubNav.scss create mode 100644 components/SubNav/SubNavExamples.jsx create mode 100644 components/SubNav/SubNavExamples.scss create mode 100644 components/SubNav/placeholder.svg diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx index 3384204b1..1bd920a27 100644 --- a/components/Router/Router.cjsx +++ b/components/Router/Router.cjsx @@ -28,6 +28,7 @@ SearchBarExample = require '../SearchBar/SearchBarExamples.jsx' NavbarExample = require '../Navbar/NavbarExample.jsx' TCFooterExamples = require '../TCFooter/TCFooterExamples.jsx' CarouselExamples = require '../Carousel/CarouselExamples.jsx' +SubNavExamples = require '../SubNav/SubNavExamples.jsx' { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router' @@ -78,6 +79,8 @@ component = -> + + diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx new file mode 100644 index 000000000..eceafc99d --- /dev/null +++ b/components/SubNav/SubNav.jsx @@ -0,0 +1,51 @@ +require('./SubNav.scss') + +import React, { Component } 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'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'Competitive Programming', link: 'https://arena.topcoder.com'} + ], + 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'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'TCO16', link: '//tco16.topcoder.com'}, + {img: require('./placeholder.svg'), text: 'Programs', link: '/community/member-overview'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'Forums', link: '//apps.topcoder.com/forums'}, + {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' }) => { + var subNav = tcSubNav[primaryMenu] + const subNavMap = (item, idx) => { + return ( + + ) + } + return ( +
+ + { 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..9d25da157 --- /dev/null +++ b/components/SubNav/SubNav.scss @@ -0,0 +1,22 @@ +@import 'topcoder/tc-includes'; + +$subnav-item-bg-color: #B47DD6; +$subnav-item-text-color: #7A7F83; + +.SubNav { + padding: 20px 0px; + background-color: $accent-gray-dark; + + .StandardListItem { + padding: 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 = () => ( + +
+

Compete Sub Navigation

+
+ +
+

Learn Sub Navigation

+
+ +
+

Community Sub Navigation

+
+ +
+
+) + +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 From 04d7a699b4537684ed0709d9bab111d34fcfd3d9 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 18:18:08 +0530 Subject: [PATCH 11/82] AS#101448607854424, Create Sub Navigation React component -- Fixed lint errors --- components/SubNav/SubNav.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx index eceafc99d..94a2665ad 100644 --- a/components/SubNav/SubNav.jsx +++ b/components/SubNav/SubNav.jsx @@ -1,6 +1,6 @@ require('./SubNav.scss') -import React, { Component } from 'react' +import React from 'react' import Carousel from '../Carousel/Carousel' import StandardListItem from '../StandardListItem/StandardListItem' @@ -33,7 +33,7 @@ const tcSubNav = { } const SubNav = ({ primaryMenu = 'compete' }) => { - var subNav = tcSubNav[primaryMenu] + const subNav = tcSubNav[primaryMenu] const subNavMap = (item, idx) => { return ( From f79989b20f8461aabc2dbf360279e06486359fdf Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 20:13:09 +0530 Subject: [PATCH 12/82] AS#101448607854424, Create Sub Navigation React component -- Fixed padding --- components/SubNav/SubNav.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index 9d25da157..78fe29e69 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -4,11 +4,10 @@ $subnav-item-bg-color: #B47DD6; $subnav-item-text-color: #7A7F83; .SubNav { - padding: 20px 0px; background-color: $accent-gray-dark; .StandardListItem { - padding: 0px; + padding: 20px 0px; .label { color: $subnav-item-text-color; From 79e80c2a9098841d23477f085dd26cfcf15c43c5 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 10:55:49 +0530 Subject: [PATCH 13/82] AS#101448607854424, Create Sub Navigation React component -- Implemented code review suggestions --- components/Carousel/Carousel.jsx | 18 +++++++++--------- components/Carousel/Carousel.scss | 3 --- components/SubNav/SubNav.jsx | 9 +++------ package.json | 4 ++-- 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index 6e6ea3bff..538398382 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -33,14 +33,14 @@ export default class Carousel extends Component { } validatePagers() { - const pageDownClass = classNames({ - 'page-down' : true, - hidden: this.state.firstVisibleItem === 0 - }) - const pageUpClass = classNames({ - 'page-up' : true, - hidden: this.lastElementVisible(this.state.firstVisibleItem) - }) + const pageDownClass = classNames( + 'page-down', + { hidden: this.state.firstVisibleItem === 0 } + ) + const pageUpClass = classNames( + 'page-up', + { hidden: this.lastElementVisible(this.state.firstVisibleItem) } + ) const node = ReactDOM.findDOMNode(this) const pageDownNode = node.querySelector('.page-down') const pageUpNode = node.querySelector('.page-up') @@ -105,7 +105,7 @@ export default class Carousel extends Component { } return ( -
+
diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index 7b6be6f4b..cb699725a 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -5,9 +5,6 @@ $pager-bg-color: #737380; .Carousel { display: flex; flex-direction: row; - &.hidden { - // visibility: hidden; - } .page-down { width: 20px; diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx index 94a2665ad..68234a9d0 100644 --- a/components/SubNav/SubNav.jsx +++ b/components/SubNav/SubNav.jsx @@ -9,8 +9,7 @@ const tcSubNav = { {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'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'Competitive Programming', link: 'https://arena.topcoder.com'} + {img: require('./placeholder.svg'), text: 'Competitive Programming', link: process.env.ARENA_URL} ], learn : [ {img: require('./placeholder.svg'), text: 'Getting Started', link: '/getting-started'}, @@ -21,11 +20,9 @@ const tcSubNav = { ], community : [ {img: require('./placeholder.svg'), text: 'Overview', link: '/community/members'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'TCO16', link: '//tco16.topcoder.com'}, + {img: require('./placeholder.svg'), text: 'TCO16', link: process.env.TCO16_URL}, {img: require('./placeholder.svg'), text: 'Programs', link: '/community/member-overview'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'Forums', link: '//apps.topcoder.com/forums'}, + {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'} diff --git a/package.json b/package.json index 9d4f3ee0c..471aabe7b 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,13 @@ }, "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 --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", - "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/" + "build-navbar": "webpack --config --tc navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25", From 2cfe86cf980ba43e293559857f8771a14061f09f Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 12:32:59 +0530 Subject: [PATCH 14/82] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Removed unused dependencies --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 9d4f3ee0c..7de3128d8 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,6 @@ "react-dom": "^0.14.7", "react-dropzone": "^3.3.2", "react-redux": "^4.2.1", - "react-select": "^0.9.1", - "url-loader": "^0.5.7", - "img-loader": "^1.2.0", - "file-loader": "^0.8.4" + "react-select": "^0.9.1" } } From ec3272ccf51e3832cf112a15bbf59366da3b80ac Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 12:33:45 +0530 Subject: [PATCH 15/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Added encrypted aws key and secret --- .travis.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.travis.yml b/.travis.yml index 928f3aa65..5fcb5ccfa 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,8 +10,8 @@ deploy: - provider: s3 cache_control: private, no-store, no-cache, must-revalidate, max-age=0 detect_encoding: true - access_key_id: $AWS_KEY - secret_access_key: $AWS_SECRET + access_key_id: "$AWS_KEY" + secret_access_key: "$AWS_SECRET" bucket: components.topcoder-dev.com skip_cleanup: true local_dir: dist @@ -19,15 +19,15 @@ deploy: branch: dev env: matrix: - - CXX=g++-4.8 + - CXX=g++-4.8 global: - # DEV_AWS_KEY - - secure: a5X4QlY2JD/sJnEBkT5WwwfWjYKq3ldRf/+Dh5x2oHB0swGzYyFxzVlezddPF8xDML+CcVoLHkd8WNM2F7qcxHZTDC5spH/ym2gX6YlRwFRTTFBRCJehgYs8Vit/s14f8gkuVV8fe2ubMiV+fpAw80tb3E+t+nCckmXwe8gDqDbHto5VIozTiqDOV/WvkPzaRQofTeNzSqjrAH/iRq8hJUx16shCO2ccdiLu7rnOuys+UwjWFRyjdLP01UZXd5u6a5XK3vigLGPBAqsEwSMgScATJjNIHwYofE5Q3ztD85jz/JoQatQf7LCnQUqkLT+xldMkOZuTlTHvzmVUOl2WYpVxWV9hXwBemvyuRPPtzIrZkKXi6OUgvpYwGgWn8eS1qulB1DYPrUWBtIYGQoxEchfNlmcrCIJ7BrbL9xiNUM8J+ZCWtNS01eSapMHdhAIUMLEsAjxBY+ArLuYAD+URB0d+JZrr9cORGnrGDB+1wI12Z/Qu5LEDp/TMOisK2PXEsaqzlaazr9lj2FXTYJQyyFMMWzq1v1o5lZ5mEJ5ea36eGApV1iQNmPrg7omhDHwKtBpMDFQWZ0Y1SrkIk3QTX6JfzsrehwAhAK2fZ25EaC6zcppAo0ia5/VZoWzxHFQyhkC47hRrM7C6nCriQPDc9kKsmTSX5rp5e/DNpiZ67qM= - # DEV_AWS_SECRET - - secure: p+od0xD/9vpMbR2AI6gZWknNAtvvIfq6jXIF98DEsDlqrrMFv4SwtuXLlCmX5PBnB/cWOkwgRhymI7/3+fLrDC+wqlhDEWyzSpVOvAcVAb5LEP7IDen0W8kTj2q9I2VRX+keL7lxQCknAf/21sRZeJfJhLGR+O3NcytEdsjlpFCopA6luZYv1QSd+nRJiTsI7I69T0hr7jZk+YioyjEEp/4qzI2qyJH7E5Ry+DD3gXnC3zva48Huq6rvOtLpgFmio1b1rNAcA55Q9Y3vb1jJyZhKpRvtel9OM9ekTxANEGJVaMzxyZXT7EFTxwxS+ub5c2HRzxedMnD3tY29ku2JJx7Ofm+Yxt9DZXSK7EV99xxE71kIhI9lZFiWZviym08MHGc4pee6+Cl6ZkiV44v4XnwbgUq8GCOkmDMQBQtGhXq7dC6jB/r7P7CJs+DIGDF7qNt/xizVOC1THS8GUCN68aWMVperP+IlUXo5d2XekhO6vjHk6o44K8A1s7yblBWXj54B6NfJnBzUK2X0g6Y2xdW6tmoKtad1r1I3062skc+UiU+6m4fGS8pLFElJNj+8N7QANoEw9oJDZfuQ47uVQzPjAA1/qdcy3ksMek0siNFbpZnMqzOJTPf2Xe7YgKuCPg0QczESXIjOeEIU0om7SWmGEIuMFqt6obQW0M3VHn0= + # AWS_SECRET + - secure: yFpLFrM42STWqxw6dlVvyr0hvBbVAOHhkKQ1yQcuZ4MtTktCUOItUt9hZTExy659sJJxeBsT0YD66FdVggV+rTG8KDFGcBZJ8RZqN2AHa1+PMZfzF5N35bkacOWoKd1aAReRWZcVspvHjC1h6lAlVR69qSRqRhOL7/IMTDYrZMMwuS7/Pqb0jfdCJgiOf8uFwAn1ZVsJvDvC7AcxYYNLMA+GFD6ay7GX4zoqBdHwcyupKU4g+Fwjy3673kZwfWKITtzmwmV18p0SIiqQp68K6lvsZ2H7Hw6TXOEMkvda1YMD+lmV/dcc6o6W6bsDAk2cZx5JxSu3trvhkpYpK9JE6FUJ1I5ITiPkAZYAnIjckSM+rLZ6Vanxtmc0zNL6cxc4DTfu7V8dQ2MlPxHV125rMspYeJcxi8u/nlSRSJy2C8jaPGzaBQmHM9HlzJNhpTeR4A/3YqTcbcRMgMxvuuslHEUXDeTV+lqfhw1pLvD+Ut+Q6IBkNVdMDVBoeLvuwtXwyFF4skuEcTvOezmh9VNNrMgx2ZcPnJR85aUD+A/MoYihn1dPr66rh2vNJSRKp4uQdgRnldtLaHh5JgX3cR0PPtSat99shV/YkhhGG3WGl6lqOLPQTDX9XLLm9mTmOQzAK7p6GjRKM1PVWOc+3VA8dc3XTCMjBaFh9zgtSsfDibs= + # AWS_KEY + - secure: QXxHO6Dt5kGDsN2hjSk//0Rf3eHsjOXBq9CdK1kyePLDks6J1wCUp7hT3PMqZG3wH8yd6i4m8mielDdOurquOHVZgdiWaDRw/FMggRcmOGzCl96Afdz199v4ep6aS1YzndEPmwaKp2jFiCsg8LvByJjlHKtGSWc4Yw7+B1WjSygLoZ1eU4TYeig3xfhHE2ENoIGdnk5DDSjZ2xypqc8upmQIbfFya2dd0nMwA8GjEpVWGAYJy3RhOyKlWKGvO2sW+bf3DVCqnYvLRs8kAGh7qQV//rkkycNWFVUsQZkNd0+mX7bi16aJoaj4HSiW4pR/Z0yDa55Lb7CZKdP0sZgKcojUqkUe8faU8N7LQEkK0RYF7zfSAt2y0ns25Nt7os1xUdY/3Xluw0SMzTR5zX8PiEUVtQyFS33T43GKuQT4joYCseIFCqpZ1a5iYemlR9M7DqZDPQ8TkwHn2yzP59ax25U3FB3AYMz6pd2WuIKsa3XU9irJOiGSHXC3YmS2H70cZpL+r4OxtmsjXVR5RQQWcGEurb3vadk/Iq5S4EXKG9M9HKtLCysGPdynw3/+0GlscdIf+O2eZSvFJfahcVvaPSUxLgyOFM+W3sd0EwjGnTWwXu9zN7LbMr57vqzNUZ0mgSNX7qz2+z9V4jBTNRk5DaG5vRr+7uDHgKdtNQHYWUU= addons: apt: sources: - ubuntu-toolchain-r-test packages: - - g++-4.8 \ No newline at end of file + - g++-4.8 From 10435932b248c46093922d226ad862d8a9e41b98 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 22:17:13 +0530 Subject: [PATCH 16/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Excluded ReactDOM and moment from build --- navbar.webpack.config.coffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee index c25b18c90..3ee091fda 100644 --- a/navbar.webpack.config.coffee +++ b/navbar.webpack.config.coffee @@ -20,6 +20,9 @@ config.output.libraryTarget = 'var' config.plugins.push new ExtractTextPlugin '[name].css' # React would be provided externally by the application using the components -config.externals = {"react" : "React"} +config.externals = + "react" : "React" + "react-dom" : "ReactDOM" + "moment" : "moment" module.exports = config From 23186cfc246a19bc6123013fd4fb999137e313ea Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 23:07:45 +0530 Subject: [PATCH 17/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Updated build flags --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7de3128d8..72acaeb80 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "lint": "eslint --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", - "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/" + "build-navbar": "webpack --config --build --tc navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25", From 0215bb4c2013a284a5dd56963e1b9f05486a93ea Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 23:29:34 +0530 Subject: [PATCH 18/82] NavBar miscellaneous fixes/improvements --- components/Navbar/Navbar.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 7c8f84834..ea3b01b36 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -7,9 +7,9 @@ import QuickLinks from '../QuickLinks/QuickLinks' import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu' const primaryNavigationItems = [ - {img: require('./nav-community.svg'), text: 'Community', link: 'javascript:;'}, - {img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true}, - {img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'} + {img: require('./nav-community.svg'), text: 'Community', link: '/community'}, + {img: require('./nav-compete.svg'), text: 'Compete', link: '/compete', selected: true}, + {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] class Navbar extends Component { From 556141561f2c3ce09f67c6db234f7058ac8ec613 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 10:41:17 +0530 Subject: [PATCH 19/82] AS#103506492417787, Add username as property for NavBar -- Added username property --- components/Navbar/Navbar.jsx | 32 ++++++++++++++--------------- components/Navbar/NavbarExample.jsx | 2 +- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index ea3b01b36..20f8f9b89 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -12,24 +12,22 @@ const primaryNavigationItems = [ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] -class Navbar extends Component { - render() { - return ( -
-
-
-
- -
- -
-
-
- -
+const Navbar = ({username}) => { + return ( +
+
+
+
+
- ) - } + +
+
+
+ +
+
+ ) } export default Navbar diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index 9aba6f991..c90bee489 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -2,7 +2,7 @@ import Navbar from './Navbar' import React from 'react' const NavbarExample = () => ( - + ) module.exports = NavbarExample From 4fc78d527ca4039b01e5c32dc2d1326b47e54555 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 10:54:21 +0530 Subject: [PATCH 20/82] AS#103506492417790, Adjust UserDropdownMenu component to determine login state using username -- Used username property to determine the state of login --- .../UserDropdownMenu/UserDropdownMenu.jsx | 69 +++++++++---------- .../UserDropdownMenuExamples.jsx | 9 ++- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index 0ebf8b393..9d3b3483e 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -18,45 +18,38 @@ const userDropdownLists = [ ] ] -class UserDropdownMenu extends Component { - constructor(props) { - super(props) - - this.state = { isLoggedIn: true } - } - - render() { - const publicDOM =
- - const loggedInDOM = ( -
- -
- - { this.props.username } - -
+const UserDropdownMenu = ({username}) => { + + const publicDOM =
-
- { - userDropdownLists.map((list, i) => { - return ( ) - }) - } - -
- -
- ) - - return this.state.isLoggedIn ? loggedInDOM : publicDOM - } + const loggedInDOM = ( +
+ +
+ + { username } + +
+ +
+ { + userDropdownLists.map((list, i) => { + return ( ) + }) + } + +
+ +
+ ) + + return username ? loggedInDOM : publicDOM } export default UserDropdownMenu \ No newline at end of file diff --git a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx index 0fbc7ea5a..9d4585471 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 + return ( +
+

Logged In state

+ +

Logged Out state

+ +
+ ) } module.exports = UserDropdownMenuExamples From 141a16d9fab719a9b9bb4a45a014b0790e598b44 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 10:57:47 +0530 Subject: [PATCH 21/82] Fixed lint errors --- components/Navbar/Navbar.jsx | 2 +- components/UserDropdownMenu/UserDropdownMenu.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 20f8f9b89..1f800ff34 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -1,7 +1,7 @@ require('./Navbar.scss') import MenuBar from '../MenuBar/MenuBar' -import React, { Component } from 'react' +import React from 'react' import SearchBar from '../SearchBar/SearchBar' import QuickLinks from '../QuickLinks/QuickLinks' import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu' diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index 9d3b3483e..1269bd9d9 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -1,6 +1,6 @@ require('./UserDropdownMenu.scss') -import React, { Component } from 'react' +import React from 'react' import Dropdown from '../Dropdown/Dropdown' const userDropdownLists = [ From a3df82378be3459d53ff94901e1455029164dd01 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 11:58:05 +0530 Subject: [PATCH 22/82] AS#103506492417792, Support hyperlinks in StandardListItem component -- Added support for rendering StandardListItem as hyperlink --- .../StandardListItem/StandardListItem.jsx | 54 ++++++++++--------- .../StandardListItemExamples.jsx | 14 ++++- 2 files changed, 43 insertions(+), 25 deletions(-) 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 =

{this.props.labelText}

- } + if (showLabel) { + label =

{labelText}

+ } - if (this.props.showIcon){ - icon = - } + if (showIcon) { + icon = + } - return (
{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

@@ -24,6 +24,18 @@ const StandardListItemExamples = () => (

Label Hidden

+

With Link In Self

+ + +

With Link In New Tab

+ + +

Link: Icon on the Right

+ + +

Link: Icon on the Left

+ +
) From 1aa0ae4ac373ea4ac260ad550f2ed1bbf953b2d0 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 12:22:25 +0530 Subject: [PATCH 23/82] AS#104536643797659, Update QuickLinks component to use hyperlinks with real URLs -- Used hyperlinks -- Used StandardListItem's icon to show icons instead of using separate div -- Added real URLs with dynamic domain --- components/QuickLinks/QuickLinks.jsx | 48 ++++++++++----------- components/QuickLinks/QuickLinks.scss | 20 ++++----- components/QuickLinks/QuickLinksExample.jsx | 2 +- components/QuickLinks/placeholder.svg | 4 ++ 4 files changed, 38 insertions(+), 36 deletions(-) create mode 100644 components/QuickLinks/placeholder.svg 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 ( -
- - -
    -
  • -
    - -
    • -
  • -
    - -
    • -
  • -
    - -
    • -
- -
- ) - } +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 From dbd714d3f89d6fbf1a967f080e2b25b1f56e8d60 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 12:25:55 +0530 Subject: [PATCH 24/82] AS#104536643797659, Update QuickLinks component to use hyperlinks with real URLs -- Passed domain to QuickLinks component from NavBar component --- components/Navbar/Navbar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 1f800ff34..8a2a7a887 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -12,7 +12,7 @@ const primaryNavigationItems = [ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] -const Navbar = ({username}) => { +const Navbar = ({username, domain}) => { return (
@@ -23,7 +23,7 @@ const Navbar = ({username}) => {
-
+
From 827e86b91370dc81f98e7d06da0357dc98f22bda Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 14:19:57 +0530 Subject: [PATCH 25/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Updated CDN prefix to be S3 instead of CloudFront --- navbar.webpack.config.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee index 3ee091fda..ddff524a4 100644 --- a/navbar.webpack.config.coffee +++ b/navbar.webpack.config.coffee @@ -12,7 +12,7 @@ config = webpackConfig # exports javascript as library config.output.filename = '[name].js'; -config.output.publicPath = 'http://components.topcoder-dev.com/' +config.output.publicPath = '//s3.amazonaws.com/components.topcoder-dev.com/' config.output.library = '[name]'; config.output.libraryTarget = 'var' From 62120e5216cff5b84a98048b8a1a2279697691c2 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 14:35:43 +0530 Subject: [PATCH 26/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- https --- navbar.webpack.config.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee index ddff524a4..c5c14027c 100644 --- a/navbar.webpack.config.coffee +++ b/navbar.webpack.config.coffee @@ -12,7 +12,7 @@ config = webpackConfig # exports javascript as library config.output.filename = '[name].js'; -config.output.publicPath = '//s3.amazonaws.com/components.topcoder-dev.com/' +config.output.publicPath = 'https://s3.amazonaws.com/components.topcoder-dev.com/' config.output.library = '[name]'; config.output.libraryTarget = 'var' From 7609f531d6fe2872824893b45c43902d10ec7cdc Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 24 Mar 2016 15:20:53 +0530 Subject: [PATCH 27/82] AS#102481437698830, Travis build to push bundle to S3/CDN -- Fixing wrong order of switches to web pack --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8314df414..24809b021 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "lint": "eslint --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", - "build-navbar": "webpack --config --build --tc navbar.webpack.config.coffee; cp index.html dist/" + "build-navbar": "webpack --build --tc --config navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25", From 89953b9a15c3a6ebe98c9f07f2bc7c4621892664 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 28 Mar 2016 15:36:26 +0530 Subject: [PATCH 28/82] AS#105182014672648, Non logged in state style fix for user dropdown -- Fixed flow of non logged in state button -- Fixed styles of buttons -- Added example of NavBar for non logged in state --- components/Navbar/NavbarExample.jsx | 7 ++++++- components/UserDropdownMenu/UserDropdownMenu.jsx | 7 ++++++- components/UserDropdownMenu/UserDropdownMenu.scss | 11 +++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index c90bee489..65812b381 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -2,7 +2,12 @@ import Navbar from './Navbar' import React from 'react' const NavbarExample = () => ( - +
+

Logged In Example

+ +

Non Logged In Example

+ +
) module.exports = NavbarExample diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index 1269bd9d9..a1552f773 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -20,7 +20,12 @@ const userDropdownLists = [ const UserDropdownMenu = ({username}) => { - const publicDOM =
+ const publicDOM = ( +
+ + +
+ ) const loggedInDOM = (
diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index fecdfcdb5..c5164e547 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,6 +11,16 @@ $username-color: #737380; display: inline-block; position: relative; + &.non-logged-in { + .login-button { + + } + + .join-button { + margin-left: 20px; + } + } + .dropdown-menu-header { cursor: pointer; From ba7188becaf3d6d0583d6068508a8949f0e6071e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 28 Mar 2016 15:56:41 +0530 Subject: [PATCH 29/82] AS#105182014672642, Use real links for user dropdown menu -- Used actual links for logged in state of the user dropdown menu -- Updated examples to use dynamic links via domain property --- components/Navbar/Navbar.jsx | 2 +- components/Navbar/NavbarExample.jsx | 4 +-- .../UserDropdownMenu/UserDropdownMenu.jsx | 32 ++++++++++--------- .../UserDropdownMenuExamples.jsx | 4 +-- 4 files changed, 22 insertions(+), 20 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 8a2a7a887..d80aebcfc 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -24,7 +24,7 @@ const Navbar = ({username, domain}) => {
- +
) diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index 65812b381..b13159d93 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -4,9 +4,9 @@ import React from 'react' const NavbarExample = () => (

Logged In Example

- +

Non Logged In Example

- +
) diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index a1552f773..b4db4dc6d 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -3,22 +3,24 @@ require('./UserDropdownMenu.scss') import React from 'react' 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}) => { +const UserDropdownMenu = ({username, domain}) => { + + console.log(domain) + 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 } + ] + ] const publicDOM = (
diff --git a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx index 9d4585471..ca74c66ce 100644 --- a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx +++ b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx @@ -5,9 +5,9 @@ const UserDropdownMenuExamples = () => { return (

Logged In state

- +

Logged Out state

- +
) } From be1b1c4085511d6bb8fc9a41b00795062d0914c9 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 28 Mar 2016 15:58:25 +0530 Subject: [PATCH 30/82] AS#105182014672642, Use real links for user dropdown menu -- Fixed lint errors --- components/Navbar/NavbarExample.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index b13159d93..b3864ae3a 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -4,7 +4,7 @@ import React from 'react' const NavbarExample = () => (

Logged In Example

- +

Non Logged In Example

From b01cfbc48cca89abe34d410d81812800c04aad5a Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 30 Mar 2016 18:17:55 +0530 Subject: [PATCH 31/82] AS#105182014672638, Integrate Search APIs with NavBar -- Enhanced SearchBar component to delegate the logic of search term matching to the caller -- Extracted logic of search term matching from Navbar to the caller -- Enhanced SearchBar to show search term matching even if the term is matched anywhere in the returned suggestions -- Used change event instead of keyup event for SearchBar to trigger the search --- components/Navbar/Navbar.jsx | 67 ++++++++++++++++------ components/Navbar/NavbarExample.jsx | 40 ++++++++++--- components/SearchBar/SearchBar.jsx | 55 ++++++++++++------ components/SearchBar/SearchBarExamples.jsx | 24 +++++++- package.json | 3 +- 5 files changed, 144 insertions(+), 45 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index d80aebcfc..753e85183 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -1,7 +1,7 @@ require('./Navbar.scss') import MenuBar from '../MenuBar/MenuBar' -import React from 'react' +import React, {PropTypes, Component} from 'react' import SearchBar from '../SearchBar/SearchBar' import QuickLinks from '../QuickLinks/QuickLinks' import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu' @@ -12,22 +12,57 @@ const primaryNavigationItems = [ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] -const Navbar = ({username, domain}) => { - return ( -
-
-
-
- -
- -
-
-
- +// properties: username, domain, searchSuggestionsFunc +// searchSuggestionsFunc should return a Promise object + +class Navbar extends Component { + + constructor(props) { + super(props) + this.updateSearchSuggestions = this.updateSearchSuggestions.bind(this) + this.handleTermChange = this.handleTermChange.bind(this) + this.state = {searchSuggestions: [], recentTerms: []} + } + + handleTermChange(searchBar, oldTerm, searchTerm, callback) { + // TODO should we check for the return value of the search suggestion function to be promise? + this.props.searchSuggestionsFunc.apply(searchBar, [searchTerm]) + .then(this.updateSearchSuggestions) + .then(data => { + callback.apply(searchBar, [searchBar]) + }) + } + + updateSearchSuggestions(data) { + this.setState({searchSuggestions: data}) + return data + } + + render() { + const username = this.props.username + const domain = this.props.domain + return ( +
+
+
+
+ +
+ +
+
+
+ +
-
- ) + ) + } +} + +Navbar.propTypes = { + searchSuggestionsFunc : PropTypes.func.isRequired, + username : PropTypes.string, + domain : PropTypes.string.isRequired } export default Navbar diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index b3864ae3a..e570fa905 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -1,13 +1,37 @@ import Navbar from './Navbar' import React from 'react' +import fetch from 'isomorphic-fetch' +import _ from 'lodash' -const NavbarExample = () => ( -
-

Logged In Example

- -

Non Logged In Example

- -
-) +const NavbarExample = () => { + + const suggest = (searchTerm) => { + return fetch("https://internal-api.topcoder-dev.com/v3/tags/_suggest/?q=" + searchTerm) + .then(function(response) { + if (response.status >= 200 && response.status < 400) { + return Promise.resolve(response) + } else { + return Promise.reject(new Error(response.statusText)) + } + }) + .then(function(response) { + return response.json() + }) + .then(data => { + const tags = _.get(data, 'result.content') + return tags.map(tag => { + return tag.text + }) + }) + } + return ( +
+

Logged In Example

+ +

Non Logged In Example

+ +
+ ) +} module.exports = NavbarExample diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 62a39f926..5f9b3dc2a 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -1,6 +1,6 @@ require('./SearchBar.scss') -import React, {Component} from 'react' +import React, {Component, PropTypes} from 'react' import SearchSuggestions from '../SearchSuggestions/SearchSuggestions' //states: empty, filled, focused @@ -11,7 +11,7 @@ class SearchBar extends Component { this.state = { searchState: 'empty' } this.onFocus = this.onFocus.bind(this) this.onBlur = this.onBlur.bind(this) - this.onKeyUp = this.onKeyUp.bind(this) + this.onChange = this.onChange.bind(this) this.clearSearch = this.clearSearch.bind(this) } @@ -27,8 +27,13 @@ class SearchBar extends Component { } } - onKeyUp() { - this.setState({ searchValue: this.refs.searchValue.value }) + onChange() { + const oldTerm = this.state.searchValue + this.setState({ searchValue: this.refs.searchValue.value, loading: true }, function() { + this.props.onTermChange.apply(this, [this, oldTerm, this.state.searchValue, function(searchBar) { + searchBar.setState({loading: false}) + }]) + }) } clearSearch() { @@ -38,29 +43,31 @@ class SearchBar extends Component { } 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.props.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) }) - } + popularForDisplay.push( + + { popularList[i].substring(0, idx) } + { searchValue } + { popularList[i].substring(idx + searchValue.length) } + + ) } } else { @@ -76,20 +83,30 @@ class SearchBar extends Component { } else if(searchState === 'filled') { classString += ' state-filled' } - + const results = return (
- + { typeaheadText }
- + {results}
) } } + +SearchBar.propTypes = { + onTermChange : PropTypes.func.isRequired, + recentTerms : PropTypes.array +} + +SearchBar.defaultProps = { + recentTerms: [] +} + export default SearchBar diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 27b6957b0..1a4ffbb62 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -1,8 +1,30 @@ import SearchBar from './SearchBar' import React from 'react' +const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js'] +const suggestions = [] + +const handleTermChange = (searchBar, oldTerm, searchTerm) => { + console.log('Handling term change...' + searchTerm); + // console.log(searchBar); + suggestions.splice(0, suggestions.length) + 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') + } + + searchBar.render() +} + const SearchBarExamples = () => ( - + ) module.exports = SearchBarExamples diff --git a/package.json b/package.json index 24809b021..78f9408de 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,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" } } From 682fe0b3bd1b333795349307e0ba9722004c29fe Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 30 Mar 2016 18:30:44 +0530 Subject: [PATCH 32/82] AS#105182014672638, Integrate Search APIs with NavBar -- Fixed lint errors --- components/Navbar/Navbar.jsx | 2 +- components/Navbar/NavbarExample.jsx | 6 +++--- components/SearchBar/SearchBarExamples.jsx | 10 ++++------ 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 753e85183..c073fbb78 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -29,7 +29,7 @@ class Navbar extends Component { this.props.searchSuggestionsFunc.apply(searchBar, [searchTerm]) .then(this.updateSearchSuggestions) .then(data => { - callback.apply(searchBar, [searchBar]) + callback.apply(searchBar, [searchBar, data]) }) } diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index e570fa905..b7c4444c8 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -6,15 +6,15 @@ import _ from 'lodash' const NavbarExample = () => { const suggest = (searchTerm) => { - return fetch("https://internal-api.topcoder-dev.com/v3/tags/_suggest/?q=" + searchTerm) - .then(function(response) { + return fetch('https://internal-api.topcoder-dev.com/v3/tags/_suggest/?q=' + searchTerm) + .then(response => { if (response.status >= 200 && response.status < 400) { return Promise.resolve(response) } else { return Promise.reject(new Error(response.statusText)) } }) - .then(function(response) { + .then(response => { return response.json() }) .then(data => { diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 1a4ffbb62..415217886 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -5,18 +5,16 @@ const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Chal const suggestions = [] const handleTermChange = (searchBar, oldTerm, searchTerm) => { - console.log('Handling term change...' + searchTerm); - // console.log(searchBar); suggestions.splice(0, suggestions.length) - if (searchTerm && "java".indexOf(searchTerm.toLowerCase()) !== -1) { + if (searchTerm && 'java'.indexOf(searchTerm.toLowerCase()) !== -1) { suggestions.push('Java') suggestions.push('JavaScript') - } else if (searchTerm && "javascript".indexOf(searchTerm.toLowerCase()) !== -1) { + } else if (searchTerm && 'javascript'.indexOf(searchTerm.toLowerCase()) !== -1) { suggestions.push('JavaScript') - } else if (searchTerm && "coffee".indexOf(searchTerm.toLowerCase()) !== -1) { + } else if (searchTerm && 'coffee'.indexOf(searchTerm.toLowerCase()) !== -1) { suggestions.push('Coffee') suggestions.push('CoffeeScript') - } else if (searchTerm && "coffeescript".indexOf(searchTerm.toLowerCase()) !== -1) { + } else if (searchTerm && 'coffeescript'.indexOf(searchTerm.toLowerCase()) !== -1) { suggestions.push('CoffeeScript') } From 66b0e3a722585ea39cd0186fe20077bed98003fb Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 13:21:02 +0530 Subject: [PATCH 33/82] AS#105182014672640, Use real icons for NavBar components -- Replaced placeholder with topcoder logo --- components/Icons/TopcoderLogo.jsx | 37 +++++++++++++++++++++++++ components/Icons/TopcoderMobileLogo.jsx | 23 +++++++++++++++ components/Navbar/Navbar.jsx | 9 +++++- components/Navbar/Navbar.scss | 18 ++++++++++-- components/Navbar/logo_mobile.svg | 15 ++++++++++ components/Navbar/logo_topcoder.svg | 29 +++++++++++++++++++ 6 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 components/Icons/TopcoderLogo.jsx create mode 100644 components/Icons/TopcoderMobileLogo.jsx create mode 100644 components/Navbar/logo_mobile.svg create mode 100644 components/Navbar/logo_topcoder.svg diff --git a/components/Icons/TopcoderLogo.jsx b/components/Icons/TopcoderLogo.jsx new file mode 100644 index 000000000..4d4f6e200 --- /dev/null +++ b/components/Icons/TopcoderLogo.jsx @@ -0,0 +1,37 @@ +import React from 'react' + +const TopcoderLogo = ({ width, height }) => { + return ( + + topcoder-logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default TopcoderLogo diff --git a/components/Icons/TopcoderMobileLogo.jsx b/components/Icons/TopcoderMobileLogo.jsx new file mode 100644 index 000000000..2019919d7 --- /dev/null +++ b/components/Icons/TopcoderMobileLogo.jsx @@ -0,0 +1,23 @@ +import React from 'react' + +const TopcoderMobileLogo = ({ width, height }) => { + return ( + + topcoder-mobile-logo + + + + + + + + + + + + + + ) +} + +export default TopcoderMobileLogo diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index c073fbb78..87eea5c33 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -5,6 +5,8 @@ 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' const primaryNavigationItems = [ {img: require('./nav-community.svg'), text: 'Community', link: '/community'}, @@ -43,7 +45,12 @@ class Navbar extends Component { const domain = this.props.domain return (
-
+
+ +
+
+ +
diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index fc2474296..c92312654 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -24,18 +24,30 @@ $super-wide: 1376px; .topcoder-logo { width: 56px; height: 24px; - background-color: $placeholder-bg; margin-right: 40px; flex: 0 0 auto; @media screen and (min-width: $super-wide) { width: 155px; + + &.non-mobile { + display: block; + } + &.mobile { + display: none; + } } - @media screen and (max-width: $mobile) { + @media screen and (max-width: $super-wide) { width: 40px; margin-right: 15px; - order: 1; + + &.non-mobile { + display: none; + } + &.mobile { + display: block; + } } } diff --git a/components/Navbar/logo_mobile.svg b/components/Navbar/logo_mobile.svg new file mode 100644 index 000000000..3fa9d3aa6 --- /dev/null +++ b/components/Navbar/logo_mobile.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/Navbar/logo_topcoder.svg b/components/Navbar/logo_topcoder.svg new file mode 100644 index 000000000..526eb7f31 --- /dev/null +++ b/components/Navbar/logo_topcoder.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 9569f71b8be8c3da59a4c7fc5ec85ba2ea9d7a76 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 13:22:49 +0530 Subject: [PATCH 34/82] AS#105182014672640, Use real icons for NavBar components -- Don't need svgs as they are now components. --- components/Navbar/logo_mobile.svg | 15 --------------- components/Navbar/logo_topcoder.svg | 29 ----------------------------- 2 files changed, 44 deletions(-) delete mode 100644 components/Navbar/logo_mobile.svg delete mode 100644 components/Navbar/logo_topcoder.svg diff --git a/components/Navbar/logo_mobile.svg b/components/Navbar/logo_mobile.svg deleted file mode 100644 index 3fa9d3aa6..000000000 --- a/components/Navbar/logo_mobile.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/components/Navbar/logo_topcoder.svg b/components/Navbar/logo_topcoder.svg deleted file mode 100644 index 526eb7f31..000000000 --- a/components/Navbar/logo_topcoder.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file From 954a38c2e67867038e4a691a63893c89acfa1238 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 13:41:32 +0530 Subject: [PATCH 35/82] AS#105182014672640, Use real icons for NavBar components -- Replaced placeholder with hamburger icon. -- Add hyperlink to go the specified url for hamburger icon. --- components/Icons/HamburgerIcon.jsx | 23 +++++++++++++++++++++++ components/Navbar/Navbar.jsx | 15 +++++++++++---- components/Navbar/Navbar.scss | 17 ++++++++++++----- 3 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 components/Icons/HamburgerIcon.jsx diff --git a/components/Icons/HamburgerIcon.jsx b/components/Icons/HamburgerIcon.jsx new file mode 100644 index 000000000..0e69b21de --- /dev/null +++ b/components/Icons/HamburgerIcon.jsx @@ -0,0 +1,23 @@ +import React from 'react' + +const HamburgerIcon = ({ width, height, stroke }) => { + const s = (stroke || '#A3A3AE') + return ( + + ico-hamburger + Created with Sketch. + + + + + + + + + + + + ) +} + +export default HamburgerIcon diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 87eea5c33..3e5ba9026 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -7,6 +7,7 @@ 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' const primaryNavigationItems = [ {img: require('./nav-community.svg'), text: 'Community', link: '/community'}, @@ -14,7 +15,7 @@ const primaryNavigationItems = [ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] -// properties: username, domain, searchSuggestionsFunc +// properties: username, domain, mobileMenuUrl, searchSuggestionsFunc // searchSuggestionsFunc should return a Promise object class Navbar extends Component { @@ -43,6 +44,7 @@ class Navbar extends Component { render() { const username = this.props.username const domain = this.props.domain + const mobileMenuUrl = this.props.mobileMenuUrl return (
@@ -56,8 +58,8 @@ class Navbar extends Component {
-
-
+
+
@@ -69,7 +71,12 @@ class Navbar extends Component { Navbar.propTypes = { searchSuggestionsFunc : PropTypes.func.isRequired, username : PropTypes.string, - domain : PropTypes.string.isRequired + domain : PropTypes.string.isRequired, + mobileMenuUrl : PropTypes.string +} + +Navbar.defaultProps = { + mobileMenuUrl : '/menu' } export default Navbar diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index c92312654..2059cf0c1 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -114,7 +114,7 @@ $super-wide: 1376px; } } - .collapse-group { + .menu-wrap { flex: 0 0 auto; position: relative; @@ -123,15 +123,22 @@ $super-wide: 1376px; height: 40px; order: 3; cursor: pointer; + + &:hover { + background-color: $accent-gray; + + .mobile-menu { + svg > g > g { + stroke: $white; + } + } + } } - .icon-placeholder { + .mobile-menu { @media screen and (max-width: $mobile) { display: block; - height: 24px; - width: 24px; - background-color: $placeholder-bg; position: absolute; top: 50%; left: 50%; From 51807343fbdc5c83e592295d7b8e079a2b6028a8 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 15:52:40 +0530 Subject: [PATCH 36/82] AS#105182014672640, Use real icons for NavBar components -- Fixed stroke-width and other attributes which are not valid in jsx syntax --- components/Icons/HamburgerIcon.jsx | 4 ++-- components/Icons/TopcoderLogo.jsx | 2 +- components/Icons/TopcoderMobileLogo.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Icons/HamburgerIcon.jsx b/components/Icons/HamburgerIcon.jsx index 0e69b21de..5a5daeda3 100644 --- a/components/Icons/HamburgerIcon.jsx +++ b/components/Icons/HamburgerIcon.jsx @@ -7,8 +7,8 @@ const HamburgerIcon = ({ width, height, stroke }) => { ico-hamburger Created with Sketch. - - + + diff --git a/components/Icons/TopcoderLogo.jsx b/components/Icons/TopcoderLogo.jsx index 4d4f6e200..c5387db35 100644 --- a/components/Icons/TopcoderLogo.jsx +++ b/components/Icons/TopcoderLogo.jsx @@ -5,7 +5,7 @@ const TopcoderLogo = ({ width, height }) => { topcoder-logo - + diff --git a/components/Icons/TopcoderMobileLogo.jsx b/components/Icons/TopcoderMobileLogo.jsx index 2019919d7..fd147a5b0 100644 --- a/components/Icons/TopcoderMobileLogo.jsx +++ b/components/Icons/TopcoderMobileLogo.jsx @@ -5,7 +5,7 @@ const TopcoderMobileLogo = ({ width, height }) => { topcoder-mobile-logo - + From 6860acaf9896732a90bf70a20cba63ddb41c1281 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 15:55:11 +0530 Subject: [PATCH 37/82] AS#105182014672640, Use real icons for NavBar components -- Replaced placeholder icon with search icon -- Add hyperlink to go the specified url for search icon -- Added hover state for mobile wraps for search and user dropdown -- Handled click event, to navigate user to the hyperlink's location, for wrap elements on mobile device --- components/Icons/MagnifyGlassIcon.jsx | 21 ++++++++++++++++++ components/Navbar/Navbar.jsx | 25 ++++++++++++++++----- components/Navbar/Navbar.scss | 32 ++++++++++++++++++--------- 3 files changed, 61 insertions(+), 17 deletions(-) create mode 100644 components/Icons/MagnifyGlassIcon.jsx diff --git a/components/Icons/MagnifyGlassIcon.jsx b/components/Icons/MagnifyGlassIcon.jsx new file mode 100644 index 000000000..037ecf491 --- /dev/null +++ b/components/Icons/MagnifyGlassIcon.jsx @@ -0,0 +1,21 @@ +import React from 'react' + +const MagnifyGlassIcon = ({ width, height, stroke }) => { + const s = (stroke || '#A3A3AE') + return ( + + ico-magnify + + + + + + + + + + + ) +} + +export default MagnifyGlassIcon diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 3e5ba9026..1ba6c80da 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -8,6 +8,7 @@ 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: require('./nav-community.svg'), text: 'Community', link: '/community'}, @@ -24,6 +25,7 @@ class Navbar extends Component { super(props) this.updateSearchSuggestions = this.updateSearchSuggestions.bind(this) this.handleTermChange = this.handleTermChange.bind(this) + this.handleMobileClick = this.handleMobileClick.bind(this) this.state = {searchSuggestions: [], recentTerms: []} } @@ -41,10 +43,19 @@ class Navbar extends Component { return data } + handleMobileClick(se) { + const mobileMenuLink = se.target.querySelector('.mobile-wrap > a') + console.log(mobileMenuLink) + if (mobileMenuLink) { + mobileMenuLink.click() + } + } + render() { const username = this.props.username const domain = this.props.domain const mobileMenuUrl = this.props.mobileMenuUrl + const mobileSearchUrl = this.props.mobileSearchUrl return (
@@ -53,13 +64,13 @@ class Navbar extends Component {
-
-
+
+
-
-
+
+
@@ -72,11 +83,13 @@ Navbar.propTypes = { searchSuggestionsFunc : PropTypes.func.isRequired, username : PropTypes.string, domain : PropTypes.string.isRequired, - mobileMenuUrl : PropTypes.string + mobileMenuUrl : PropTypes.string, + mobileSearchUrl : PropTypes.string } Navbar.defaultProps = { - mobileMenuUrl : '/menu' + mobileMenuUrl : '/menu', + mobileSearchUrl : '/search' } export default Navbar diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index 2059cf0c1..b0de3d6ec 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -26,12 +26,14 @@ $super-wide: 1376px; height: 24px; margin-right: 40px; flex: 0 0 auto; + display: flex; + align-items: center; @media screen and (min-width: $super-wide) { width: 155px; &.non-mobile { - display: block; + display: flex; } &.mobile { display: none; @@ -46,7 +48,7 @@ $super-wide: 1376px; display: none; } &.mobile { - display: block; + display: flex; } } } @@ -62,23 +64,30 @@ $super-wide: 1376px; @media screen and (max-width: $mobile) { flex: 0 0 60px; order: 2; - background-color: $accent-gray; width: 60px; height: 40px; display: flex; - margin-right: 10px; + margin-right: 0px; + justify-content: center; + align-items: center; + } + + &:hover { + background-color: $accent-gray; + + .mobile-wrap { + svg > g > g { + stroke: $white; + } + } } - .icon-placeholder { + .mobile-wrap { display: none; @media screen and (max-width: $mobile) { display: block; - height: 25px; - width: 25px; - background-color: $placeholder-bg; margin: auto; - cursor: pointer; } } @@ -127,7 +136,7 @@ $super-wide: 1376px; &:hover { background-color: $accent-gray; - .mobile-menu { + .mobile-wrap { svg > g > g { stroke: $white; } @@ -135,7 +144,8 @@ $super-wide: 1376px; } } - .mobile-menu { + .mobile-wrap { + display: none; @media screen and (max-width: $mobile) { display: block; From 737669c629e5c953b7214a7b22f3538b49c9b441 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 16:28:22 +0530 Subject: [PATCH 38/82] AS#105182014672640, Use real icons for NavBar components -- Replaced the user image placeholder with actual user image, provided via component property. --- components/Navbar/Navbar.jsx | 3 ++- components/Navbar/NavbarExample.jsx | 2 +- components/UserDropdownMenu/UserDropdownMenu.jsx | 6 +++--- components/UserDropdownMenu/UserDropdownMenu.scss | 1 - components/UserDropdownMenu/UserDropdownMenuExamples.jsx | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 1ba6c80da..4d9312124 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -53,6 +53,7 @@ class Navbar extends Component { 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 @@ -72,7 +73,7 @@ class Navbar extends Component {
- +
) diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index b7c4444c8..2eaeadc9c 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -27,7 +27,7 @@ const NavbarExample = () => { return (

Logged In Example

- +

Non Logged In Example

diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index b4db4dc6d..3e8c67440 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -1,12 +1,12 @@ require('./UserDropdownMenu.scss') import React from 'react' +import Avatar from '../Avatar/Avatar.cjsx' import Dropdown from '../Dropdown/Dropdown' -const UserDropdownMenu = ({username, domain}) => { +const UserDropdownMenu = ({username, userImage, domain}) => { - console.log(domain) const userDropdownLists = [ [ { label: 'My Profile', link: '/profile/' + username, id: 0 }, @@ -33,7 +33,7 @@ const UserDropdownMenu = ({username, domain}) => {
- + { username }
diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index c5164e547..7e1aad383 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -28,7 +28,6 @@ $username-color: #737380; display: inline-block; width: 30px; height: 30px; - background-color: $placeholder-bg; margin-right: 10px; border-radius: 50%; vertical-align: middle; diff --git a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx index ca74c66ce..43bf33902 100644 --- a/components/UserDropdownMenu/UserDropdownMenuExamples.jsx +++ b/components/UserDropdownMenu/UserDropdownMenuExamples.jsx @@ -5,7 +5,7 @@ const UserDropdownMenuExamples = () => { return (

Logged In state

- +

Logged Out state

From d50932bee49ba7844ecd73fb3fe840c9beb4fe0a Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 17:04:40 +0530 Subject: [PATCH 39/82] Fixed master merge conflicts --- components/Router/Router.jsx | 2 ++ components/UserDropdownMenu/UserDropdownMenu.jsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/Router/Router.jsx b/components/Router/Router.jsx index 9eaa79b6a..d5cde0d40 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' const Component = () => ( diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index 3e8c67440..9ada44e8c 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -1,7 +1,7 @@ require('./UserDropdownMenu.scss') import React from 'react' -import Avatar from '../Avatar/Avatar.cjsx' +import Avatar from '../Avatar/Avatar' import Dropdown from '../Dropdown/Dropdown' From 758838cddd35e68c1d1ae2853325813532c420c5 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 31 Mar 2016 17:32:56 +0530 Subject: [PATCH 40/82] Fixing build error --- index.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.coffee b/index.coffee index 00c9c9ff8..1ddfaf65e 100644 --- a/index.coffee +++ b/index.coffee @@ -1,4 +1,4 @@ -Router = require './components/Router/Router.cjsx' +Router = require './components/Router/Router' module.exports = default: require './components/FileUploader/FileUploaderContainer.cjsx' From 5cdfbc525f64988e4389993db1041984c3f0a410 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 13:07:12 +0530 Subject: [PATCH 41/82] AS#102852633435494, Integrate new NavBar into topcoder-app -- Fixes to prevent overriding styles of react components by using application. --- components/SearchBar/SearchBar.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 2c2b612d9..c6f6b424d 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -90,6 +90,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 { From dcaa3db0b01e02954b13f1d6bef7a5d311d6830f Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 13:37:00 +0530 Subject: [PATCH 42/82] AS#102852633435494, Integrate new NavBar into topcoder-app -- Fixes to exclude unwanted styles (e.g. ExampleApp.scss) in the NavBar bundle. These are causing troubles with calling app's styles. -- Added required tc styles which got excluded after removing unwanted styles --- components/Navbar/Navbar.scss | 2 ++ index.coffee | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index b0de3d6ec..fe84b1957 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,4 +1,6 @@ @import "topcoder/tc-includes"; +// this is to include tc styles in the output library +@import "topcoder/tc-styles"; $navbar-bg: #FAFAFB; $border-color: #CFCFD2; diff --git a/index.coffee b/index.coffee index 1ddfaf65e..ea8f95548 100644 --- a/index.coffee +++ b/index.coffee @@ -1,5 +1,3 @@ -Router = require './components/Router/Router' - module.exports = default: require './components/FileUploader/FileUploaderContainer.cjsx' NavBar: require './components/Navbar/Navbar.jsx' From 555dc0fefa460007149032737914f14f30663b63 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 14:57:40 +0530 Subject: [PATCH 43/82] \AS#102852633435494, Integrate new NavBar into topcoder-app -- Fixed version of appirio-styles to avoid the image reference error. -- Removed reference to tc-includes because tc-styles already has it --- components/Navbar/Navbar.scss | 1 - package.json | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index fe84b1957..460ba08e0 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -1,4 +1,3 @@ -@import "topcoder/tc-includes"; // this is to include tc styles in the output library @import "topcoder/tc-styles"; diff --git a/package.json b/package.json index 380004c91..bc667ba88 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "build-navbar": "webpack --build --tc --config navbar.webpack.config.coffee; cp index.html dist/" }, "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", From 2a552338ab8774641d85d95d5ed43b15e2282a1f Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 15:35:50 +0530 Subject: [PATCH 44/82] AS#102852633435494, Integrate new NavBar into topcoder-app -- Style fixes for user dropdown component to handle possibility of overriding the styles in calling app --- components/UserDropdownMenu/UserDropdownMenu.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/UserDropdownMenu/UserDropdownMenu.scss b/components/UserDropdownMenu/UserDropdownMenu.scss index 7e1aad383..b7ac0295d 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -23,11 +23,13 @@ $username-color: #737380; .dropdown-menu-header { cursor: pointer; + display: flex; + align-items: center; .user-image { display: inline-block; - width: 30px; - height: 30px; + width: 35px; + height: 35px; margin-right: 10px; border-radius: 50%; vertical-align: middle; @@ -38,8 +40,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; @@ -48,7 +53,7 @@ $username-color: #737380; .dropdown-arrow { position: relative; - top: -2px; + top: 2px; display: inline-block; } } From 2b4219f1751ee282e59d38dd1a4dde9d381b555f Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 15:48:18 +0530 Subject: [PATCH 45/82] AS#102852633435494, Integrate new NavBar into topcoder-app -- Declared user image property to test it with reactDirective --- components/Navbar/Navbar.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 4d9312124..b80bafb35 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -54,6 +54,7 @@ class Navbar extends Component { render() { const username = this.props.username const userImage = this.props.userImage + console.log(userImage) const domain = this.props.domain const mobileMenuUrl = this.props.mobileMenuUrl const mobileSearchUrl = this.props.mobileSearchUrl @@ -83,6 +84,7 @@ class Navbar extends Component { Navbar.propTypes = { searchSuggestionsFunc : PropTypes.func.isRequired, username : PropTypes.string, + userImage : PropTypes.string, domain : PropTypes.string.isRequired, mobileMenuUrl : PropTypes.string, mobileSearchUrl : PropTypes.string From edebd1d58e981dcf5b54029c28daf3e0b3e6598b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 16:03:02 +0530 Subject: [PATCH 46/82] AS#102852633435494, Integrate new NavBar into topcoder-app -- Middle aligned quick links icon, removed console log --- components/Navbar/Navbar.jsx | 1 - components/Navbar/Navbar.scss | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index b80bafb35..c97a19074 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -54,7 +54,6 @@ class Navbar extends Component { render() { const username = this.props.username const userImage = this.props.userImage - console.log(userImage) const domain = this.props.domain const mobileMenuUrl = this.props.mobileMenuUrl const mobileSearchUrl = this.props.mobileSearchUrl diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index 460ba08e0..b71349d6b 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -127,6 +127,8 @@ $super-wide: 1376px; .menu-wrap { flex: 0 0 auto; position: relative; + display: flex; + align-items: center; @media screen and (max-width :$mobile) { width: 40px; From 084db5c5904b59cdababaa3e74012289aec7ed23 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 1 Apr 2016 19:41:51 +0530 Subject: [PATCH 47/82] AS#105182014672642, Use real links for user dropdown menu -- Added login and logout links --- components/Navbar/Navbar.jsx | 2 +- .../UserDropdownMenu/UserDropdownMenu.jsx | 21 +++++++++++++++---- .../UserDropdownMenu/UserDropdownMenu.scss | 3 ++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index c97a19074..830040d68 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -16,7 +16,7 @@ const primaryNavigationItems = [ {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} ] -// properties: username, domain, mobileMenuUrl, searchSuggestionsFunc +// properties: username, userImage, domain, mobileMenuUrl, mobileSearchUrl, searchSuggestionsFunc // searchSuggestionsFunc should return a Promise object class Navbar extends Component { diff --git a/components/UserDropdownMenu/UserDropdownMenu.jsx b/components/UserDropdownMenu/UserDropdownMenu.jsx index 9ada44e8c..f26453653 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.jsx +++ b/components/UserDropdownMenu/UserDropdownMenu.jsx @@ -1,11 +1,11 @@ require('./UserDropdownMenu.scss') -import React from 'react' +import React, {PropTypes} from 'react' import Avatar from '../Avatar/Avatar' import Dropdown from '../Dropdown/Dropdown' -const UserDropdownMenu = ({username, userImage, domain}) => { +const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl}) => { const userDropdownLists = [ [ @@ -24,8 +24,8 @@ const UserDropdownMenu = ({username, userImage, domain}) => { const publicDOM = (
- - + Log in + Join
) @@ -59,4 +59,17 @@ const UserDropdownMenu = ({username, userImage, domain}) => { 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 b7ac0295d..d7b8a02dc 100644 --- a/components/UserDropdownMenu/UserDropdownMenu.scss +++ b/components/UserDropdownMenu/UserDropdownMenu.scss @@ -13,10 +13,11 @@ $username-color: #737380; &.non-logged-in { .login-button { - + display: inline-block; } .join-button { + display: inline-block; margin-left: 20px; } } From 70aa7623ed13dcd22b6537815677a5e3fa54ac57 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 4 Apr 2016 16:29:33 +0530 Subject: [PATCH 48/82] Removing copy of index.html to dist folder for build nav bar target. This may also get rid of the build error thrown by travis (builds are working fine on local). --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bc667ba88..01acf732c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "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", - "build-navbar": "webpack --build --tc --config navbar.webpack.config.coffee; cp index.html dist/" + "build-navbar": "webpack --build --tc --config navbar.webpack.config.coffee;" }, "dependencies": { "appirio-styles": "0.0.26", From afdbf1114c4fcab662478ef91007b0950120405b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Apr 2016 12:45:43 +0530 Subject: [PATCH 49/82] AS#108326934861720, Add QA and Prod builds for react-components --- .travis.yml | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/.travis.yml b/.travis.yml index 5fcb5ccfa..07a4cdf33 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,7 +6,14 @@ install: script: - npm run lint && npm run build-navbar sudo: false +before_deploy: +- npm-prepublish --verbose deploy: +- provider: npm + email: "$NPM_EMAIL" + api_key: "$NPM_API_KEY" + on: + tags: true - provider: s3 cache_control: private, no-store, no-cache, must-revalidate, max-age=0 detect_encoding: true @@ -17,14 +24,46 @@ deploy: local_dir: dist on: branch: dev +- provider: s3 + cache_control: private, no-store, no-cache, must-revalidate, max-age=0 + detect_encoding: true + access_key_id: "$QA_AWS_KEY" + secret_access_key: "$QA_AWS_SECRET" + bucket: components.topcoder-qa.com + skip_cleanup: true + local_dir: dist + on: + branch: release +- provider: s3 + cache_control: private, no-store, no-cache, must-revalidate, max-age=0 + detect_encoding: true + access_key_id: "$PROD_AWS_KEY" + secret_access_key: "$PROD_AWS_SECRET" + bucket: components.topcoder.com + skip_cleanup: true + local_dir: dist + on: + branch: master env: matrix: - CXX=g++-4.8 global: + # NPM_EMAIL + - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90=" + # NPM_API_KEY + - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI=" # AWS_SECRET - secure: yFpLFrM42STWqxw6dlVvyr0hvBbVAOHhkKQ1yQcuZ4MtTktCUOItUt9hZTExy659sJJxeBsT0YD66FdVggV+rTG8KDFGcBZJ8RZqN2AHa1+PMZfzF5N35bkacOWoKd1aAReRWZcVspvHjC1h6lAlVR69qSRqRhOL7/IMTDYrZMMwuS7/Pqb0jfdCJgiOf8uFwAn1ZVsJvDvC7AcxYYNLMA+GFD6ay7GX4zoqBdHwcyupKU4g+Fwjy3673kZwfWKITtzmwmV18p0SIiqQp68K6lvsZ2H7Hw6TXOEMkvda1YMD+lmV/dcc6o6W6bsDAk2cZx5JxSu3trvhkpYpK9JE6FUJ1I5ITiPkAZYAnIjckSM+rLZ6Vanxtmc0zNL6cxc4DTfu7V8dQ2MlPxHV125rMspYeJcxi8u/nlSRSJy2C8jaPGzaBQmHM9HlzJNhpTeR4A/3YqTcbcRMgMxvuuslHEUXDeTV+lqfhw1pLvD+Ut+Q6IBkNVdMDVBoeLvuwtXwyFF4skuEcTvOezmh9VNNrMgx2ZcPnJR85aUD+A/MoYihn1dPr66rh2vNJSRKp4uQdgRnldtLaHh5JgX3cR0PPtSat99shV/YkhhGG3WGl6lqOLPQTDX9XLLm9mTmOQzAK7p6GjRKM1PVWOc+3VA8dc3XTCMjBaFh9zgtSsfDibs= # AWS_KEY - secure: QXxHO6Dt5kGDsN2hjSk//0Rf3eHsjOXBq9CdK1kyePLDks6J1wCUp7hT3PMqZG3wH8yd6i4m8mielDdOurquOHVZgdiWaDRw/FMggRcmOGzCl96Afdz199v4ep6aS1YzndEPmwaKp2jFiCsg8LvByJjlHKtGSWc4Yw7+B1WjSygLoZ1eU4TYeig3xfhHE2ENoIGdnk5DDSjZ2xypqc8upmQIbfFya2dd0nMwA8GjEpVWGAYJy3RhOyKlWKGvO2sW+bf3DVCqnYvLRs8kAGh7qQV//rkkycNWFVUsQZkNd0+mX7bi16aJoaj4HSiW4pR/Z0yDa55Lb7CZKdP0sZgKcojUqkUe8faU8N7LQEkK0RYF7zfSAt2y0ns25Nt7os1xUdY/3Xluw0SMzTR5zX8PiEUVtQyFS33T43GKuQT4joYCseIFCqpZ1a5iYemlR9M7DqZDPQ8TkwHn2yzP59ax25U3FB3AYMz6pd2WuIKsa3XU9irJOiGSHXC3YmS2H70cZpL+r4OxtmsjXVR5RQQWcGEurb3vadk/Iq5S4EXKG9M9HKtLCysGPdynw3/+0GlscdIf+O2eZSvFJfahcVvaPSUxLgyOFM+W3sd0EwjGnTWwXu9zN7LbMr57vqzNUZ0mgSNX7qz2+z9V4jBTNRk5DaG5vRr+7uDHgKdtNQHYWUU= + # QA_AWS_SECRET + - secure: "BEjtXJWPIgyOY9oDYZf3sMGmmW4FFOWZEwdWc+nejDkcQxScN5ACTplRKwNUnxu3pvaxdjpp/DPn2N6/fXwpXrF7zpnydEeDJQu83L00JsOPRH67Uq9cbA06OZb1FYsKnQ+p7ssMLMRIgFUC8YDR0VT/qZ0jEZw3knntQof93vs6r3l2c3Zto6bL0BQb4Mm2T7Ui172un3rcImmGRwVfpjGgkmSEUNKobUJS7LKr0xPQfdMQ/UEv9VJEwb/YZdHXhOMeH6hO5ZoYTWEX32HLr3akAhmAj99Jmo71NDTrfrpZWTc4PZZQvKQNDI+JAxsCCqNkMdEN0EuO3ZsKZw0tt4ksRt3UL2yXhhd9PdFmyCnhWrIJ3OQuLtOyrFC1V6tRuE4u1cezvPCpYFuFWMO9nnEyR1jbg63X/bgAbKbl1EV/dUySdHPscToQhr2p0szJYIoR5noW1aGr417yutPKssBtdEQKjbu90efeH2zyDe118nqQ95SkpMtyG9Dmhnfz6YYLtCoLPz7xeTLi1VXz79NbWOMgftK/R8aJ/IHXqyX+F01wp4YjOcgheq3HwLzcWqZ25N497HUkQ07Y54wbs5zh1gTpF8Jua2b+egCCGtlGJT3/W4GEhWGQ8yTcoBYctLuo16mQyDChKeFg8dE8+PS2QRmYTGofrd9pn3W8Y+w=" + # QA_AWS_KEY + - secure: "DnV3CEYlzTjrAi1bmip2P1ljZ2nZPdTD051+n2SSZapfgmo/pqy3a+fJ1Ct8Lh2x0Nfw+XtyI2mfFV4Vs2LGeHzoPfEYOXtFJZf9L0/mE/RSgR/qLr0OA8324qpJtTdrI1CKq0j5Q6gXKm+RvCVTevJITWdOQmrAD75iqTdezCgvqkz/cYNB6y4/3fezIn1ox0g6W3o3XmM3B1//q5YbP2JW2AVYH83VCMG0wF2codEUKHJchnM9psDgZ/g79D7e378yK6X1tgcol6s9pOp8+8PIZHYjeKV139a/ZIkSPWmnMOFdM6sXinJe1uVrrKHw2oP6PshhAVI+DhH2JGEWoxfezdqMMXZ12x543lPFSHisbHBoyycrZJRpEMVDjto5pUsxTMvWeNGOJveJCv52zxm1+Jy26OC8ssq0WjUGMO0fYwtBL9Ts1iuZSKd6qF5GqdstKYQss771pgsVi2abGuURa1+z311bERV8YDlphyspRw1lS/cI1R40HxSGMD/fZeZhMAotzfrTcRpZgYP7/ViGCte9tmwnH+WK0t2/YxFigtB0J8Aq57EOl5WWXs99tW0Ypk9NbTjNwDxUi4O6g97teR1/D0NmowKE+FLoaibnsy/ic5qUFRSB0RavPSRRpFKRUNcSgGKUuTIvG4BFTXD6SPsSxXs3r1J7Jy2H9o8=" + # PROD_AWS_SECRET + - secure: "br10xaM6/+62Ge0qPeNUhXSV4agMRB8buARy6tySw3679RyCcAHbLSL5chearYju5hiCMGiBn09yioaxZeHsAWrIflxrlMtB0ZiAWnJjHmE+y0Cq2K+ohwjHiek1jKfFYw/SsDCIfxxqX/fPoS6QTpGe35MtjrbVMWttEW/fP62moIAh2GDp8tF0iHnAMFcAFuTiNbc+TCWF+tbAbU1afSpNpVYrs5nKbnrBOI0PWbK4r56TLpMY7fPwAb+c0vcTnoOtFDGeiPweSDXkUTkW/wlA68Ayqj7yg7lRErzi1UpEBroajFaTmYfoX6VdZo1EIzmOmxykcdfKwI/x+mqO1PnwAZNxhu3zR6uhEk0b1AkR5K/DZU/SH5FTxWOI8PsmssuPj/3e4ovTAFAL2e+LSJdQnHOF+epBH83mAnjbjahS72EZC4i9s4+9w1WVACLFL4Fadm5VnP11A+YPbafoPDqIXOtF5hXkMmrO8cw0VeSZWXfBDZ+YjAgF7CP4bV9X7ZqVYbOipcqv1Ml5FXne/jJn6j+tQMoBKZh7W1AF/ue/ixRhQCn4MTQ+n5OFow+x0/FRHI+D1WAUbVTNDviBYY7e682oATGCdra0uE2PeREKuh9OR/ZqH0CARHkAVAZWu2UrkdR+HlEhVmBwnp2Nw6EQBR8v9jezAUjucue9GjA=" + # PROD_AWS_KEY + - secure: "tPQLujveVEb1rhHHaecio/30gISQ2PHODfyeN27BfCY/1nBTif50n7+HbWC9YClyMqqN1odlV5bGuRBYNaz/F6gRxHXta1MGvP/VmrFtrEY69BhxXE23py6w4kVvNelEO8bw7u4JITM73nkGtQMfJumQhJ0lBVYI4I0CeQBVgd9WoUNRmHfcosOQkxIpFerg8sWGfOqHqIxZ/9UnH5e7zHIdFNGGAeFKqYhnFirWiSEkHunSBbknZv/+8CcGsULSKbM2TngpaDMjc0k6fKj/EtLopOyTHraO0VxoKk50irqSaUSIigzgyalj7zK94mR2+vQtRVYrvd//lbDZwhuX3zV/nJvkmy5poVoSBFwtq/StpsaII9hbA4CppMg+A4OGdpLdWwWVfcXYOSpVAqydjxR46Bi8pcgBTRkJlNWmoPDIa9niy8/iTKJiTrPmJ+uj9NOc2pCAghj2QB9z8Wrk6c6P8BVHT6T3agYB+5MZhLXjPUOPsPt6Y1l7M5v0NGTcYlMNYQMmHnUdQ7+xc02hQ0BUhddWnVm7CESTOYe865HNine853TGYO2megU7b25yEXKddJKV5P6odrGBVhazLpztev2YrWFhS9Iv9VInGvDCtvaq/pF00UVptH4gsb4VQr3KNOe5jw7hUCRuy4PGUgLTejolD1sQ7gbr1dtCH08=" addons: apt: sources: From bbeb125c0705a0dfdb3624b71c2bde9508c6b8f4 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Apr 2016 15:21:09 +0530 Subject: [PATCH 50/82] AS#108326934861724, Add loading state to the search bar component -- Added loading bar. --- components/SearchBar/SearchBar.jsx | 5 +++- components/SearchBar/SearchBar.scss | 8 ++++++ components/SearchBar/SearchBarExamples.jsx | 29 +++++++++++----------- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 5f9b3dc2a..ea0af7c43 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -2,6 +2,7 @@ require('./SearchBar.scss') import React, {Component, PropTypes} from 'react' import SearchSuggestions from '../SearchSuggestions/SearchSuggestions' +import Loader from '../Loader/Loader' //states: empty, filled, focused @@ -83,7 +84,9 @@ class SearchBar extends Component { } else if(searchState === 'filled') { classString += ' state-filled' } - const results = + const results = this.state.loading === true + ?
+ : return (
diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index c6f6b424d..27796a2a6 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -136,6 +136,14 @@ $active-icon-wrap-bg: #888894; } } + .loading { + position: absolute; + top: 25px; + left: 0; + width: 100%; + z-index: 1000; + } + .SearchSuggestions { display: none; position: absolute; diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 415217886..731717041 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -4,21 +4,22 @@ import React from 'react' const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js'] const suggestions = [] -const handleTermChange = (searchBar, oldTerm, searchTerm) => { +const handleTermChange = (searchBar, oldTerm, searchTerm, callback) => { suggestions.splice(0, suggestions.length) - 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') - } - - searchBar.render() + setTimeout(function() { + 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(searchBar, [searchBar]) + }, 3000) } const SearchBarExamples = () => ( From f11180522cd797eb75efc496cb53e103f7495ff3 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Apr 2016 15:21:39 +0530 Subject: [PATCH 51/82] Used classnames module for SearchSuggestions component --- components/SearchSuggestions/SearchSuggestions.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index eb2ee9123..33087075e 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -3,6 +3,7 @@ require('./SearchSuggestions.scss') import React, { Component } from 'react' import StandardListItem from '../StandardListItem/StandardListItem' import Panel from '../Panel/Panel' +import classNames from 'classnames' class SearchSuggestions extends Component { constructor(props) { @@ -64,9 +65,13 @@ class SearchSuggestions extends Component {
) + const ssClasses = classNames( + 'SearchSuggestions', + { 'empty-state' : recentList && !popularList } + ) return ( -
+
{ popularSearch } { recentSearches }
From ffb40a6c08eb0dd6cdfd4addecb950fe0f1ec256 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 5 Apr 2016 15:33:25 +0530 Subject: [PATCH 52/82] AS#108326934861724, Add loading state to the search bar component -- Fixed lint errors --- components/SearchBar/SearchBarExamples.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 731717041..3f6041a2d 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -6,7 +6,7 @@ const suggestions = [] const handleTermChange = (searchBar, oldTerm, searchTerm, callback) => { suggestions.splice(0, suggestions.length) - setTimeout(function() { + setTimeout(() => { if (searchTerm && 'java'.indexOf(searchTerm.toLowerCase()) !== -1) { suggestions.push('Java') suggestions.push('JavaScript') From 7ebc4a454485eef4c99271160a7c9ebb93b53ab8 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 6 Apr 2016 18:01:42 +0530 Subject: [PATCH 53/82] AS#102481437698833, Add NavBar react component to tc-site --- components/SearchBar/SearchBar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 27796a2a6..57dd4e6f5 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -142,6 +142,7 @@ $active-icon-wrap-bg: #888894; left: 0; width: 100%; z-index: 1000; + background: none; } .SearchSuggestions { From f9099421720cafd4294d495f6ea12c4fe2629f0e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 6 Apr 2016 18:24:49 +0530 Subject: [PATCH 54/82] AS#102481437698833, Add NavBar react component to tc-site -- Removed console logs -- Fixed style of search suggestions overflow-y --- components/Navbar/Navbar.jsx | 1 - components/SearchBar/SearchBar.jsx | 1 - components/SearchSuggestions/SearchSuggestions.scss | 1 + 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 830040d68..022298c2c 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -45,7 +45,6 @@ class Navbar extends Component { handleMobileClick(se) { const mobileMenuLink = se.target.querySelector('.mobile-wrap > a') - console.log(mobileMenuLink) if (mobileMenuLink) { mobileMenuLink.click() } diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index ea0af7c43..966abfcc2 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -55,7 +55,6 @@ class SearchBar extends Component { let popularForDisplay = [] if(searchValue) { - console.log(popularList) for(let i = 0; i < popularList.length; i++) { const idx = popularList[i].toLowerCase().indexOf(searchValue.toLowerCase()) // show typeahead hint only if the search term matched at 0 index diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 5658fc2a7..5ef8af091 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -83,6 +83,7 @@ text-overflow: ellipsis; width: 95%; overflow-x: hidden; + overflow-y: hidden; } } From 4c008317f79ad970555863c36f19ede0ac6bbf56 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 13:19:26 +0530 Subject: [PATCH 55/82] AS#102481437698833, Add NavBar react component to tc-site -- Added link to home page for topcoder logo --- components/Navbar/Navbar.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 022298c2c..db0ad120b 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -56,13 +56,14 @@ class Navbar extends Component { const domain = this.props.domain const mobileMenuUrl = this.props.mobileMenuUrl const mobileSearchUrl = this.props.mobileSearchUrl + const homePageUrl = '//' + domain return (
- +
- +
From 37b9706fbc6cbc573e0196b94cea2cb765fb72a6 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 15:06:54 +0530 Subject: [PATCH 56/82] Trying set correct NODE_ENV for build to get full source code for debugging in dev --- .travis.yml | 20 ++++++++++---------- setenv.sh | 8 ++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 setenv.sh diff --git a/.travis.yml b/.travis.yml index 07a4cdf33..66372225b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,10 +4,10 @@ node_js: install: - npm install script: -- npm run lint && npm run build-navbar +- npm run lint sudo: false before_deploy: -- npm-prepublish --verbose +- chmod +x setenv.sh; ./setenv.sh; npm-prepublish --verbose deploy: - provider: npm email: "$NPM_EMAIL" @@ -52,18 +52,18 @@ env: - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90=" # NPM_API_KEY - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI=" - # AWS_SECRET - - secure: yFpLFrM42STWqxw6dlVvyr0hvBbVAOHhkKQ1yQcuZ4MtTktCUOItUt9hZTExy659sJJxeBsT0YD66FdVggV+rTG8KDFGcBZJ8RZqN2AHa1+PMZfzF5N35bkacOWoKd1aAReRWZcVspvHjC1h6lAlVR69qSRqRhOL7/IMTDYrZMMwuS7/Pqb0jfdCJgiOf8uFwAn1ZVsJvDvC7AcxYYNLMA+GFD6ay7GX4zoqBdHwcyupKU4g+Fwjy3673kZwfWKITtzmwmV18p0SIiqQp68K6lvsZ2H7Hw6TXOEMkvda1YMD+lmV/dcc6o6W6bsDAk2cZx5JxSu3trvhkpYpK9JE6FUJ1I5ITiPkAZYAnIjckSM+rLZ6Vanxtmc0zNL6cxc4DTfu7V8dQ2MlPxHV125rMspYeJcxi8u/nlSRSJy2C8jaPGzaBQmHM9HlzJNhpTeR4A/3YqTcbcRMgMxvuuslHEUXDeTV+lqfhw1pLvD+Ut+Q6IBkNVdMDVBoeLvuwtXwyFF4skuEcTvOezmh9VNNrMgx2ZcPnJR85aUD+A/MoYihn1dPr66rh2vNJSRKp4uQdgRnldtLaHh5JgX3cR0PPtSat99shV/YkhhGG3WGl6lqOLPQTDX9XLLm9mTmOQzAK7p6GjRKM1PVWOc+3VA8dc3XTCMjBaFh9zgtSsfDibs= # AWS_KEY - secure: QXxHO6Dt5kGDsN2hjSk//0Rf3eHsjOXBq9CdK1kyePLDks6J1wCUp7hT3PMqZG3wH8yd6i4m8mielDdOurquOHVZgdiWaDRw/FMggRcmOGzCl96Afdz199v4ep6aS1YzndEPmwaKp2jFiCsg8LvByJjlHKtGSWc4Yw7+B1WjSygLoZ1eU4TYeig3xfhHE2ENoIGdnk5DDSjZ2xypqc8upmQIbfFya2dd0nMwA8GjEpVWGAYJy3RhOyKlWKGvO2sW+bf3DVCqnYvLRs8kAGh7qQV//rkkycNWFVUsQZkNd0+mX7bi16aJoaj4HSiW4pR/Z0yDa55Lb7CZKdP0sZgKcojUqkUe8faU8N7LQEkK0RYF7zfSAt2y0ns25Nt7os1xUdY/3Xluw0SMzTR5zX8PiEUVtQyFS33T43GKuQT4joYCseIFCqpZ1a5iYemlR9M7DqZDPQ8TkwHn2yzP59ax25U3FB3AYMz6pd2WuIKsa3XU9irJOiGSHXC3YmS2H70cZpL+r4OxtmsjXVR5RQQWcGEurb3vadk/Iq5S4EXKG9M9HKtLCysGPdynw3/+0GlscdIf+O2eZSvFJfahcVvaPSUxLgyOFM+W3sd0EwjGnTWwXu9zN7LbMr57vqzNUZ0mgSNX7qz2+z9V4jBTNRk5DaG5vRr+7uDHgKdtNQHYWUU= - # QA_AWS_SECRET - - secure: "BEjtXJWPIgyOY9oDYZf3sMGmmW4FFOWZEwdWc+nejDkcQxScN5ACTplRKwNUnxu3pvaxdjpp/DPn2N6/fXwpXrF7zpnydEeDJQu83L00JsOPRH67Uq9cbA06OZb1FYsKnQ+p7ssMLMRIgFUC8YDR0VT/qZ0jEZw3knntQof93vs6r3l2c3Zto6bL0BQb4Mm2T7Ui172un3rcImmGRwVfpjGgkmSEUNKobUJS7LKr0xPQfdMQ/UEv9VJEwb/YZdHXhOMeH6hO5ZoYTWEX32HLr3akAhmAj99Jmo71NDTrfrpZWTc4PZZQvKQNDI+JAxsCCqNkMdEN0EuO3ZsKZw0tt4ksRt3UL2yXhhd9PdFmyCnhWrIJ3OQuLtOyrFC1V6tRuE4u1cezvPCpYFuFWMO9nnEyR1jbg63X/bgAbKbl1EV/dUySdHPscToQhr2p0szJYIoR5noW1aGr417yutPKssBtdEQKjbu90efeH2zyDe118nqQ95SkpMtyG9Dmhnfz6YYLtCoLPz7xeTLi1VXz79NbWOMgftK/R8aJ/IHXqyX+F01wp4YjOcgheq3HwLzcWqZ25N497HUkQ07Y54wbs5zh1gTpF8Jua2b+egCCGtlGJT3/W4GEhWGQ8yTcoBYctLuo16mQyDChKeFg8dE8+PS2QRmYTGofrd9pn3W8Y+w=" + # AWS_SECRET + - secure: yFpLFrM42STWqxw6dlVvyr0hvBbVAOHhkKQ1yQcuZ4MtTktCUOItUt9hZTExy659sJJxeBsT0YD66FdVggV+rTG8KDFGcBZJ8RZqN2AHa1+PMZfzF5N35bkacOWoKd1aAReRWZcVspvHjC1h6lAlVR69qSRqRhOL7/IMTDYrZMMwuS7/Pqb0jfdCJgiOf8uFwAn1ZVsJvDvC7AcxYYNLMA+GFD6ay7GX4zoqBdHwcyupKU4g+Fwjy3673kZwfWKITtzmwmV18p0SIiqQp68K6lvsZ2H7Hw6TXOEMkvda1YMD+lmV/dcc6o6W6bsDAk2cZx5JxSu3trvhkpYpK9JE6FUJ1I5ITiPkAZYAnIjckSM+rLZ6Vanxtmc0zNL6cxc4DTfu7V8dQ2MlPxHV125rMspYeJcxi8u/nlSRSJy2C8jaPGzaBQmHM9HlzJNhpTeR4A/3YqTcbcRMgMxvuuslHEUXDeTV+lqfhw1pLvD+Ut+Q6IBkNVdMDVBoeLvuwtXwyFF4skuEcTvOezmh9VNNrMgx2ZcPnJR85aUD+A/MoYihn1dPr66rh2vNJSRKp4uQdgRnldtLaHh5JgX3cR0PPtSat99shV/YkhhGG3WGl6lqOLPQTDX9XLLm9mTmOQzAK7p6GjRKM1PVWOc+3VA8dc3XTCMjBaFh9zgtSsfDibs= # QA_AWS_KEY - - secure: "DnV3CEYlzTjrAi1bmip2P1ljZ2nZPdTD051+n2SSZapfgmo/pqy3a+fJ1Ct8Lh2x0Nfw+XtyI2mfFV4Vs2LGeHzoPfEYOXtFJZf9L0/mE/RSgR/qLr0OA8324qpJtTdrI1CKq0j5Q6gXKm+RvCVTevJITWdOQmrAD75iqTdezCgvqkz/cYNB6y4/3fezIn1ox0g6W3o3XmM3B1//q5YbP2JW2AVYH83VCMG0wF2codEUKHJchnM9psDgZ/g79D7e378yK6X1tgcol6s9pOp8+8PIZHYjeKV139a/ZIkSPWmnMOFdM6sXinJe1uVrrKHw2oP6PshhAVI+DhH2JGEWoxfezdqMMXZ12x543lPFSHisbHBoyycrZJRpEMVDjto5pUsxTMvWeNGOJveJCv52zxm1+Jy26OC8ssq0WjUGMO0fYwtBL9Ts1iuZSKd6qF5GqdstKYQss771pgsVi2abGuURa1+z311bERV8YDlphyspRw1lS/cI1R40HxSGMD/fZeZhMAotzfrTcRpZgYP7/ViGCte9tmwnH+WK0t2/YxFigtB0J8Aq57EOl5WWXs99tW0Ypk9NbTjNwDxUi4O6g97teR1/D0NmowKE+FLoaibnsy/ic5qUFRSB0RavPSRRpFKRUNcSgGKUuTIvG4BFTXD6SPsSxXs3r1J7Jy2H9o8=" - # PROD_AWS_SECRET - - secure: "br10xaM6/+62Ge0qPeNUhXSV4agMRB8buARy6tySw3679RyCcAHbLSL5chearYju5hiCMGiBn09yioaxZeHsAWrIflxrlMtB0ZiAWnJjHmE+y0Cq2K+ohwjHiek1jKfFYw/SsDCIfxxqX/fPoS6QTpGe35MtjrbVMWttEW/fP62moIAh2GDp8tF0iHnAMFcAFuTiNbc+TCWF+tbAbU1afSpNpVYrs5nKbnrBOI0PWbK4r56TLpMY7fPwAb+c0vcTnoOtFDGeiPweSDXkUTkW/wlA68Ayqj7yg7lRErzi1UpEBroajFaTmYfoX6VdZo1EIzmOmxykcdfKwI/x+mqO1PnwAZNxhu3zR6uhEk0b1AkR5K/DZU/SH5FTxWOI8PsmssuPj/3e4ovTAFAL2e+LSJdQnHOF+epBH83mAnjbjahS72EZC4i9s4+9w1WVACLFL4Fadm5VnP11A+YPbafoPDqIXOtF5hXkMmrO8cw0VeSZWXfBDZ+YjAgF7CP4bV9X7ZqVYbOipcqv1Ml5FXne/jJn6j+tQMoBKZh7W1AF/ue/ixRhQCn4MTQ+n5OFow+x0/FRHI+D1WAUbVTNDviBYY7e682oATGCdra0uE2PeREKuh9OR/ZqH0CARHkAVAZWu2UrkdR+HlEhVmBwnp2Nw6EQBR8v9jezAUjucue9GjA=" + - secure: "pQzOYdNLlSsQJ7JChT6KKgT0K7h/g+fvXvlKQzBunAeTWZzbkFm0TQDk2OIq8q5btvmvnMtpiAfaBdEQR1XRVWEFBPfHwXp5nbjSU6HPYYaUYamegXIQHg9fQM6YtGm3sFvAMbGKKzKdaCucSmnm1BiliagVMvgM8o7nQbmWC9fzH//p3ajdIETltBqUmOwKw21cx2DNGWbf/d0E3c7NoGgPBn9WXX4J3ekLKxM/YmSxnPG4/tSKFKbJgUrXne4mhUAPc+oZJZ4rIC21Lj48jeZOdDZ5Ch+8gjIaBjQLJMj/AgWBhz1Wc2ugZ8nLQHiYzjksptoPaBynDTYQa/0xRIzqKwxSVCBN1+KXoGOHhm5NZWo4wEKcEhFCRdcUZbdoOHMZZ7Pfzx5uMcf3z8/wJaT8DagOYQkVhcuGivOjLaoAM8Z0PahZF7kFhufu+QSrWAk8YsTv62g6sWo/BD5ylw0Hl0WYFXSmqh9Z5IfVMQ8Lc0AFs66rTIURrf2UrMVtGGB5uMhE60hHGbaXeK+biIP/Km82d7HRHrRV/D/+1xHLmriNjAcYQGM/O52/42tQhu1d59O4+kMopg50/aNctY7sS9b8q950L3qdz5j18sw+r9oITIBDW0JrN5KTwe60YRCwxOvjaq+WydO8nd5PjealC5zQDeuqWZw0mi4QMwo=" + # QA_AWS_SECRET + - secure: "UlNcBJKlpGJPh8uQ1QdSdkdnC+Zgo2nLe0je2ogupinXXrb+xxfhgn+6LGEAVJBwcryHjPDM92bzcEl632xOz6vlfGWe9qvFxm4rYIUwR/6N9kuCFKubq1HoeUZDY6DmNvXqJwm5FewjA2AWLxM0wtchYxoz1ol859TXq8d09Tv1inhlqdIalPNM9WYRdgikURTtqNgIghaF5afxP6sDmLHjlU4dkn9LHC2JhQVZCg97ALmw5AoUDLQaKrjoZ+tF0raNKFr6VlBgpKN88wNkxMR90o9CELtPerS7a4G4XRioLNMSz6Yk9uOZ0uayqb7D+OrMf+gEa5/uqSvnN5a0M7GOlwaC2j2nEBJWXn6fxzNWr4jLb4rBx9M7QNMpWuCTNPmqsqyT1RYAgM87wvC5+XmHCMb9H3XDPQkSqevt1xZ8z+lKZolWkfHNvblbm93PJmLYtSpYfJryZCkV2atU7A25eSEWBohZ+90DvU8gIff/7crLTSYvhiE/PIRukREe+3Iujehs9rbN0ZiRgYBq3QzV1VE/F+VonUPnsTjAzuTmMVmJ0hm04H6lZ5D+RXlo5VPFt8XanJAiWAATTog9V0r3oy5ORzng4s78if9IwR6SDPD9slNBTEBZrvgHTX4F5Mu/vwx2f1BSWoOcjReVdM6ZeIyjbPVCPNA+zX4H3cE=" # PROD_AWS_KEY - - secure: "tPQLujveVEb1rhHHaecio/30gISQ2PHODfyeN27BfCY/1nBTif50n7+HbWC9YClyMqqN1odlV5bGuRBYNaz/F6gRxHXta1MGvP/VmrFtrEY69BhxXE23py6w4kVvNelEO8bw7u4JITM73nkGtQMfJumQhJ0lBVYI4I0CeQBVgd9WoUNRmHfcosOQkxIpFerg8sWGfOqHqIxZ/9UnH5e7zHIdFNGGAeFKqYhnFirWiSEkHunSBbknZv/+8CcGsULSKbM2TngpaDMjc0k6fKj/EtLopOyTHraO0VxoKk50irqSaUSIigzgyalj7zK94mR2+vQtRVYrvd//lbDZwhuX3zV/nJvkmy5poVoSBFwtq/StpsaII9hbA4CppMg+A4OGdpLdWwWVfcXYOSpVAqydjxR46Bi8pcgBTRkJlNWmoPDIa9niy8/iTKJiTrPmJ+uj9NOc2pCAghj2QB9z8Wrk6c6P8BVHT6T3agYB+5MZhLXjPUOPsPt6Y1l7M5v0NGTcYlMNYQMmHnUdQ7+xc02hQ0BUhddWnVm7CESTOYe865HNine853TGYO2megU7b25yEXKddJKV5P6odrGBVhazLpztev2YrWFhS9Iv9VInGvDCtvaq/pF00UVptH4gsb4VQr3KNOe5jw7hUCRuy4PGUgLTejolD1sQ7gbr1dtCH08=" + - secure: "YRD3JJso8q+Ed2xKaIUS6TlTQeZFtEVOUSPwtQf1JwFuOkZb5NZ+eAO70KXCGuNRtJm4eWNM2bmEEo9REDHxDAMU69br/5QkumoN3I49/6/TNP43l2P44+C4WAGj8Nnwt5uDBmcYaDbdgCTflZ215ny1kXz36zKSy5LKFoXSCU9Ug5rdeo7pDSSYToF9OUBAiA/o+9YtV45q1lmUvJLUE1KNR7w+ts1oQ67iFhOuraSiJMUdhJjYmTKXVUMkEO/kk7iRIAalrWaF3IogqoIGSmsBUk7MeoMsVwh4fnAiSm9zlRPYP+XVNIaQAJVz5thRgzu7LD7XizmbMQY3YHap9TPeRS7dzf6vFGyqpbGe1p4CIxQMEqydgVIy0l1CYjwXN0RGuWfLk6UtOhtxRJmdSm1+0u0saqxhCixSFClj29sSoJbwlhDwUplBfYTCwTJtF86LFUNeSACmkh84F9355A5tf8oSFI5T+NW0zJehZS+92BLKEIzkMamwsjCdKrVB+vbLxTsBe1iiECCK0Izj+TherCBwUPos/JRru+3VwxCATOOSRI+v5qRK5tDaf6a9CVyR1NbMJFWsfq0SOtLKxujmJP2QR/+x32uMwq8uNYJHdLniVrk1VEd/oARP0DHHgFXzKOjmBtKMDj//gjr1wcQp2f+HEW4Tf5Z0YHcqiIA=" + # PROD_AWS_SECRET + - secure: "XCVGHnw7eYrE6SdgG4kBNAjLK0ZVgo9mGOzOVSA9+caWx6sQJsLWFq8QJsrU7jxqkRIQxM7899NBPUdhHPV9mRYue+0+aH6OwZ6WyylDeyZtwtoq+pnB6uXKlhEnQiz8NmrgI7P92DomX2Dd70AAjrfDpCAbJCQvowLOoO9zkEyyN1c8JQnhA3TJQFfw81WEeh9GBShMyhfD+y3tnpllb4vUdYHYMHE7wEUl7RMjVtFg538V+pEyk/1tXTf+Tvb/ZuazsXCRyzLVZQyXKP0U6SVNsZCu5SZR4Pb2F0JH8PO0p/wRrUoUrHnd7b0yieIlrTAVS5VGeBs1bTG+fgta09mllo0WxedaDoxQGYl9YrOK09EPbjFGJemp/Q9uKoSWymNrkgggMgZlq2CdL/QFbWUfWqhRs9/BWnh4SuQsUW5tsE99qxbFYC1kfuJwR2g8jN3HWAeV37BWC3ct3f5+oOKIgaKQmk2+lH9Z7kII+QOCt10kM21IF5RxZjhvg6AxoORjoRt8Dia+iMSbW1fnU9QCmSC5S0Vvccynjl9ldnPUHOpjEVaoqQOV/6cUlAEw82ySOakyzYpdS8l5DrLwt2Ik3fQhoIgXQe6l1FabGy6ZixcXqoMnDJJh04rUwUD6Tyzn0PZJp3KziDHJMg/BJSTKXmgODRyV2cGxoqbfy8g=" addons: apt: sources: diff --git a/setenv.sh b/setenv.sh new file mode 100644 index 000000000..80328356f --- /dev/null +++ b/setenv.sh @@ -0,0 +1,8 @@ +#!/bin/bash +if [ "$TRAVIS_BRANCH" = "dev" ]; then + export NODE_ENV=development +elif [ "$TRAVIS_BRANCH" = "release" ]; then + export NODE_ENV=production +elif [ "$TRAVIS_BRANCH" = "master" ]; then + export NODE_ENV=production +fi \ No newline at end of file From fcb564d3d9ef400874fbfa63299da80e257c7aab Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 15:07:58 +0530 Subject: [PATCH 57/82] Trying set correct NODE_ENV for build to get full source code for debugging in dev --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 66372225b..f1aee5f18 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,10 +4,10 @@ node_js: install: - npm install script: -- npm run lint +- npm run lint && npm run build-navbar sudo: false before_deploy: -- chmod +x setenv.sh; ./setenv.sh; npm-prepublish --verbose +- chmod +x setenv.sh && ./setenv.sh && npm-prepublish --verbose deploy: - provider: npm email: "$NPM_EMAIL" From fd910471b86e21bb1caae366c020d3f19b02d98d Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 15:10:24 +0530 Subject: [PATCH 58/82] AS#102481437698833, Add NavBar react component to tc-site -- added www before home page url --- components/Navbar/Navbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index db0ad120b..f8c73dfe9 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -56,7 +56,7 @@ class Navbar extends Component { const domain = this.props.domain const mobileMenuUrl = this.props.mobileMenuUrl const mobileSearchUrl = this.props.mobileSearchUrl - const homePageUrl = '//' + domain + const homePageUrl = '//www.' + domain return (
From d2457a7c3a98c5da7c9375978138d853ee2e78f0 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 15:34:01 +0530 Subject: [PATCH 59/82] Trying set correct NODE_ENV for build to get full source code for debugging in dev --- .travis.yml | 4 +++- package.json | 2 +- setenv.sh | 8 +++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index f1aee5f18..893ea1f8c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,11 +3,13 @@ node_js: - 5.5.0 install: - npm install +before_script: + chmod +x setenv.sh && ./setenv.sh script: - npm run lint && npm run build-navbar sudo: false before_deploy: -- chmod +x setenv.sh && ./setenv.sh && npm-prepublish --verbose +- npm-prepublish --verbose deploy: - provider: npm email: "$NPM_EMAIL" diff --git a/package.json b/package.json index 01acf732c..25e65f8b5 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "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", - "build-navbar": "webpack --build --tc --config navbar.webpack.config.coffee;" + "build-navbar": "webpack $BUILD --tc --config navbar.webpack.config.coffee;" }, "dependencies": { "appirio-styles": "0.0.26", diff --git a/setenv.sh b/setenv.sh index 80328356f..6431fa583 100644 --- a/setenv.sh +++ b/setenv.sh @@ -1,8 +1,10 @@ #!/bin/bash if [ "$TRAVIS_BRANCH" = "dev" ]; then - export NODE_ENV=development + process.env.ENV=dev elif [ "$TRAVIS_BRANCH" = "release" ]; then - export NODE_ENV=production + process.env.ENV=qa + process.env.BUILD_ARGS=--build elif [ "$TRAVIS_BRANCH" = "master" ]; then - export NODE_ENV=production + process.env.ENV=prod + process.env.BUILD_ARGS=--build fi \ No newline at end of file From 19ea7c052bc4b052c14ceea0f19f0d47ab58596b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Apr 2016 15:39:39 +0530 Subject: [PATCH 60/82] Trying set correct NODE_ENV for build to get full source code for debugging in dev --- setenv.sh | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/setenv.sh b/setenv.sh index 6431fa583..f8513d0fa 100644 --- a/setenv.sh +++ b/setenv.sh @@ -1,10 +1,10 @@ #!/bin/bash if [ "$TRAVIS_BRANCH" = "dev" ]; then - process.env.ENV=dev + export ENV=dev elif [ "$TRAVIS_BRANCH" = "release" ]; then - process.env.ENV=qa - process.env.BUILD_ARGS=--build + export ENV=qa + export BUILD_ARGS=--build elif [ "$TRAVIS_BRANCH" = "master" ]; then - process.env.ENV=prod - process.env.BUILD_ARGS=--build + export ENV=prod + export BUILD_ARGS=--build fi \ No newline at end of file From caee027c938471e496c3716874dcb456708ea8f2 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 8 Apr 2016 15:26:06 +0530 Subject: [PATCH 61/82] AS#109666937826887, Add search callback on selection/enter of search term in search bar --- components/Navbar/Navbar.jsx | 8 +- components/Navbar/NavbarExample.jsx | 155 +++++++++++++++--- components/Navbar/NavbarExample.scss | 15 ++ components/SearchBar/SearchBar.jsx | 100 +++++++---- components/SearchBar/SearchBar.scss | 18 +- components/SearchBar/SearchBarExamples.jsx | 6 +- .../SearchSuggestions/SearchSuggestions.jsx | 55 +++++-- .../SearchSuggestionsExamples.jsx | 10 +- 8 files changed, 282 insertions(+), 85 deletions(-) create mode 100644 components/Navbar/NavbarExample.scss diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index f8c73dfe9..cf1c2d1de 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -26,6 +26,7 @@ class Navbar extends Component { this.updateSearchSuggestions = this.updateSearchSuggestions.bind(this) this.handleTermChange = this.handleTermChange.bind(this) this.handleMobileClick = this.handleMobileClick.bind(this) + this.handleSearch = this.handleSearch.bind(this) this.state = {searchSuggestions: [], recentTerms: []} } @@ -38,6 +39,10 @@ class Navbar extends Component { }) } + handleSearch(searchTerm) { + this.props.onSearch.apply(this, [searchTerm]) + } + updateSearchSuggestions(data) { this.setState({searchSuggestions: data}) return data @@ -67,7 +72,7 @@ class Navbar extends Component {
- +
@@ -82,6 +87,7 @@ class Navbar extends Component { Navbar.propTypes = { searchSuggestionsFunc : PropTypes.func.isRequired, + onSearch : PropTypes.func.isRequired, username : PropTypes.string, userImage : PropTypes.string, domain : PropTypes.string.isRequired, diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index 2eaeadc9c..fd90c08fd 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -1,37 +1,138 @@ +require('./NavbarExample.scss') + import Navbar from './Navbar' -import React from 'react' +import React, {Component, PropTypes} from 'react' +import ReactDOM from 'react-dom' import fetch from 'isomorphic-fetch' import _ from 'lodash' -const NavbarExample = () => { +const suggest = (searchTerm) => { + return fetch('https://internal-api.topcoder-dev.com/v3/tags/_suggest/?q=' + searchTerm) + .then(response => { + if (response.status >= 200 && response.status < 400) { + return Promise.resolve(response) + } else { + return Promise.reject(new Error(response.statusText)) + } + }) + .then(response => { + return response.json() + }) + .then(data => { + const tags = _.get(data, 'result.content') + return tags.map(tag => { + return tag.text + }) + }) +} + +class SearchResults extends Component { + constructor(props) { + super(props) + } + + render() { + const memberRender = (member) => { + const style = {color : member.color} + return ( +
+

Handle: {member.handle}

+

Rank: {member.rank}

+
+ ) + } + const challengeRender = (challenge) => { + return ( +
+

Name: {challenge.name}

+

Starte Date: {challenge.startDate}

+

End Date: {challenge.endDate}

+
+ ) + } + const searchResults = this.props.results + let exactMatch = null + if (searchResults.member) { + exactMatch =

Member

{ memberRender(searchResults.member) }
+ } + let matchedMembers = null + if (searchResults.members) { + matchedMembers =

Members

{ searchResults.members.map(memberRender) }
+ } + let matchedChallenges = null + if (searchResults.challenges) { + matchedChallenges =

Challenges

{ searchResults.challenges.map(challengeRender) }
+ } + + return ( +
+ { exactMatch } + { matchedMembers } + { matchedChallenges } +
+ ) + } +} + +SearchResults.propTypes = { + memberMatch : PropTypes.object, + membersMatch : PropTypes.array, + challengesMatch : PropTypes.array +} - const suggest = (searchTerm) => { - return fetch('https://internal-api.topcoder-dev.com/v3/tags/_suggest/?q=' + searchTerm) - .then(response => { - if (response.status >= 200 && response.status < 400) { - return Promise.resolve(response) - } else { - return Promise.reject(new Error(response.statusText)) +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' + }] } - }) - .then(response => { - return response.json() - }) - .then(data => { - const tags = _.get(data, 'result.content') - return tags.map(tag => { - return tag.text - }) - }) + } + this.setState({searchResults: results}) + } + + render() { + return ( +
+

Logged In Example

+ +

Non Logged In Example

+ +
+ +
+
+ ) } - return ( -
-

Logged In Example

- -

Non Logged In Example

- -
- ) } 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/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 966abfcc2..a8885d2b3 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -1,8 +1,10 @@ require('./SearchBar.scss') 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 @@ -11,21 +13,46 @@ class SearchBar extends Component { super(props) this.state = { searchState: 'empty' } 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) } - onFocus() { - this.setState({ searchState: 'focused' }) + componentDidMount() { + window.addEventListener('click', this.handleOutsideClick) } - onBlur() { - if(this.state.searchValue) { - this.setState({ searchState: 'filled' }) - } else { - this.setState({ searchState: 'empty' }) + 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' }) } onChange() { @@ -43,6 +70,25 @@ class SearchBar extends Component { this.setState({ searchState: 'empty' }) } + onKeyUp(evt) { + // if return is pressed + if (evt.keyCode === 13) { + this.setState({ searchState: 'filled' }, function() { + this.search() + }) + } + } + + handleSuggestionSelect(selectedTerm) { + this.setState({ searchValue: selectedTerm, searchState: 'filled' }, function() { + this.search() + }) + } + + search() { + this.props.onSearch.apply(this, [this.state.searchValue]) + } + render() { const recentList = this.props.recentTerms const popularList = this.props.suggestions @@ -50,9 +96,7 @@ class SearchBar extends Component { const searchState = this.state.searchState const searchValue = this.state.searchValue - let classString = 'SearchBar' let typeaheadText = '' - let popularForDisplay = [] if(searchValue) { for(let i = 0; i < popularList.length; i++) { @@ -61,40 +105,31 @@ class SearchBar extends Component { if(!typeaheadText && idx === 0) { typeaheadText = searchValue + popularList[i].substring(searchValue.length) } - popularForDisplay.push( - - { popularList[i].substring(0, idx) } - { searchValue } - { popularList[i].substring(idx + 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 ?
- : + : return ( -
- +
+ { typeaheadText } -
+
- {results} +
+ {results} +
) @@ -103,6 +138,7 @@ class SearchBar extends Component { SearchBar.propTypes = { + onSearch : PropTypes.func.isRequired, onTermChange : PropTypes.func.isRequired, recentTerms : PropTypes.array } diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 57dd4e6f5..cbd0cb9ca 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -54,7 +54,7 @@ $active-icon-wrap-bg: #888894; background-color: $active-icon-wrap-bg; } - .SearchSuggestions { + .suggestions-panel { display: block; } } @@ -70,7 +70,7 @@ $active-icon-wrap-bg: #888894; background-color: $active-icon-wrap-bg; } - .SearchSuggestions { + .suggestions-panel { display: none; } } @@ -136,22 +136,20 @@ $active-icon-wrap-bg: #888894; } } - .loading { + .suggestions-panel { + display: none; position: absolute; - top: 25px; + top: 43px; left: 0; width: 100%; z-index: 1000; + } + + .loading { background: none; } .SearchSuggestions { - display: none; - position: absolute; - top: 43px; - left: 0; - width: 100%; - z-index: 1000; strong { font-weight: 600; diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 3f6041a2d..c1a2890d7 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -22,8 +22,12 @@ const handleTermChange = (searchBar, oldTerm, searchTerm, callback) => { }, 3000) } +const search = (term) => { + console.log('Searched for term: ' + term) +} + const SearchBarExamples = () => ( - + ) module.exports = SearchBarExamples diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index 33087075e..68c686f2b 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -1,10 +1,11 @@ require('./SearchSuggestions.scss') -import React, { Component } from 'react' +import React, { Component, PropTypes } from 'react' import StandardListItem from '../StandardListItem/StandardListItem' import Panel from '../Panel/Panel' import classNames from 'classnames' +// properties: onSuggestionSelect, recentSearch, popularList class SearchSuggestions extends Component { constructor(props) { super(props) @@ -12,10 +13,37 @@ class SearchSuggestions extends Component { this.state = { iSEmpty: true } } + handleClick(term, evt) { + evt.stopPropagation() + this.props.onSuggestionSelect.apply(this, [term]) + } + render() { const recentList = this.props.recentSearch const popularList = this.props.popularSearch + const suggestionItem = (term, i) => { + let labelDOM = term + if (this.props.searchTerm.length > 0) { + const idx = term.toLowerCase().indexOf(searchTerm.toLowerCase()) + if (idx !== -1) { + labelDOM = ( + + { term.substring(0, idx) } + { searchTerm } + { term.substring(idx + searchTerm.length) } + + ) + } + } + + return ( +
  • + +
    • + ) + } + const recentSearches = !recentList ? '' : (
    @@ -29,11 +57,7 @@ class SearchSuggestions extends Component {
      - { - !recentList ? '' : recentList.map((search, i) => { - return
      • - }) - } + { recentList.map(suggestionItem) }
    { popularList ? '' : ( @@ -55,11 +79,7 @@ class SearchSuggestions extends Component {
      - { - popularList.map((search, i) => { - return
      • - }) - } + { popularList.map(suggestionItem) }
    @@ -79,4 +99,17 @@ class SearchSuggestions extends Component { } } +SearchSuggestions.propTypes = { + onSuggestionSelect : PropTypes.func.isRequired, + recentSearch : PropTypes.array, + popularList : PropTypes.array, + searchTerm : PropTypes.string +} + +SearchSuggestions.defaultProps = { + recentSearch : [], + popularList : [], + searchTerm : '' +} + export default SearchSuggestions \ No newline at end of file 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 (
    - - - + + +
    ) } From f0dd7e71ac5e63dc7ad1ed0df02f57c6b4886aab Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 8 Apr 2016 15:42:34 +0530 Subject: [PATCH 62/82] AS#109666937826887, Add search callback on selection/enter of search term in search bar -- Fixed lint errors --- components/Navbar/NavbarExample.jsx | 1 - components/SearchSuggestions/SearchSuggestions.jsx | 9 ++++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Navbar/NavbarExample.jsx b/components/Navbar/NavbarExample.jsx index fd90c08fd..703a5d372 100755 --- a/components/Navbar/NavbarExample.jsx +++ b/components/Navbar/NavbarExample.jsx @@ -2,7 +2,6 @@ require('./NavbarExample.scss') import Navbar from './Navbar' import React, {Component, PropTypes} from 'react' -import ReactDOM from 'react-dom' import fetch from 'isomorphic-fetch' import _ from 'lodash' diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index 68c686f2b..dd07c98d4 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -11,9 +11,11 @@ class SearchSuggestions extends Component { super(props) this.state = { iSEmpty: true } + this.handleClick = this.handleClick.bind(this) } - handleClick(term, evt) { + handleClick(evt) { + const term = evt.currentTarget.getAttribute('data-term') evt.stopPropagation() this.props.onSuggestionSelect.apply(this, [term]) } @@ -24,7 +26,8 @@ class SearchSuggestions extends Component { const suggestionItem = (term, i) => { let labelDOM = term - if (this.props.searchTerm.length > 0) { + const searchTerm = this.props.searchTerm + if (searchTerm.length > 0) { const idx = term.toLowerCase().indexOf(searchTerm.toLowerCase()) if (idx !== -1) { labelDOM = ( @@ -38,7 +41,7 @@ class SearchSuggestions extends Component { } return ( -
  • +
    • ) From a17604770239800d4caca04fe21296caeaadcb06 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 11 Apr 2016 17:40:14 +0530 Subject: [PATCH 63/82] AS#109666937826887, Add search callback on selection/enter of search term in search bar -- Added pointer mouse cursor to the search icon --- components/SearchBar/SearchBar.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index cbd0cb9ca..b602183f9 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -51,6 +51,7 @@ $active-icon-wrap-bg: #888894; } .search-icon-wrap { + cursor: pointer; background-color: $active-icon-wrap-bg; } @@ -67,6 +68,7 @@ $active-icon-wrap-bg: #888894; } .search-icon-wrap { + cursor: pointer; background-color: $active-icon-wrap-bg; } From 7ae24dc76c026f7391a88d1377bc971d6b720b42 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Mon, 11 Apr 2016 18:20:40 +0530 Subject: [PATCH 64/82] AS#110774117957300, Improve logic for handling multiple requests in SearchBar component -- Changed suggestions array input to the SearchBar component as functional callback instead of properties. This would prevent error scenarios where multiple requests in the parent component are updating the same object for better memory usage. -- Added logic for handling multiple requests and selecting only the latest request's response to update the SearchBar component. --- components/Navbar/Navbar.jsx | 17 +++------- components/SearchBar/SearchBar.jsx | 38 +++++++++++++++++----- components/SearchBar/SearchBarExamples.jsx | 17 ++++++---- 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index cf1c2d1de..63a6a0aa5 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -23,19 +23,17 @@ class Navbar extends Component { constructor(props) { super(props) - this.updateSearchSuggestions = this.updateSearchSuggestions.bind(this) this.handleTermChange = this.handleTermChange.bind(this) this.handleMobileClick = this.handleMobileClick.bind(this) this.handleSearch = this.handleSearch.bind(this) - this.state = {searchSuggestions: [], recentTerms: []} + this.state = { recentTerms: [] } } - handleTermChange(searchBar, oldTerm, searchTerm, callback) { + 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(searchBar, [searchTerm]) - .then(this.updateSearchSuggestions) + this.props.searchSuggestionsFunc.apply(this, [searchTerm]) .then(data => { - callback.apply(searchBar, [searchBar, data]) + callback.apply(null, [reqNo, data]) }) } @@ -43,11 +41,6 @@ class Navbar extends Component { this.props.onSearch.apply(this, [searchTerm]) } - updateSearchSuggestions(data) { - this.setState({searchSuggestions: data}) - return data - } - handleMobileClick(se) { const mobileMenuLink = se.target.querySelector('.mobile-wrap > a') if (mobileMenuLink) { @@ -72,7 +65,7 @@ class Navbar extends Component {
    - +
    diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index a8885d2b3..88fd7d77b 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -11,7 +11,7 @@ import classNames from 'classnames' class SearchBar extends Component { constructor(props) { super(props) - this.state = { searchState: 'empty' } + this.state = { searchState: 'empty', suggestions: [] } this.onFocus = this.onFocus.bind(this) this.onChange = this.onChange.bind(this) this.onKeyUp = this.onKeyUp.bind(this) @@ -19,6 +19,7 @@ class SearchBar extends Component { this.search = this.search.bind(this) this.handleSuggestionSelect = this.handleSuggestionSelect.bind(this) this.handleOutsideClick = this.handleOutsideClick.bind(this) + this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this) } componentDidMount() { @@ -55,13 +56,33 @@ class SearchBar extends Component { this.setState({ searchState: 'focused' }) } + handleSuggestionsUpdate(requestNo, data) { + if (requestNo === this.state.maxRequestNo) { + this.setState({loading: false, suggestions: data}) + } + } + onChange() { const oldTerm = this.state.searchValue - this.setState({ searchValue: this.refs.searchValue.value, loading: true }, function() { - this.props.onTermChange.apply(this, [this, oldTerm, this.state.searchValue, function(searchBar) { - searchBar.setState({loading: false}) - }]) - }) + this.setState( + function(prevState, curProps) { + const rc = prevState.requestNo ? prevState.requestNo + 1 : 1 + return { + searchValue: this.refs.searchValue.value, + requestNo: rc, + maxRequestNo: rc, + loading: true + } + }, + function() { + this.props.onTermChange.apply(null, [ + oldTerm, + this.state.searchValue, + this.state.requestNo, + this.handleSuggestionsUpdate + ]) + } + ) } clearSearch() { @@ -71,8 +92,9 @@ class SearchBar extends Component { } onKeyUp(evt) { + const eventKey = evt.keyCode // if return is pressed - if (evt.keyCode === 13) { + if (eventKey === 13) { this.setState({ searchState: 'filled' }, function() { this.search() }) @@ -91,7 +113,7 @@ class SearchBar extends Component { render() { const recentList = this.props.recentTerms - const popularList = this.props.suggestions + const popularList = this.state.suggestions const searchState = this.state.searchState const searchValue = this.state.searchValue diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index c1a2890d7..34185fb77 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -3,23 +3,28 @@ import React from 'react' const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js'] const suggestions = [] +let timeout = null -const handleTermChange = (searchBar, oldTerm, searchTerm, callback) => { - suggestions.splice(0, suggestions.length) - setTimeout(() => { +const handleTermChange = (oldTerm, searchTerm, reqNo, callback) => { + let suggestions = [] + timeout = setTimeout(() => { if (searchTerm && 'java'.indexOf(searchTerm.toLowerCase()) !== -1) { + suggestions.splice(0, suggestions.length) suggestions.push('Java') suggestions.push('JavaScript') } else if (searchTerm && 'javascript'.indexOf(searchTerm.toLowerCase()) !== -1) { + suggestions.splice(0, suggestions.length) suggestions.push('JavaScript') } else if (searchTerm && 'coffee'.indexOf(searchTerm.toLowerCase()) !== -1) { + suggestions.splice(0, suggestions.length) suggestions.push('Coffee') suggestions.push('CoffeeScript') } else if (searchTerm && 'coffeescript'.indexOf(searchTerm.toLowerCase()) !== -1) { + suggestions.splice(0, suggestions.length) suggestions.push('CoffeeScript') } - callback.apply(searchBar, [searchBar]) - }, 3000) + callback.apply(null, [reqNo, suggestions]) + }, Math.floor((Math.random() * 1000) + 800)) } const search = (term) => { @@ -27,7 +32,7 @@ const search = (term) => { } const SearchBarExamples = () => ( - + ) module.exports = SearchBarExamples From 9702cdf041e402b4b9aad146965c8b4f8a644ea1 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 08:15:58 +0530 Subject: [PATCH 65/82] AS#110774117957300, Improve logic for handling multiple requests in SearchBar component -- Fixed lint errors --- components/SearchBar/SearchBar.jsx | 2 +- components/SearchBar/SearchBarExamples.jsx | 10 ++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 88fd7d77b..73d21fd88 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -65,7 +65,7 @@ class SearchBar extends Component { onChange() { const oldTerm = this.state.searchValue this.setState( - function(prevState, curProps) { + function(prevState) { const rc = prevState.requestNo ? prevState.requestNo + 1 : 1 return { searchValue: this.refs.searchValue.value, diff --git a/components/SearchBar/SearchBarExamples.jsx b/components/SearchBar/SearchBarExamples.jsx index 34185fb77..d785914f5 100644 --- a/components/SearchBar/SearchBarExamples.jsx +++ b/components/SearchBar/SearchBarExamples.jsx @@ -2,25 +2,19 @@ import SearchBar from './SearchBar' import React from 'react' const recentTerms = ['Photoshop', 'IBM Bluemix', 'Sketch', 'iOS Icon Design Challenges', 'React.js'] -const suggestions = [] -let timeout = null const handleTermChange = (oldTerm, searchTerm, reqNo, callback) => { - let suggestions = [] - timeout = setTimeout(() => { + const suggestions = [] + setTimeout(() => { if (searchTerm && 'java'.indexOf(searchTerm.toLowerCase()) !== -1) { - suggestions.splice(0, suggestions.length) suggestions.push('Java') suggestions.push('JavaScript') } else if (searchTerm && 'javascript'.indexOf(searchTerm.toLowerCase()) !== -1) { - suggestions.splice(0, suggestions.length) suggestions.push('JavaScript') } else if (searchTerm && 'coffee'.indexOf(searchTerm.toLowerCase()) !== -1) { - suggestions.splice(0, suggestions.length) suggestions.push('Coffee') suggestions.push('CoffeeScript') } else if (searchTerm && 'coffeescript'.indexOf(searchTerm.toLowerCase()) !== -1) { - suggestions.splice(0, suggestions.length) suggestions.push('CoffeeScript') } callback.apply(null, [reqNo, suggestions]) From 340d8e48ab65e7a34b58d269b9386d022eb46044 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 12:25:30 +0530 Subject: [PATCH 66/82] AS#102481437698833, Add NavBar react component to tc-site -- Handled error in search suggestion function. --- components/Navbar/Navbar.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 63a6a0aa5..8c71827dc 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -35,6 +35,9 @@ class Navbar extends Component { .then(data => { callback.apply(null, [reqNo, data]) }) + .catch(error => { + callback.apply(null, [reqNo, []]) + }) } handleSearch(searchTerm) { From 46ad980337ac0a7e55ad649a131f199a46f82938 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 12:33:48 +0530 Subject: [PATCH 67/82] AS#102481437698833, Add NavBar react component to tc-site -- Fixed lint errors --- components/Navbar/Navbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 8c71827dc..4cf5682ba 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -36,7 +36,7 @@ class Navbar extends Component { callback.apply(null, [reqNo, data]) }) .catch(error => { - callback.apply(null, [reqNo, []]) + callback.apply(null, [reqNo, [], error]) }) } From 2777646f1af33aa331f485fbde499d613170b1df Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 14:46:12 +0530 Subject: [PATCH 68/82] SearchBar style fix to avoid css override in calling app. --- components/SearchBar/SearchBar.jsx | 2 +- components/SearchBar/SearchBar.scss | 14 ++++++-------- components/SearchSuggestions/SearchSuggestions.jsx | 6 +++--- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 73d21fd88..51188942a 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -139,7 +139,7 @@ class SearchBar extends Component { }) const results = this.state.loading === true - ?
    + ?
    : return (
    diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index b602183f9..63ce73fc0 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -145,16 +145,14 @@ $active-icon-wrap-bg: #888894; left: 0; width: 100%; z-index: 1000; - } - - .loading { - background: none; - } - .SearchSuggestions { + .loading-suggestions { + } - strong { - font-weight: 600; + .SearchSuggestions { + strong { + font-weight: 600; + } } } } \ No newline at end of file diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index dd07c98d4..fca906a37 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -63,7 +63,7 @@ class SearchSuggestions extends Component { { recentList.map(suggestionItem) } { - popularList ? '' : ( + popularList.length !== 0 ? '' : ( Learn more about the new Search here @@ -105,13 +105,13 @@ class SearchSuggestions extends Component { SearchSuggestions.propTypes = { onSuggestionSelect : PropTypes.func.isRequired, recentSearch : PropTypes.array, - popularList : PropTypes.array, + popularSearch : PropTypes.array, searchTerm : PropTypes.string } SearchSuggestions.defaultProps = { recentSearch : [], - popularList : [], + popularSearch : [], searchTerm : '' } From efd5b134a9de107ac2537d7d076ec712b79bb038 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 14:47:48 +0530 Subject: [PATCH 69/82] Solution for avoiding css conflicts especially with name of container. --- components/Loader/Loader.cjsx | 4 ++-- components/Loader/LoaderStyle.scss | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/Loader/Loader.cjsx b/components/Loader/Loader.cjsx index ea4a674f4..a8464edef 100644 --- a/components/Loader/Loader.cjsx +++ b/components/Loader/Loader.cjsx @@ -6,8 +6,8 @@ React = require 'react' Loader = ->
    -
    -
    +
    +
    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%; } From a92615d5efa2c6c29b17f47019e3c091da2262b2 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 18:04:06 +0530 Subject: [PATCH 70/82] AS#111383418066580, Autocomplete the search text on forward arrow key -- Added desired behaviour --- components/SearchBar/SearchBar.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 51188942a..2ebc27d8f 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -98,6 +98,11 @@ class SearchBar extends Component { this.setState({ searchState: 'filled' }, function() { this.search() }) + } else if (eventKey === 39) { // right arrow key is pressed + const suggestion = this.state.suggestions[0] + this.refs.searchValue.value = suggestion + // trigger the change event handler + this.onChange() } } From a7c219eace15198d4a41e1be736e1ad0f87e1f06 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 12 Apr 2016 18:06:56 +0530 Subject: [PATCH 71/82] AS#111383418066580, Autocomplete the search text on forward arrow key -- Handled case where there was no search suggestion --- components/SearchBar/SearchBar.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 2ebc27d8f..03ddea857 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -99,10 +99,12 @@ class SearchBar extends Component { this.search() }) } else if (eventKey === 39) { // right arrow key is pressed - const suggestion = this.state.suggestions[0] - this.refs.searchValue.value = suggestion - // trigger the change event handler - this.onChange() + const suggestion = this.state.suggestions.length > 0 ? this.state.suggestions[0] : null + if (suggestion) { + this.refs.searchValue.value = suggestion + // trigger the change event handler + this.onChange() + } } } From 97c9087fc6ede55a969de18df97733b9b9d5d48e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 13 Apr 2016 23:22:30 +0530 Subject: [PATCH 72/82] AS#111383418066583, Support arrow navigation for moving between suggested terms in SearchBar -- Added up down arrow key behaviour. Need to do some more testing and cleanup --- components/SearchBar/SearchBar.jsx | 34 +++++++++++++++++-- .../SearchSuggestions/SearchSuggestions.jsx | 19 +++++++---- .../SearchSuggestions/SearchSuggestions.scss | 4 +++ 3 files changed, 48 insertions(+), 9 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 03ddea857..201687c52 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -58,7 +58,7 @@ class SearchBar extends Component { handleSuggestionsUpdate(requestNo, data) { if (requestNo === this.state.maxRequestNo) { - this.setState({loading: false, suggestions: data}) + this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null}) } } @@ -71,7 +71,8 @@ class SearchBar extends Component { searchValue: this.refs.searchValue.value, requestNo: rc, maxRequestNo: rc, - loading: true + loading: true, + searchState: 'focused' } }, function() { @@ -93,6 +94,8 @@ class SearchBar extends Component { onKeyUp(evt) { const eventKey = evt.keyCode + evt.stopPropagation() + evt.preventDefault() // if return is pressed if (eventKey === 13) { this.setState({ searchState: 'filled' }, function() { @@ -105,6 +108,31 @@ class SearchBar extends Component { // 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 + }) + } } } @@ -147,7 +175,7 @@ class SearchBar extends Component { const results = this.state.loading === true ?
    - : + : return (
    diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index fca906a37..3b9a68551 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -23,15 +23,18 @@ class SearchSuggestions extends Component { render() { const recentList = this.props.recentSearch const popularList = this.props.popularSearch - const suggestionItem = (term, i) => { let labelDOM = term const searchTerm = this.props.searchTerm + let exactMatch = false if (searchTerm.length > 0) { const idx = term.toLowerCase().indexOf(searchTerm.toLowerCase()) if (idx !== -1) { + // check if exact match + exactMatch = idx === 0 && term.length === searchTerm.length + // prepare DOM for the content to be rendered under StandardListItem labelDOM = ( - + { term.substring(0, idx) } { searchTerm } { term.substring(idx + searchTerm.length) } @@ -39,9 +42,13 @@ class SearchSuggestions extends Component { ) } } - + // prepares css class for li + const itemClasses = classNames( + { 'selected' : exactMatch } + ) + // prepares and returns the DOM for each popular/recent search item return ( -
  • +
    • ) @@ -105,13 +112,13 @@ class SearchSuggestions extends Component { SearchSuggestions.propTypes = { onSuggestionSelect : PropTypes.func.isRequired, recentSearch : PropTypes.array, - popularSearch : PropTypes.array, + popularSearch : PropTypes.array, searchTerm : PropTypes.string } SearchSuggestions.defaultProps = { recentSearch : [], - popularSearch : [], + popularSearch : [], searchTerm : '' } diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index 5ef8af091..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; From 0e6bedf5795a0ea700a05711611202af669c3aa3 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 14 Apr 2016 10:23:36 +0530 Subject: [PATCH 73/82] AS#111383418066583, Support arrow navigation for moving between suggested terms in SearchBar -- Fixed lint errors --- components/SearchSuggestions/SearchSuggestions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index 3b9a68551..98b4eba6f 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -44,7 +44,7 @@ class SearchSuggestions extends Component { } // prepares css class for li const itemClasses = classNames( - { 'selected' : exactMatch } + { selected : exactMatch } ) // prepares and returns the DOM for each popular/recent search item return ( From 45b33bae6f186a72c13d363235df9109f73129ad Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 14 Apr 2016 15:13:20 +0530 Subject: [PATCH 74/82] AS#109666937826878, Add logic for selected menu item in MenuBar -- Added support for regex -- Added support for reading selected state via property --- components/MenuBar/MenuBar.jsx | 2 +- components/MenuBar/MenuBarExamples.jsx | 2 +- components/Navbar/Navbar.jsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) 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 4cf5682ba..134953fa9 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -11,9 +11,9 @@ import HamburgerIcon from '../Icons/HamburgerIcon' import MagnifyGlassIcon from '../Icons/MagnifyGlassIcon' const primaryNavigationItems = [ - {img: require('./nav-community.svg'), text: 'Community', link: '/community'}, - {img: require('./nav-compete.svg'), text: 'Compete', link: '/compete', selected: true}, - {img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'} + {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 From 72c2f27b418b2aed2f8cb72d7969875016c24a84 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 14 Apr 2016 15:19:04 +0530 Subject: [PATCH 75/82] AS#109666937826878, Add logic for selected menu item in MenuBar -- Fixed lint errors --- components/Navbar/Navbar.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 134953fa9..b5f7b17cf 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -11,9 +11,9 @@ import HamburgerIcon from '../Icons/HamburgerIcon' import MagnifyGlassIcon from '../Icons/MagnifyGlassIcon' const primaryNavigationItems = [ - {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?\?"} + {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 From 5de4a19bb837ee49470790ffffbc9e12d64f7cd1 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 12:27:03 +0530 Subject: [PATCH 76/82] AS#111383418066580, Autocomplete the search text on forward arrow key -- Implemented code review suggestion --- components/SearchBar/SearchBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 201687c52..066998865 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -102,7 +102,7 @@ class SearchBar extends Component { this.search() }) } else if (eventKey === 39) { // right arrow key is pressed - const suggestion = this.state.suggestions.length > 0 ? this.state.suggestions[0] : null + const suggestion = this.state.suggestions[0] if (suggestion) { this.refs.searchValue.value = suggestion // trigger the change event handler From 988fae3da6581d7f5c7496fb4c8b3ab77c7a4f61 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 12:48:29 +0530 Subject: [PATCH 77/82] AS#113534192025964, Trim search value in SearchBar AS#113534202832111, SearchBar - Do not search with empty search term -- Done --- components/SearchBar/SearchBar.jsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 066998865..6abaee6ab 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -64,6 +64,7 @@ class SearchBar extends Component { 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 @@ -71,17 +72,19 @@ class SearchBar extends Component { searchValue: this.refs.searchValue.value, requestNo: rc, maxRequestNo: rc, - loading: true, + loading: newTerm.length > 0 ? true : false, searchState: 'focused' } }, function() { - this.props.onTermChange.apply(null, [ - oldTerm, - this.state.searchValue, - this.state.requestNo, - this.handleSuggestionsUpdate - ]) + if (newTerm.length > 0) { + this.props.onTermChange.apply(null, [ + oldTerm, + newTerm, + this.state.requestNo, + this.handleSuggestionsUpdate + ]) + } } ) } @@ -143,7 +146,10 @@ class SearchBar extends Component { } search() { - this.props.onSearch.apply(this, [this.state.searchValue]) + const searchTerm = this.state.searchValue ? this.state.searchValue.trim() : '' + if(searchTerm.length > 0) { + this.props.onSearch.apply(this, [searchTerm]) + } } render() { From dc29bed4821778b239e83679fa0b5c6fb4c21eaf Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 12:50:51 +0530 Subject: [PATCH 78/82] AS#113534202832110, Add type being "search" for search input box in SearchBar -- Done --- components/SearchBar/SearchBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 6abaee6ab..9de78f04a 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -184,7 +184,7 @@ class SearchBar extends Component { : return (
    - + { typeaheadText }
    From 37661f55424cbe6a21b4ee4997ae65ce3a3ab57a Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 13:30:29 +0530 Subject: [PATCH 79/82] AS#113534192025965, Autofill the search term, from query string, in SearchBar -- Done --- components/SearchBar/SearchBar.jsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 9de78f04a..2a5045feb 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -11,7 +11,12 @@ import classNames from 'classnames' class SearchBar extends Component { constructor(props) { super(props) - this.state = { searchState: 'empty', suggestions: [] } + const searchValue = this.getQueryStringValue(props.searchTermKey) + this.state = { + searchState: searchValue.length > 0 ? 'filled' : 'empty', + suggestions: [], + searchValue: searchValue + } this.onFocus = this.onFocus.bind(this) this.onChange = this.onChange.bind(this) this.onKeyUp = this.onKeyUp.bind(this) @@ -22,6 +27,10 @@ class SearchBar extends Component { 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) } @@ -203,11 +212,13 @@ class SearchBar extends Component { SearchBar.propTypes = { onSearch : PropTypes.func.isRequired, onTermChange : PropTypes.func.isRequired, - recentTerms : PropTypes.array + recentTerms : PropTypes.array, + searchTermKey: PropTypes.string } SearchBar.defaultProps = { - recentTerms: [] + recentTerms : [], + searchTermKey : 'q' } export default SearchBar From 18bc3a713aa0c75c8d98946713f0aa2aecf1cd36 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 13:47:17 +0530 Subject: [PATCH 80/82] AS#113534192025965, Autofill the search term, from query string, in SearchBar -- Fixing lint errors --- components/SearchBar/SearchBar.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 2a5045feb..2413595e4 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -11,11 +11,11 @@ import classNames from 'classnames' class SearchBar extends Component { constructor(props) { super(props) - const searchValue = this.getQueryStringValue(props.searchTermKey) + const initialTerm = this.getQueryStringValue(props.searchTermKey) this.state = { searchState: searchValue.length > 0 ? 'filled' : 'empty', suggestions: [], - searchValue: searchValue + searchValue: initialTerm } this.onFocus = this.onFocus.bind(this) this.onChange = this.onChange.bind(this) @@ -28,7 +28,7 @@ class SearchBar extends Component { } getQueryStringValue (key) { - return unescape(window.location.href.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); + return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1')) } componentDidMount() { @@ -81,7 +81,7 @@ class SearchBar extends Component { searchValue: this.refs.searchValue.value, requestNo: rc, maxRequestNo: rc, - loading: newTerm.length > 0 ? true : false, + loading: newTerm.length > 0, searchState: 'focused' } }, From 9f463611a2649bc51fc66825965c2902f033f53c Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 13:48:38 +0530 Subject: [PATCH 81/82] AS#113534192025965, Autofill the search term, from query string, in SearchBar -- Fixing lint errors --- components/SearchBar/SearchBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 2413595e4..d38f7303e 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -13,7 +13,7 @@ class SearchBar extends Component { super(props) const initialTerm = this.getQueryStringValue(props.searchTermKey) this.state = { - searchState: searchValue.length > 0 ? 'filled' : 'empty', + searchState: initialTerm.length > 0 ? 'filled' : 'empty', suggestions: [], searchValue: initialTerm } From e3e59f2d775b62c97c6aaaafb7216e118bb65e1a Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 22 Apr 2016 14:51:55 +0530 Subject: [PATCH 82/82] AS#113534202832110, Add type being "search" for search input box in SearchBar -- Removed type attribute for time being because it is causing style issues with typeahead text and clear icon (rendered by browser) is not working for firefox. --- components/SearchBar/SearchBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index d38f7303e..18b4ee291 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -193,7 +193,7 @@ class SearchBar extends Component { : return (
    - + { typeaheadText }