+
+
+
+ { getHeading(code) }
+ + {code !== 200 && code} +
@@ -27,12 +26,12 @@ class Home extends React.Component {
-
Welcome to Topcoder Connect
+Topcoder Connect: the easiest way to go from idea to app
Companies and agencies, from the world’s largest to the Valley’s newest, use crowdsourcing to deliver high-quality assets, faster.
-Join Connect today to see what we can do for your next project through the power of crowdsourcing, delivered by Topcoder.
+Connect guides you through the entire crowdsourcing process, from entering requirements to receiving final deliverables, and it facilitates collaboration between your project team and Topcoder community members working on your project.
-
diff --git a/src/components/PageError/PageError.jsx b/src/components/PageError/PageError.jsx
deleted file mode 100644
index 2749f83a1..000000000
--- a/src/components/PageError/PageError.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, {PropTypes} from 'react'
-import './PageError.scss'
-
-const getMessage = code => {
- switch(code) {
- case 404:
- return 'D’oh! We couldn’t find the page you were looking for.'
- case 500:
- default:
- return 'D’oh! Something went wrong'
- }
-}
-
-const PageError = ({code}) => {
- return (
-
- { props.children }
+ { props.content }
-
-
-
- {getMessage(code)}
-Sorry about that, mate! Please try reloading the page again. If things don’t work or you’re sure it is Coder’s fault, send us a note at support@topcoder.com and we’ll fix it for you.
- {code} -
-
+
+
@@ -90,8 +97,6 @@ class ProjectToolBar extends React.Component {
}
ProjectToolBar.propTypes = {
- logo: PropTypes.any.isRequired,
- avatar: PropTypes.any.isRequired,
project: PropTypes.object,
isPowerUser: PropTypes.bool
}
@@ -100,4 +105,21 @@ ProjectToolBar.contextTypes = {
router: PropTypes.object.isRequired
}
-export default ProjectToolBar
+const mapStateToProps = ({ projectState, loadUser }) => {
+ let isPowerUser = false
+ const roles = [ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR]
+ if (loadUser.user) {
+ isPowerUser = loadUser.user.roles.some((role) => roles.indexOf(role) !== -1)
+ }
+ return {
+ project : projectState.project,
+ userRoles : _.get(loadUser, 'user.roles', []),
+ user : loadUser.user,
+ isPowerUser
+ }
+}
+
+const actionsToBind = { }
+
+// export default ProjectToolBar
+export default connect(mapStateToProps, actionsToBind)(ProjectToolBar)
\ No newline at end of file
diff --git a/src/components/TopBar/ProjectToolBar.scss b/src/components/TopBar/ProjectToolBar.scss
new file mode 100644
index 000000000..7762b383a
--- /dev/null
+++ b/src/components/TopBar/ProjectToolBar.scss
@@ -0,0 +1,265 @@
+// this is to include tc styles in the output library
+@import 'tc-includes';
+
+.ProjectToolBar {
+ padding: 0;
+ min-height: 60px;
+ width: 100%;
+ height: auto;
+ .tool-bar {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ height: 60px;
+ background-color: $tc-black;
+ .bar-column:first-child{
+ display: flex;
+ // width: calc(100% - 560px);
+ }
+ .bar-column:last-child{
+ // width: 560px;
+ display: flex;
+ }
+ .logo-wrapper {
+ width: 110px;
+ margin-left: 4 * $base-unit;
+ }
+ .breadcrumb {
+ @include roboto-light;
+ font-size: 20px;
+ color: $tc-gray-10;
+ position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 500px;
+ display: flex;
+ span {
+ display:block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-right: $base-unit * 12;
+ }
+ a {
+ display:block;
+ flex-shrink: 0;
+ color: $tc-gray-50;
+ &:hover, &.hover{
+ text-decoration: none;
+ color: $tc-orange-30;
+ }
+ }
+ }
+ .bar-column .welcome-info{
+ width: 70px;
+ display: flex;
+ align-items: center;
+ margin-right: 4*$base-unit;
+ .avatar-info {
+ position: relative;
+ .Dropdown {
+ min-width: 100px;
+ right: 0;
+ left: auto;
+ }
+ .username {
+ display: none;
+ }
+ .avatar{
+ width: 30px;
+ height: 30px;
+ background-color: $tc-dark-blue-70 ;
+ border-radius: 15px;
+ overflow: hidden;
+ text-align: center;
+ line-height: 28px;
+ color: $tc-white;
+ @include roboto-medium;
+ font-size: 15px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ img{
+ width: 30px;
+ height: 30px;
+ border-radius: 15px;
+ }
+ }
+ .avatar-link-arrow{
+ display: block;
+ width: 10px;
+ height: 30px;
+ //background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
+ background-size: 10px 7.5px;
+ }
+ }
+ }
+ }
+
+ .nav{
+ padding-right: 5px;
+ height: 20px;
+ margin-top: 20px;
+ border-right: 1px solid $tc-gray-80;
+ flex: 1;
+ ul{
+ /*width: 484px;*/
+ width: auto;
+ height: 20px;
+ display: flex;
+ justify-content: flex-end;
+ margin: 0;
+ padding: 0;
+ }
+ ul li{
+ padding: 0 15px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ vertical-align: middle;
+ &:first-child{
+ padding-left: 0;
+ }
+ a{
+ display: inline-block;
+ @include roboto-medium;
+ font-size: $tc-label-md;
+ color: $tc-gray-50;
+ line-height: 20px;
+ position: relative;
+ padding-left: 26px;
+ /* menu icons */
+ >i{
+ display: block;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ left: 0;
+ top: 2px;
+ &.icon-dashboard{
+ background: url("../../styles/i/icon-dashboard.svg") left top no-repeat;
+ }
+ &.icon-specification{
+ background: url("../../styles/i/icon-ruler-pencil.svg") left top no-repeat;
+ }
+ &.icon-challenges{
+ background: url("../../styles/i/icon-hammer.svg") left top no-repeat;
+ }
+ &.icon-messages{
+ background: url("../../styles/i/icon-chat.svg") left top no-repeat;
+ }
+ }
+ }
+ &:hover, &.hover{
+ a, a:hover{
+ color: $tc-orange-30;
+ >i{
+ &.icon-dashboard{
+ background: url("../../styles/i/icon-dashboard-hover.svg") left top no-repeat;
+ }
+ &.icon-specification{
+ background: url("../../styles/i/icon-ruler-pencil-hover.svg") left top no-repeat;
+ }
+ &.icon-challenges{
+ background: url("../../styles/i/icon-hammer-hover.svg") left top no-repeat;
+ }
+ &.icon-messages{
+ background: url("../../styles/i/icon-chat-hover.svg") left top no-repeat;
+ }
+ }
+ }
+ }
+ a.active, a.active:hover{
+ color: $tc-orange-70;
+ >i{
+ &.icon-dashboard{
+ background: url("../../styles/i/icon-dashboard-active.svg") left top no-repeat;
+ }
+ &.icon-specification{
+ background: url("../../styles/i/icon-ruler-pencil-active.svg") left top no-repeat;
+ }
+ &.icon-challenges{
+ background: url("../../styles/i/icon-hammer-active.svg") left top no-repeat;
+ }
+ &.icon-messages{
+ background: url("../../styles/i/icon-chat-active.svg") left top no-repeat;
+ }
+ }
+ }
+ }
+ }
+
+ .breadcrumb-tooltip{
+ @include roboto();
+ word-break: break-word;
+ position: absolute;
+ left: calc(50% - 240px - 230px);
+ top: 56px;
+ width: 480px;
+ padding: 15px;
+ font-size: 13px;
+ line-height: 20px;
+ font-weight: 500;
+ color: $tc-white;
+ background-color: $tc-gray-80;
+ border-radius: 4px;
+ z-index: 10;
+ &:before{
+ display: block;
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: -7px;
+ margin-left: -7px;
+ width: 0;
+ height: 0;
+ border: 7px solid $tc-gray-80;
+ border-top: 0;
+ border-left-color: transparent;
+ border-right-color: transparent;
+ }
+ }
+}
+
+@media all and (max-width: 1023px) {
+ .ProjectToolBar {
+ .top-bar{
+ &:after{
+ display: block;
+ content: '';
+ width: 0;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ }
+ .bar-column:first-child {
+ width: calc(100% - 215px);
+ }
+ .bar-column:last-child{
+ width: 215px;
+ }
+ .logo-wrapper {
+ width: 90px;
+ }
+ .breadcrumb .breadcrumb-tooltip{
+ left: 28px;
+ }
+ }
+ }
+ .nav {
+ padding-right: 10px;
+ ul{
+ width: 134px;
+ }
+ ul li {
+ padding: 0 10px;
+ &:first-child {
+ padding-left: 0;
+ }
+ a {
+ padding-left: 16px;
+ text-indent: -9999px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/TopBar/ProjectsToolBar.js b/src/components/TopBar/ProjectsToolBar.js
new file mode 100644
index 000000000..49889f043
--- /dev/null
+++ b/src/components/TopBar/ProjectsToolBar.js
@@ -0,0 +1,247 @@
+require('./ProjectsToolBar.scss')
+
+import React, {PropTypes, Component} from 'react'
+import { connect } from 'react-redux'
+import cn from 'classnames'
+import _ from 'lodash'
+import Modal from 'react-modal'
+import { SearchBar } from 'appirio-tech-react-components'
+import Filters from './Filters'
+
+import ModalControl from '../ModalControl'
+import SVGIconImage from '../SVGIconImage'
+import CoderBot from '../CoderBot/CoderBot'
+import ProjectWizard from '../../projects/create/components/ProjectWizard'
+
+import { createProjectWithStatus as createProjectAction } from '../../projects/actions/project'
+import { projectSuggestions, loadProjects } from '../../projects/actions/loadProjects'
+import {
+ ROLE_CONNECT_COPILOT,
+ ROLE_CONNECT_MANAGER,
+ ROLE_ADMINISTRATOR,
+ PROJECT_STATUS_IN_REVIEW
+} from '../../config/constants'
+
+
+class ProjectsToolBar extends Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ isCreatingProject: false,
+ isCreateProjectModalVisible : false,
+ errorCreatingProject: false,
+ isFilterVisible: false
+ }
+ this.applyFilters = this.applyFilters.bind(this)
+ this.toggleFilter = this.toggleFilter.bind(this)
+ this.showCreateProjectDialog = this.showCreateProjectDialog.bind(this)
+ this.hideCreateProjectDialog = this.hideCreateProjectDialog.bind(this)
+ this.handleTermChange = this.handleTermChange.bind(this)
+ this.handleSearch = this.handleSearch.bind(this)
+ this.handleMyProjectsFilter = this.handleMyProjectsFilter.bind(this)
+ this.createProject = this.createProject.bind(this)
+ }
+
+ componentWillReceiveProps(nextProps) {
+ // if new project is created successfully
+ if (this.props.creatingProject && !nextProps.creatingProject) {
+ if (!nextProps.projectCreationError
+ && nextProps.project && nextProps.project.id) {
+ this.hideCreateProjectDialog()
+ this.context.router.push('/projects/' + nextProps.project.id)
+ } else {
+ this.setState({
+ errorCreatingProject: true
+ })
+ }
+ }
+ }
+
+ componentWillUnmount() {
+ const contentDiv = document.getElementById('wrapper-main')
+ contentDiv.classList.remove('with-filters')
+ }
+
+ /*eslint-disable no-unused-vars */
+ handleTermChange(oldTerm, searchTerm, reqNo, callback) {
+ this.props.projectSuggestions(searchTerm)
+ callback(reqNo, this.props.projects)
+ }
+ /*eslint-enable */
+
+ handleSearch(keyword) {
+ this.applyFilters({ keyword })
+ }
+
+ handleMyProjectsFilter(event) {
+ this.applyFilters({memberOnly: event.target.checked})
+ }
+
+ showCreateProjectDialog() {
+ this.setState({
+ isCreateProjectModalVisible : true
+ })
+ }
+
+ hideCreateProjectDialog() {
+ this.setState({
+ isCreateProjectModalVisible : false,
+ errorCreatingProject: false
+ })
+ }
+
+ applyFilters(filter) {
+ const criteria = _.assign({}, this.props.criteria, filter)
+ if (criteria && criteria.keyword) {
+ criteria.keyword = encodeURIComponent(criteria.keyword)
+ // force sort criteria to best match
+ criteria.sort = 'best match'
+ }
+ this.routeWithParams(criteria, 1)
+ }
+
+ toggleFilter() {
+ const {isFilterVisible} = this.state
+ const contentDiv = document.getElementById('wrapper-main')
+ this.setState({isFilterVisible: !isFilterVisible}, () => {
+ if (this.state.isFilterVisible) {
+ contentDiv.classList.add('with-filters')
+ } else {
+ contentDiv.classList.remove('with-filters')
+ }
+ })
+ }
+
+ routeWithParams(criteria, page) {
+ // remove any null values
+ criteria = _.pickBy(criteria, _.identity)
+ this.context.router.push({
+ pathname: '/projects/',
+ query: _.assign({}, criteria, { page })
+ })
+ this.props.loadProjects(criteria, page)
+ }
+
+ createProject(project) {
+ this.props.createProjectAction(project, PROJECT_STATUS_IN_REVIEW)
+ }
+
+ render() {
+ const { logo, userMenu, userRoles, criteria, isPowerUser } = this.props
+ const { isCreateProjectModalVisible, errorCreatingProject, isFilterVisible } = this.state
+ const isLoggedIn = userRoles && userRoles.length
+
+ const noOfFilters = _.keys(criteria).length - 1 // -1 for default sort criteria
+
+ return (
+
-
- )
- }
-}
-
-TopBar.propTypes = {
- userHandle : PropTypes.string,
- userImage : PropTypes.string,
- domain : PropTypes.string.isRequired,
- mobileMenuUrl : PropTypes.string,
- mobileSearchUrl : PropTypes.string,
- criteria : PropTypes.object.isRequired
-}
-
-TopBar.defaultProps = {
- mobileMenuUrl : '/menu',
- mobileSearchUrl : '/search'
-}
-
-export default TopBar
diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss
deleted file mode 100644
index a60bb6060..000000000
--- a/src/components/TopBar/TopBar.scss
+++ /dev/null
@@ -1,563 +0,0 @@
-// this is to include tc styles in the output library
-@import 'tc-includes';
-
-// TODO: move to includes
-$tc-rgba-10: rgba(71,71,79,0.38);
-$tc-rgba-20: rgba(0,0,0,0.17);
-$tc-body-large : 20px;
-
-// .sticky-inner-wrapper {
-// z-index: 15;
-// }
-
-// .container .sticky-inner-wrapper,
-// .dashboard-container .sticky-inner-wrapper {
-// z-index: 14;
-// }
-
-.tc-header {
- height: 60px;
- // background: $tc-gray-neutral-light;
- line-height: 60px;
- height: 60px;
- background-color: $tc-black;
- z-index: 20;
- padding: 0 20px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
-
- .logo-wrapper {
- width: 60px;
- height: 60px;
- flex-shrink: 0;
-
- .logo {
- display: inline-block;
- position: relative;
- margin-top: 12px;
- // width: 60px;
- // height: 36px;
- }
- }
-
- .UserDropdownMenu {
- padding: 0;
- display: flex;
- align-content: center;
- text-align: left;
- }
-
- .sb-avatar {
- display: block !important;
- }
-
- &.tc-header__connect{
- padding: 0;
- min-height: 60px;
- height: auto;
-
- .top-bar {
- height: 60px;
- background-color: $tc-black;
- padding: 0 20px;
- position: relative;
- text-align: center;
- display: flex;
-
- .logo-wrapper {
- // position: absolute;
- // left: 20px;
- // top: 0;
- // z-index:2;
-
- }
-
- .search-bar{
- margin: 0 auto;
- width: 605px;
- padding-top: 15px;
- display: flex;
- justify-content:space-between;
- &.search-bar-single{
- width: 498px;
- }
- .search-widget{
- width: 498px;
- height: 30px;
- }
- .search-filter{
- width: 97px;
- .tc-btn{
- display: flex;
- align-items: center;
- justfiy-content: center;
- padding: 5px 0 5px 34px;
- text-align: left;
- color: $tc-gray-40;
- background-color: transparent;
- border-radius: 2px;
- font-size: 12px;
- position: relative;
- &:before{
- display: block;
- content: '';
- width: 14px;
- height: 16px;
- position: absolute;
- top: 7px;
- left: 10px;
- background: url("../../styles/i/icon-filter.png") left top no-repeat;
- background-size: 14px 32px;
- }
- &.active{
- background: $tc-gray-80;
- box-shadow: inset 0px 1px 3px 0px $tc-rgba-10;
- &:before{
- background: url("../../styles/i/icon-filter.png") left -16px no-repeat;
- background-size: 14px 32px;
- }
- }
- }
-
- .filter-indicator {
- width: 15px;
- height: 15px;
- margin-left: $base-unit;
- background-color: $tc-dark-blue-90;
- border-radius: 26px;
- color: $tc-white;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- }
- .welcome-info{
- // position: absolute;
- // right: 20px;
- // top: 0;
- // z-index:2;
- height: 60px;
- font-size: 13px;
- color: $tc-gray-50;
- display: flex;
- justify-content: space-between;
- @include roboto-medium;
- >.tc-btn{
- margin-top: 15px;
- border: 0;
- width: 116px;
- text-align: center;
- }
- .avatar-info{
- position: relative;
- margin-left: 20px;
- display: flex;
- align-items: center;
- .avatar{
- width: 30px;
- height: 30px;
- background-color: $tc-dark-blue-70 ;
- border-radius: 15px;
- overflow: hidden;
- text-align: center;
- line-height: 30px;
- color: $tc-white;
- @include roboto-medium;
- font-size: 15px;
- position: absolute;
- left: 0;
- top: 15px;
- img{
- width: 30px;
- height: 30px;
- border-radius: 15px;
- }
- }
- .avatar-link{
- display: inline-block;
- padding-right: 16px;
- position: relative;
- &:after{
- display: block;
- content: '';
- width: 10px;
- position: absolute;
- right: 0;
- top: 50%;
- margin-top: -4px;
- height: 7.5px;
- //background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
- background-size: 10px 7.5px;
- }
- }
- }
- .tc-btn-primary{
- margin-left: 7px;
- color: $tc-white;
- }
- }
- }
- }
-
- &.tc-header__connect-project{
- padding: 0;
- min-height: 60px;
- height: auto;
- .top-bar{
- display: flex;
- height: 60px;
- background-color: $tc-black;
- padding: 0 20px;
- .bar-column:first-child{
- display: flex;
- width: calc(100% - 560px);
- }
- .bar-column:last-child{
- width: 560px;
- display: flex;
- }
- .logo-wrapper{
- width: 110px;
- }
- .breadcrumb{
- @include roboto-light;
- font-size: 20px;
- color: $tc-gray-10;
- position: relative;
- overflow: hidden;
- text-overflow: ellipsis;
- display: flex;
- span {
- display:block;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- padding-right: $base-unit * 12;
- }
- a {
- display:block;
- flex-shrink: 0;
- color: $tc-gray-50;
- &:hover, &.hover{
- text-decoration: none;
- color: $tc-orange-30;
- }
- }
- }
- .bar-column .welcome-info{
- width: 70px;
- padding-left: 20px;
- margin-left: auto;
- display: flex;
- align-items: center;
- }
- .avatar-info{
- position: relative;
- .Dropdown {
- min-width: 100px;
- right: 0;
- left: auto;
- }
- .username {
- display: none;
- }
- .avatar{
- width: 30px;
- height: 30px;
- background-color: $tc-dark-blue-70 ;
- border-radius: 15px;
- overflow: hidden;
- text-align: center;
- line-height: 28px;
- color: $tc-white;
- @include roboto-medium;
- font-size: 15px;
- position: absolute;
- left: 0;
- top: 0;
- img{
- width: 30px;
- height: 30px;
- border-radius: 15px;
- }
- }
- .avatar-link-arrow{
- display: block;
- width: 10px;
- height: 30px;
- //background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
- background-size: 10px 7.5px;
- }
- }
- }
- }
- .nav{
- padding-right: 5px;
- height: 20px;
- margin-top: 20px;
- border-right: 1px solid $tc-gray-80;
- flex: 1;
- ul{
- width: 484px;
- height: 20px;
- display: flex;
- justify-content: flex-end;
- margin: 0;
- padding: 0;
- }
- ul li{
- padding: 0 15px;
- height: 20px;
- line-height: 20px;
- text-align: center;
- vertical-align: middle;
- &:first-child{
- padding-left: 0;
- }
- a{
- display: inline-block;
- @include roboto-medium;
- font-size: $tc-label-md;
- color: $tc-gray-50;
- line-height: 20px;
- position: relative;
- padding-left: 26px;
- /* menu icons */
- >i{
- display: block;
- width: 16px;
- height: 16px;
- position: absolute;
- left: 0;
- top: 2px;
- &.icon-dashboard{
- background: url("../../styles/i/icon-dashboard.svg") left top no-repeat;
- }
- &.icon-specification{
- background: url("../../styles/i/icon-ruler-pencil.svg") left top no-repeat;
- }
- &.icon-challenges{
- background: url("../../styles/i/icon-hammer.svg") left top no-repeat;
- }
- &.icon-messages{
- background: url("../../styles/i/icon-chat.svg") left top no-repeat;
- }
- }
- }
- &:hover, &.hover{
- a, a:hover{
- color: $tc-orange-30;
- >i{
- &.icon-dashboard{
- background: url("../../styles/i/icon-dashboard-hover.svg") left top no-repeat;
- }
- &.icon-specification{
- background: url("../../styles/i/icon-ruler-pencil-hover.svg") left top no-repeat;
- }
- &.icon-challenges{
- background: url("../../styles/i/icon-hammer-hover.svg") left top no-repeat;
- }
- &.icon-messages{
- background: url("../../styles/i/icon-chat-hover.svg") left top no-repeat;
- }
- }
- }
- }
- a.active, a.active:hover{
- color: $tc-orange-70;
- >i{
- &.icon-dashboard{
- background: url("../../styles/i/icon-dashboard-active.svg") left top no-repeat;
- }
- &.icon-specification{
- background: url("../../styles/i/icon-ruler-pencil-active.svg") left top no-repeat;
- }
- &.icon-challenges{
- background: url("../../styles/i/icon-hammer-active.svg") left top no-repeat;
- }
- &.icon-messages{
- background: url("../../styles/i/icon-chat-active.svg") left top no-repeat;
- }
- }
- }
- }
- }
-
- .breadcrumb-tooltip{
- @include roboto();
- word-break: break-word;
- position: absolute;
- left: calc(50% - 240px - 230px);
- top: 56px;
- width: 480px;
- padding: 15px;
- font-size: 13px;
- line-height: 20px;
- font-weight: 500;
- color: $tc-white;
- background-color: $tc-gray-80;
- border-radius: 4px;
- z-index: 10;
- &:before{
- display: block;
- content: '';
- position: absolute;
- left: 50%;
- top: -7px;
- margin-left: -7px;
- width: 0;
- height: 0;
- border: 7px solid $tc-gray-80;
- border-top: 0;
- border-left-color: transparent;
- border-right-color: transparent;
- }
- }
-}
-
-
-/* .bar__search */
-.bar__search{
- position: relative;
- min-height: 60px;
- padding: 0 20px;
- background-color: $tc-gray-neutral-light;
- display: flex;
- width: 100%;
- h2{
- font-size: $tc-body-large;
- line-height: 60px;
- color: $tc-black;
- width: 120px;
- white-space: nowrap;
- }
- .bar-control{
- width: 120px;
- text-align: right;
- min-height: 30px;
- padding-top: 15px;
- .tc-btn{
- display: inline-block;
- height: 30px;
- white-space: nowrap;
- }
- }
- .search-panel{
- flex: 1;
- margin: 0 auto;
- text-align: center;
- display: flex;
- justify-content: center;
- padding-top: 15px;
- flex-wrap: wrap;
- label{
- @include roboto-medium;
- width: 83px;
- display: inline-block;
- line-height: 30px;
- height: 30px;
- font-size: 13px;
- color: $tc-gray-70;
- text-align: right;
- }
- .search-select-widget{
- width: 280px;
- margin-left: 10px;
- display: inline-block;
- }
- }
- .SwitchButton {
- .label {
- padding-right: 10px;
- }
- }
-}
-
-
-
-@media all and (max-width: 1023px) {
- .tc-header{
- &.tc-header__connect{
- .top-bar .search-bar{
- width: 383px;
- margin-left: 110px;
- .search-widget{
- width: 296px;
- }
- &.search-bar-single .search-widget{
- width: 383px;
- }
- }
- .top-bar .welcome-info .avatar-info .avatar-link{
- text-indent: -9999px;
- width: 10px;
- padding-right: 0;
- }
- }
- &.tc-header__connect-project{
- .top-bar{
- &:after{
- display: block;
- content: '';
- width: 0;
- height: 0;
- clear: both;
- overflow: hidden;
- }
- .bar-column:first-child{
- width: calc(100% - 215px);
- }
- .bar-column:last-child{
- width: 215px;
- }
- .logo-wrapper{
- width: 90px;
- }
- .breadcrumb .breadcrumb-tooltip{
- left: 28px;
- }
- }
- }
- .nav{
- padding-right: 10px;
- ul{
- width: 134px;
- }
- ul li{
- padding: 0 10px;
- &:first-child {
- padding-left: 0;
- }
- a{
- padding-left: 16px;
- text-indent: -9999px;
- }
- }
- }
- }
- .bar__search{
- h2{
- width: 110px;
- }
- .search-panel{
- flex: 1;
- margin: 0 auto;
- text-align: left;
- display: flex;
- justify-content: flex-start;
- label{
- width: auto;
- margin-left: 30px;
- &.first{
- margin-left: 0;
- }
- }
- .search-select-widget {
- width: 170px;
- }
- }
- }
-}
diff --git a/src/components/TopBar/TopBarContainer.js b/src/components/TopBar/TopBarContainer.js
index 6ea54ef0c..e5e8c28ec 100644
--- a/src/components/TopBar/TopBarContainer.js
+++ b/src/components/TopBar/TopBarContainer.js
@@ -1,130 +1,108 @@
import React, {PropTypes} from 'react'
import { connect } from 'react-redux'
+import { Link } from 'react-router'
import _ from 'lodash'
-import Modal from 'react-modal'
-import { projectSuggestions, loadProjects } from '../../projects/actions/loadProjects'
-import TopBar from './TopBar'
-import ProjectWizard from '../../projects/create/components/ProjectWizard'
-import { TCEmitter } from '../../helpers'
+import { UserDropdown, Icons } from 'appirio-tech-react-components'
+const { ConnectLogo } = Icons
import {
- ROLE_CONNECT_COPILOT,
- ROLE_CONNECT_MANAGER,
- ROLE_ADMINISTRATOR,
- EVENT_ROUTE_CHANGE,
ACCOUNTS_APP_LOGIN_URL,
- ACCOUNTS_APP_REGISTER_URL
+ ACCOUNTS_APP_REGISTER_URL,
+ DOMAIN
} from '../../config/constants'
+require('./TopBarContainer.scss')
class TopBarContainer extends React.Component {
constructor(props) {
super(props)
- this.state = {
- isFilterVisible: false,
- isCreatingProject : false
- }
- this.RouteChangeListener = null
- this.applyFilters = this.applyFilters.bind(this)
- this.toggleFilter = this.toggleFilter.bind(this)
- this.showCreateProjectDialog = this.showCreateProjectDialog.bind(this)
- this.hideCreateProjectDialog = this.hideCreateProjectDialog.bind(this)
- }
-
- componentWillMount() {
- this.setState({currentPath: window.location.pathname})
- this.RouteChangeListener = TCEmitter.addListener(EVENT_ROUTE_CHANGE, (path) => {
- this.setState({currentPath: path})
- })
- }
-
- componentDidUpdate() {
- const isProjectDetails = /projects\/\d+/.test(this.state.currentPath)
- const contentDiv = document.getElementById('wrapper-main')
- if (!isProjectDetails && this.state.isFilterVisible) {
- contentDiv.classList.add('with-filters')
- } else {
- contentDiv.classList.remove('with-filters')
- }
- }
-
- toggleFilter() {
- const {isFilterVisible} = this.state
- const contentDiv = document.getElementById('wrapper-main')
- this.setState({isFilterVisible: !isFilterVisible}, () => {
- if (this.state.isFilterVisible) {
- contentDiv.classList.add('with-filters')
- } else {
- contentDiv.classList.remove('with-filters')
- }
- })
- }
-
- componentWillUnmount() {
- this.RouteChangeListener && this.RouteChangeListener.remove()
- }
-
- showCreateProjectDialog() {
- this.setState({
- isCreatingProject : true
- })
- }
-
- hideCreateProjectDialog() {
- this.setState({
- isCreatingProject : false
- })
}
- applyFilters(filter) {
- const criteria = _.assign({}, this.props.criteria, filter)
- if (criteria && criteria.keyword) {
- criteria.keyword = encodeURIComponent(criteria.keyword)
- // force sort criteria to best match
- criteria.sort = 'best match'
+ handleMobileClick(se) {
+ const mobileMenuLink = se.target.querySelector('.mobile-wrap > a')
+ if (mobileMenuLink) {
+ mobileMenuLink.click()
}
- this.routeWithParams(criteria, 1)
- }
-
- routeWithParams(criteria, page) {
- // remove any null values
- criteria = _.pickBy(criteria, _.identity)
- this.context.router.push({
- pathname: '/projects/',
- query: _.assign({}, criteria, { page })
- })
- this.props.loadProjects(criteria, page)
}
render() {
- const {isCreatingProject, currentPath, isFilterVisible } = this.state
- const isProjectDetails = /projects\/\d+/.test(currentPath)
+ const { user, userRoles, toolbar } = this.props
+ console.log(typeof toolbar)
+
+ const userHandle = _.get(user, 'handle')
+ const userImage = _.get(user, 'profile.photoURL')
+ const userFirstName = _.get(user, 'profile.firstName')
+ const userLastName = _.get(user, 'profile.lastName')
+ let userName = userFirstName
+ if (userName && userLastName) {
+ userName += ' ' + userLastName
+ }
+ const homePageUrl = `${window.location.protocol}//${window.location.host}/`
+ const logoutLink = `https://accounts.${DOMAIN}/#!/logout?retUrl=${homePageUrl}`
+ const isLoggedIn = userRoles && userRoles.length
+ const logoTargetUrl = isLoggedIn ? '/projects' : '/'
const isHomePage = this.context.router.isActive('/', true)
// NOTE: hardcoding to connectv2, once connect v1
window.host
const loginUrl = `${ACCOUNTS_APP_LOGIN_URL}?retUrl=${window.location.protocol}//${window.location.host}/`
const registerUrl = !isHomePage ? ACCOUNTS_APP_REGISTER_URL : null
- return (
-
{logo}
{project &&
@@ -81,7 +88,7 @@ class ProjectToolBar extends React.Component {
Discussions
}
- {avatar}
+ { userMenu }
+
+
+
+ )
+ }
+}
+
+ProjectsToolBar.propTypes = {
+ criteria : PropTypes.object.isRequired
+}
+
+ProjectsToolBar.defaultProps = {
+}
+
+ProjectsToolBar.contextTypes = {
+ router: PropTypes.object.isRequired
+}
+
+// export default ProjectsToolBar
+
+const mapStateToProps = ({ projectSearchSuggestions, searchTerm, projectSearch, projectState, loadUser }) => {
+ let isPowerUser = false
+ const roles = [ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR]
+ if (loadUser.user) {
+ isPowerUser = loadUser.user.roles.some((role) => roles.indexOf(role) !== -1)
+ }
+ return {
+ projects : projectSearchSuggestions.projects,
+ previousSearchTerm : searchTerm.previousSearchTerm,
+ searchTermTag : searchTerm.searchTermTag,
+ creatingProject : projectState.processing,
+ projectCreationError : projectState.error,
+ project : projectState.project,
+ criteria : projectSearch.criteria,
+ userRoles : _.get(loadUser, 'user.roles', []),
+ user : loadUser.user,
+ isPowerUser
+ }
+}
+
+const actionsToBind = { projectSuggestions, loadProjects, createProjectAction }
+
+export default connect(mapStateToProps, actionsToBind)(ProjectsToolBar)
\ No newline at end of file
diff --git a/src/components/TopBar/ProjectsToolBar.scss b/src/components/TopBar/ProjectsToolBar.scss
new file mode 100644
index 000000000..85a8f1567
--- /dev/null
+++ b/src/components/TopBar/ProjectsToolBar.scss
@@ -0,0 +1,234 @@
+// this is to include tc styles in the output library
+@import 'tc-includes';
+
+// TODO: move to includes
+$tc-rgba-10: rgba(71,71,79,0.38);
+$tc-rgba-20: rgba(0,0,0,0.17);
+$tc-body-large : 20px;
+
+.ProjectsToolBar {
+ margin: 0 auto;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .primary-toolbar {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+
+ .logo-wrapper {
+ margin-left: 4*$base-unit;
+ }
+
+ .welcome-info {
+ margin-right: 4*$base-unit;
+ }
+
+ .actions {
+ display: flex;
+ }
+ }
+
+ .secondary-toolbar {
+ display: flex;
+ }
+
+ .search-widget {
+ width: 595px;
+ height: 30px;
+ margin-top: 15px;
+ display: flex;
+ }
+ .search-filter {
+ width: 97px;
+ margin-left: 2*$base-unit;
+ .tc-btn{
+ display: flex;
+ align-items: center;
+ // justify-content: center;
+ padding: 5px 2*$base-unit 5px 34px;
+ text-align: left;
+ color: $tc-gray-40;
+ background-color: transparent;
+ border-radius: 2px;
+ font-size: 12px;
+ position: relative;
+ &:before{
+ display: block;
+ content: '';
+ width: 14px;
+ height: 16px;
+ position: absolute;
+ top: 7px;
+ left: 10px;
+ background: url("../../styles/i/icon-filter.png") left top no-repeat;
+ background-size: 14px 32px;
+ }
+ &.active{
+ background: $tc-gray-80;
+ box-shadow: inset 0px 1px 3px 0px $tc-rgba-10;
+ &:before{
+ background: url("../../styles/i/icon-filter.png") left -16px no-repeat;
+ background-size: 14px 32px;
+ }
+ }
+ }
+
+ .filter-indicator {
+ width: 15px;
+ height: 15px;
+ margin-left: $base-unit;
+ background-color: $tc-dark-blue-90;
+ border-radius: 26px;
+ color: $tc-white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ /* .bar__search */
+ .bar__search{
+ position: relative;
+ min-height: 60px;
+ padding: 0 20px;
+ background-color: $tc-gray-neutral-light;
+ display: flex;
+ width: 100%;
+ h2{
+ font-size: $tc-body-large;
+ line-height: 60px;
+ color: $tc-black;
+ width: 120px;
+ white-space: nowrap;
+ }
+ .bar-control{
+ width: 120px;
+ text-align: right;
+ min-height: 30px;
+ padding-top: 15px;
+ .tc-btn{
+ display: inline-block;
+ height: 30px;
+ white-space: nowrap;
+ }
+ }
+ .search-panel{
+ flex: 1;
+ margin: 0 auto;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ padding-top: 15px;
+ flex-wrap: wrap;
+ label{
+ @include roboto-medium;
+ width: 83px;
+ display: inline-block;
+ line-height: 30px;
+ height: 30px;
+ font-size: 13px;
+ color: $tc-gray-70;
+ text-align: right;
+ }
+ .search-select-widget{
+ width: 280px;
+ margin-left: 10px;
+ display: inline-block;
+ }
+ }
+ .SwitchButton {
+ .label {
+ padding-right: 10px;
+ }
+ }
+ }
+}
+
+.project-creation-dialog-overlay {
+ position : fixed;
+ top : 0;
+ left : 0;
+ right : 0;
+ bottom : 0;
+ z-index: 21;/* +1 of the z-index of the topbar */
+ background-color: #fafafb;
+ /*background-color: $tc-gray-neutral-dark;*/
+ overflow-y: scroll;
+
+ .IncompleteProjectConfirmation {
+ position: static;
+ padding-top: 0;
+ height: auto;
+ }
+
+ section.content {
+ padding: 1px 0;
+ }
+
+ .escape-button {
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ z-index: 22;/* +1 from z-index of the modal overlay */
+ }
+}
+
+.project-creation-dialog {
+ top: 0px;
+ left: 0px;
+
+ .Wizard .content {
+ margin: 0 auto;
+ padding: 50px 0;
+ width: 100%;
+ min-height: 100vh;
+ }
+
+ .TextInput.project-name,
+ .TextInput.project-ref-code {
+ height: 45px;
+ }
+}
+
+/*.project-creation-dialog-close {
+ cursor: pointer;
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+
+ & .x-mark-icon {
+ width: 100%;
+ height: 100%;
+ }
+}*/
+
+
+@media all and (max-width: 1023px) {
+ .bar__search{
+ h2{
+ width: 110px;
+ }
+ .search-panel{
+ flex: 1;
+ margin: 0 auto;
+ text-align: left;
+ display: flex;
+ justify-content: flex-start;
+ label{
+ width: auto;
+ margin-left: 30px;
+ &.first{
+ margin-left: 0;
+ }
+ }
+ .search-select-widget {
+ width: 170px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx
deleted file mode 100644
index 9712dae30..000000000
--- a/src/components/TopBar/TopBar.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-require('./TopBar.scss')
-
-import React, {PropTypes, Component} from 'react'
-import { Link } from 'react-router'
-import cn from 'classnames'
-import _ from 'lodash'
-import { UserDropdown, Icons } from 'appirio-tech-react-components'
-
-const { ConnectLogo } = Icons
-import { SearchBar } from 'appirio-tech-react-components'
-import Filters from './Filters'
-import ProjectToolBar from './ProjectToolBar'
-
-
-class TopBar extends Component {
-
- constructor(props) {
- super(props)
- this.state = {
- isCreatingProject: false
- }
- this.handleMobileClick = this.handleMobileClick.bind(this)
- this.handleTermChange = this.handleTermChange.bind(this)
- this.handleSearch = this.handleSearch.bind(this)
- this.handleMyProjectsFilter = this.handleMyProjectsFilter.bind(this)
- }
-
- /*eslint-disable no-unused-vars */
- handleTermChange(oldTerm, searchTerm, reqNo, callback) {
- this.props.projectSuggestions(searchTerm)
- callback(reqNo, this.props.projects)
- }
- /*eslint-enable */
-
- handleSearch(keyword) {
- this.props.applyFilters({ keyword })
- }
-
- handleMyProjectsFilter(event) {
- this.props.applyFilters({memberOnly: event.target.checked})
- }
-
- handleMobileClick(se) {
- const mobileMenuLink = se.target.querySelector('.mobile-wrap > a')
- if (mobileMenuLink) {
- mobileMenuLink.click()
- }
- }
-
- render() {
- const {
- userHandle, userImage, userName, domain, criteria, onNewProjectIntent, applyFilters, isProjectDetails, project,
- isPowerUser, loginUrl, registerUrl, isFilterVisible
- } = this.props
- const homePageUrl = `${window.location.protocol}//${window.location.host}/`
- const logoutLink = `https://accounts.${domain}/#!/logout?retUrl=${homePageUrl}`
- const isLoggedIn = !!userHandle
- const logoTargetUrl = isLoggedIn ? '/projects' : '/'
-
- const logoutClick = (evt) => {
- evt.preventDefault()
- window.analytics && window.analytics.reset()
- window.location = logoutLink
- }
-
- const userMenuItems = [
- [
- { label: 'Help', link: 'https://help.topcoder.com/hc/en-us', absolute: true, id: 0 }
- ],
- [
- { label: 'Log out', onClick: logoutClick, absolute: true, id: 0 }
- ]
- ]
- const logo = (
-
+ { logo }
+ {
+ !!isLoggedIn &&
+
+
+
+ }
+
+ {
+ !!isLoggedIn &&
+
+
+ + New Project
+
+ }
+ { userMenu }
+
+ { isFilterVisible &&
+
+
-
- )
- const avatar = (
-
- {isLoggedIn && !isProjectDetails && + New Project }
-
- )
-
- if (isProjectDetails) {
- return
-
-
-
-
-
-
-
- //
- {logo}
-
- {isFilterVisible &&
-
- {isLoggedIn &&
- {avatar}
-
-
}
- {isPowerUser && }
-
-
-
- this.props.closeModal()}
- onStepChange={wizardStep => this.setState({
- // In this wizard we have just two steps, and this callback is triggered
- // only to move from the second step back to the first, thus we always
- // should reset the projectSubType when this callback is fired.
- projectSubType: '',
- wizardStep
- })}
+ onStepChange={ this.handleStepChange }
step={this.state.wizardStep}
+ shouldRenderBackButton={ (step) => userRoles && userRoles.length && step > 1 }
>
- this.setState({ projectName })}
- onProjectRefChange={projectRef => this.setState({ projectRef })}
- onProjectTypeChange={projectType => this.setState({
- projectType,
- wizardStep: 1
- })}
- projectName={this.state.projectName}
- projectRef={this.state.projectRef}
- projectType={this.state.projectType}
- projectSubType={this.state.projectSubType}
+ this.createProject()}
- onProjectNameChange={projectName => this.setState({ projectName })}
- onProjectRefChange={projectRef => this.setState({ projectRef })}
- onSubCategoryChange={projectSubType => this.setState({ projectSubType })}
- projectName={this.state.projectName}
- projectRef={this.state.projectRef}
- projectType={this.state.projectType}
- projectSubType={this.state.projectSubType}
+ this.handleStepChange(WZ_STEP_SELECT_PROD_TYPE) }
+ onProjectChange={ this.handleProjectChange }
+ submitBtnText="Continue"
+ userRoles={ userRoles }
/>
)
@@ -93,15 +218,47 @@ class ProjectWizard extends Component {
}
ProjectWizard.propTypes = {
- userRoles: PropTypes.arrayOf(PropTypes.string).isRequired,
- closeModal: PropTypes.func.isRequired
+ /**
+ * Callback to be called when the wizard is shown in modal form and close button is clicked.
+ */
+ closeModal: PropTypes.func,
+ /**
+ * Flag to render the wizard as modal (allows closing of the wizard at any step)
+ */
+ showModal: PropTypes.bool,
+ /**
+ * Callback to create project. Called when the wizard finishes its last step.
+ */
+ createProject: PropTypes.func.isRequired,
+ /**
+ * Callback called on every step change in the wizard.
+ */
+ onStepChange: PropTypes.func,
+ /**
+ * Callback called for every change in project details.
+ */
+ onProjectUpdate: PropTypes.func,
+ /**
+ * Flag which indicates that a project creation is in progress.
+ */
+ processing: PropTypes.bool.isRequired,
+ /**
+ * Roles of the logged in user. Used to determine anonymous access.
+ */
+ userRoles: PropTypes.arrayOf(PropTypes.string)
+}
+
+ProjectWizard.defaultProps = {
+ closeModal: () => {},
+ showModal: false
+}
+
+ProjectWizard.Steps = {
+ WZ_STEP_INCOMP_PROJ_CONF,
+ // WZ_STEP_SELECT_PROJ_TYPE,
+ WZ_STEP_SELECT_PROD_TYPE,
+ WZ_STEP_FILL_PROJ_DETAILS,
+ WZ_STEP_ERROR_CREATING_PROJ
}
-const mapStateToProps = ({projectState, loadUser }) => ({
- userRoles: loadUser.user.roles,
- processing: projectState.processing,
- error: projectState.error,
- project: projectState.project
-})
-const actionCreators = { createProject }
-export default withRouter(connect(mapStateToProps, actionCreators)(ProjectWizard))
+export default ProjectWizard
\ No newline at end of file
diff --git a/src/projects/create/components/ProjectWizard.scss b/src/projects/create/components/ProjectWizard.scss
new file mode 100644
index 000000000..d094be956
--- /dev/null
+++ b/src/projects/create/components/ProjectWizard.scss
@@ -0,0 +1,25 @@
+@import 'tc-includes';
+
+.ProjectWizard {
+ .content {
+ background: transparent;
+ box-shadow: none;
+ width: 100%;
+
+ .ProjectTypeCard {
+ background: $tc-white;
+
+ &.selected {
+ background: $tc-gray-10;
+ }
+ }
+
+ .ProjectSubTypeCard {
+ background: $tc-white;
+
+ &.selected {
+ background: $tc-gray-10;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/projects/create/components/SelectProduct.js b/src/projects/create/components/SelectProduct.js
new file mode 100644
index 000000000..e8bdd1c39
--- /dev/null
+++ b/src/projects/create/components/SelectProduct.js
@@ -0,0 +1,51 @@
+import React, { PropTypes as PT } from 'react'
+import { Icons } from 'appirio-tech-react-components'
+import config from '../../../config/projectWizard'
+import ProductCard from './ProductCard'
+import SVGIconImage from '../../../components/SVGIconImage'
+import './SelectProduct.scss'
+
+const { ConnectLogo } = Icons
+
+function SelectProduct(props) {
+ const cards = []
+ for (const key in config) {
+ const type = config[key]
+ const subTypes = type.subtypes
+ for(const subType in subTypes) {
+ const item = subTypes[subType]
+ // don't render disabled items for selection
+ if (item.disabled) continue
+ const icon = props.onProductChange(type.id, item.id)}
+ type={ subType }
+ />
+ )
+ }
+ }
+ return (
+ props.onSubCategoryChange(key)}
- selected={props.projectSubType === key}
+ onClick={() => props.onSubCategoryChange(item.id)}
+ selected={props.projectSubType === item.id}
type={key}
/>
)
}
- const details = props.projectSubType ?
- subConfig.subtypes[props.projectSubType].details :
+
+ const projectSubTypeKey = _.findKey(subConfig, {id : props.projectSubType})
+ const details = projectSubTypeKey ?
+ subConfig.subtypes[projectSubTypeKey].details :
'Select your project type'
return (
-
+
+ )
+
+ const avatar = (
+
+
+ )
+ let ToolBar = null
+ ToolBar = typeof toolbar === 'function' ? toolbar : null
+ ToolBar = toolbar && typeof toolbar.type === 'function' ? toolbar.type : ToolBar
+ return (
+
+
+
+
+
+
+
+
)
}
@@ -134,22 +112,13 @@ TopBarContainer.contextTypes = {
router: PropTypes.object.isRequired
}
-const mapStateToProps = ({ projectSearchSuggestions, searchTerm, projectSearch, projectState, loadUser }) => {
- let isPowerUser = false
- const roles = [ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR]
- if (loadUser.user) {
- isPowerUser = loadUser.user.roles.some((role) => roles.indexOf(role) !== -1)
- }
+const mapStateToProps = ({ loadUser }) => {
return {
- projects : projectSearchSuggestions.projects,
- previousSearchTerm : searchTerm.previousSearchTerm,
- searchTermTag : searchTerm.searchTermTag,
- project : projectState.project,
- criteria : projectSearch.criteria,
- isPowerUser
+ userRoles : _.get(loadUser, 'user.roles', []),
+ user : loadUser.user
}
}
-const actionsToBind = { projectSuggestions, loadProjects }
+const actionsToBind = { }
export default connect(mapStateToProps, actionsToBind)(TopBarContainer)
diff --git a/src/components/TopBar/TopBarContainer.scss b/src/components/TopBar/TopBarContainer.scss
new file mode 100644
index 000000000..c5b276264
--- /dev/null
+++ b/src/components/TopBar/TopBarContainer.scss
@@ -0,0 +1,134 @@
+@import 'tc-includes';
+
+.tc-header {
+ height: 60px;
+ // background: $tc-gray-neutral-light;
+ line-height: 60px;
+ height: 60px;
+ background-color: $tc-black;
+ z-index: 20;
+ padding: 0 20px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ .logo-wrapper {
+ width: 60px;
+ height: 60px;
+ flex-shrink: 0;
+
+ .logo {
+ display: inline-block;
+ position: relative;
+ margin-top: 12px;
+ // width: 60px;
+ // height: 36px;
+ }
+ }
+
+ .UserDropdownMenu {
+ padding: 0;
+ display: flex;
+ align-content: center;
+ text-align: left;
+ }
+
+ .sb-avatar {
+ display: block !important;
+ }
+
+ &.tc-header__connect{
+ padding: 0;
+ min-height: 60px;
+ height: auto;
+
+ .top-bar {
+ height: 60px;
+ background-color: $tc-black;
+ position: relative;
+
+ .welcome-info {
+ height: 60px;
+ font-size: 13px;
+ color: $tc-gray-50;
+ display: flex;
+ justify-content: space-between;
+ @include roboto-medium;
+ >.tc-btn{
+ margin-top: 15px;
+ border: 0;
+ width: 116px;
+ text-align: center;
+ }
+ .avatar-info {
+ position: relative;
+ margin-left: 20px;
+ display: flex;
+ align-items: center;
+ .avatar {
+ width: 30px;
+ height: 30px;
+ background-color: $tc-dark-blue-70 ;
+ border-radius: 15px;
+ overflow: hidden;
+ text-align: center;
+ line-height: 30px;
+ color: $tc-white;
+ @include roboto-medium;
+ font-size: 15px;
+ position: absolute;
+ left: 0;
+ top: 15px;
+ img {
+ width: 30px;
+ height: 30px;
+ border-radius: 15px;
+ }
+ }
+ .avatar-link {
+ display: inline-block;
+ padding-right: 16px;
+ position: relative;
+ &:after{
+ display: block;
+ content: '';
+ width: 10px;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ margin-top: -4px;
+ height: 7.5px;
+ //background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
+ background-size: 10px 7.5px;
+ }
+ }
+ }
+ .tc-btn-primary {
+ margin-left: 7px;
+ color: $tc-white;
+ }
+ }
+ }
+ }
+}
+
+@media all and (max-width: 1023px) {
+ .tc-header{
+ &.tc-header__connect{
+ .top-bar .search-bar{
+ width: 383px;
+ margin-left: 110px;
+ .search-widget{
+ width: 296px;
+ }
+ }
+ .top-bar .welcome-info .avatar-info .avatar-link{
+ text-indent: -9999px;
+ width: 10px;
+ padding-right: 0;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/Wizard/Wizard.jsx b/src/components/Wizard/Wizard.jsx
index 18e8ae504..46dfb1671 100644
--- a/src/components/Wizard/Wizard.jsx
+++ b/src/components/Wizard/Wizard.jsx
@@ -5,28 +5,35 @@ import SVGIconImage from '../SVGIconImage'
import './Wizard.scss'
function Wizard(props) {
+ const { step, shouldRenderBackButton, onStepChange, showModal, onCancel } = props
let backControl
- if (props.step) {
+ let modalCloseControl
+ if (step && (!shouldRenderBackButton || shouldRenderBackButton(step))) {
backControl = (
+
+ {
+ ToolBar &&
+
+
+
)
@@ -36,7 +43,9 @@ Wizard.proptTypes = {
children: PT.node.isRequired,
onCancel: PT.node.isRequired,
onStepChange: PT.func.isRequired,
- step: PT.number.isRequired
+ step: PT.number.isRequired,
+ showModal: PT.bool,
+ shouldRenderBackButton: PT.func
}
export default Wizard
diff --git a/src/components/Wizard/Wizard.scss b/src/components/Wizard/Wizard.scss
index 8e7674df4..5a0d963bb 100644
--- a/src/components/Wizard/Wizard.scss
+++ b/src/components/Wizard/Wizard.scss
@@ -9,8 +9,9 @@
margin: 24px auto;
min-width: 120px;
padding: 20px;
- position: relative;
+ /*position: relative;*/
text-align: left;
+ width: 100%;
}
.back-button {
position: absolute;
diff --git a/src/config/constants.js b/src/config/constants.js
index d2f2447e7..48213103e 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -250,4 +250,6 @@ export const AUTOCOMPLETE_TRIGGER_LENGTH = 3
// Toggle this flag to enable/disable maintenance mode
export const MAINTENANCE_MODE = false
+export const LS_INCOMPLETE_PROJECT = 'incompleteProject'
+
export const CONNECT_MESSAGE_API_URL = process.env.CONNECT_MESSAGE_API_URL || TC_API_URL
diff --git a/src/config/projectQuestions/app_dev.v1.0.js b/src/config/projectQuestions/app_dev.v1.0.js
index dc9ef25b0..3b73d7978 100644
--- a/src/config/projectQuestions/app_dev.v1.0.js
+++ b/src/config/projectQuestions/app_dev.v1.0.js
@@ -25,11 +25,12 @@ const sections = [
return 'Definition'
},
required: true,
- description: 'Answer just a few questions about your application. You can also provide the needed information in a supporting-document - upload it below or add a link in the notes section.',
+ description: 'Please answer a few basic questions about your project. You can also provide the needed information in a supporting document--add a link in the notes section or upload it below.',
subSections: [
{
id: 'projectName',
required: true,
+ validationError: 'Please provide a name to your project',
fieldName: 'name',
description: '',
title: 'Project Name',
@@ -228,3 +229,86 @@ const sections = [
]
export default sections
+
+export const basicSections = [
+ {
+ id: 'appDefinition',
+ title: '',
+ required: true,
+ description: 'Please answer a few basic questions about your project and, as an option, add links to supporting documents in the “Notes” section. If you have any files to upload, you’ll be able to do so later.',
+ subSections: [
+ {
+ id: 'projectName',
+ required: true,
+ validationError: 'Please provide a name to your project',
+ fieldName: 'name',
+ description: '',
+ title: 'Project Name',
+ type: 'project-name'
+ },
+ {
+ id: 'questions',
+ required: true,
+ hideTitle: true,
+ title: 'Questions',
+ description: '',
+ type: 'questions',
+ questions: [
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the target device',
+ title: 'Which is your primary device target?',
+ description: 'Select only the device that you need to develop for. \
+ In most cases limiting the scope of your project would result \
+ in better final result. Topcoder recommends to always start \
+ with the mobile phone view and expand to other devices as your \
+ app matures.',
+ fieldName: 'details.appDefinition.primaryTarget',
+ type: 'tiled-radio-group',
+ options: [
+ {value: 'phone', title: 'Phone', icon: Icons.IconTechOutlineMobile, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'tablet', title: 'Tablet', icon: Icons.IconTechOutlineTablet, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'desktop', title: 'Desktop', icon: Icons.IconTechOutlineDesktop, iconOptions: { fill: '#00000'}, desc: 'all OS'},
+ {value: 'wearable', title: 'Wearable', icon: Icons.IconTechOutlineWatchApple, iconOptions: { fill: '#00000'}, desc: 'Watch OS, Android Wear'}
+ ]
+ },
+ {
+ id: 'projectInfo',
+ required: true,
+ validationError: 'Please provide description',
+ fieldName: 'description',
+ description: 'Brief Description',
+ title: 'Description',
+ type: 'textbox'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the goal of your application',
+ title: 'What is the goal of your application? How will people use it?',
+ description: 'Describe your objectives for creating this application',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.goal.value'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know users of your application',
+ title: 'Who are the users of your application? ',
+ description: 'Describe the roles and needs of your target users',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.users.value'
+ }
+ ]
+ },
+ {
+ id: 'notes',
+ fieldName: 'details.appDefinition.notes',
+ title: 'Notes',
+ description: 'Add any other important information regarding your project (e.g., links to documents or existing applications, budget or timing constraints)',
+ type: 'notes'
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/config/projectQuestions/avd.v1.0.js b/src/config/projectQuestions/avd.v1.0.js
index f8b9a5847..7eae6bdb8 100644
--- a/src/config/projectQuestions/avd.v1.0.js
+++ b/src/config/projectQuestions/avd.v1.0.js
@@ -27,11 +27,12 @@ const sections = [
return 'Definition'
},
required: true,
- description: 'Answer just a few questions about your application. You can also provide the needed information in a supporting-document - upload it below or add a link in the notes section.',
+ description: 'Please answer a few basic questions about your project. You can also provide the needed information in a supporting document--add a link in the notes section or upload it below.',
subSections: [
{
id: 'projectName',
required: true,
+ validationError: 'Please provide a name to your project',
fieldName: 'name',
description: '',
title: 'Project Name',
@@ -227,3 +228,101 @@ const sections = [
]
export default sections
+
+export const basicSections = [
+ {
+ id: 'appDefinition',
+ title: '',
+ required: true,
+ description: 'Please answer a few basic questions about your project and, as an option, add links to supporting documents in the “Notes” section. If you have any files to upload, you’ll be able to do so later.',
+ subSections: [
+ {
+ id: 'projectName',
+ required: true,
+ validationError: 'Please provide a name to your project',
+ fieldName: 'name',
+ description: '',
+ title: 'Project Name',
+ type: 'project-name'
+ },
+ {
+ id: 'questions',
+ required: true,
+ hideTitle: true,
+ title: 'Questions',
+ description: '',
+ type: 'questions',
+ questions: [
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the number of screens required',
+ title: 'How many screens do you need designed?',
+ description: 'This is the most popular project size that can get a medium-sized app designed in a breeze',
+ fieldName: 'details.appDefinition.numberScreens',
+ type: 'tiled-radio-group',
+ options: [
+ {value: '1-3', title: 'screens', icon: NumberText, iconOptions: { number: '1-3' }, desc: '5-7 days', price: 5000},
+ {value: '4-8', title: 'screens', icon: NumberText, iconOptions: { number: '4-8' }, desc: '7-10 days', price: 7000},
+ {value: '9-15', title: 'screens', icon: NumberText, iconOptions: { number: '9-15' }, desc: '8-10 days', price: 8500}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the target device',
+ title: 'Which is your primary device target?',
+ description: 'Select only the device that you need to develop for. \
+ In most cases limiting the scope of your project would result \
+ in better final result. Topcoder recommends to always start \
+ with the mobile phone view and expand to other devices as your \
+ app matures.',
+ fieldName: 'details.appDefinition.primaryTarget',
+ type: 'tiled-radio-group',
+ options: [
+ {value: 'Phone', title: 'Phone', icon: Icons.IconTechOutlineMobile, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Tablet', title: 'Tablet', icon: Icons.IconTechOutlineTablet, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Desktop', title: 'Desktop', icon: Icons.IconTechOutlineDesktop, iconOptions: { fill: '#00000'}, desc: 'all OS'},
+ {value: 'Wearable', title: 'Wearable', icon: Icons.IconTechOutlineWatchApple, iconOptions: { fill: '#00000'}, desc: 'Watch OS, Android Wear'}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please provide description',
+ id: 'projectInfo',
+ fieldName: 'description',
+ description: 'Brief Description',
+ title: 'Description',
+ type: 'textbox'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the goal of your application',
+ title: 'What is the goal of your application? How will people use it?',
+ description: 'Describe your objectives for creating this application',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.goal.value'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know users of your application',
+ title: 'Who are the users of your application? ',
+ description: 'Describe the roles and needs of your target users',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.users.value'
+ }
+ ]
+ },
+ {
+ id: 'notes',
+ fieldName: 'details.appDefinition.notes',
+ title: 'Notes',
+ description: 'Add any other important information regarding your project (e.g., links to documents or existing applications, budget or timing constraints)',
+ type: 'notes'
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/config/projectQuestions/topcoder.v1.js b/src/config/projectQuestions/topcoder.v1.js
index b4a5056f6..60f686bec 100644
--- a/src/config/projectQuestions/topcoder.v1.js
+++ b/src/config/projectQuestions/topcoder.v1.js
@@ -17,11 +17,12 @@ const sections = [
id: 'appDefinition',
title: 'App Definition',
required: true,
- description: 'Answer just a few questions about your application. You can also provide the needed information in a supporting-document - upload it below or add a link in the notes section.',
+ description: 'Please answer a few basic questions about your project. You can also provide the needed information in a supporting document--add a link in the notes section or upload it below.',
subSections: [
{
id: 'projectName',
required: true,
+ validationError: 'Please provide a name to your project',
fieldName: 'name',
description: '',
title: 'Project Name',
@@ -202,3 +203,68 @@ const sections = [
]
export default sections
+
+export const basicSections = [
+ {
+ id: 'appDefinition',
+ title: '',
+ required: true,
+ description: 'Please answer a few basic questions about your project and, as an option, add links to supporting documents in the “Notes” section. If you have any files to upload, you’ll be able to do so later.',
+ subSections: [
+ {
+ id: 'projectName',
+ required: true,
+ validationError: 'Please provide a name to your project',
+ fieldName: 'name',
+ description: '',
+ title: 'Project Name',
+ type: 'project-name'
+ },
+ {
+ id: 'questions',
+ required: true,
+ hideTitle: true,
+ title: 'Questions',
+ description: '',
+ type: 'questions',
+ questions: [
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please provide description',
+ id: 'projectInfo',
+ fieldName: 'description',
+ description: 'Brief Description',
+ title: 'Description',
+ type: 'textbox'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the goal of your application',
+ title: 'What is the goal of your application? How will people use it?',
+ description: 'Describe your objectives for creating this application',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.goal.value'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know users of your application',
+ title: 'Who are the users of your application? ',
+ description: 'Describe the roles and needs of your target users',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.users.value'
+ }
+ ]
+ },
+ {
+ id: 'notes',
+ fieldName: 'details.appDefinition.notes',
+ title: 'Notes',
+ description: 'Add any other important information regarding your project (e.g., links to documents or existing applications, budget or timing constraints)',
+ type: 'notes'
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/config/projectQuestions/visual_design.v1.0.js b/src/config/projectQuestions/visual_design.v1.0.js
index 55114c1bb..85a338288 100644
--- a/src/config/projectQuestions/visual_design.v1.0.js
+++ b/src/config/projectQuestions/visual_design.v1.0.js
@@ -28,11 +28,12 @@ const sections = [
},
required: true,
pricePerPage: 1000,
- description: 'Answer just a few questions about your application. You can also provide the needed information in a supporting-document - upload it below or add a link in the notes section.',
+ description: 'Please answer a few basic questions about your project. You can also provide the needed information in a supporting document--add a link in the notes section or upload it below.',
subSections: [
{
id: 'projectName',
required: true,
+ validationError: 'Please provide a name to your project',
fieldName: 'name',
description: '',
title: 'Project Name',
@@ -243,3 +244,95 @@ const sections = [
]
export default sections
+
+
+export const basicSections = [
+ {
+ id: 'appDefinition',
+ title: '',
+ required: true,
+ pricePerPage: 1000,
+ description: 'Please answer a few basic questions about your project and, as an option, add links to supporting documents in the “Notes” section. If you have any files to upload, you’ll be able to do so later.',
+ subSections: [
+ {
+ id: 'projectName',
+ required: true,
+ validationError: 'Please provide a name to your project',
+ fieldName: 'name',
+ description: '',
+ title: 'Project Name',
+ type: 'project-name'
+ },
+ {
+ id: 'questions',
+ required: true,
+ hideTitle: true,
+ title: 'Questions',
+ description: '',
+ type: 'questions',
+ questions: [
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the number of screens required',
+ title: 'How many screens do you need designed?',
+ description: 'This is the most popular project size that can get a medium-sized app designed in a breeze',
+ fieldName: 'details.appDefinition.numberScreens',
+ type: 'tiled-radio-group',
+ options: [
+ {value: '1', title: 'screens', icon: NumberText, iconOptions: { number: '1' }, desc: '3-5 days'},
+ {value: '3', title: 'screens', icon: NumberText, iconOptions: { number: '3' }, desc: '5-10 days'},
+ {value: '5', title: 'screens', icon: NumberText, iconOptions: { number: '5' }, desc: '7-10 days'},
+ {value: '10', title: 'screens', icon: NumberText, iconOptions: { number: '10' }, desc: '10-14 days'}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the target device',
+ title: 'Which is your primary device target?',
+ description: 'Select only the device that you need to develop for. \
+ In most cases limiting the scope of your project would result \
+ in better final result. Topcoder recommends to always start \
+ with the mobile phone view and expand to other devices as your \
+ app matures.',
+ fieldName: 'details.appDefinition.primaryTarget',
+ type: 'tiled-radio-group',
+ options: [
+ {value: 'Phone', title: 'Phone', icon: Icons.IconTechOutlineMobile, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Tablet', title: 'Tablet', icon: Icons.IconTechOutlineTablet, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Desktop', title: 'Desktop', icon: Icons.IconTechOutlineDesktop, iconOptions: { fill: '#00000'}, desc: 'all OS'},
+ {value: 'Wearable', title: 'Wearable', icon: Icons.IconTechOutlineWatchApple, iconOptions: { fill: '#00000'}, desc: 'Watch OS, Android Wear'}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please provide description',
+ id: 'projectInfo',
+ fieldName: 'description',
+ description: 'Brief Description',
+ title: 'Description',
+ type: 'textbox'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know users of your application',
+ title: 'Who are the users of your application? ',
+ description: 'Describe the roles and needs of your target users',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.users.value'
+ }
+ ]
+ },
+ {
+ id: 'notes',
+ fieldName: 'details.appDefinition.notes',
+ title: 'Notes',
+ description: 'Add any other important information regarding your project (e.g., links to documents or existing applications, budget or timing constraints)',
+ type: 'notes'
+ }
+ ]
+ }
+]
diff --git a/src/config/projectQuestions/wireframes.v1.0.js b/src/config/projectQuestions/wireframes.v1.0.js
index fea0b531f..f8659ba36 100644
--- a/src/config/projectQuestions/wireframes.v1.0.js
+++ b/src/config/projectQuestions/wireframes.v1.0.js
@@ -28,11 +28,12 @@ const sections = [
},
productName: 'Wireframes',
required: true,
- description: 'Answer just a few questions about your application. You can also provide the needed information in a supporting-document - upload it below or add a link in the notes section.',
+ description: 'Please answer a few basic questions about your project. You can also provide the needed information in a supporting document--add a link in the notes section or upload it below.',
subSections: [
{
id: 'projectName',
required: true,
+ validationError: 'Please provide a name to your project',
fieldName: 'name',
description: '',
title: 'Project Name',
@@ -227,3 +228,101 @@ const sections = [
]
export default sections
+
+export const basicSections = [
+ {
+ id: 'appDefinition',
+ title: '',
+ productName: 'Wireframes',
+ required: true,
+ description: 'Please answer a few basic questions about your project and, as an option, add links to supporting documents in the “Notes” section. If you have any files to upload, you’ll be able to do so later.',
+ subSections: [
+ {
+ id: 'projectName',
+ required: true,
+ validationError: 'Please provide a name to your project',
+ fieldName: 'name',
+ description: '',
+ title: 'Project Name',
+ type: 'project-name'
+ },
+ {
+ id: 'questions',
+ required: true,
+ hideTitle: true,
+ title: 'Questions',
+ description: '',
+ type: 'questions',
+ questions: [
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the number of screens required',
+ title: 'How many screens do you need designed?',
+ description: 'This is the most popular project size that can get a medium-sized app designed in a breeze',
+ fieldName: 'details.appDefinition.numberScreens',
+ type: 'tiled-radio-group',
+ options: [
+ {value: '10', title: 'screens', icon: NumberText, iconOptions: { number: '10' }, desc: '7-10 days', price: 5000},
+ {value: '15', title: 'screens', icon: NumberText, iconOptions: { number: '15' }, desc: '10-12 days', price: 7000}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the target device',
+ title: 'Which is your primary device target?',
+ description: 'Select only the device that you need to develop for. \
+ In most cases limiting the scope of your project would result \
+ in better final result. Topcoder recommends to always start \
+ with the mobile phone view and expand to other devices as your \
+ app matures.',
+ fieldName: 'details.appDefinition.primaryTarget',
+ type: 'tiled-radio-group',
+ options: [
+ {value: 'Phone', title: 'Phone', icon: Icons.IconTechOutlineMobile, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Tablet', title: 'Tablet', icon: Icons.IconTechOutlineTablet, iconOptions: { fill: '#00000'}, desc: 'iOS, Android, Hybrid'},
+ {value: 'Desktop', title: 'Desktop', icon: Icons.IconTechOutlineDesktop, iconOptions: { fill: '#00000'}, desc: 'all OS'},
+ {value: 'Wearable', title: 'Wearable', icon: Icons.IconTechOutlineWatchApple, iconOptions: { fill: '#00000'}, desc: 'Watch OS, Android Wear'}
+ ]
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please provide description',
+ id: 'projectInfo',
+ fieldName: 'description',
+ description: 'Brief Description',
+ title: 'Description',
+ type: 'textbox'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know the goal of your application',
+ title: 'What is the goal of your application? How will people use it?',
+ description: 'Describe your objectives for creating this application',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.goal.value'
+ },
+ {
+ icon: 'question',
+ required: true,
+ validationError: 'Please let us know users of your application',
+ title: 'Who are the users of your application? ',
+ description: 'Describe the roles and needs of your target users',
+ type: 'textbox',
+ fieldName: 'details.appDefinition.users.value'
+ }
+ ]
+ },
+ {
+ id: 'notes',
+ fieldName: 'details.appDefinition.notes',
+ title: 'Notes',
+ description: 'Add any other important information regarding your project (e.g., links to documents or existing applications, budget or timing constraints)',
+ type: 'notes'
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/config/projectSpecification/typeToSpecification.json b/src/config/projectSpecification/typeToSpecification.json
index b98ef6c59..1269df54f 100644
--- a/src/config/projectSpecification/typeToSpecification.json
+++ b/src/config/projectSpecification/typeToSpecification.json
@@ -2,6 +2,7 @@
"wireframes": "wireframes.v1.0",
"visual_design_concepts": "avd.v1.0",
"visual_design_prod": "avd.v1.0",
+ "infographic": "avd.v1.0",
"generic_design": "topcoder.v1",
"visual_prototype": "app_dev.v1.0",
"website_development": "app_dev.v1.0",
diff --git a/src/config/projectWizard/index.js b/src/config/projectWizard/index.js
index d409cac14..8e1341b27 100644
--- a/src/config/projectWizard/index.js
+++ b/src/config/projectWizard/index.js
@@ -8,57 +8,65 @@ const products = {
Wireframes: {
brief: '10-15 screens',
details: 'Plan and explore the navigation and structure of your app',
- icon: 'project-wireframes',
+ icon: 'product-wireframes',
id: 'wireframes'
},
'App Visual Design - Concepts': {
brief: '1-15 screens',
details: 'Visualize and test your app requirements and ideas',
- icon: 'project-app-visual-design',
- id: 'visual_design_concepts'
+ icon: 'product-app-visual-design',
+ id: 'visual_design_concepts',
+ disabled: true
},
- 'App Visual Design - Production': {
+ 'Visual Design': {
brief: '1-15 screens',
details: 'Create development-ready designs',
- icon: 'project-app-visual-design',
+ icon: 'product-app-visual-design',
id: 'visual_design_prod'
},
+ Infographic: {
+ brief: 'Infographic',
+ details: 'Present your data in an easy-to-understand and interesting way',
+ icon: 'product-infographic',
+ id: 'infographic',
+ disabled: true
+ },
'Other Design': {
brief: 'other designs',
details: 'Get help with other types of design',
- icon: 'project-wireframes',
+ icon: 'product-other-design',
id: 'generic_design'
}
}
},
Development: {
- icon: 'product-code',
+ icon: 'product-software-development',
info: 'Front end prototypes, website and application development, services, and more',
question: 'What do you need to develop?',
id: 'app_dev',
subtypes: {
- Prototype: {
+ 'Front-end Prototype': {
brief: '3-20 screens',
- details: 'Translate designs to an HTML/CSS/JavaScript prototype',
- icon: 'project-prototype-demo',
+ details: 'Translate designs to a web (HTML/CSS/JavaScript) or mobile prototype',
+ icon: 'product-front-end-prototype',
id: 'visual_prototype'
},
- 'Website Development': {
+ Website: {
brief: 'Websites',
details: 'Build responsive or regular websites',
- icon: 'project-prototype-technical',
+ icon: 'product-website',
id: 'website_development'
},
- 'Application Development': {
+ App: {
brief: 'Apps',
details: 'Build apps for mobile, web, or wearables',
- icon: 'project-development-code',
+ icon: 'product-app',
id: 'application_development'
},
- 'Other Development': {
+ 'Software Development': {
brief: 'Tasks or adhoc',
details: 'Get help with any part of your development cycle',
- icon: 'project-development-ideation',
+ icon: 'product-software-development',
id: 'generic_dev'
}
}
@@ -82,3 +90,20 @@ export function findProduct(product) {
}
}
}
+
+export function findProductCategory(product) {
+ if (product === 'generic_dev') {
+ return 'Development'
+ }
+ if (product === 'generic_design') {
+ return 'Design'
+ }
+ for(const pType in products) {
+ for(const prd in products[pType].subtypes) {
+ const subType = products[pType].subtypes[prd]
+ if (subType.id === product && !subType.disabled) {
+ return pType
+ }
+ }
+ }
+}
diff --git a/src/projects/ProjectLayout.jsx b/src/projects/ProjectLayout.jsx
index 84999507d..9bef72401 100644
--- a/src/projects/ProjectLayout.jsx
+++ b/src/projects/ProjectLayout.jsx
@@ -8,15 +8,15 @@ class ProjectViewLayout extends Component {
}
render() {
- const {topbar, main} = this.props
+ const { main } = this.props
return (
)
+ // return this.props.children
}
}
diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js
index a6e49039d..3ea87811e 100644
--- a/src/projects/actions/project.js
+++ b/src/projects/actions/project.js
@@ -1,4 +1,5 @@
import { getProjectById, createProject as createProjectAPI,
+ createProjectWithStatus as createProjectWithStatusAPI,
updateProject as updateProjectAPI,
deleteProject as deleteProjectAPI,
getDirectProjectData } from '../../api/projects'
@@ -41,6 +42,15 @@ export function updateProject(projectId, updatedProps) {
}
}
+export function createProjectWithStatus(newProject, status) {
+ return (dispatch) => {
+ return dispatch({
+ type: CREATE_PROJECT,
+ payload: createProjectWithStatusAPI(newProject, status)
+ })
+ }
+}
+
export function deleteProject(newProject) {
return (dispatch) => {
return dispatch({
diff --git a/src/projects/create/components/FillProjectDetails.js b/src/projects/create/components/FillProjectDetails.js
new file mode 100644
index 000000000..2d64e26b9
--- /dev/null
+++ b/src/projects/create/components/FillProjectDetails.js
@@ -0,0 +1,101 @@
+import _ from 'lodash'
+import React, { PropTypes as PT, Component } from 'react'
+import Sticky from 'react-stickynode'
+
+import { Icons } from 'appirio-tech-react-components'
+import config from '../../../config/projectWizard'
+import SVGIconImage from '../../../components/SVGIconImage'
+import './FillProjectDetails.scss'
+import ProjectBasicDetailsForm from '../components/ProjectBasicDetailsForm'
+import ProjectOutline from '../components/ProjectOutline'
+import typeToSpecification from '../../../config/projectSpecification/typeToSpecification'
+
+const { ConnectLogo } = Icons
+
+class FillProjectDetails extends Component {
+ constructor(props) {
+ super(props)
+ this.state = { project: {} }
+ }
+
+ componentWillMount() {
+ this.componentWillReceiveProps(this.props)
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({ project: nextProps.project })
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ return !(
+ _.isEqual(nextProps.project, this.props.project)
+ && _.isEqual(nextState.project, this.state.project)
+ && _.isEqual(nextProps.dirtyProject, this.props.dirtyProject)
+ && _.isEqual(nextProps.error, this.props.error)
+ )
+ }
+
+ render() {
+ const { project, dirtyProject, processing, submitBtnText, userRoles } = this.props
+ const product = _.get(project, 'details.products[0]')
+ // const projectName = _.get(project, 'name')
+ // const projectRef = _.get(project, 'details.utm.code', '')
+ const projectTypeId = _.get(project, 'type')
+ const subConfig = config[_.findKey(config, {id : projectTypeId})]
+ const productName = _.findKey(subConfig.subtypes, {id : product})
+
+ let specification = 'topcoder.v1'
+ if (product)
+ specification = typeToSpecification[product]
+ let sections = require(`../../../config/projectQuestions/${specification}`).basicSections
+ return (
+
+ )
+ return (
+
)
}
diff --git a/src/projects/create/components/ProjectWizard.jsx b/src/projects/create/components/ProjectWizard.jsx
index 3cbec9e7b..7f08533e4 100644
--- a/src/projects/create/components/ProjectWizard.jsx
+++ b/src/projects/create/components/ProjectWizard.jsx
@@ -1,13 +1,21 @@
import _ from 'lodash'
+import { unflatten } from 'flat'
import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
-import { createProject } from '../../actions/project'
-import config from '../../../config/projectWizard'
+import config, { findProductCategory } from '../../../config/projectWizard'
import Wizard from '../../../components/Wizard'
-import SelectProjectType from './SelectProjectType'
-import SelectProjectSubType from './SelectProjectSubType'
+import SelectProduct from './SelectProduct'
+import IncompleteProjectConfirmation from './IncompleteProjectConfirmation'
+import FillProjectDetails from './FillProjectDetails'
+import update from 'react-addons-update'
+import { LS_INCOMPLETE_PROJECT } from '../../../config/constants'
+import './ProjectWizard.scss'
+
+const WZ_STEP_INCOMP_PROJ_CONF = 0
+// const WZ_STEP_SELECT_PROJ_TYPE = 1
+const WZ_STEP_SELECT_PROD_TYPE = 1
+const WZ_STEP_FILL_PROJ_DETAILS = 2
+const WZ_STEP_ERROR_CREATING_PROJ = 3
class ProjectWizard extends Component {
@@ -15,77 +23,194 @@ class ProjectWizard extends Component {
super(props)
this.state = {
- creatingProject: false,
- projectName: '',
- projectRef: '',
- projectType: '',
- projectSubType: '',
- wizardStep: 0
+ wizardStep: WZ_STEP_SELECT_PROD_TYPE,
+ project: { details: {} },
+ dirtyProject: { details: {} },
+ isProjectDirty: false
+ }
+
+ this.updateProjectRef = this.updateProjectRef.bind(this)
+ this.updateProducts = this.updateProducts.bind(this)
+ this.handleProjectChange = this.handleProjectChange.bind(this)
+ this.loadIncompleteProject = this.loadIncompleteProject.bind(this)
+ this.removeIncompleteProject = this.removeIncompleteProject.bind(this)
+ this.handleOnCreateProject = this.handleOnCreateProject.bind(this)
+ this.handleStepChange = this.handleStepChange.bind(this)
+ }
+
+ componentDidMount() {
+ const { params, onStepChange } = this.props
+ // load incomplete project from local storage
+ const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
+ if(incompleteProjectStr) {
+ const incompleteProject = JSON.parse(incompleteProjectStr)
+ this.setState({
+ project: update(this.state.project, {$merge : incompleteProject}),
+ dirtyProject: update(this.state.dirtyProject, {$merge : incompleteProject}),
+ wizardStep: WZ_STEP_INCOMP_PROJ_CONF,
+ isProjectDirty: false
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
+ } else {
+ // if there is no incomplete project in the local storage, load the wizard with appropriate step
+ const updateQuery = {}
+ let wizardStep = WZ_STEP_SELECT_PROD_TYPE
+ if (params && params.product) {
+ const prodCategory = findProductCategory(params.product)
+ if (prodCategory) {
+ updateQuery['type'] = { $set : config[prodCategory].id }
+ updateQuery['details'] = { products : { $set: [params.product] } }
+ wizardStep = WZ_STEP_FILL_PROJ_DETAILS
+ }
+ }
+ this.setState({
+ project: update(this.state.project, updateQuery),
+ dirtyProject: update(this.state.dirtyProject, updateQuery),
+ wizardStep,
+ isProjectDirty: false
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
}
+ }
- this.createProject = this.createProject.bind(this)
+ componentWillReceiveProps(nextProps) {
+ const { onStepChange } = nextProps
+ const type = _.get(nextProps.project, 'type', null)
+ const product = _.get(nextProps.project, 'details.products[0]', null)
+ const wizardStep = type && product ? WZ_STEP_FILL_PROJ_DETAILS : null
+ if (wizardStep) {
+ this.setState({
+ wizardStep
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
+ }
}
- componentWillUpdate(nextProps) {
- const projectId = _.get(nextProps, 'project.id', null)
- if (!nextProps.processing && !nextProps.error && projectId) {
- // close modal and navigate to project dashboard
- this.props.closeModal()
- this.props.router.push('/projects/' + projectId)
+ /**
+ * Loads incomplete project from the local storage and populates the state from that project.
+ * It also moves the wizard to the project details step if there exists an incomplete project.
+ */
+ loadIncompleteProject() {
+ const { onStepChange } = this.props
+ const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
+ if(incompleteProjectStr) {
+ const incompleteProject = JSON.parse(incompleteProjectStr)
+ this.setState({
+ project: update(this.state.project, { $merge : incompleteProject }),
+ dirtyProject: update(this.state.dirtyProject, { $merge : incompleteProject }),
+ wizardStep: WZ_STEP_FILL_PROJ_DETAILS
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
}
}
- createProject() {
- this.setState({ creatingProject: true })
- const s = this.state
- this.props.createProject({
- details: {
- devices: [],
- utm: {
- code: s.projectRef
- },
- products: [config[s.projectType].subtypes[s.projectSubType].id]
- },
- name: s.projectName,
- type: config[s.projectType].id
+ /**
+ * Removed incomplete project from the local storage and resets the state. Also, moves wizard to the first step.
+ */
+ removeIncompleteProject() {
+ const { onStepChange } = this.props
+ window.localStorage.removeItem(LS_INCOMPLETE_PROJECT)
+ this.setState({
+ project: { details: {} },
+ dirtyProject: { details: {} },
+ wizardStep: WZ_STEP_SELECT_PROD_TYPE
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
+ }
+
+ updateProjectRef(projectRef) {
+ const details = _.get(this.state.project, 'details.utm.code')
+ let updateQuery = { details: { utm : { code : {$set : projectRef }}}}
+ if (!details) {
+ updateQuery = { details: { $set : { utm : { code : projectRef }}}}
+ }
+ this.setState({
+ project: update(this.state.project, updateQuery),
+ dirtyProject: update(this.state.project, updateQuery)
+ })
+ }
+
+ updateProducts(projectType, product) {
+ window.scrollTo(0, 0)
+ const { onStepChange } = this.props
+ const products = _.get(this.state.project, 'details.products')
+ let updateQuery = { details: { products : { $set : [product] }}}
+ if (!products) {
+ updateQuery = { details: { $set : { products : [product] }}}
+ }
+ if (projectType) {
+ updateQuery.type = {$set : projectType }
+ }
+ this.setState({
+ project: update(this.state.project, updateQuery),
+ dirtyProject: update(this.state.project, updateQuery),
+ wizardStep: WZ_STEP_FILL_PROJ_DETAILS
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+ })
+ }
+
+ handleProjectChange(change) {
+ const { onProjectUpdate } = this.props
+ this.setState({
+ // update only dirtyProject when Form changes the model
+ dirtyProject: _.merge({}, this.state.dirtyProject, unflatten(change)),
+ isProjectDirty: true
+ }, () => {
+ typeof onProjectUpdate === 'function' && onProjectUpdate(this.state.dirtyProject)
+ })
+ }
+
+ handleOnCreateProject() {
+ this.props.createProject(this.state.dirtyProject)
+ }
+
+ handleStepChange(wizardStep) {
+ const { onStepChange } = this.props
+ this.setState({
+ // In this wizard we have just two steps, and this callback is triggered
+ // only to move from the second step back to the first, thus we always
+ // should reset the projectSubType when this callback is fired.
+ project: update(this.state.project, { details: { products: {$set : [] }}}),
+ wizardStep
+ }, () => {
+ typeof onStepChange === 'function' && onStepChange(wizardStep)
})
}
render() {
+ const { processing, showModal, userRoles } = this.props
+ const { project, dirtyProject } = this.state
return (
{backControl}
-
- {topbar}
{main}
+
+ )
+ }
+}
+
+FillProjectDetails.propTypes = {
+ // onProjectChange: PT.func.isRequired,
+ onCreateProject: PT.func.isRequired,
+ onChangeProjectType: PT.func.isRequired,
+ project: PT.object.isRequired,
+ userRoles: PT.arrayOf(PT.string),
+ processing: PT.bool,
+ error: PT.oneOfType([
+ PT.bool,
+ PT.object
+ ])
+}
+
+export default FillProjectDetails
\ No newline at end of file
diff --git a/src/projects/create/components/FillProjectDetails.scss b/src/projects/create/components/FillProjectDetails.scss
new file mode 100644
index 000000000..dd7c32d60
--- /dev/null
+++ b/src/projects/create/components/FillProjectDetails.scss
@@ -0,0 +1,131 @@
+@import 'tc-includes';
+
+@mixin flexBox {
+ display: box;
+ display: flex;
+ flex-direction: row;
+ width: auto;
+}
+
+@mixin flexWidth($number) {
+ -webkit-box-flex: $number;
+ -moz-box-flex: $number;
+ -webkit-flex: $number;
+ -ms-flex: $number;
+ flex: $number;
+}
+.headerFillProjectDetails {
+ margin-top: -28px;
+ display: flex;
+ justify-content: space-between;
+ .tc-btn-default img {
+ margin-right: 10px;
+ }
+}
+
+.FillProjectDetails {
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+
+ h1 {
+ @include tc-heading;
+ width: 100%;
+ text-align: center;
+ }
+
+ button {
+ align-self: flex-end;
+ white-space: nowrap;
+
+ .Icon {
+ vertical-align: middle;
+ margin-right: 2 * $base_unit;
+ }
+ }
+ }
+
+
+ .two-col-content.content {
+
+ .container {
+ @include flexBox;
+ background-color: transparent;
+ display: flex;
+ padding: 0px;
+ width: 1110px;
+ margin: 20px auto;
+ /* .left-area */
+ .left-area {
+ @include flexWidth(2);
+ position: relative;
+ border-radius: 4px;
+ background: $tc-white;
+ box-shadow: 0px 1px 3px 0px $tc-gray-30;
+ padding: 5*$base-unit;
+ margin-bottom: 20px;
+
+ .title {
+ color: $tc-gray-80;
+ @include roboto-bold;
+ }
+
+ .section-footer {
+ margin-top: 4*$base_unit;
+ margin-bottom: 0px;
+ background: none;
+ }
+
+ }
+
+ .right-area {
+ @include flexWidth(1);
+ margin-left: 4*$base_unit;
+
+ .right-area-footer {
+ @include roboto;
+ padding: 10px 40px 0 0;
+ font-size: 13px;
+ line-height: 20px;
+ color: $tc-gray-50;
+ font-style: italic;
+
+ span {
+ float: right;
+ }
+ }
+ }
+ }
+ }
+}
+
+.ProjectWizard {
+ .FillProjectDetails {
+ .header h1{
+ @include roboto-light;
+ font-size: 36px;
+ color: $tc-black;
+ line-height: 40px;
+ }
+ .two-col-content.content .container {
+ margin-top: 0;
+ .left-area .title span,
+ .section-header .section-number {
+ display: none;
+ }
+ .gray-text {
+ @include roboto;
+ font-size: 15px;
+ color: $tc-gray-50;
+ line-height: 25px;
+ }
+ .left-area {
+ padding: 50px;
+ }
+ }
+ }
+ .spec-question-list-item .content-col > h5 span {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/projects/create/components/IncompleteProjectConfirmation.js b/src/projects/create/components/IncompleteProjectConfirmation.js
new file mode 100644
index 000000000..40032bcd0
--- /dev/null
+++ b/src/projects/create/components/IncompleteProjectConfirmation.js
@@ -0,0 +1,43 @@
+import React, { PropTypes as PT } from 'react'
+import './IncompleteProjectConfirmation.scss'
+
+function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject }) {
+
+ return (
+
+ { (!userRoles || !userRoles.length) &&
+
+
+
+
+
+
+ Let's setup your { productName } project
+
+
+
+
+
+
+
+
+ In 24 hours our project managers will contact you for more information and a detailed quote that accurately reflects your project needs.
+
+
+ )
+}
+
+IncompleteProjectConfirmation.defaultProps = {
+}
+
+IncompleteProjectConfirmation.propTypes = {
+ /**
+ * Callback to be called when user selects to discard incomplete project and create new project
+ */
+ removeIncompleteProject: PT.func.isRequired,
+ /**
+ * Callback to be called when user selects to load incomplete project
+ */
+ loadIncompleteProject: PT.func.isRequired
+}
+
+export default IncompleteProjectConfirmation
diff --git a/src/projects/create/components/IncompleteProjectConfirmation.scss b/src/projects/create/components/IncompleteProjectConfirmation.scss
new file mode 100644
index 000000000..811865024
--- /dev/null
+++ b/src/projects/create/components/IncompleteProjectConfirmation.scss
@@ -0,0 +1,53 @@
+@import 'tc-includes';
+
+.IncompleteProjectConfirmation {
+ width: 100%;
+ position: absolute;
+ top: -85px;
+ padding-top: 50px;
+ left: 0;
+ height: 100vh;
+ bottom: 0;
+ background: #fafafb;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .connect-logo {
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ }
+ h3 {
+ @include roboto-light;
+ margin-bottom: 12 * $base_unit;
+ color: $tc-black;
+ line-height: 40px;
+ font-size: 36px;
+ }
+ h5 {
+ @include roboto-medium;
+ margin-bottom: 4 * $base_unit;
+ color: $tc-gray-80;
+ line-height: 30px;
+ font-size: 20px;
+ }
+ p {
+ @include roboto;
+ margin-bottom: 10 * $base_unit;
+ color: $tc-gray-60;
+ line-height: 25px;
+ font-size: 15px;
+ }
+ .actions {
+ button {
+ display: block;
+ margin: 0 auto;
+ }
+ button + button {
+ margin-top: 4 * $base_unit;
+ }
+ }
+}
+.Footer {
+ position: relative;
+}
\ No newline at end of file
diff --git a/src/projects/create/components/ProductCard.js b/src/projects/create/components/ProductCard.js
new file mode 100644
index 000000000..59d10ab15
--- /dev/null
+++ b/src/projects/create/components/ProductCard.js
@@ -0,0 +1,52 @@
+import _ from 'lodash'
+import React, { PropTypes as PT } from 'react'
+import './ProductCard.scss'
+
+class ProductCard extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {}
+ }
+
+ render() {
+ const p = this.props
+ const s = this.state
+ const icon = React.cloneElement(p.icon, {
+ color: !p.disabled && s.hovered ? '#1A85FF' : '#5D5D66'
+ })
+
+ let className = `ProductCard ${p.disabled ? 'disabled' : 'enabled'}`
+ if (p.selected) className = `${className} selected`
+
+ return (
+
+
+
+ Welcome back!
+You started a project with us recently.
+Do you want to continue where you left off or create a new project?
+
+
+
+
+ this.setState({ hovered: true })}
+ onMouseLeave={() => this.setState({ hovered: false })}
+ >
+ {icon}
+
+ )
+ }
+}
+
+ProductCard.defaultProps = {
+ disabled: false,
+ selected: false
+}
+
+ProductCard.propTypes = {
+ disabled: PT.bool,
+ icon: PT.element.isRequired,
+ info: PT.string.isRequired,
+ onClick: PT.func.isRequired,
+ selected: PT.bool,
+ type: PT.string.isRequired
+}
+
+export default ProductCard
diff --git a/src/projects/create/components/ProductCard.scss b/src/projects/create/components/ProductCard.scss
new file mode 100644
index 000000000..13e3ee98d
--- /dev/null
+++ b/src/projects/create/components/ProductCard.scss
@@ -0,0 +1,54 @@
+@import 'tc-includes';
+
+.ProductCard {
+ /*border: 1px solid $tc-gray-20;*/
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 260px;
+ margin: 10px 10px 0;
+ position: relative;
+ vertical-align: top;
+ width: 230px;
+ .sub-type-details {
+ padding: 0 20px;
+ font-size: 13px;
+ color: $tc-gray-50;
+ line-height: 20px;
+ width: 100%;
+ }
+ .header {
+ @include tc-body;
+ @include roboto-bold;
+ color: $tc-gray-80;
+ line-height: 20px;
+ margin-bottom: 10px;
+ margin-top: 0px;
+ }
+ .Icon {
+ margin: 4*$base_unit 0 2*$base_unit;
+ }
+ &.disabled {
+ opacity: 0.3
+ }
+ &.enabled:hover {
+ border-color: $tc-dark-blue-70;
+ cursor: pointer;
+ .button {
+ background: $tc-dark-blue;
+ border-color: transparent;
+ color: $tc-white;
+ }
+ }
+ &.selected {
+ background: $tc-gray-10;
+ border-color: transparent;
+ &:hover {
+ border-color: transparent;
+ }
+ }
+ .tc-btn {
+ margin-top: 2 * $base_unit;
+ }
+}
diff --git a/src/projects/create/components/ProjectBasicDetailsForm.js b/src/projects/create/components/ProjectBasicDetailsForm.js
new file mode 100644
index 000000000..f0eb1a021
--- /dev/null
+++ b/src/projects/create/components/ProjectBasicDetailsForm.js
@@ -0,0 +1,120 @@
+import React, { Component, PropTypes } from 'react'
+import { Formsy } from 'appirio-tech-react-components'
+import './ProjectBasicDetailsForm.scss'
+
+import SpecSection from '../../detail/components/SpecSection'
+
+class ProjectBasicDetailsForm extends Component {
+
+ constructor(props) {
+ super(props)
+ this.enableButton = this.enableButton.bind(this)
+ this.disableButton = this.disableButton.bind(this)
+ this.submit = this.submit.bind(this)
+ this.handleChange = this.handleChange.bind(this)
+ }
+
+ componentWillMount() {
+ this.setState({
+ project: Object.assign({}, this.props.project),
+ canSubmit: false
+ })
+ }
+
+ componentWillReceiveProps(nextProps) {
+ // we receipt property updates from PROJECT_DIRTY REDUX state
+ if (nextProps.project.isDirty) return
+ const updatedProject = Object.assign({}, nextProps.project)
+ this.setState({
+ project: updatedProject,
+ isSaving: false,
+ canSubmit: false
+ })
+ }
+
+ isChanged() {
+ // We check if this.refs.form exists because this may be called before the
+ // first render, in which case it will be undefined.
+ return (this.refs.form && this.refs.form.isChanged())
+ }
+
+ enableButton() {
+ this.setState( { canSubmit: true })
+ }
+
+ disableButton() {
+ this.setState({ canSubmit: false })
+ }
+
+ submit(model) {
+ console.log('submit', this.isChanged())
+ this.setState({isSaving: true })
+ this.props.submitHandler(model)
+ }
+
+ /**
+ * Handles the change event of the form.
+ *
+ * @param change changed form model in flattened form
+ * @param isChanged flag that indicates if form actually changed from initial model values
+ */
+ handleChange(change) {
+ // removed check for isChanged argument to fire the PROJECT_DIRTY event for every change in the form
+ // this.props.fireProjectDirty(change)
+ this.props.onProjectChange(change)
+ }
+
+
+ render() {
+ const { isEdittable, sections, submitBtnText } = this.props
+ const { project, canSubmit } = this.state
+ const renderSection = (section, idx) => {
+ return (
+ {p.type}
+{p.info}
+
+
+
+ )
+ }
+
+ return (
+
+ {} }//dummy
+ resetFeatures={ () => {} }//dummy
+ // TODO we shoudl not update the props (section is coming from props)
+ // further, it is not used for this component as we are not rendering spec screen section here
+ validate={() => {}}//dummy
+ />
+
+
+
+
+
+
+ {sections.map(renderSection)}
+
+
+ )
+ }
+}
+
+ProjectBasicDetailsForm.propTypes = {
+ project: PropTypes.object.isRequired,
+ saving: PropTypes.bool.isRequired,
+ sections: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isEdittable: PropTypes.bool.isRequired,
+ submitHandler: PropTypes.func.isRequired
+}
+
+export default ProjectBasicDetailsForm
diff --git a/src/projects/create/components/ProjectBasicDetailsForm.scss b/src/projects/create/components/ProjectBasicDetailsForm.scss
new file mode 100644
index 000000000..36e044f40
--- /dev/null
+++ b/src/projects/create/components/ProjectBasicDetailsForm.scss
@@ -0,0 +1,7 @@
+@import 'tc-includes';
+
+.ProjectBasicDetailsForm {
+ .sections {
+ margin-bottom: 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/projects/create/components/ProjectOutline.js b/src/projects/create/components/ProjectOutline.js
new file mode 100644
index 000000000..b9cb17bee
--- /dev/null
+++ b/src/projects/create/components/ProjectOutline.js
@@ -0,0 +1,43 @@
+import _ from 'lodash'
+import React, { PropTypes as PT } from 'react'
+import config from '../../../config/projectWizard'
+import VisualDesignProjectEstimateSection from '../../detail/components/VisualDesignProjectEstimateSection'
+import './ProjectOutline.scss'
+
+function ProjectOutline({ project }) {
+ const product = _.get(project, 'details.products[0]')
+ const projectTypeId = _.get(project, 'type')
+ if (!projectTypeId || !product) return
+ const projectType = _.findKey(config, {id : projectTypeId})
+ const subConfig = config[projectType]
+ const productName = _.findKey(subConfig.subtypes, {id : product})
+ const projectsWithEstimate = ["Wireframes","Visual Design","Front-end Prototype"]
+ const projectEstimate = (projectsWithEstimate.indexOf(productName)<0) ? (null) : (
+
+ )
+}
+
+ProjectOutline.defaultProps = {
+}
+
+ProjectOutline.propTypes = {
+ project: PT.object.isRequired
+}
+
+export default ProjectOutline
diff --git a/src/projects/create/components/ProjectOutline.scss b/src/projects/create/components/ProjectOutline.scss
new file mode 100644
index 000000000..172aed47b
--- /dev/null
+++ b/src/projects/create/components/ProjectOutline.scss
@@ -0,0 +1,65 @@
+@import 'tc-includes';
+
+.ProjectOutline {
+ display: flex;
+ flex-direction: column;
+ background-color: $tc-white;
+ box-shadow: 0px 1px 3px 0px $tc-gray-30;
+ padding: 5*$base-unit;
+ border-radius: 4px;
+
+ h5 {
+ width: 100%;
+ margin-bottom: $base-unit * 4;
+ font-size: 12px;
+ color: $tc-gray-50;
+ text-transform: uppercase;
+ }
+
+ .project-name {
+ color: $tc-gray-80;
+ @include roboto-bold;
+ margin-bottom: $base-unit * 2;
+ align-self: center;
+ width: 100%;
+ word-break: break-all;
+ }
+
+ .project-product {
+ color: $tc-gray-50;
+ @include roboto;
+ margin-bottom: $base-unit * 4;
+ display: none;
+ }
+
+ .project-description {
+ line-height: 5*$base-unit;
+ margin-top: $base-unit * 4;
+ margin-bottom: $base-unit * 4;
+ word-break: break-all;
+ }
+
+ .project-meta-data {
+ margin-top: $base-unit * 4;
+ .project-meta-data-row {
+ display: flex;
+ .visual-design-project-estimate-section {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .project-meta-data-label {
+ flex: 1;
+ color: $tc-gray-50;
+
+ @include tc-label-md;
+ @include roboto-bold;
+ }
+
+ .project-meta-data-value {
+ flex: 3;
+ @include tc-label-md;
+ @include roboto-bold;
+ }
+ }
+ }
+}
diff --git a/src/projects/create/components/ProjectTypeCard.jsx b/src/projects/create/components/ProjectTypeCard.jsx
index c059b35d1..219966efe 100644
--- a/src/projects/create/components/ProjectTypeCard.jsx
+++ b/src/projects/create/components/ProjectTypeCard.jsx
@@ -25,7 +25,7 @@ class ProjectTypeCard extends React.Component {
{icon}
Project Outline
+{ project.name }
+ { productName }
+ -
+
+
{ project.description }
+ {p.type}
{p.info}
- Create a {p.type.toLowerCase()} project
+ Create project
+
+ )
+}
+
+SelectProduct.propTypes = {
+ onProductChange: PT.func.isRequired
+}
+
+export default SelectProduct
diff --git a/src/projects/create/components/SelectProduct.scss b/src/projects/create/components/SelectProduct.scss
new file mode 100644
index 000000000..4d984cc66
--- /dev/null
+++ b/src/projects/create/components/SelectProduct.scss
@@ -0,0 +1,94 @@
+@import 'tc-includes';
+
+.headerSelectProduct {
+ position: absolute;
+ top: 25px;
+ left: 20px;
+}
+
+.SelectProduct {
+ @include tc-body;
+ color: $tc-gray-50;
+ text-align: center;
+ max-width: 1000px;
+ margin: 0 auto;
+ a, a:visited, a:hover, a:active{
+ color: $tc-dark-blue;
+ cursor: pointer;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ h1 {
+ @include tc-heading;
+ @include roboto-light;
+ color: $tc-black;
+ margin-bottom: 40px;
+ font-size: 36px;
+ line-height: 40px;
+
+ }
+
+ .header{
+ display:block;
+ float:left;
+ }
+
+ .footer {
+ margin-bottom: 15px;
+ margin-top: 50px;
+ }
+
+ .ProductCard {
+ transition: 300ms all ease;
+ -moz-transition: 300ms all ease;
+ -webkit-transition: 300ms all ease;
+ .tc-btn {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ opacity: 0
+ }
+ &:hover {
+ transition: 300ms all ease;
+ -moz-transition: 300ms all ease;
+ -webkit-transition: 300ms all ease;
+ position: relative;
+ background: $tc-white;
+ box-shadow: 0 2px 9px 0 rgba(38, 38, 38, 0.1);
+ h1 {
+ color: $tc-dark-blue;
+ }
+ .tc-btn {
+ opacity: 1;
+ }
+ }
+ &:active {
+ background: $tc-dark-blue-10;
+ }
+ }
+
+
+
+ .cards {
+ display: flex;
+ // justify-content: space-between;
+ flex-flow: row wrap;
+ }
+}
+@media screen and (max-width: 1100px) {
+ .SelectProduct {
+ max-width: 750px;
+ }
+}
+@media screen and (max-width: 850px) {
+ .SelectProduct {
+ max-width: 500px;
+ }
+}
+@media screen and (max-width: 500px) {
+ .SelectProduct {
+ max-width: 250px;
+ }
+}
diff --git a/src/projects/create/components/SelectProjectSubType.jsx b/src/projects/create/components/SelectProjectSubType.jsx
index 72ec3776f..c505afa50 100644
--- a/src/projects/create/components/SelectProjectSubType.jsx
+++ b/src/projects/create/components/SelectProjectSubType.jsx
@@ -2,63 +2,53 @@ import _ from 'lodash'
import React, { PropTypes as PT } from 'react'
import config from '../../../config/projectWizard'
import ProjectSubTypeCard from './ProjectSubTypeCard'
-import WizardHeader from './WizardHeader'
+// import WizardHeader from './WizardHeader'
import SVGIconImage from '../../../components/SVGIconImage'
import './SelectProjectSubType.scss'
function SelectProjectSubType(props) {
const cards = []
- const subConfig = config[props.projectType]
+ const subConfig = config[_.findKey(config, {id : props.projectType})]
for (const key in subConfig.subtypes) {
const item = subConfig.subtypes[key]
const icon =
+
+
+
-
)
}
SelectProjectSubType.defaultProps = {
- creatingProject: false
}
SelectProjectSubType.propTypes = {
createProject: PT.func.isRequired,
- creatingProject: PT.bool,
onProjectNameChange: PT.func.isRequired,
onProjectRefChange: PT.func.isRequired,
onSubCategoryChange: PT.func.isRequired,
diff --git a/src/projects/create/components/SelectProjectType.jsx b/src/projects/create/components/SelectProjectType.jsx
index e56220fa1..9ca8a1507 100644
--- a/src/projects/create/components/SelectProjectType.jsx
+++ b/src/projects/create/components/SelectProjectType.jsx
@@ -1,7 +1,7 @@
import React, { PropTypes as PT } from 'react'
import config from '../../../config/projectWizard'
import ProjectTypeCard from './ProjectTypeCard'
-import WizardHeader from './WizardHeader'
+// import WizardHeader from './WizardHeader'
import SVGIconImage from '../../../components/SVGIconImage'
import './SelectProjectType.scss'
@@ -12,7 +12,6 @@ function SelectProjectType(props) {
const icon = {subConfig.question}
{cards}{details}
- {props.creatingProject ? 'Creating ...' : 'Create project'}
+ Let's Start
Select your project category
{cards}
diff --git a/src/projects/create/containers/CreateContainer.jsx b/src/projects/create/containers/CreateContainer.jsx
new file mode 100644
index 000000000..13e4663bf
--- /dev/null
+++ b/src/projects/create/containers/CreateContainer.jsx
@@ -0,0 +1,169 @@
+import _ from 'lodash'
+import React, { PropTypes } from 'react'
+import { withRouter } from 'react-router'
+import { connect } from 'react-redux'
+import { renderComponent, branch, compose, withProps } from 'recompose'
+import { createProjectWithStatus as createProjectAction, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
+import CoderBot from '../../../components/CoderBot/CoderBot'
+import spinnerWhileLoading from '../../../components/LoadingSpinner'
+import ProjectWizard from '../components/ProjectWizard'
+import {
+ CREATE_PROJECT_FAILURE,
+ LS_INCOMPLETE_PROJECT,
+ PROJECT_STATUS_IN_REVIEW,
+ ACCOUNTS_APP_REGISTER_URL
+} from '../../../config/constants'
+
+const page404 = compose(
+ withProps({code:500})
+)
+// this handles showing error page when there is an error in loading the page
+const showCoderBotIfError = (hasError) =>
+ branch(
+ hasError,
+ renderComponent(page404(CoderBot)),
+ t => t
+ )
+const errorHandler = showCoderBotIfError(props => props.error && props.error.type === CREATE_PROJECT_FAILURE)
+
+// This handles showing a spinner while the state is being loaded async
+const spinner = spinnerWhileLoading(props => !props.processing)
+
+const enhance = compose(errorHandler, spinner)
+
+const CreateView = (props) => {
+ const { route } = props
+ if (route.path === '/new-project-callback') {
+ // can do some fancy loading (e.g. coderbot animation) here
+ return this.setState({
+ wizardStep
+ })}
+ onProjectUpdate={ (updatedProject) => this.setState({
+ isProjectDirty: true,
+ updatedProject
+ })}
+ />
+ )
+ }
+}
+
+CreateConainer.propTypes = {
+ userRoles: PropTypes.arrayOf(PropTypes.string).isRequired
+}
+
+CreateConainer.defaultProps = {
+ userRoles: []
+}
+
+const mapStateToProps = ({projectState, loadUser }) => ({
+ userRoles: _.get(loadUser, 'user.roles', []),
+ processing: projectState.processing,
+ error: projectState.error,
+ project: projectState.project
+})
+const actionCreators = { createProjectAction, fireProjectDirty, fireProjectDirtyUndo }
+export default withRouter(connect(mapStateToProps, actionCreators)(CreateConainer))
diff --git a/src/projects/detail/ProjectDetail.jsx b/src/projects/detail/ProjectDetail.jsx
index 2f50e5084..9abd86a33 100644
--- a/src/projects/detail/ProjectDetail.jsx
+++ b/src/projects/detail/ProjectDetail.jsx
@@ -7,18 +7,18 @@ import { renderComponent, branch, compose, withProps } from 'recompose'
import { loadProjectDashboard } from '../actions/projectDashboard'
import { LOAD_PROJECT_FAILURE, PROJECT_ROLE_CUSTOMER, PROJECT_ROLE_OWNER } from '../../config/constants'
import spinnerWhileLoading from '../../components/LoadingSpinner'
-import PageError from '../../components/PageError/PageError'
+import CoderBot from '../../components/CoderBot/CoderBot'
const page404 = compose(
withProps({code:404})
)
-const showPageErrorIfError = (hasError) =>
+const showCoderBotIfError = (hasError) =>
branch(
hasError,
- renderComponent(page404(PageError)), // FIXME pass in props code=400
+ renderComponent(page404(CoderBot)), // FIXME pass in props code=400
t => t
)
-const errorHandler = showPageErrorIfError(props => props.error && props.error.type === LOAD_PROJECT_FAILURE)
+const errorHandler = showCoderBotIfError(props => props.error && props.error.type === LOAD_PROJECT_FAILURE)
// This handles showing a spinner while the state is being loaded async
const spinner = spinnerWhileLoading(props => !props.isLoading)
diff --git a/src/projects/detail/components/SpecQuestions.jsx b/src/projects/detail/components/SpecQuestions.jsx
index 6f5d97411..da2326942 100644
--- a/src/projects/detail/components/SpecQuestions.jsx
+++ b/src/projects/detail/components/SpecQuestions.jsx
@@ -34,7 +34,10 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
const elemProps = {
name: q.fieldName,
label: q.label,
- value: _.get(project, q.fieldName, '')
+ value: _.get(project, q.fieldName, ''),
+ required: q.required,
+ validations: q.required ? "isRequired" : null,
+ validationError: q.validationError
}
if (q.fieldName === 'details.appDefinition.numberScreens') {
const p = dirtyProject ? dirtyProject : project
@@ -88,7 +91,7 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea
break
case 'tiled-radio-group':
ChildElem = TCFormFields.TiledRadioGroup
- _.assign(elemProps, {wrapperClass: 'row', options: q.options})
+ _.assign(elemProps, {wrapperClass: 'row', options: q.options, theme: 'dark', tabable: true})
// child =
+
+ )
+}
+const EnhancedCreateView = enhance(CreateView)
+
+class CreateConainer extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ creatingProject : false,
+ isProjectDirty: false,
+ wizardStep: 0,
+ updatedProject: {}
+ }
+ this.createProject = this.createProject.bind(this)
+ this.onLeave = this.onLeave.bind(this)
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const projectId = _.get(nextProps, 'project.id', null)
+ if (!nextProps.processing && !nextProps.error && projectId) {
+ // update state
+ this.setState({
+ creatingProject: false,
+ isProjectDirty: false
+ }, () => {
+ // remove incomplete project, and navigate to project dashboard
+ console.log('removing incomplete project')
+ window.localStorage.removeItem(LS_INCOMPLETE_PROJECT)
+ this.props.router.push('/projects/' + projectId)
+ })
+
+ } else if (this.state.creatingProject !== nextProps.processing) {
+ this.setState({ creatingProject : nextProps.processing })
+ }
+ }
+
+ componentWillMount() {
+ const { processing, userRoles, route } = this.props
+ // load incomplete project from local storage
+ const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
+ if(incompleteProjectStr) {
+ const incompleteProject = JSON.parse(incompleteProjectStr)
+ if (route.path === '/new-project-callback' && !processing && userRoles && userRoles.length > 0) {
+ // if project wizard is loaded after redirection from register page
+ // TODO should we validate the project again?
+ console.log('calling createProjectAction...')
+ this.props.createProjectAction(incompleteProject, PROJECT_STATUS_IN_REVIEW)
+ }
+ }
+ }
+
+ componentDidMount() {
+ // sets route leave hook to show unsaved changes alert and persist incomplete project
+ this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
+ // sets window unload hook to show unsaved changes alert and persist incomplete project
+ window.addEventListener('beforeunload', this.onLeave)
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('beforeunload', this.onLeave)
+ }
+
+ // stores the incomplete project in local storage
+ onLeave(e) {
+ const { wizardStep, isProjectDirty, creatingProject } = this.state
+ if (wizardStep === ProjectWizard.Steps.WZ_STEP_FILL_PROJ_DETAILS && isProjectDirty) {// Project Details step
+ console.log('saving incomplete project')
+ window.localStorage.setItem(LS_INCOMPLETE_PROJECT, JSON.stringify(this.state.updatedProject))
+ }
+ if (isProjectDirty && !creatingProject) {
+ return e.returnValue = 'You have unsaved changes. Are you sure you want to leave?'
+ }
+ }
+
+ /**
+ * Creates new project if user is already logged in, otherwise, redirects user for registration/login.
+ */
+ createProject(project) {
+ this.setState({ creatingProject: true }, () => {
+ if (this.props.userRoles && this.props.userRoles.length > 0) {
+ // if user is logged in and has a valid role, create project
+ // uses dirtyProject from the state as it has the latest changes from the user
+ // this.props.createProjectAction(project)
+ this.props.createProjectAction(project, PROJECT_STATUS_IN_REVIEW)
+ } else {
+ // redirect to registration/login page
+ const retUrl = window.location.origin + '/new-project-callback'
+ window.location = ACCOUNTS_APP_REGISTER_URL + '?retUrl=' + retUrl
+ }
+ })
+ }
+
+ render() {
+ return (
+
- { project.status === PROJECT_STATUS_DRAFT &&
+ { (!project.status || project.status === PROJECT_STATUS_DRAFT) &&
{
value={_.get(project, 'name', undefined)}
wrapperClass="project-name"
maxLength={ PROJECT_NAME_MAX_LENGTH }
+ required={props.required}
+ validations={props.required ? "isRequired" : null}
+ validationError={props.validationError}
+ theme="paper-form-dotted"
/>
}
- { project.status !== PROJECT_STATUS_DRAFT &&
+ { (project.status && project.status !== PROJECT_STATUS_DRAFT) &&
}
- { project.status === PROJECT_STATUS_DRAFT &&
+ { (!project.status || project.status === PROJECT_STATUS_DRAFT) &&
{
value={ refCode }
wrapperClass="project-refcode"
maxLength={ PROJECT_REF_CODE_MAX_LENGTH }
+ theme="paper-form-dotted"
/>
}
- { refCode && project.status !== PROJECT_STATUS_DRAFT &&
+ { (refCode && project.status && project.status !== PROJECT_STATUS_DRAFT) &&
{project.name}
Optional
{ refCode }
diff --git a/src/projects/detail/components/VisualDesignProjectEstimateSection.jsx b/src/projects/detail/components/VisualDesignProjectEstimateSection.jsx
index 3aac07753..5cd58c545 100644
--- a/src/projects/detail/components/VisualDesignProjectEstimateSection.jsx
+++ b/src/projects/detail/components/VisualDesignProjectEstimateSection.jsx
@@ -18,10 +18,14 @@ const VisualDesignProjectEstimateSection = ({products, numberScreens}) => {
const sectionQuestions = _.find(subSections, (subSection) => subSection.id === 'questions').questions
// options provided in the number of screens question
- const { options: projectDurationOptions } = _.find(
+ let projectDurationOptions = []
+ const numberScreensQuestion = _.find(
sectionQuestions,
(question) => question.fieldName === 'details.appDefinition.numberScreens'
)
+ if (numberScreensQuestion) {
+ projectDurationOptions = numberScreensQuestion.options
+ }
// selected option
const pickedDurationOption = _.find(projectDurationOptions, (option) => option.value === numberScreens)
const durationEstimate = pickedDurationOption ? pickedDurationOption.desc : '0 days'
@@ -30,9 +34,9 @@ const VisualDesignProjectEstimateSection = ({products, numberScreens}) => {
return (
)
diff --git a/src/projects/detail/components/VisualDesignProjectEstimateSection.scss b/src/projects/detail/components/VisualDesignProjectEstimateSection.scss
index 6c7930649..c07ecf4c0 100644
--- a/src/projects/detail/components/VisualDesignProjectEstimateSection.scss
+++ b/src/projects/detail/components/VisualDesignProjectEstimateSection.scss
@@ -2,11 +2,15 @@
.visual-design-project-estimate-section {
display: flex;
+ width: calc(100% - 40px);
+ margin-left: 20px;
+ margin-right: 20px;
flex-wrap: wrap;
flex-direction: row;
h4.titles {
width: 100%;
+ margin: 0;
margin-bottom: $base-unit * 2;
font-size: 12px;
color: $tc-gray-50;
@@ -15,15 +19,17 @@
.label, .estimate {
flex-basis: 50%;
- padding: 0 $base-unit * 4;
+ @include tc-label-md;
+ @include roboto-bold;
margin-bottom: $base-unit * 2;
}
+ .label {
+ color: $tc-gray-50;
+ }
+
.estimate {
text-align: right;
flex: auto;
- span {
- color: $tc-gray-50;
- }
}
}
diff --git a/src/projects/detail/containers/Specification.scss b/src/projects/detail/containers/Specification.scss
index f67a433ea..479c254fc 100644
--- a/src/projects/detail/containers/Specification.scss
+++ b/src/projects/detail/containers/Specification.scss
@@ -371,6 +371,7 @@ $title-color: $tc-gray-80;
text-indent: 0;
margin-bottom: 20px;
resize: vertical;
+ overflow: auto;
}
}
@@ -808,6 +809,10 @@ $title-color: $tc-gray-80;
.dashed-bottom-border,
.editable-project-name {
flex: 1;
+
+ .project-name {
+ word-break: break-all;
+ }
}
.read-only-refcode {
@@ -847,44 +852,28 @@ $title-color: $tc-gray-80;
.project-refcode {
width: 100%;
height: 100%;
-
- label {
- display: none;//hides the empty label
- }
-
- input {
- height: 50px;
- line-height: 30px;
- font-size: 20px;
- @include placeholder {
- color: $tc-gray-30;
- }
- }
}
}
}
.two-col-content.content .container .tiled-group-item {
+ position: relative;
+ -webkit-flex: initial;
+ flex: initial;
+ margin-right: 20px;
+ height:155px;
+ width:135px;
border: 1px solid $tc-gray-20;
border-radius: 4px;
+ cursor: pointer;
+ border: 1px solid #dcdce0;
+ border-radius: 4px;
display: inline-block;
margin: 10px 10px 0;
position: relative;
vertical-align: top;
.check-mark {
- background: $tc-dark-blue-90;
- border-radius: 2px;
display: none;
- height: 15px;
- position: absolute;
- right: 15px;
- top: 15px;
- width: 15px;
- .Icon {
- position: relative;
- margin: 0;
- top: -5px;
- }
}
&.disabled {
opacity: 0.3
@@ -892,22 +881,64 @@ $title-color: $tc-gray-80;
&:hover {
border-color: $tc-dark-blue-70;
cursor: pointer;
- .icon {
- color: $tc-dark-blue-70;
- }
}
- &.active {
+ &.active{
background: $tc-gray-10;
- border-color: transparent;
- &:hover {
- border-color: transparent;
- .icon span {
- color: $tc-gray-70;
- }
- }
- .check-mark {
+ border-color: $tc-gray-10;
+ &:after {
+ content: '';
display: block;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 15px;
+ height: 15px;
+ background: #1A85FF;
+ border-radius: 2px;
+ }
+ &:before {
+ content: '';
+ position: absolute;
+ z-index: 1;
+ top: 12px;
+ right: 15px;
+ width: 5px;
+ border-width: 0 2px 2px 0;
+ border-style: solid;
+ border-color: #fff;
+ height: 10px;
+ transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ }
+ &:hover {
+ border-color: $tc-gray-10;
}
}
-}
+
+ span.title{
+ display:block;
+ margin-top: 20px;
+ @include roboto-bold;
+ color: $tc-black;
+ font-size: 13px;
+ text-align:center;
+ }
+
+ span.icon {
+ text-align: center;
+ display:block;
+ height: 50px;
+ margin:30px auto 20px auto;
+ }
+ small {
+ display:block;
+ font-size: 11px;
+ text-align:center;
+ color: $tc-gray-50;
+ @include roboto;
+ margin-top:10px;
+ }
+}
\ No newline at end of file
diff --git a/src/projects/images/logo-cn-web-old.svg b/src/projects/images/logo-cn-web-old.svg
new file mode 100644
index 000000000..281cbf9cd
--- /dev/null
+++ b/src/projects/images/logo-cn-web-old.svg
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/src/projects/images/logo-cn-web.svg b/src/projects/images/logo-cn-web.svg
old mode 100644
new mode 100755
index 281cbf9cd..cb47cb663
--- a/src/projects/images/logo-cn-web.svg
+++ b/src/projects/images/logo-cn-web.svg
@@ -1,25 +1,8 @@
-
-
\ No newline at end of file
+
diff --git a/src/projects/list/components/Projects/ProjectsView.jsx b/src/projects/list/components/Projects/ProjectsView.jsx
index 83f4c578f..8d2448b9e 100644
--- a/src/projects/list/components/Projects/ProjectsView.jsx
+++ b/src/projects/list/components/Projects/ProjectsView.jsx
@@ -9,7 +9,7 @@ import GridView from '../../../../components/Grid/GridView'
import Walkthrough from '../Walkthrough/Walkthrough'
import UserWithName from '../../../../components/User/UserWithName'
-import PageError from '../../../../components/PageError/PageError'
+import CoderBot from '../../../../components/CoderBot/CoderBot'
import { ROLE_CONNECT_MANAGER, ROLE_CONNECT_COPILOT, PROJECT_STATUS } from '../../../../config/constants'
// This handles showing a spinner while the state is being loaded async
@@ -22,7 +22,7 @@ import spinnerWhileLoading from '../../../../components/LoadingSpinner'
const defaultCriteria = {sort: 'createdAt desc'}
const showErrorMessageIfError = hasLoaded =>
- branch(hasLoaded, t => t, renderComponent(
+
+
window.scrollTo(0, 0)} component={ App } onEnter={ redirectToConnect }>
-
+
)
diff --git a/webpack.config.js b/webpack.config.js
index 453c6676e..20f0c2698 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,8 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const branch = process.env.TRAVIS_BRANCH
+process.env.ENV = 'DEV' // Default to DEV
+
if (branch === 'master') process.env.ENV = 'PROD'
if (branch === 'dev') process.env.ENV = 'DEV'
if (branch === 'qa') process.env.ENV = 'QA'