-
-
diff --git a/src/components/AvatarGroup/AvatarGroup.jsx b/src/components/AvatarGroup/AvatarGroup.jsx
index 1c6c548a3..290a37833 100644
--- a/src/components/AvatarGroup/AvatarGroup.jsx
+++ b/src/components/AvatarGroup/AvatarGroup.jsx
@@ -1,5 +1,5 @@
import _ from 'lodash'
-import {Avatar} from 'appirio-tech-react-components'
+import UserTooltip from '../User/UserTooltip'
import React from 'react'
import PT from 'prop-types'
import './AvatarGroup.scss'
@@ -7,11 +7,7 @@ import './AvatarGroup.scss'
function AvatarGroup({ users }) {
const renderAvatar = (user, index) => {
return (
-
{ getHeading(code) }
+ e.stopPropagation()}>
-1) {
- isDropdown = true
- break
- }
-
- currNode = currNode.parentNode
-
- if(!currNode)
- break
- } while(currNode.tagName)
-
- if(!isDropdown) {
- this.setState({ isHidden: true })
- }
- }
-
- onClick(evt) {
- const dropdownClicked = document.createEvent('Event')
- dropdownClicked.initEvent('dropdownClicked', true, false)
-
- document.dispatchEvent(dropdownClicked)
-
- this.setState({ isHidden: !this.state.isHidden })
- evt.stopPropagation()
- }
-
- onClickOtherDropdown() {
- this.setState({ isHidden: true })
- }
-
- componentDidMount() {
- document.removeEventListener('click', this.onClickOutside)
- document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
-
- document.addEventListener('click', this.onClickOutside)
- document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
- }
-
- componentWillUnmount() {
- document.removeEventListener('click', this.onClickOutside)
- document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
- }
-
- render() {
- const { className, pointerShadow, noPointer, pointerLeft, noAutoclose } = this.props
- const ddClasses = classNames('dropdown-wrap', {
- [`${className}`] : true,
- [`${ this.props.theme }`] : true,
- hide : this.state.isHidden
- })
- const ndClasses = classNames('Dropdown', {
- 'pointer-shadow' : pointerShadow,
- 'pointer-hide' : noPointer,
- 'pointer-left' : pointerLeft,
- 'no-autoclose' : noAutoclose
- })
-
- return (
-
{} : this.onClick } ref="Dropdown">
- {
- this.props.children.map((child, index) => {
- if (child.props.className.indexOf('dropdown-menu-header') > -1)
- return noAutoclose ? React.cloneElement(child, {
- onClick: this.onClick,
- key: child.props.key || index
- }) : child
- })
- }
-
-
- )
- }
-}
-
-Dropdown.propTypes = {
- children: PropTypes.array.isRequired
-}
-
-export default Dropdown
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
deleted file mode 100644
index 9f12ed615..000000000
--- a/src/components/Dropdown/Dropdown.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-@import 'tc-includes';
-
-
-.dropdown-wrap {
- cursor: pointer;
- position: relative;
-}
-
-.Dropdown {
- background-color: #fff;
- box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17);
- border-radius: 5px;
- display: inline-block;
- position: absolute;
- left: 0;
- top: 5px;
- width: 100%;
- z-index: 2;
-
- ul {
- height: 100%;
- width: 100%;
- position: relative;
- z-index: 10;
- background-color: #fff;
- padding: 11px 20px;
- border-radius: 5px;
-
- li {
- list-style: none;
- }
-
- li a {
- color: #394146;
- font-family: "Roboto", Arial, Helvetica, sans-serif;
- font-size: 12px;
- display: block;
- line-height: 26px;
- }
- }
-}
-
-.Dropdown.no-autoclose {
- cursor: default;
-}
-
-.dropdown-wrap.default {
- border: 1px solid $tc-gray-20;
- display: flex;
- align-items: center;
- padding: calc(2 * #{$base_unit});
- position: relative;
-
- .Dropdown {
- ul.dropdown-menu-list {
- padding: 10px 0px;
- li {
- padding: 0 20px;
- @include ellipsis;
- }
-
- li:hover {
- background-color: $tc-gray-neutral-dark;
- }
- }
- }
-}
-
-.dropdown-wrap.default::after {
- content: " ";
- width: 10px;
- height: 10px;
- display: block;
- right: 10px;
- top: 50%;
- position: absolute;
- transform: translateY(-50%) rotate(45deg);
- border-bottom: 2px solid $tc-gray-20;
- border-right: 2px solid $tc-gray-20;
-}
-
-.dropdown-wrap.hide .Dropdown {
- display: none;
-}
-
-.Dropdown.pointer-left:before {
- right: initial;
- left: 15px;
-}
-
-.UserDropdownMenu .Dropdown.pointer-shadow {
- margin-top: 35px;
-
- &:before {
- content: '';
- display: block;
- position: absolute;
- top: -6px;
- right: 24px;
- width: 12px;
- height: 12px;
- background: #FFFFFF;
- border-right: 1px solid $tc-gray-20;;
- border-bottom: 1px solid $tc-gray-20;;
- transform: rotate(-135deg);
- z-index:999;
- }
-}
-
-.Dropdown.pointer-hide:before {
- display: none;
-}
-
-.new-theme {
- text-align: left;
- height: 30px;
- color: $tc-black;
- background: $tc-gray-neutral-light;
- border: 1px solid $tc-gray-20;
- @include roboto;
- font-size: 13px;
- line-height: 20px;
- width: 100%;
- border-radius: 2px;
- position: relative;
-
- .dropdown-menu-header {
- width: 100%;
- border: 0;
- height: 28px;
- line-height: 28px;
- margin: 0;
- padding: 0 0 0 10px;
- color: $tc-gray-50;
- font-size: 13px;
- }
- &:after{
- display: block;
- content: '';
- position: absolute;
- width: 10px;
- height: 14px;
- right: 11px;
- top: 50%;
- margin-top: -7px;
- background: url("./icon-select.png") left top no-repeat;
- background-size: 10px 14px;
- z-index:2;
- }
- .Dropdown {
- ul.dropdown-menu-list {
- padding: 10px 0px;
- li {
- padding: 0 20px;
- @include ellipsis;
- }
- li:hover {
- background-color: $tc-gray-neutral-dark;
- }
- }
- }
-}
diff --git a/src/components/Dropdown/arrow-dropdown.png b/src/components/Dropdown/arrow-dropdown.png
deleted file mode 100644
index 2aa5059e9..000000000
Binary files a/src/components/Dropdown/arrow-dropdown.png and /dev/null differ
diff --git a/src/components/Dropdown/icon-select.png b/src/components/Dropdown/icon-select.png
deleted file mode 100644
index 8b58102b3..000000000
Binary files a/src/components/Dropdown/icon-select.png and /dev/null differ
diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx
index bcabff3fc..b9fee19f8 100644
--- a/src/components/Feed/Feed.jsx
+++ b/src/components/Feed/Feed.jsx
@@ -5,7 +5,7 @@ import cn from 'classnames'
import ActionCard from '../ActionCard/ActionCard'
import Panel from '../Panel/Panel'
import FeedComments from './FeedComments'
-import { Avatar } from 'appirio-tech-react-components'
+import UserTooltip from '../User/UserTooltip'
import {Link} from 'react-router-dom'
import CommentEditToggle from '../ActionCard/CommentEditToggle'
import RichTextArea from '../RichTextArea/RichTextArea'
@@ -43,7 +43,7 @@ class Feed extends React.Component {
const {
id, user, currentUser, date, topicMessage, totalComments, hasMoreComments, onLoadMoreComments, isLoadingComments,
allowComments, comments, unread, children, onNewCommentChange, onAddNewComment, isAddingComment, onSaveMessageChange,
- onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, permalink
+ onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, permalink, allMembers
} = this.props
const {editTopicMode} = this.state
let authorName = user.firstName
@@ -71,12 +71,14 @@ class Feed extends React.Component {
avatarUrl={user.photoURL}
authorName={authorName}
cancelEdit={this.cancelEditTopic}
+ allMembers={allMembers}
/>
)}
{!editTopicMode && (
- {
- this.props.children.map((child) => {
- if (child.props.className.indexOf('dropdown-menu-list') > -1)
- return child
- })
- }
-
-
-
@@ -118,6 +120,7 @@ class Feed extends React.Component {
onSaveMessageChange={onSaveMessageChange}
onSaveMessage={onSaveMessage}
onDeleteMessage={onDeleteMessage}
+ allMembers={allMembers}
/>
{children}
{isDeletingTopic &&
diff --git a/src/components/Feed/FeedComments.jsx b/src/components/Feed/FeedComments.jsx
index 18bda90a9..31534d06b 100644
--- a/src/components/Feed/FeedComments.jsx
+++ b/src/components/Feed/FeedComments.jsx
@@ -1,4 +1,3 @@
-import _ from 'lodash'
import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
@@ -31,7 +30,7 @@ class FeedComments extends React.Component {
render() {
const {
comments, currentUser, totalComments, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
- onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage
+ onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage, allMembers
} = this.props
let authorName = currentUser.firstName
if (authorName && currentUser.lastName) {
@@ -75,8 +74,7 @@ class FeedComments extends React.Component {
@@ -99,6 +98,7 @@ class FeedComments extends React.Component {
authorName={authorName}
isAdding={isAddingComment}
hasError={error}
+ allMembers={allMembers}
/>}
)
diff --git a/src/components/Feed/NewPost.jsx b/src/components/Feed/NewPost.jsx
index 7b499c2a3..9c4a67e37 100644
--- a/src/components/Feed/NewPost.jsx
+++ b/src/components/Feed/NewPost.jsx
@@ -11,7 +11,7 @@ class NewPost extends React.Component {
}
render() {
- const {currentUser, titlePlaceholder, isCreating, hasError} = this.props
+ const {currentUser, allMembers, titlePlaceholder, isCreating, hasError} = this.props
let authorName = currentUser.firstName
if (authorName && currentUser.lastName) {
authorName += ' ' + currentUser.lastName
@@ -33,6 +33,7 @@ class NewPost extends React.Component {
hasError={hasError}
avatarUrl={currentUser.photoURL}
authorName={authorName}
+ allMembers={allMembers}
/>
)
}
@@ -41,10 +42,11 @@ class NewPost extends React.Component {
NewPost.propTypes = {
currentUser: PropTypes.object.isRequired,
+ allMembers: PropTypes.object.isRequired,
onPost: PropTypes.func.isRequired,
onNewPostChange: PropTypes.func.isRequired,
hasError: PropTypes.bool,
isCreating: PropTypes.bool
}
-export default NewPost
+export default NewPost
\ No newline at end of file
diff --git a/src/components/Feed/draftjs.scss b/src/components/Feed/draftjs.scss
index bc0e0491d..a5cc1ef4d 100644
--- a/src/components/Feed/draftjs.scss
+++ b/src/components/Feed/draftjs.scss
@@ -1,6 +1,5 @@
@import "tc-includes";
-
.collapsedEditor {
display: none !important;
}
@@ -36,18 +35,20 @@
&:focus,
&.focus {
- border: 1px solid $tc-dark-blue-90;
+ border: 1px solid $tc-dark-blue;
outline: none;
- box-shadow: inset 0px 0px 2px 1px rgba($tc-light-blue-70,0.4);
+ box-shadow: inset 0px 0px 2px 1px rgba($tc-light-blue-70, 0.4);
}
transition: .15s all;
+
blockquote {
@include roboto-medium;
font-weight: 600;
margin: $base-unit*2 0 $base-unit*2 $base-unit*6;
padding: $base-unit*3 0 $base-unit*3 $base-unit*3;
- border-left: $corner-radius * 2 solid $tc-gray-10
+ border-left: $corner-radius * 2 solid $tc-gray-10;
}
+
figure img {
max-width: 600px;
}
@@ -55,15 +56,17 @@
.public-DraftStyleDefault-ul,
.public-DraftStyleDefault-ol {
- margin: $base-unit*2 0 $base-unit*2 $base-unit*6
+ margin: $base-unit*2 0 $base-unit*2 $base-unit*6;
}
.public-DraftStyleDefault-ol {
list-style-type: decimal;
}
+
.public-DraftStyleDefault-ul {
list-style-type: disc;
}
+
.public-DraftStyleDefault-pre {
background: $tc-gray-neutral-light;
padding: 10px;
@@ -74,27 +77,33 @@
border: 1px solid $tc-gray-10;
border-radius: 4px;
}
+
.public-DraftStyleDefault-block {
white-space: pre-wrap;
}
.draftjs-post {
- ul, ol {
- margin: $base-unit*2 0 $base-unit*2 $base-unit*6
+ ul,
+ ol {
+ margin: $base-unit*2 0 $base-unit*2 $base-unit*6;
}
+
ul {
list-style-type: disc;
}
+
ol {
list-style-type: decimal;
}
+
blockquote {
@include roboto-medium;
font-weight: 600;
margin: $base-unit*2 0 $base-unit*2 $base-unit*6;
padding: $base-unit*3 0 $base-unit*3 $base-unit*3;
- border-left: $corner-radius * 2 solid $tc-gray-10
+ border-left: $corner-radius * 2 solid $tc-gray-10;
}
+
pre {
background: $tc-gray-neutral-light;
padding: 10px;
@@ -106,12 +115,15 @@
border-radius: 4px;
white-space: inherit;
}
+
strong {
font-weight: bold;
}
+
em {
font-style: italic;
}
+
img {
max-width: 600px;
}
diff --git a/src/components/FileDownload.jsx b/src/components/FileDownload.jsx
new file mode 100644
index 000000000..26741cde5
--- /dev/null
+++ b/src/components/FileDownload.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { getProjectAttachment } from '../api/projectAttachments'
+import { withRouter } from 'react-router-dom'
+
+class FileDownload extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state={loaded:false, error:null}
+
+ }
+
+ componentWillMount() {
+ this.download()
+ }
+
+ download() {
+ const projectId = this.props.match.params.projectId
+ const attachmentId = this.props.match.params.attachmentId
+ getProjectAttachment(projectId, attachmentId).then((url) => {
+ window.location = url
+ }).catch(() => {
+ this.setState({loaded:true, error:'File unavailable'})
+ })
+ }
+
+ render() {
+
+
+ return (
+
+ {!this.state.loaded ? 'Loading...':this.state.error}
+
+ )
+ }
+}
+
+export default withRouter(FileDownload)
\ No newline at end of file
diff --git a/src/components/FileList/FileListItem.jsx b/src/components/FileList/FileListItem.jsx
index 8f421dd6f..74894a356 100644
--- a/src/components/FileList/FileListItem.jsx
+++ b/src/components/FileList/FileListItem.jsx
@@ -3,11 +3,14 @@ import React from 'react'
import PropTypes from 'prop-types'
import filesize from 'filesize'
import moment from 'moment'
-import { Icons, Tooltip } from 'appirio-tech-react-components'
+import { Tooltip } from 'appirio-tech-react-components'
import UserWithName from '../User/UserWithName'
import { TOOLTIP_DEFAULT_DELAY } from '../../config/constants'
+import TrashIcon from '../../assets/icons/icon-trash.svg'
+import CloseIcon from '../../assets/icons/icon-close.svg'
+import EditIcon from '../../assets/icons/icon-edit.svg'
+import SaveIcon from '../../assets/icons/icon-save.svg'
-const { TrashIcon, CloseIcon, EditIcon, SaveIcon } = Icons
export default class FileListItem extends React.Component {
@@ -123,9 +126,9 @@ export default class FileListItem extends React.Component {
const { isEditing } = this.state
let iconPath
try {
- iconPath = require('./images/' + this.props.contentType.split('/')[1] +'.svg')
+ iconPath = require('../../assets/icons/' + this.props.contentType.split('/')[1] +'.svg')
} catch(err) {
- iconPath = require('./images/default.svg')
+ iconPath = require('../../assets/icons/default.svg')
}
return (
diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss
index 2cfbccf5f..7fd0eedef 100644
--- a/src/components/Grid/GridView.scss
+++ b/src/components/Grid/GridView.scss
@@ -89,14 +89,6 @@
margin-top: -12px;
}
- &.icon-up::after {
- background: url("./images/arrow-up-big.svg") no-repeat right center;
- }
-
- &.icon-down::after {
- background: url("./images/arrow-down-big.svg") no-repeat right center;
- }
-
&a:hover {
cursor: pointer;
}
@@ -247,35 +239,18 @@
left: 0;
margin-top: -12px;
}
-
- &.status-draft,
- &.gray {
- background: url("./images/status-draft.svg") no-repeat 0 center;
- }
-
- &.status-active,
- &.green {
- background: url("./images/status-active.svg") no-repeat 0 center;
- }
-
- &.status-error,
- &.red {
- background: url("./images/status-error.svg") no-repeat 0 center;
- }
-
- &.status-done,
- &.black {
- background: url("./images/status-done.svg") no-repeat 0 center;
- }
}
.project-status-title {
position: relative;
display: block;
- background: url('../../assets/images/status-ico.svg') no-repeat;
background-position: center center;
- height: 20px;
- width: 20px;
+ height: 16px;
+ width: 16px;
+
+ & * {
+ fill: $tc-gray-40;
+ }
}
.drop-down {
@@ -290,13 +265,12 @@
display: block;
&.active {
- color: $tc-dark-blue-90;
+ color: $tc-dark-blue;
}
&:after {
font-size: 0;
line-height: 0;
- background: url('./images/icon-drop-down.svg') no-repeat 0 0;
width: 9px;
height: 12px;
content: "";
@@ -482,7 +456,6 @@
&:before {
font-size: 0;
line-height: 0;
- background: url("./images/arrow-left.svg") no-repeat 0 0;
width: 12px;
height: 12px;
content: "";
@@ -501,7 +474,6 @@
&:after {
font-size: 0;
line-height: 0;
- background: url("./images/arrow-right.svg") no-repeat 0 0;
width: 12px;
height: 12px;
content: "";
diff --git a/src/components/Grid/ListHeader.jsx b/src/components/Grid/ListHeader.jsx
index 3efcbf56a..42da0373c 100644
--- a/src/components/Grid/ListHeader.jsx
+++ b/src/components/Grid/ListHeader.jsx
@@ -2,6 +2,8 @@ import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import cn from 'classnames'
+import Down from '../../assets/icons/arrow-down-big.svg'
+import Up from '../../assets/icons/arrow-up-big.svg'
const HeaderItem = ({item, onItemClick, currentSortField}) => {
@@ -16,6 +18,11 @@ const HeaderItem = ({item, onItemClick, currentSortField}) => {
{ item.sortable ?
+ if (sortClasses === 'icon-up') {
+
+ } else {
+
+ }
{item.headerLabel}
: item.headerLabel
diff --git a/src/components/Grid/PaginationBar.jsx b/src/components/Grid/PaginationBar.jsx
index eeb21206f..e71aef637 100644
--- a/src/components/Grid/PaginationBar.jsx
+++ b/src/components/Grid/PaginationBar.jsx
@@ -4,6 +4,8 @@ import cn from 'classnames'
import _ from 'lodash'
import { branch, renderComponent } from 'recompose'
import { Tooltip } from 'appirio-tech-react-components'
+import BtnPrev from '../../assets/icons/arrow-left.svg'
+import BtnNext from '../../assets/icons/arrow-left.svg'
const NUMBER_OF_PILLS = 5
@@ -160,11 +162,21 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
return (
)
diff --git a/src/components/Grid/images/status-active.svg b/src/components/Grid/images/status-active.svg
deleted file mode 100644
index bb08db661..000000000
--- a/src/components/Grid/images/status-active.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/Grid/images/status-done.svg b/src/components/Grid/images/status-done.svg
deleted file mode 100644
index 7925aa968..000000000
--- a/src/components/Grid/images/status-done.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/Grid/images/status-draft.svg b/src/components/Grid/images/status-draft.svg
deleted file mode 100644
index c094f9883..000000000
--- a/src/components/Grid/images/status-draft.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/Grid/images/status-error.svg b/src/components/Grid/images/status-error.svg
deleted file mode 100644
index 6a88d8560..000000000
--- a/src/components/Grid/images/status-error.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/components/Home/Home.scss b/src/components/Home/Home.scss
index f0eca512a..97efd6543 100644
--- a/src/components/Home/Home.scss
+++ b/src/components/Home/Home.scss
@@ -2,92 +2,104 @@
@import '../../styles/variables';
.content-home {
- margin: $base-unit*4;
+ margin: $base-unit*4;
- .container {
- display: flex;
- justify-content: space-around;
- max-width: 1200px;
- width: auto;
- margin: auto;
- padding: $base-unit*12 $base-unit*9 $base-unit*18;
- background: $tc-white;
- box-shadow: 0 1px 3px 0px rgba($tc-black,.2);
- border-radius: $corner-radius;
- @media screen and (max-width: $screen-rg - 1) {
- flex-direction: column;
- width: 100%;
- padding:$base-unit*6 $base-unit*12 $base-unit*6;
- .content-container{
- padding: $base-unit*15 0 0 0;
- }
- }
- @media screen and (max-width: $screen-md - 174) {
- img{
- width:100%;
- height: auto;
- }
- .image-container{
- min-width: 100%;
- }
- }
- }
- .image-container{
- text-align: center;
- min-width: $base-unit*86;
- }
- .content-container{
- padding: $base-unit*7 0 0 $base-unit*17;
- .button-bar{
- display: flex;
- flex-direction: column;
- padding-top:$base-unit*6;
+ .container {
+ display: flex;
+ justify-content: space-around;
+ max-width: 1200px;
+ width: auto;
+ margin: auto;
+ padding: $base-unit*12 $base-unit*9 $base-unit*18;
+ background: $tc-white;
+ box-shadow: 0 1px 3px 0px rgba($tc-black, .2);
+ border-radius: $corner-radius;
- a.tc-link {
- text-align: center;
- color: $tc-dark-blue-90;
- @include roboto;
- font-size: 13px;
- margin: 0 auto;
- display: inline-block;
- margin-top: 10px;
- }
- }
- h1{
- @include tc-heading-extra-large;
- @include roboto-medium;
- color: $tc-black;
- letter-spacing: 0;
- padding: 0 0 $base-unit*6;
- text-align: center;
- }
- p{
- @include roboto;
- font-size: $tc-body-large;
- color: $tc-gray-70;
- letter-spacing: 0;
- line-height: $base-unit * 6;
- padding-bottom: $base-unit*6;
- }
- .tc-btn{
- color: $tc-dark-blue-30;
- height:$base-unit*8;
- width: $base-unit*50;
- text-align: center;
- margin: 0 auto;
- line-height: 38px;
- @include roboto-medium;
- font-size: $tc-label-lg;
- display: block;
- margin-bottom: $base-unit * 4;
- &:hover {
- color:$tc-white;
- background-image: linear-gradient($tc-dark-blue-70 0%, $tc-dark-blue-90 100%) !important;
- }
- &:active {
- color:$tc-white;
- background-image: linear-gradient($tc-dark-blue-70 0%, $tc-dark-blue-90 100%) !important;
- }
- }
- }
+ @media screen and (max-width: $screen-rg - 1) {
+ flex-direction: column;
+ width: 100%;
+ padding: $base-unit*6 $base-unit*12 $base-unit*6;
+
+ .content-container {
+ padding: $base-unit*15 0 0 0;
+ }
+ }
+
+ @media screen and (max-width: $screen-md - 174) {
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ .image-container {
+ min-width: 100%;
+ }
+ }
+ }
+
+ .image-container {
+ text-align: center;
+ min-width: $base-unit*86;
+ }
+
+ .content-container {
+ padding: $base-unit*7 0 0 $base-unit*17;
+
+ .button-bar {
+ display: flex;
+ flex-direction: column;
+ padding-top: $base-unit*6;
+
+ a.tc-link {
+ text-align: center;
+ color: $tc-dark-blue;
+ @include roboto;
+ font-size: 13px;
+ margin: 0 auto;
+ display: inline-block;
+ margin-top: 10px;
+ }
+ }
+
+ h1 {
+ @include tc-heading-extra-large;
+ @include roboto-medium;
+ color: $tc-black;
+ letter-spacing: 0;
+ padding: 0 0 $base-unit*6;
+ text-align: center;
+ }
+
+ p {
+ @include roboto;
+ font-size: $tc-body-large;
+ color: $tc-gray-70;
+ letter-spacing: 0;
+ line-height: $base-unit * 6;
+ padding-bottom: $base-unit*6;
+ }
+
+ .tc-btn {
+ color: $tc-dark-blue-30;
+ height: $base-unit*8;
+ width: $base-unit*50;
+ text-align: center;
+ margin: 0 auto;
+ line-height: 38px;
+ @include roboto-medium;
+ font-size: $tc-label-lg;
+ display: block;
+ margin-bottom: $base-unit * 4;
+
+ &:hover {
+ color: $tc-white;
+ background-image: linear-gradient($tc-dark-blue-70 0%, $tc-dark-blue 100%) !important;
+ }
+
+ &:active {
+ color: $tc-white;
+ background-image: linear-gradient($tc-dark-blue-70 0%, $tc-dark-blue 100%) !important;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/components/LinksMenu/LinksMenu.jsx b/src/components/LinksMenu/LinksMenu.jsx
index ae4233798..7aea00c86 100644
--- a/src/components/LinksMenu/LinksMenu.jsx
+++ b/src/components/LinksMenu/LinksMenu.jsx
@@ -6,6 +6,8 @@ import AddLink from './AddLink'
import DeleteLinkModal from './DeleteLinkModal'
import uncontrollable from 'uncontrollable'
import cn from 'classnames'
+import BtnRemove from '../../assets/icons/ui-16px-1_trash-simple.svg'
+
const LinksMenu = ({ links, limit, canDelete, isAddingNewLink, onAddingNewLink, onAddNewLink, onChangeLimit, linkToDelete, onDeleteIntent, onDelete }) => (
= 0) })}>
@@ -53,7 +55,9 @@ const LinksMenu = ({ links, limit, canDelete, isAddingNewLink, onAddingNewLink,
{link.title}
{canDelete &&
)
diff --git a/src/components/Maintenance/Maintenance.scss b/src/components/Maintenance/Maintenance.scss
index 1bdf7b0a2..faf714d6f 100644
--- a/src/components/Maintenance/Maintenance.scss
+++ b/src/components/Maintenance/Maintenance.scss
@@ -16,7 +16,7 @@
min-width: 768px;
width: 970px;
margin: 20px auto 0;
- background: $tc-white url('../../assets/images/coder-broken.svg') no-repeat 18% 85%;
+ background: $tc-white url('../../assets/icons/coder-broken.svg') no-repeat 18% 85%;
background-size: 307px 300px;
a{
color: $tc-dark-blue;
diff --git a/src/components/MessageList/MessagingEmptyState.jsx b/src/components/MessageList/MessagingEmptyState.jsx
index 90b4e8dcf..f36b9c951 100644
--- a/src/components/MessageList/MessagingEmptyState.jsx
+++ b/src/components/MessageList/MessagingEmptyState.jsx
@@ -2,16 +2,16 @@ import React from 'react'
import './MessagingEmptyState.scss'
import Panel from '../Panel/Panel'
import Comment from '../ActionCard/Comment'
-import { Icons } from 'appirio-tech-react-components'
+import CloseIcon from '../../assets/icons/icon-close.svg'
const MessagingEmptyState = ({ currentUser, onClose }) => (
-
+
}
- (
+ case 'new-posts':
+ return
+ case 'new-project':
+ return
+ case 'review-pending':
+ return
+ case 'updates':
+ return
+ case 'warning':
+ return
+ default:
+ return 'undefined icon'
+ }
+}
+
+NotificationIcons.propTypes = {
+ type: PropTypes.string.isRequired,
+ className: PropTypes.string.isRequired
+}
/**
* Format date
@@ -40,10 +74,13 @@ const formatDate = (date) => {
return format
}
+
const NotificationItem = (props) => {
const notificationItem = (
+ ,
{
olderNotificationsCount > 0 ?
@@ -100,7 +111,8 @@ const mapStateToProps = ({ notifications }) => notifications
const mapDispatchToProps = {
getNotifications,
markAllNotificationsRead,
- toggleNotificationRead
+ toggleNotificationRead,
+ toggleBundledNotificationRead
}
export default connect(mapStateToProps, mapDispatchToProps)(NotificationsDropdownContainer)
diff --git a/src/components/NotificationsEmpty/NotificationsEmpty.jsx b/src/components/NotificationsEmpty/NotificationsEmpty.jsx
index 7cc141df2..ad4a2df63 100644
--- a/src/components/NotificationsEmpty/NotificationsEmpty.jsx
+++ b/src/components/NotificationsEmpty/NotificationsEmpty.jsx
@@ -3,12 +3,16 @@
*/
import React from 'react'
import PropTypes from 'prop-types'
-import SVGIconImage from '../SVGIconImage'
import './NotificationsEmpty.scss'
+import Bell from '../../assets/icons/ui-bell.svg'
+
+
const NotificationsEmpty = (props) => (
-
+
+
)
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index 618d0ee33..9d01fdae3 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -1,11 +1,12 @@
@import "tc-includes";
@import "../../styles/variables";
-
+// TODO: unused css
.modal {
background: $tc-gray-neutral-light;
border-radius: $corner-radius;
position: relative;
padding: $base-unit*2 0;
+
.btn-close {
position: absolute;
display: block;
@@ -13,15 +14,16 @@
height: 15px;
top: $base-unit*3;
right: $base-unit*3;
- background: url('../../assets/images/x-mark-big.svg') no-repeat 0 0;
background-size: $tc-heading-extra-small;
}
+
.modal-title {
@include roboto-bold;
font-size: $tc-label-lg;
padding: $base-unit*2 $base-unit*4 0 $base-unit*4;
line-height: $base-unit*4;
text-align: center;
+
&.title-muted {
@include roboto-medium;
color: $tc-gray-50;
@@ -30,15 +32,18 @@
padding-top: $base-unit;
padding-bottom: $base-unit;
}
+
&.danger {
color: $tc-red;
}
}
+
.modal-body {
@include roboto;
font-size: $tc-label-md;
line-height: $base-unit * 4;
margin: $base-unit*2 $base-unit*4;
+
input {
display: block;
height: 38px;
@@ -47,59 +52,70 @@
background: $tc-gray-neutral-light;
border-color: $tc-gray-20;
@include tc-label-md;
- @include placeholder{
+ @include placeholder {
text-transform: none;
}
+
&[disabled] {
color: $tc-gray-20;
background: $tc-white;
}
+
&:hover {
border-color: $tc-gray-40;
background: $tc-gray-neutral-light;
}
+
&:focus {
background: $tc-white !important;
- border-color: $tc-dark-blue-90 !important;
+ border-color: $tc-dark-blue !important;
}
+
&.error {
border-left: 3px solid $tc-red-70 !important;
background: $tc-gray-neutral-light !important;
+
&:focus {
background: $tc-white !important;
- border-color: $tc-dark-blue-90 !important;
+ border-color: $tc-dark-blue !important;
}
}
}
+
.modal-inline-form {
display: flex;
margin-bottom: $base-unit*2;
+
button {
margin-left: $base-unit;
}
+
.input-icon-group {
position: relative;
flex-grow: 1;
display: flex;
border: 1px solid $tc-gray-20;
box-shadow: inset 0px 0px 2px 0px rgba($tc-gray-30, 0.2);
+
input {
flex-grow: 1;
display: inline-block;
border: none;
box-shadow: none;
}
+
.input-icon {
height: 30px;
margin: 4px;
+
&:empty {
width: 36px;
- background: url('../../assets/images/username-icon.svg') no-repeat;
background-size: 30px 30px;
background-color: $tc-gray-20;
background-position: center;
border-radius: 34px;
}
+
img {
width: 30px;
height: 30px;
@@ -108,6 +124,7 @@
}
}
}
+
.message {
text-align: center;
margin-bottom: $base-unit*4;
@@ -120,15 +137,17 @@
}
.btn-cancel {
- border: 1px solid $tc-dark-blue-90;
+ border: 1px solid $tc-dark-blue;
box-shadow: 0px 0px 3px 0px $tc-dark-blue-30;
}
}
}
+
.form-group {
- margin-top: 20px;
- margin-bottom: 15px;
- }
+ margin-top: 20px;
+ margin-bottom: 15px;
+ }
+
.center-buttons {
text-align: center;
}
diff --git a/src/components/NotificationItem/NotificationItem.jsx b/src/components/NotificationItem/NotificationItem.jsx
index bbf72999a..e8c210493 100644
--- a/src/components/NotificationItem/NotificationItem.jsx
+++ b/src/components/NotificationItem/NotificationItem.jsx
@@ -7,10 +7,44 @@ import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import { NOTIFICATION_TYPE } from '../../config/constants'
-import SVGIconImage from '../SVGIconImage'
import moment from 'moment'
import { Link } from 'react-router-dom'
import './NotificationItem.scss'
+import Check from '../../assets/icons/check.svg'
+import IconNotificationMememberAdded from '../../assets/icons/notification-member-added.svg'
+import IconNotificationNewPosts from '../../assets/icons/notification-new-posts.svg'
+import IconNotificationNewProject from '../../assets/icons/notification-new-project.svg'
+import IconNotificationReviewPending from '../../assets/icons/notification-review-pending.svg'
+import IconNotificationUpdates from '../../assets/icons/notification-updates.svg'
+import IconNotificationWarning from '../../assets/icons/notification-warning.svg'
+
+/**
+ * @parmas {string} type notification type
+ * @parmas {string} class name
+ */
+const NotificationIcons = ({ type, className }) => {
+ switch(type){
+ case 'member-added':
+ return
-
diff --git a/src/components/NotificationItem/NotificationItem.scss b/src/components/NotificationItem/NotificationItem.scss
index a48da8f89..45d67f94a 100644
--- a/src/components/NotificationItem/NotificationItem.scss
+++ b/src/components/NotificationItem/NotificationItem.scss
@@ -68,7 +68,7 @@
background-color: $tc-dark-blue-30;
svg {
- fill: $tc-dark-blue-90;
+ fill: $tc-dark-blue;
}
}
diff --git a/src/components/NotificationsDropdown/NotificationsDropdown.jsx b/src/components/NotificationsDropdown/NotificationsDropdown.jsx
index a583fa8bb..465ba327d 100644
--- a/src/components/NotificationsDropdown/NotificationsDropdown.jsx
+++ b/src/components/NotificationsDropdown/NotificationsDropdown.jsx
@@ -5,16 +5,19 @@
*/
import React from 'react'
import PropTypes from 'prop-types'
-import SVGIconImage from '../SVGIconImage'
-import Dropdown from '../Dropdown/Dropdown'
+import { Dropdown } from 'appirio-tech-react-components'
import cn from 'classnames'
+import Bell from '../../assets/icons/ui-bell.svg'
+
const NotificationsDropdown = (props) => {
return (
+
{formatDate(props.date)}
@@ -55,7 +92,7 @@ const NotificationItem = (props) => { props.onReadToggleClick(props.id) }} > -
-
+
diff --git a/src/components/NotificationsDropdown/NotificationsDropdown.scss b/src/components/NotificationsDropdown/NotificationsDropdown.scss
index aa136e2c1..b9b7988be 100644
--- a/src/components/NotificationsDropdown/NotificationsDropdown.scss
+++ b/src/components/NotificationsDropdown/NotificationsDropdown.scss
@@ -48,9 +48,15 @@
position: relative;
width: 32px;
- > svg > g > g {
+ .icon-ui-bell path {
fill: $tc-white;
}
+
+ &:not(.has-unread) {
+ .icon-ui-bell path {
+ fill: $tc-gray-50;
+ }
+ }
}
.notifications-dropdown-bell.has-unread {
@@ -67,12 +73,6 @@
}
}
- .dropdown-wrap.hide .notifications-dropdown-bell:not(.has-unread) {
- > svg > g > g {
- fill: $tc-gray-50;
- }
- }
-
.notifications-dropdown-body {
// window height
// - 54px dropdown top position
diff --git a/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx b/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx
index 769da618c..573fd5a2f 100644
--- a/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx
+++ b/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx
@@ -6,13 +6,14 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
-import { sumBy } from 'lodash'
-import { getNotifications, markAllNotificationsRead, toggleNotificationRead } from '../../routes/notifications/actions'
+import _ from 'lodash'
+import { getNotifications, markAllNotificationsRead, toggleNotificationRead, toggleBundledNotificationRead } from '../../routes/notifications/actions'
import { splitNotificationsBySources, filterReadNotifications, limitQuantityInSources } from '../../routes/notifications/helpers/notifications'
import NotificationsSection from '../NotificationsSection/NotificationsSection'
import NotificationsEmpty from '../NotificationsEmpty/NotificationsEmpty'
import NotificationsDropdownHeader from '../NotificationsDropdownHeader/NotificationsDropdownHeader'
import NotificationsDropdown from './NotificationsDropdown'
+import ScrollLock from 'react-scroll-lock-component'
import { NOTIFCATIONS_DROPDOWN_PER_SOURCE, NOTIFCATIONS_DROPDOWN_MAX_TOTAL, REFRESH_NOTIFICATIONS_INTERVAL } from '../../config/constants'
import './NotificationsDropdown.scss'
@@ -32,7 +33,7 @@ class NotificationsDropdownContainer extends React.Component {
return null
}
- const { sources, notifications, markAllNotificationsRead, toggleNotificationRead, pending } = this.props
+ const { sources, notifications, markAllNotificationsRead, toggleNotificationRead, pending, toggleBundledNotificationRead } = this.props
const notReadNotifications = filterReadNotifications(notifications)
const notificationsBySources = limitQuantityInSources(
splitNotificationsBySources(sources, notReadNotifications),
@@ -42,13 +43,21 @@ class NotificationsDropdownContainer extends React.Component {
const globalSource = notificationsBySources.length > 0 && notificationsBySources[0].id === 'global' ? notificationsBySources[0] : null
const projectSources = notificationsBySources.length > 1 && globalSource ? notificationsBySources.slice(1) : notificationsBySources
const hasUnread = notReadNotifications.length > 0
- const olderNotificationsCount = sumBy(projectSources, 'total') - sumBy(projectSources, 'notifications.length')
+ const olderNotificationsCount = _.sumBy(projectSources, 'total') - _.sumBy(projectSources, 'notifications.length')
// we have to give Dropdown component some time
// before removing notification item node from the list
// otherwise dropdown thinks we clicked outside and closes dropdown
const toggleNotificationReadWithDelay = (notificationId) => {
if (!pending) {
- setTimeout(() => toggleNotificationRead(notificationId), 0)
+ const notification = _.find(notReadNotifications, { id: notificationId })
+ setTimeout(() => {
+ // if it's bundled notification, then toggle all notifications inside the bundle
+ if (notification.bundledIds) {
+ toggleBundledNotificationRead(notificationId, notification.bundledIds)
+ } else {
+ toggleNotificationRead(notificationId)
+ }
+ }, 0)
}
}
@@ -64,24 +73,26 @@ class NotificationsDropdownContainer extends React.Component {
) : ([
-
- {globalSource && globalSource.notifications.length &&
-
,
+
+ {globalSource && globalSource.notifications.length &&
+
+
-
diff --git a/src/components/Panel/Panel.jsx b/src/components/Panel/Panel.jsx
index a00953422..9ce0a5918 100644
--- a/src/components/Panel/Panel.jsx
+++ b/src/components/Panel/Panel.jsx
@@ -1,7 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defaultProps } from 'recompose'
-import { Icons } from 'appirio-tech-react-components'
+import IconUIBoldAdd from '../../assets/icons/icon-ui-bold-add.svg'
+import IconUITrashSimple from '../../assets/icons/icon-ui-trash-simple.svg'
import './Panel.scss'
import cn from 'classnames'
@@ -29,8 +30,8 @@ Title.propTypes = {
const ActionBtn = ({children, onClick, type}) => (
- { type === 'add' &&
+
Good job! You’re all caught up
{props.children &&{props.children}
}
-
+
+
)
diff --git a/src/components/ProjectStatus/ProjectStatus.scss b/src/components/ProjectStatus/ProjectStatus.scss
index d401b05b9..cde30c8c5 100644
--- a/src/components/ProjectStatus/ProjectStatus.scss
+++ b/src/components/ProjectStatus/ProjectStatus.scss
@@ -1,5 +1,9 @@
@import 'tc-includes';
-$status-height: 20px;
+$status-height: 30px;
+
+.gridview-content .EditableProjectStatus {
+ margin-top: 10px;
+}
.ProjectStatus {
position: relative;
@@ -20,69 +24,6 @@ $status-height: 20px;
}
}
- &.ps-draft {
- .status-icon {
- i {
- background: url('../../assets/images/ps-draft.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
- &.ps-in_review {
- .status-icon {
- i {
- background: url('../../assets/images/ps-in_review.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
- &.ps-reviewed {
- .status-icon {
- i {
- background: url('../../assets/images/ps-reviewed.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
- &.ps-active {
- .status-icon {
- i {
- background: url('../../assets/images/ps-active.svg') no-repeat;
- // background-size: cover;
- }
- }
- }
-
- &.ps-cancelled {
- .status-icon {
- i {
- background: url('../../assets/images/ps-cancelled.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
- &.ps-completed {
- .status-icon {
- i {
- background: url('../../assets/images/ps-completed.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
- &.ps-paused {
- .status-icon {
- i {
- background: url('../../assets/images/ps-paused.svg') no-repeat -7px -4px;
- // background-size: cover;
- }
- }
- }
-
.status-label {
position: relative;
@include tc-label-xs;
@@ -131,7 +72,10 @@ $status-height: 20px;
margin-left: 5px;
// right: 5px;
// top: 8px;
- background-size: 9px 4px;
+ // background-size: 9px 4px;
+ path {
+ stroke: $tc-gray-70;
+ }
.Icon {
width: 100%;
@@ -141,12 +85,6 @@ $status-height: 20px;
}
}
- &.active {
- &::after {
- background: url('../../assets/images/arrows-9px-carret-down-expanded.svg') no-repeat 50% 50%;
- }
- }
-
&.unified-header {
background-color: $tc-gray-40;
@@ -164,6 +102,8 @@ $status-height: 20px;
margin-left: 10px;
}
+ // Stylize the dropdown elements
+
.status-dropdown {
min-width: 150px;
position: absolute;
@@ -175,7 +115,7 @@ $status-height: 20px;
top: -2 * $base_unit;
left: auto;
right: -10px;
- z-index: 2;
+ z-index: 20;
transition: 250ms all;
&.dropdown-up {
@@ -190,17 +130,16 @@ $status-height: 20px;
color: $tc-black;
line-height: 30px;
padding-left: 20px;
- margin-bottom: 20px;
white-space: nowrap;
}
- a.status-option {
+ .status-option {
display: flex;
@include roboto-medium;
font-size: $tc-label-md;
text-align: left;
line-height: 30px;
- padding: 5px 16px 5px 10px;
+ padding: 0 20px;
white-space: nowrap;
&:hover {
@@ -208,13 +147,17 @@ $status-height: 20px;
}
&.active {
- background: $tc-dark-blue-10;
+ background: $tc-gray-10;
+ }
+
+ svg {
+ margin-top: 7px;
}
.status-label {
color: $tc-gray-80;
- padding-right: 0px;
font-size: 13px;
+ line-height: 30px;
}
}
}
diff --git a/src/components/ProjectStatus/ProjectStatusChangeConfirmation.jsx b/src/components/ProjectStatus/ProjectStatusChangeConfirmation.jsx
index 998e14aa0..182d41173 100644
--- a/src/components/ProjectStatus/ProjectStatusChangeConfirmation.jsx
+++ b/src/components/ProjectStatus/ProjectStatusChangeConfirmation.jsx
@@ -1,99 +1,123 @@
-import React from 'react'
+import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {SelectDropdown} from 'appirio-tech-react-components'
-import uncontrollable from 'uncontrollable'
+import cn from 'classnames'
import { PROJECT_STATUS_COMPLETED, PROJECT_STATUS_CANCELLED } from '../../config/constants'
import './ProjectStatusChangeConfirmation.scss'
-const ProjectStatusChangeConfirmation = ({
- newStatus,
- onCancel,
- onConfirm,
- onReasonUpdate,
- statusChangeReason,
- emptyCancelReason,
- showEmptyReasonError
- }) => {
- let confirmText
- let titleStatus
- switch(newStatus) {
- case PROJECT_STATUS_COMPLETED:
- confirmText = 'Close Project'
- titleStatus = 'close'
- break
- case PROJECT_STATUS_CANCELLED:
- confirmText = 'Cancel Project'
- titleStatus = 'cancel'
- break
- default:
- confirmText = 'Confirm'
- titleStatus = 'close'
+class ProjectStatusChangeConfirmation extends Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {showUp:false, emptyCancelReason:false}
+ this.handleReasonChange = this.handleReasonChange.bind(this)
+ this.handleConfirm = this.handleConfirm.bind(this)
+ this.shouldDropdownUp = this.shouldDropdownUp.bind(this)
+
}
- const cancelReasons = [
- { value: null, title: '-- Select Reason --'},
- { value: 'spam', title: 'Spam'},
- { value: 'demo', title: 'Demo/Test'},
- { value: 'competitor', title: 'Customer selected competitor'},
- { value: 'price', title: 'Price too high'},
- { value: 'customer-inhouse', title: 'Being done in-house'},
- { value: 'customer-inactivity', title: 'Customer not responsive'},
- { value: 'non-community', title: 'Poor community fit'},
- { value: 'by-choice', title: 'Declined by us'}
- ]
- const handleReasonChange = (option) => {
+
+ componentWillMount(){
+ let confirmText
+ let titleStatus
+ switch(this.props.newStatus) {
+ case PROJECT_STATUS_COMPLETED:
+ confirmText = 'Close Project'
+ titleStatus = 'close'
+ break
+ case PROJECT_STATUS_CANCELLED:
+ confirmText = 'Cancel Project'
+ titleStatus = 'cancel'
+ break
+ default:
+ confirmText = 'Confirm'
+ titleStatus = 'close'
+ }
+ this.cancelReasons = [
+ { value: null, title: '-- Select Reason --'},
+ { value: 'spam', title: 'Spam'},
+ { value: 'demo', title: 'Demo/Test'},
+ { value: 'competitor', title: 'Customer selected competitor'},
+ { value: 'price', title: 'Price too high'},
+ { value: 'customer-inhouse', title: 'Being done in-house'},
+ { value: 'customer-inactivity', title: 'Customer not responsive'},
+ { value: 'non-community', title: 'Poor community fit'},
+ { value: 'by-choice', title: 'Declined by us'}
+ ]
+ this.confirmText = confirmText
+ this.titleStatus = titleStatus
+
+ }
+
+ handleReasonChange(option){
// after reason change, remove the error
- showEmptyReasonError(false)
+ this.setState({emptyCancelReason:false})
// update reason in parent component
- onReasonUpdate(option)
+ this.props.onReasonUpdate(option)
}
- const handleConfirm = () => {
+ handleConfirm(){
// if new status is cancelled but cancel reason is not set, show error
- if (newStatus === PROJECT_STATUS_CANCELLED && !statusChangeReason) {
- showEmptyReasonError(true)
+ if (this.props.newStatus === PROJECT_STATUS_CANCELLED && !this.props.statusChangeReason) {
+ this.setState({emptyCancelReason:true})
} else { // otherwise update the status
- onConfirm()
+ this.props.onConfirm()
}
}
- return (
-
-
- You are about to { titleStatus } the project
-
-
-
- This action will permanently change the status of your project and cannot be undone. -
+ shouldDropdownUp(){ + if (this.wrapper) { + const bounds = this.wrapper.getBoundingClientRect() + const windowHeight = window.innerHeight - { newStatus === PROJECT_STATUS_CANCELLED && -
-
-
{
withoutLabel={withoutLabel}
unifiedHeader={unifiedHeader}
/>
- { canEdit &&
{ isOpen && canEdit &&
-
- )
+ )
+ }
}
ProjectStatusChangeConfirmation.propTypes = {
+ newStatus: PropTypes.string.isRequired,
onCancel: PropTypes.func.isRequired,
- onConfirm: PropTypes.func.isRequired
+ onConfirm: PropTypes.func.isRequired,
+ onReasonUpdate: PropTypes.func.isRequired,
+ statusChangeReason: PropTypes.string
}
-export default uncontrollable(ProjectStatusChangeConfirmation, {
- emptyCancelReason: 'showEmptyReasonError'
-})
+export default ProjectStatusChangeConfirmation
\ No newline at end of file
diff --git a/src/components/ProjectStatus/ProjectStatusChangeConfirmation.scss b/src/components/ProjectStatus/ProjectStatusChangeConfirmation.scss
index 4867bd9b5..da7c0b3aa 100644
--- a/src/components/ProjectStatus/ProjectStatusChangeConfirmation.scss
+++ b/src/components/ProjectStatus/ProjectStatusChangeConfirmation.scss
@@ -25,4 +25,9 @@
width: 100%;
}
}
+
+ &.dropdown-up {
+ top: auto;
+ bottom: 320px;
+ }
}
\ No newline at end of file
diff --git a/src/components/ProjectStatus/editableProjectStatus.js b/src/components/ProjectStatus/editableProjectStatus.js
index 0cd83d6fd..79a217a70 100644
--- a/src/components/ProjectStatus/editableProjectStatus.js
+++ b/src/components/ProjectStatus/editableProjectStatus.js
@@ -5,12 +5,13 @@ import ProjectStatus from './ProjectStatus'
import cn from 'classnames'
import _ from 'lodash'
import { enhanceDropdown } from 'appirio-tech-react-components'
-import SVGIconImage from '../SVGIconImage'
import {
PROJECT_STATUS,
PROJECT_STATUS_COMPLETED,
PROJECT_STATUS_CANCELLED
} from '../../config/constants'
+import CarretDownNormal9px from '../../assets/icons/arrow-9px-carret-down-normal.svg'
+
const hocStatusDropdown = (CompositeComponent) => {
class StatusDropdown extends Component {
@@ -33,7 +34,7 @@ const hocStatusDropdown = (CompositeComponent) => {
return (
{ if (input && ! this.wrapper){this.wrapper = input; this.setState({showUp:this.shouldDropdownUp()}) }}}>
+
-
+ You are about to { this.titleStatus } the project
+
+
+
- }
+ }
- + This action will permanently change the status of your project and cannot be undone. +
+ + { newStatus === PROJECT_STATUS_CANCELLED && +
+
+
- { emptyCancelReason &&
+
+ { this.state.emptyCancelReason && Please select reason to cancel the project
}
Please select reason to cancel the project
}
-
-
-
+
+
+
+
@@ -53,7 +56,7 @@ const hocStatusDropdown = (CompositeComponent) => {
{
onItemSelect(item.value, e)
}}
@@ -124,7 +127,7 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
const { canEdit } = this.props
const ProjectStatusDropdown = canEdit ? enhanceDropdown(hocStatusDropdown(CompositeComponent)) : hocStatusDropdown(CompositeComponent)
return (
-
+
@@ -32,7 +34,10 @@ const ProjectType = ({projectId, type, description, devices}) => (
Phone
,
- tablet: Tablet
,
- desktop: Desktop
,
- wearable: Apple Watch
,
- 'apple-watch': Apple Watch
,
- 'android-watch': Android Watch
+ phone: Phone
,
+ tablet: Tablet
,
+ desktop: Desktop
,
+ wearable: Apple Watch
,
+ 'apple-watch': Apple Watch
,
+ 'android-watch': Android Watch
}
+
/*eslint-enable camelcase */
const ProjectType = ({projectId, type, description, devices}) => (
{type === 'generic' &&
-
Work Project
}
+
+
}
{type !== 'generic' &&
{devices.slice(0, 3).map((device) => deviceMap[device])}
diff --git a/src/components/ProjectType/ProjectType.scss b/src/components/ProjectType/ProjectType.scss
index db8b3a109..1b62a966e 100644
--- a/src/components/ProjectType/ProjectType.scss
+++ b/src/components/ProjectType/ProjectType.scss
@@ -1,5 +1,4 @@
@import 'tc-includes';
-
.project-icons{
@include roboto;
font-size: $tc-label-md;
@@ -22,24 +21,4 @@
width: 40px;
background-size: 32px;
}
-
- .icon-work-project{
- background: url('../../assets/images/tech-32px-outline-work-project.svg') no-repeat center top;
- width: 120px;
- }
- .icon-iphone{
- background: url('../../assets/images/tech-32-outline_mobile.svg') no-repeat center top;
- }
- .icon-ipad{
- background: url('../../assets/images/tech-32-outline_tablet-button.svg') no-repeat center top;
- }
- .icon-web{
- background: url('../../assets/images/tech-32-outline_desktop.svg') no-repeat center top;
- }
- .icon-apple-watch{
- background: url('../../assets/images/tech-32-outline_watch-time.svg') no-repeat center top;
- }
- .icon-android-wear{
- background: url('../../assets/images/tech-32-outline_watch-circle.svg') no-repeat center top;
- }
}
\ No newline at end of file
diff --git a/src/components/RichTextArea/RichTextArea.jsx b/src/components/RichTextArea/RichTextArea.jsx
index 0c31407d4..a0a4c9c4e 100644
--- a/src/components/RichTextArea/RichTextArea.jsx
+++ b/src/components/RichTextArea/RichTextArea.jsx
@@ -1,5 +1,3 @@
-
-
import React from 'react'
import PropTypes from 'prop-types'
import Editor, {composeDecorators} from 'draft-js-plugins-editor'
@@ -18,9 +16,13 @@ import stateToMarkdown from '../../helpers/stateToMarkdown'
import 'draft-js-link-plugin/lib/plugin.css'
import EditorIcons from './EditorIcons'
import './RichTextArea.scss'
+import 'draft-js-mention-plugin/lib/plugin.css'
+import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin'
+import _ from 'lodash'
const linkPlugin = createLinkPlugin()
const blockDndPlugin = createBlockDndPlugin()
+
const decorator = composeDecorators(
blockDndPlugin.decorator
)
@@ -51,7 +53,7 @@ const blocks = [
class RichTextArea extends React.Component {
constructor(props) {
super(props)
- this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: ''}
+ this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: '', suggestions: [], allSuggestions:[]}
this.onTitleChange = this.onTitleChange.bind(this)
this.onEditorChange = this.onEditorChange.bind(this)
this.handleKeyCommand = this.handleKeyCommand.bind(this)
@@ -64,6 +66,11 @@ class RichTextArea extends React.Component {
this.getEditorState = this.getEditorState.bind(this)
this.setEditorState = this.setEditorState.bind(this)
this.setUploadState = this.setUploadState.bind(this)
+ this.onSearchChange = this.onSearchChange.bind(this)
+ this.onAddMention = this.onAddMention.bind(this)
+ this.mentionPlugin = createMentionPlugin({mentionPrefix: '@'})
+ this.plugins = plugins.slice(0)
+ this.plugins.push(this.mentionPlugin)
}
componentDidMount() {
@@ -72,12 +79,15 @@ class RichTextArea extends React.Component {
}
componentWillMount() {
+ const suggestions = _.map(_.values(this.props.allMembers), (e) => { return {name: e.firstName + ' ' + e.lastName, handle: e.handle, userId: e.userId, link:'/users/'+e.handle} })
this.setState({
editorExpanded: this.props.editMode,
titleValue: this.props.title || '',
editorState: this.props.content ? EditorState.createWithContent(markdownToState(this.props.content)) : EditorState.createEmpty(),
currentMDContent: this.props.content,
- oldMDContent: this.props.oldContent
+ oldMDContent: this.props.oldContent,
+ suggestions,
+ allSuggestions:suggestions
})
}
@@ -86,6 +96,7 @@ class RichTextArea extends React.Component {
}
componentWillReceiveProps(nextProps) {
+
if (nextProps.isCreating !== this.props.isCreating && !nextProps.isCreating && !nextProps.hasError) {
this.clearState()
} else if ((nextProps.isGettingComment !== this.props.isGettingComment && !nextProps.isGettingComment)
@@ -201,12 +212,20 @@ class RichTextArea extends React.Component {
return
}
const title = this.state.titleValue
+
const content = this.state.currentMDContent
+
if ((this.props.disableTitle || title) && content) {
this.props.onPost({title, content})
}
}
-
+ onSearchChange({value}){
+ this.setState({
+ suggestions: defaultSuggestionsFilter(value, this.state.allSuggestions)
+ })
+ }
+ onAddMention() {
+ }
cancelEdit() {
this.props.cancelEdit()
}
@@ -220,6 +239,7 @@ class RichTextArea extends React.Component {
this.setState({uploading})
}
render() {
+ const {MentionSuggestions} = this.mentionPlugin
const {className, avatarUrl, authorName, titlePlaceholder, contentPlaceholder, editMode, isCreating, isGettingComment, disableTitle} = this.props
const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading} = this.state
let canSubmit = (disableTitle || titleValue.trim())
@@ -232,6 +252,28 @@ class RichTextArea extends React.Component {
const currentEntity = getCurrentEntity(editorState)
const disableForCodeBlock = blockType === 'code-block'
+ const Entry = (props) => {
+ const {
+ mention,
+ theme,
+ searchValue, // eslint-disable-line no-unused-vars
+ isFocused, // eslint-disable-line no-unused-vars
+ ...parentProps
+ } = props
+
+ return (
+
+
+ )
+ }
+
return (
+
+
+
+
+ {mention.get('name') +' - '+mention.get('handle')}
+
+
{(isCreating || isGettingComment) &&
@@ -258,15 +300,23 @@ class RichTextArea extends React.Component {
/>
{!isGettingComment &&
- 
}
{
let icon
switch (props.type) {
case 'user-remove':
- icon =
+
}
@@ -358,7 +408,8 @@ RichTextArea.propTypes = {
oldTitle: PropTypes.string,
oldContent: PropTypes.string,
title: PropTypes.string,
- content: PropTypes.string
+ content: PropTypes.string,
+ allMembers: PropTypes.object
}
-export default RichTextArea
+export default RichTextArea
\ No newline at end of file
diff --git a/src/components/SVGIconImage.jsx b/src/components/SVGIconImage.jsx
deleted file mode 100644
index 212e330f7..000000000
--- a/src/components/SVGIconImage.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-
-const SVGIconImage = ({ filePath }) => {
- const Icon = require(`!svg-react-loader?name=Icon!../assets/images/${filePath}.svg`)
- return (
-
+ {(currentUser.isManager || currentUser.isCopilot) &&
)
diff --git a/src/components/TeamManagement/AutoCompleteInput.jsx b/src/components/TeamManagement/AutoCompleteInput.jsx
index 3a1306708..1530b3ef9 100644
--- a/src/components/TeamManagement/AutoCompleteInput.jsx
+++ b/src/components/TeamManagement/AutoCompleteInput.jsx
@@ -1,9 +1,11 @@
import React from 'react'
-import PropTypes from 'prop-types'
+import PT from 'prop-types'
import ReactDOM from 'react-dom'
import uncontrollable from 'uncontrollable'
import { Avatar } from 'appirio-tech-react-components'
import { AUTOCOMPLETE_TRIGGER_LENGTH } from '../../config/constants'
+import InputIcon from '../../assets/icons/username-icon.svg'
+
class AutoCompleteInput extends React.Component {
@@ -60,7 +62,8 @@ class AutoCompleteInput extends React.Component {
+
}
-
+
- + Member + +
- + Copilot + + {currentUser.isManager ? ( +
- + Manager + + ) : ( + null + )} +
-
{member.firstName} {member.lastName}
{member === currentMember && (you) }
diff --git a/src/components/TeamManagement/TeamManagement.scss b/src/components/TeamManagement/TeamManagement.scss
index 9a3e84ece..b88ebb2ef 100644
--- a/src/components/TeamManagement/TeamManagement.scss
+++ b/src/components/TeamManagement/TeamManagement.scss
@@ -97,18 +97,6 @@ $tc-body-extra-small: 12px;
opacity: 1.0;
}
}
-
- .btn-user-remove {
- // @include icon('user-remove.svg');
- }
-
- .btn-promote {
- // @include icon('promote.svg');
- }
-
- .btn-leave {
- // @include icon('exit.svg');
- }
}
&.add-team-member {
@@ -121,7 +109,6 @@ $tc-body-extra-small: 12px;
padding-left: 10px;
width: 40px;
height: 40px;
- // @include icon('user-add.svg');
border: 2px solid $tc-gray-50;
background-position: center;
background-size: 16px;
@@ -181,7 +168,6 @@ $tc-body-extra-small: 12px;
position: absolute;
top: $base-unit*3;
right: $base-unit*3;
- // @include icon('x-mark-big.svg');
background-size: $tc-heading-extra-small;
overflow: hidden;
}
@@ -233,7 +219,7 @@ $tc-body-extra-small: 12px;
&:focus {
background: $tc-white !important;
- border-color: $tc-dark-blue-90 !important;
+ border-color: $tc-dark-blue !important;
}
&.error {
@@ -242,7 +228,7 @@ $tc-body-extra-small: 12px;
&:focus {
background: $tc-white !important;
- border-color: $tc-dark-blue-90 !important;
+ border-color: $tc-dark-blue !important;
}
}
}
@@ -294,7 +280,6 @@ $tc-body-extra-small: 12px;
&:empty {
flex-shrink: 0;
width: 30px;
- // @include icon('username-icon.svg');
background-size: 30px 30px;
background-color: $tc-gray-20;
background-position: center;
@@ -354,11 +339,11 @@ $tc-body-extra-small: 12px;
width: 160px;
list-style-type: none;
padding: 0;
- margin: 10px 0 0 0;
+ margin: 10px 0 10px 0;
ul {
display: flex;
- width: 160px;
+ width: 200px;
}
li {
@@ -385,7 +370,7 @@ $tc-body-extra-small: 12px;
&.active {
cursor: default;
- background: $tc-dark-blue-90;
+ background: $tc-dark-blue;
color: $tc-white;
// box-shadow: inset 0px 1px 3px 0px rgba($tc-gray-80,0.38);
a {
diff --git a/src/components/TopBar/NewProjectNavLink.jsx b/src/components/TopBar/NewProjectNavLink.jsx
index e4ea6e270..29acfe502 100644
--- a/src/components/TopBar/NewProjectNavLink.jsx
+++ b/src/components/TopBar/NewProjectNavLink.jsx
@@ -1,8 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
-import SVGIconImage from '../SVGIconImage'
import './NewProjectNavLink.scss'
+import BoldAdd from '../../assets/icons/ui-16px-1_bold-add.svg'
+
const NewProjectNavLink = ({ compact=false, returnUrl }) => {
if (compact) {
@@ -13,7 +14,9 @@ const NewProjectNavLink = ({ compact=false, returnUrl }) => {
search: returnUrl ? '?returnUrl=' + returnUrl : ''
}} className="new-project-link"
>
-
- }
-
- let backgroundImageUrl = `url(${require('./default-avatar.svg')})`
-
- if (photoURL)
- backgroundImageUrl = `url(${photoURL}), ${backgroundImageUrl}`
-
- // Delete -r when taking member search back out of the angular app
- // Renamed to -r to avoid naming collisions
- return (
-
+
)
} else {
diff --git a/src/components/TopBar/ProjectToolBar.js b/src/components/TopBar/ProjectToolBar.js
index 84facbeba..94cc9fd8b 100644
--- a/src/components/TopBar/ProjectToolBar.js
+++ b/src/components/TopBar/ProjectToolBar.js
@@ -2,52 +2,149 @@ require('./ProjectToolBar.scss')
import _ from 'lodash'
import React from 'react'
-import PropTypes from 'prop-types'
-import { NavLink } from 'react-router-dom'
+import PT from 'prop-types'
+import { NavLink, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import ReactDOM from 'react-dom'
import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
-import SVGIconImage from '../SVGIconImage'
import NewProjectNavLink from './NewProjectNavLink'
+import Dashboard from '../../assets/icons/icon-dashboard.svg'
+import DashboardActive from '../../assets/icons/icon-dashboard-active.svg'
+import Specification from '../../assets/icons/icon-ruler-pencil.svg'
+import SpecificationActive from '../../assets/icons/icon-ruler-pencil-active.svg'
+import Chat from '../../assets/icons/icon-chat.svg'
+import ChatActive from '../../assets/icons/icon-chat-active.svg'
+import TailLeft from '../../assets/icons/arrows-16px-1_tail-left.svg'
function isEllipsisActive(el) {
return (el.offsetWidth < el.scrollWidth)
}
+
class ProjectToolBar extends React.Component {
constructor(props) {
super(props)
this.state = {
- isTooltipVisible: false
+ isTooltipVisible: false,
+ dashboardIcon: '',
+ specificationIcon: '',
+ activePage: 'dashboard',
+ activeDashboard: 'not-active',
+ activeSpecification: 'not-active',
+ activeMessages: 'not-active'
}
this.onNameEnter = this.onNameEnter.bind(this)
this.onNameLeave = this.onNameLeave.bind(this)
}
+ setActivePage() {
+ const path = this.props.location.pathname
+ const activeDashboardPage = path.search('projects') > 0
+ const activeSpecificationPage = path.search('specification') > 0
+ const activeChatPage = path.search('discussions') > 0
+
+ if (activeSpecificationPage) {
+ this.state.activePage = 'specification'
+ this.state.specificationIcon =
- { renderLogoSection() }
+ {renderLogoSection()}
{project &&
{project &&
-
+
}
@@ -57,11 +154,15 @@ class ProjectToolBar extends React.Component {
@@ -84,23 +187,23 @@ class ProjectToolBar extends React.Component {
}
ProjectToolBar.propTypes = {
- project: PropTypes.object,
- isPowerUser: PropTypes.bool,
+ project: PT.object,
+ isPowerUser: PT.bool,
/**
* Function which render the logo section in the top bar
*/
- renderLogoSection : PropTypes.func.isRequired
+ renderLogoSection: PT.func.isRequired
}
const mapStateToProps = ({ projectState, loadUser }) => {
return {
- project : projectState.project,
- userRoles : _.get(loadUser, 'user.roles', []),
- user : loadUser.user
+ project: projectState.project,
+ userRoles: _.get(loadUser, 'user.roles', []),
+ user: loadUser.user
}
}
-const actionsToBind = { }
+const actionsToBind = {}
// export default ProjectToolBar
-export default connect(mapStateToProps, actionsToBind)(ProjectToolBar)
+export default connect(mapStateToProps, actionsToBind)(withRouter(ProjectToolBar))
diff --git a/src/components/TopBar/ProjectToolBar.scss b/src/components/TopBar/ProjectToolBar.scss
index 90bb4dea9..d7974001b 100644
--- a/src/components/TopBar/ProjectToolBar.scss
+++ b/src/components/TopBar/ProjectToolBar.scss
@@ -39,15 +39,16 @@
color: $tc-gray-50;
text-transform: uppercase;
- svg {// Back arrow
+ .icon-tail-left {// Back arrow
fill: $tc-gray-50;
height: 13px;
margin-right: 10px;
+ margin-right: 12px;
}
&:hover, &.hover{
text-decoration: none;
color: $tc-orange-30;
- svg {// Back arrow
+ .icon-tail-left {// Back arrow
fill: $tc-orange-30;
}
}
@@ -125,6 +126,12 @@
margin: 0;
padding: 0;
}
+ li#active a i svg g {
+ fill: #fee3d0 !important;
+ }
+ li#active a i svg path {
+ fill: #fee3d0 !important;
+ }
ul li{
padding: 0 15px;
height: 20px;
@@ -143,62 +150,88 @@
position: relative;
padding-left: 26px;
/* menu icons */
- >i{
+ >svg{
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;
- }
}
}
+
+ .icon-dashboard {
+ width: 16px;
+ height: 16px;
+ }
+ #active svg.icon-dashboard g {
+ color: #fee3d0 !important;
+ }
+ #active svg.icon-dashboard-active g {
+ color: #fee3d0 !important;
+ }
+ .icon-dashboard-hover {
+ color: $tc-orange-30;
+ }
+ .icon-dashboard-active {
+ color: $tc-orange-70;
+ }
+
+ .icon-specification {
+ width: 16px;
+ height: 16px;
+ }
+ #active svg.icon-specification g {
+ color: #fee3d0 !important;
+ }
+ #active svg.icon-specification-active g {
+ color: #fee3d0 !important;
+ }
+ li#active a i svg g {
+ fill: #fee3d0 !important;
+ }
+ .icon-specification-hover {
+ color: $tc-orange-30;
+ }
+ .icon-specification-active {
+ color: $tc-orange-70;
+ }
+
+ .icon-messages {
+ width: 16px;
+ height: 16px;
+ }
+ #active a i svg g {
+ color: #fee3d0 !important;
+ }
+ .icon-messages-hover {
+ color: $tc-orange-30;
+ }
+ .icon-messages-active {
+ color: $tc-orange-70;
+ }
+
+ .icon-challenges {
+ width: 16px;
+ height: 16px;
+ }
+ #active a i svg g {
+ color: #fee3d0 !important;
+ }
+ .icon-challenges-hover {
+ color: $tc-orange-30;
+ }
+ .icon-challenges-active {
+ color: $tc-orange-70;
+ }
+
&: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;
- }
- }
}
}
}
@@ -271,7 +304,12 @@
}
a {
padding-left: 16px;
- text-indent: -9999px;
+ span {
+ display: none;
+ }
+ svg {
+ position:relative;
+ }
}
}
}
diff --git a/src/components/TopBar/ProjectsToolBar.js b/src/components/TopBar/ProjectsToolBar.js
index 1e6ecc63a..47acb0625 100644
--- a/src/components/TopBar/ProjectsToolBar.js
+++ b/src/components/TopBar/ProjectsToolBar.js
@@ -11,7 +11,7 @@ import { SearchBar, MenuBar, SwitchButton } from 'appirio-tech-react-components'
import Filters from './Filters'
import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
import NewProjectNavLink from './NewProjectNavLink'
-
+import SearchFilter from '../../assets/icons/ui-filters.svg'
import { projectSuggestions, loadProjects, setInfiniteAutoload } from '../../projects/actions/loadProjects'
@@ -145,7 +145,7 @@ class ProjectsToolBar extends Component {
excludedFiltersCount++
}
// Ignore status from filters count
- const noOfFilters = _.keys(_.omit(criteria, ['status'])).length - excludedFiltersCount
+ const noOfFilters = _.keys(_.omit(criteria, ['status', 'keyword'])).length - excludedFiltersCount
const onLeaveMessage = this.onLeave() || ''
const primaryNavigationItems = [
@@ -194,7 +194,7 @@ class ProjectsToolBar extends Component {
href="javascript:"
className={cn('tc-btn tc-btn-sm', {active: isFilterVisible})}
onClick={ this.toggleFilter }
- >Filters { noOfFilters > 0 && { noOfFilters } }
+ >
{project && }
{props.title}
- const close = {props.menu}
: null
return (
diff --git a/src/components/TopBar/SectionToolBar.scss b/src/components/TopBar/SectionToolBar.scss
index 512341825..3ae55386a 100644
--- a/src/components/TopBar/SectionToolBar.scss
+++ b/src/components/TopBar/SectionToolBar.scss
@@ -35,14 +35,16 @@
&:hover {
background-color: #55a5ff;
- > svg {
+ .icon-x-mark {
fill: $tc-white;
+ margin: -6px;
}
}
- > svg {
- fill: $tc-black;
- }
+ .icon-x-mark {
+ fill: $tc-black;
+ margin: -6px;
+ }
}
> .section > .menu {
@@ -66,9 +68,10 @@
align-items: center;
display: flex;
- > svg {
+ .icon-connect-logo-mono {
height: auto;
width: 53px;
+ margin-top: 13px;
path {
fill: $tc-gray-10;
diff --git a/src/components/TopBar/TopBarContainer.js b/src/components/TopBar/TopBarContainer.js
index 45da07670..e2ba61a18 100644
--- a/src/components/TopBar/TopBarContainer.js
+++ b/src/components/TopBar/TopBarContainer.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router-dom'
import _ from 'lodash'
import { UserDropdown } from 'appirio-tech-react-components'
-import SVGIconImage from '../SVGIconImage'
import {
ACCOUNTS_APP_LOGIN_URL,
ACCOUNTS_APP_REGISTER_URL,
@@ -13,8 +12,10 @@ import {
ROLE_CONNECT_ADMIN,
DOMAIN
} from '../../config/constants'
+import ConnectLogoMono from '../../assets/icons/connect-logo-mono.svg'
require('./TopBarContainer.scss')
+
class TopBarContainer extends React.Component {
constructor(props) {
@@ -42,7 +43,7 @@ class TopBarContainer extends React.Component {
return (
-
@@ -65,6 +66,7 @@ class TopBarContainer extends React.Component {
const isHomePage = this.props.match.path === '/'
const loginUrl = `${ACCOUNTS_APP_LOGIN_URL}?retUrl=${window.location.protocol}//${window.location.host}/`
const registerUrl = !isHomePage ? ACCOUNTS_APP_REGISTER_URL : null
+ const profileUrl = `https://${DOMAIN}/settings/profile/`
const logoutClick = (evt) => {
evt.preventDefault()
@@ -74,6 +76,7 @@ class TopBarContainer extends React.Component {
const userMenuItems = [
[
+ { label: 'Profile Settings', link: profileUrl, absolute: true, id: 0},
{ label: 'Help', link: 'https://help.topcoder.com/hc/en-us', absolute: true, id: 0 }
],
[
diff --git a/src/components/TopBar/TopBarContainer.scss b/src/components/TopBar/TopBarContainer.scss
index a3de3d34d..7013d66b6 100644
--- a/src/components/TopBar/TopBarContainer.scss
+++ b/src/components/TopBar/TopBarContainer.scss
@@ -40,7 +40,7 @@
// width: 60px;
// height: 36px;
- > svg {
+ .icon-connect-logo-mono {
height: auto;
width: 53px;
@@ -130,7 +130,7 @@
top: 50%;
margin-top: -4px;
height: 7.5px;
- //background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
+ // background: url("../../styles/i/arrow-down-black.png") right center no-repeat;
background-size: 10px 7.5px;
}
}
diff --git a/src/components/User/UserAvatar.jsx b/src/components/User/UserAvatar.jsx
deleted file mode 100644
index 88e6ed456..000000000
--- a/src/components/User/UserAvatar.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import LevelDesignatorIcon from '../../assets/LevelDesignatorIcon'
-import { memberLevelByRating } from '../../helpers'
-
-require('./UserAvatar.scss')
-
-const UserAvatar = ({ showLevel, rating, photoURL }) => {
- let levelIcon
-
- if (showLevel) {
- levelIcon =
- {levelIcon}
-
- )
-}
-
-
-UserAvatar.propTypes = {
- showLevel: PropTypes.bool,
- rating : PropTypes.number,
- photoURL : PropTypes.string
-}
-
-export default UserAvatar
diff --git a/src/components/User/UserTooltip.jsx b/src/components/User/UserTooltip.jsx
index 4432fd3d6..13d5b8e79 100644
--- a/src/components/User/UserTooltip.jsx
+++ b/src/components/User/UserTooltip.jsx
@@ -1,22 +1,24 @@
import React from 'react'
import PropTypes from 'prop-types'
-import _ from 'lodash'
import { Tooltip } from 'appirio-tech-react-components'
-import UserAvatar from './UserAvatar'
+import { Avatar } from 'appirio-tech-react-components'
import { DOMAIN } from '../../../config/constants'
require('./UserTooltip.scss')
-const UserTooltip = ({ usr, id, previewAvatar }) => {
- const rating = _.get(usr, 'maxRating.rating', 0)
- const theme = `customer-data level-${id}`
+const UserTooltip = ({ usr, id, previewAvatar, size }) => {
+ const theme = `customer-data size-${size}`
const tooltipMargin = previewAvatar ? -(100 + (id * 20)) : 0
return (
{
previewAvatar ? (
-
) :
{usr.firstName} {usr.lastName}
}
@@ -25,7 +27,10 @@ const UserTooltip = ({ usr, id, previewAvatar }) => {
@@ -51,10 +56,12 @@ UserTooltip.propTypes = {
PropTypes.string,
PropTypes.number
]).isRequired,
- previewAvatar: PropTypes.bool
+ previewAvatar: PropTypes.bool,
+ size: PropTypes.number
}
UserTooltip.defaultProps = {
+ size: 30,
previewAvatar: false
}
diff --git a/src/components/User/UserTooltip.scss b/src/components/User/UserTooltip.scss
index 36ae2feed..9063ee114 100644
--- a/src/components/User/UserTooltip.scss
+++ b/src/components/User/UserTooltip.scss
@@ -1,38 +1,19 @@
@import 'tc-includes';
-
.Tooltip {
&.customer-data {
-
- &.level-0 {
-
- .tooltip-target {
- z-index: 3;
- }
-
- .tooltip-container {
- margin-left: -40px;
+ .tooltip-target {
+ .Avatar {
+ height: 30px;
+ width: 30px;
}
}
- &.level-1 {
-
+ &.size-35 {
.tooltip-target {
- z-index: 2;
- }
-
- .tooltip-container {
- margin-left: -60px;
- }
- }
-
- &.level-2 {
-
- .tooltip-target {
- z-index: 1;
- }
-
- .tooltip-container {
- margin-left: -80px;
+ .Avatar {
+ height: 35px;
+ width: 35px;
+ }
}
}
@@ -41,12 +22,12 @@
}
.stack-avatar-1 {
- margin-left: -10px;
+ margin-left: -5px;
z-index: 2;
}
.stack-avatar-2 {
- margin-left: -10px;
+ margin-left: -5px;
z-index: 1;
}
@@ -64,28 +45,29 @@
}
}
+ .tooltip-pointer {
+ background-color: $tc-white;
+ display: block;
+ }
+
+ [data-placement="top"] .tooltip-pointer {
+ border-right: 1px solid rgba($tc-black, 0.2);
+ border-bottom: 1px solid rgba($tc-black, 0.2);
+ bottom: -11px !important;
+ }
+
+ [data-placement="bottom"] .tooltip-pointer {
+ border-left: 1px solid rgba($tc-black, 0.2);
+ border-top: 1px solid rgba($tc-black, 0.2);
+ top: -11px !important;
+ }
+
.tooltip-content-container {
background-color: $tc-white;
width: 400px;
padding-top: 20px;
padding-left: 20px;
- .tooltip-pointer {
- background-color: $tc-white;
-
- &.downward-pointer {
- border-right: 1px solid rgba($tc-black, 0.2);
- border-bottom: 1px solid rgba($tc-black, 0.2);
- bottom: -11px !important;
- }
-
- &.upward-pointer {
- border-left: 1px solid rgba($tc-black, 0.2);
- border-top: 1px solid rgba($tc-black, 0.2);
- top: -11px !important;
- }
- }
-
.tooltip-body {
color: $tc-black;
overflow: hidden;
@@ -172,12 +154,11 @@
.ext-link {
position: relative;
font-size: 11px;
- color: $tc-dark-blue-90;
+ color: $tc-dark-blue;
padding-right: 20px;
&:after {
content: "";
- background: url('./images/external-link.svg') no-repeat 0 0;
width: 13px;
height: 13px;
position: absolute;
diff --git a/src/components/User/UserWithName.jsx b/src/components/User/UserWithName.jsx
index 27b7e3e65..c3a24a390 100644
--- a/src/components/User/UserWithName.jsx
+++ b/src/components/User/UserWithName.jsx
@@ -1,15 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import { DOMAIN } from '../../config/constants'
-import UserAvatar from './UserAvatar'
+import { Avatar } from 'appirio-tech-react-components'
require('./UserWithName.scss')
-const UserWithName = ({ handle, firstName, lastName, photoURL, maxRating={rating: 0}, showLevel=false }) => {
+const UserWithName = ({ handle, firstName, lastName, photoURL }) => {
const url = `//www.${DOMAIN}/members/${handle}/`
return (
- {
+ switch(type){
+ case 'product-analytics-algorithm-optimization':
+ return
}
diff --git a/src/projects/detail/components/FeatureSelector/FeaturePicker.jsx b/src/projects/detail/components/FeatureSelector/FeaturePicker.jsx
index 837dcefdd..ef9bcce68 100644
--- a/src/projects/detail/components/FeatureSelector/FeaturePicker.jsx
+++ b/src/projects/detail/components/FeatureSelector/FeaturePicker.jsx
@@ -7,35 +7,47 @@ import PickerFeatureList from './PickerFeatureList'
import DefaultFeatureForm from './DefaultFeatureForm'
import CustomFeatureForm from './CustomFeatureForm'
import FeaturePreview from './FeaturePreview'
+import IconLoginReg from '../../../../assets/icons/login-reg.svg'
+import IconGeneralBuildingBlocks from '../../../../assets/icons/general-building-blocks.svg'
+import IconEcommerce from '../../../../assets/icons/ecommerce.svg'
+import IconSocial from '../../../../assets/icons/social.svg'
+import IconCustomFeatures from '../../../../assets/icons/custom-features.svg'
+import IconSecurityMinimal from '../../../../assets/icons/security-minimal.svg'
+import IconLocation from '../../../../assets/icons/location.svg'
+import IconPayment from '../../../../assets/icons/payments.svg'
+import IconNotifications from '../../../../assets/icons/notifications.svg'
+import IconAudio from '../../../../assets/icons/audio.svg'
require('./FeaturePicker.scss')
+
+
const categoriesList = [
{
id: 'login_registration',
label: 'Login & Registration',
order: 1,
- icon: require('./images/login-reg.svg')
+ icon: IconLoginReg
}, {
id: 'general_building_blocks',
label: 'General Building Blocks',
order: 2,
- icon: require('./images/general-building-blocks.svg')
+ icon: IconGeneralBuildingBlocks
}, {
id: 'ecommerce',
label: 'Ecommerce',
order: 3,
- icon : require('./images/ecommerce.svg')
+ icon: IconEcommerce
}, {
id: 'social',
label: 'Social',
order: 4,
- icon: require('./images/social.svg')
+ icon: IconSocial
}, {
id: 'custom',
label: 'Custom Features',
order: 5,
- icon: require('./images/custom-features.svg')
+ icon: IconCustomFeatures
}
]
@@ -46,147 +58,147 @@ const AVAILABLE_FEATURES = [
title: 'Email Login',
description: 'Allow users to register and log in using their email address and a password. Users can also change their password or recover a forgotten one.',
custom: null,
- icon: require('./images/login-reg.svg')
+ icon: IconLoginReg
},
{
categoryId: 'login_registration',
id: 'social_login',
title: 'Social Login',
description: 'Allow users to register and log in using third-party services such as Facebook, Twitter, and Google. Please specify below the ones that you would like to use.',
- icon: require('./images/security-minimal.svg')
+ icon: IconSecurityMinimal
},
{
categoryId: 'login_registration',
id: 'invitations',
title: 'Invitations',
description: 'Allow users to invite others to use your app. This functionality is especially useful if you are building a social application or provide incentives for users to invite their friends. Invitations can be sent via email or text message. Please specify your preference below.',
- icon: require('./images/login-reg.svg')
+ icon: IconLoginReg
}, {
categoryId: 'login_registration',
id: 'introductions',
title: 'Introductions',
description: 'Present your app and inform users of core functionality using a series of introductory screens before they sign up.',
- icon: require('./images/location.svg')
+ icon: IconLocation
}, {
categoryId: 'login_registration',
id: 'onboarding',
title: 'Onboarding',
description: 'Virtually walk your users through your application. This functionality is especially useful if you need new users to set up an account or express preferences after they sign up.',
- icon: require('./images/social.svg')
+ icon: IconSocial
}, {
categoryId: 'general_building_blocks',
id: 'search',
title: 'Search',
description: 'Provide the ability to search your app for specific content, such as products, members, or locations. Please specify below if you also would like autocomplete--suggesting appropriate search terms as a user starts typing.',
- icon: require('./images/ecommerce.svg')
+ icon: IconEcommerce
}, {
categoryId: 'general_building_blocks',
id: 'geolocation_features',
title: 'Geolocation Features',
description: 'Add this feature if your app has any geographic location-based functionality, such as showing store locations on a map or illustrating the progress of a delivery. Please specify your desired functionality below.',
- icon: require('./images/payments.svg')
+ icon: IconPayment
}, {
categoryId: 'general_building_blocks',
id: 'camera_audio_video',
title: 'Camera (Audio & Video)',
description: 'Add this feature if your app will require using the camera to capture audio or video. Please specify your desired usage below.',
- icon: require('./images/notifications.svg')
+ icon: IconNotifications
}, {
categoryId: 'general_building_blocks',
id: 'file_upload',
title: 'File Upload',
description: 'Allow users to upload photos or other files. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'notifications',
title: 'Notifications',
description: 'Take advantage of notifications; for example, remind users to do certain tasks or update them on new content. Please specify your desired functionality below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'sharing',
title: 'Sharing',
description: 'Allow users to share content from your app using common options, such as email, text message, or Facebook. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'tags',
title: 'Tags',
description: 'Allow users to tag products, people or content; for example, in order to classify and easily retrieve notes. Please specify your desired functionality below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'admin_functionality',
title: 'Admin Functionality',
description: 'Add this feature if your app will have users that serve as administrators and require special access rights. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'account_settings',
title: 'Account Settings',
description: 'Allow your users to adjust settings or specify preferences, such as communication frequency. Please specify your desired functionality below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'dashboard',
title: 'Dashboard',
description: 'Customize your users’ home screen with personalized content or basic performance indicators, such as number of wins or progress toward a goal. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'general_building_blocks',
id: 'help',
title: 'Help',
description: 'Include a section dedicated to FAQ or Help content.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'ecommerce',
id: 'marketplace',
title: 'Marketplace',
description: 'Allow users to buy, sell, or rent products or services. Please provide details below regarding how your marketplace should work. ',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'ecommerce',
id: 'rations_reviews',
title: 'Ratings & Reviews',
description: 'Let users rate or review people, products, or services. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'ecommerce',
id: 'payments',
title: 'Payments',
description: 'Allow users to pay in some way; for example, using credit cards, PayPal, or Bitcoin. Please specify your desired functionality below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'ecommerce',
id: 'shopping_cart',
title: 'Shopping Cart',
description: 'Allow users to save items before purchasing. Please specify your desired usage below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'ecommerce',
id: 'product_listing',
title: 'Product Listing',
description: 'Add this feature to shows lists of product or services, with individual detail pages for each one. Please specify below your desired usage and the information you would like in a product listing.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'social',
id: 'activity_feed',
title: 'Activity Feed',
description: 'Show your users an activity feed of some kind, as they’re used to seeing on Facebook and Twitter, for example. Please specify below your desired usage and the information that a user should see in the activity feed.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'social',
id: 'profiles',
title: 'Profiles',
description: 'Add this feature if your app requires users to have a profile, including the ability to edit it. Please specify below your desired usage and the information you need in the profile.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}, {
categoryId: 'social',
id: 'messaging',
title: 'Messaging',
description: 'Allow direct communication between two or more users. Please specify your desired functionality below.',
- icon: require('./images/audio.svg')
+ icon: IconAudio
}
]
const categorizedFeatureSet = _.groupBy(AVAILABLE_FEATURES, val => val.categoryId)
diff --git a/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx b/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
index 0636f90b0..4b69a57d5 100644
--- a/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
+++ b/src/projects/detail/components/FeatureSelector/FeaturePreview.jsx
@@ -1,34 +1,50 @@
import React from 'react'
+import DeviceIphone from '../../../../assets/icons/Device-iPhone.svg'
require('./FeaturePreview.scss')
-const FeaturePreview = props => {
- const { feature, addingCustomFeature } = props
- let previewImg = null
- if (!feature && !addingCustomFeature) {
- previewImg = require('./images/Default-preview.png')
- } else if (addingCustomFeature || feature.categoryId === 'custom') {
- previewImg = require('./images/Custom-feature.png')
- } else {
- // TODO change image names to match feature id
- previewImg = require('./images/' + feature.title + '.png')
+
+class FeaturePreview extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {maskUrl: ''}
+ }
+
+ componentDidMount() {
+ document.querySelector('.mask').href.baseVal = this.state.maskUrl
}
- // // if feature is activated and is not a customer feature
- // if (feature && feature.type !== 'custom') {
- // previewImg = require('./images/' + feature.title + '.png')
- // } else if ((feature && feature.custom) || addingCustomFeature) { // if active/non-active custom feature
- // previewImg = require('./images/Custom-feature.png')
- // } else {
- // previewImg = require('./images/Default-preview.png')
- // }
- return (
-
-
Welcome back!
You started a project with us recently.
diff --git a/src/projects/create/components/ProductCard.scss b/src/projects/create/components/ProductCard.scss index b014543e9..a526bc564 100644 --- a/src/projects/create/components/ProductCard.scss +++ b/src/projects/create/components/ProductCard.scss @@ -45,6 +45,7 @@ letter-spacing: -0.4px; @include transition; } + .icon-wrapper { svg { fill: $tc-gray-70; @@ -52,7 +53,7 @@ &:hover { svg { - fill: $tc-dark-blue-90; + fill: $tc-dark-blue; } } } diff --git a/src/projects/create/components/ProjectTypeCard.scss b/src/projects/create/components/ProjectTypeCard.scss index fafe67f91..c9361354a 100644 --- a/src/projects/create/components/ProjectTypeCard.scss +++ b/src/projects/create/components/ProjectTypeCard.scss @@ -60,7 +60,7 @@ } svg { - fill: $tc-dark-blue-90; + fill: $tc-dark-blue; } } diff --git a/src/projects/create/components/SelectProduct.js b/src/projects/create/components/SelectProduct.js index 2bf2647cb..0c32e53ea 100644 --- a/src/projects/create/components/SelectProduct.js +++ b/src/projects/create/components/SelectProduct.js @@ -2,9 +2,118 @@ import React from 'react' import PT from 'prop-types' import config from '../../../config/projectWizard' import ProductCard from './ProductCard' -import SVGIconImage from '../../../components/SVGIconImage' import { findCategory } from '../../../config/projectWizard' import './SelectProduct.scss' +import IconAnalyticsAlgorithmOptimization from '../../../assets/icons/product-analytics-algorithm-optimization.svg' +import IconAnalyticsComputerVision from '../../../assets/icons/product-analytics-computer-vision.svg' +import IconAnalyticsDataExploration from '../../../assets/icons/product-analytics-data-exploration.svg' +import IconAnalyticsPredictiveAnalytics from '../../../assets/icons/product-analytics-predictive-analytics.svg' +import IconAppApp from '../../../assets/icons/product-app-app.svg' +import IconCatAnalytics from '../../../assets/icons/product-cat-analytics.svg' +import IconCatApp from '../../../assets/icons/product-cat-app.svg' +import IconCatChatbot from '../../../assets/icons/product-cat-chatbot.svg' +import IconCatDesign from '../../../assets/icons/product-cat-design.svg' +import IconCatDevelopment from '../../../assets/icons/product-cat-development.svg' +import IconCatQa from '../../../assets/icons/product-cat-qa.svg' +import IconCatWebsite from '../../../assets/icons/product-cat-website.svg' +import IconChatbotChatbot from '../../../assets/icons/product-chatbot-chatbot.svg' +import IconChatbotWatson from '../../../assets/icons/product-chatbot-watson.svg' +import IconDesignAppVisual from '../../../assets/icons/product-design-app-visual.svg' +import IconDesignInfographic from '../../../assets/icons/product-design-infographic.svg' +import IconDesignOther from '../../../assets/icons/product-design-other.svg' +import IconDesignWireframes from '../../../assets/icons/product-design-wireframes.svg' +import IconDevFrontendDev from '../../../assets/icons/product-dev-front-end-dev.svg' +import IconDevIntegration from '../../../assets/icons/product-dev-integration.svg' +import IconDevOther from '../../../assets/icons/product-dev-other.svg' +import IconDevPrototype from '../../../assets/icons/product-dev-prototype.svg' +import IconOtherDesign from '../../../assets/icons/product-other-design.svg' +import IconQaConsulting from '../../../assets/icons/product-qa-consulting.svg' +import IconQaCrowdTesting from '../../../assets/icons/product-qa-crowd-testing.svg' +import IconQaDigitalAccessability from '../../../assets/icons/product-qa-digital-accessability.svg' +import IconQaHelthCheck from '../../../assets/icons/product-qa-health-check.svg' +import IconQaMobilityTesting from '../../../assets/icons/product-qa-mobility-testing.svg' +import IconQaOsAutomation from '../../../assets/icons/product-qa-os-automation.svg' +import IconQaWebsitePrerfomance from '../../../assets/icons/product-qa-website-performance.svg' +import IconWebsiteWebsite from '../../../assets/icons/product-website-website.svg' +import IconOutlineWorkProject from '../../../assets/icons/tech-32px-outline-work-project.svg' + +/** + * @params {string} type project type + */ +const ProjectTypeIcons = ({ type }) => { + switch (type) { + case 'product-analytics-algorithm-optimization': + return
-
Create a new project
diff --git a/src/projects/detail/ProjectDetail.jsx b/src/projects/detail/ProjectDetail.jsx index 2c14aa221..a54f983cb 100644 --- a/src/projects/detail/ProjectDetail.jsx +++ b/src/projects/detail/ProjectDetail.jsx @@ -48,7 +48,7 @@ class ProjectDetail extends Component { this.props.loadProjectDashboard(projectId) } - componentWillReceiveProps({isProcessing, isLoading, error, project, match}) { + componentWillReceiveProps({isProcessing, isLoading, error, project, match, location}) { // handle just deleted projects if (! (error || isLoading || isProcessing) && _.isEmpty(project)) this.props.history.push('/projects/') @@ -60,6 +60,11 @@ class ProjectDetail extends Component { if (this.props.match.params.projectId !== match.params.projectId) { this.props.loadProjectDashboard(match.params.projectId) } + + // reload project details if navigating by Link to same page + if (this.props.location.key !== location.key) { + this.props.loadProjectDashboard(match.params.projectId) + } } getProjectRoleForCurrentUser({currentUserId, project}) { diff --git a/src/projects/detail/components/EditProjectForm.jsx b/src/projects/detail/components/EditProjectForm.jsx index ffa9a1133..5a9145a7a 100644 --- a/src/projects/detail/components/EditProjectForm.jsx +++ b/src/projects/detail/components/EditProjectForm.jsx @@ -6,8 +6,8 @@ import _ from 'lodash' import { unflatten } from 'flat' import update from 'react-addons-update' import FeaturePicker from './FeatureSelector/FeaturePicker' -import { Formsy, Icons } from 'appirio-tech-react-components' - +import { Formsy } from 'appirio-tech-react-components' +import XMarkIcon from '../../../assets/icons/icon-x-mark.svg' import SpecSection from './SpecSection' import { HOC as hoc } from 'formsy-react' @@ -33,7 +33,7 @@ const FeaturePickerModal = ({ project, isEdittable, showFeaturesDialog, hideFeat isEdittable={isEdittable} onSave={ setFormValue } />
- Save and close
)
@@ -100,6 +100,14 @@ class EditProjectForm extends Component {
window.addEventListener('beforeunload', this.onLeave)
}
+ autoResize() {
+ if (self.autoResizeSet === true) { return }
+ self.autoResizeSet = true
+ setTimeout(() => {
+ window.dispatchEvent(new Event('resize'))
+ }, 1000)
+ }
+
componentWillUnmount() {
this.props.fireProjectDirtyUndo()
window.removeEventListener('beforeunload', this.onLeave)
@@ -107,8 +115,9 @@ class EditProjectForm extends Component {
// Notify user if they navigate away while the form is modified.
onLeave(e = {}) {
+ this.autoResize()
if (this.isChanged()) {
- // TODO: remove this block - it disables unsaved changes popup
+ // TODO: remove this block - it disables unsaved changes popup
// for app screens changes
if (this.refs.form){
const pristine = this.refs.form.getPristineValues()
@@ -237,7 +246,7 @@ class EditProjectForm extends Component {
value={ _.get(project, 'details.appDefinition.features', {})}
/>
-
+
-
- 
+ componentDidUpdate() {
+ document.querySelector('.mask').href.baseVal = this.state.maskUrl
+ }
+
+ render() {
+
+ const { feature, addingCustomFeature } = this.props
+ let previewImg = null
+ if (!feature && !addingCustomFeature) {
+ previewImg = require('./images/Default-preview.png')
+ } else if (addingCustomFeature || feature.categoryId === 'custom') {
+ previewImg = require('./images/Custom-feature.png')
+ } else {
+ // TODO change image names to match feature id
+ previewImg = require('./images/' + feature.title + '.png')
+ }
+ this.state.maskUrl = previewImg
+ // // if feature is activated and is not a customer feature
+ // if (feature && feature.type !== 'custom') {
+ // previewImg = require('./images/' + feature.title + '.png')
+ // } else if ((feature && feature.custom) || addingCustomFeature) { // if active/non-active custom feature
+ // previewImg = require('./images/Custom-feature.png')
+ // } else {
+ // previewImg = require('./images/Default-preview.png')
+ // }
+ return (
+
- )
+ )
+ }
}
export default FeaturePreview
diff --git a/src/projects/detail/components/FeatureSelector/FeaturePreview.scss b/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
index f0b6d33ad..1659cb4d9 100644
--- a/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
+++ b/src/projects/detail/components/FeatureSelector/FeaturePreview.scss
@@ -3,28 +3,26 @@
.feature-preview {
text-align: center;
// padding: (8 * $base-unit) (12 * $base-unit) ;
- // background: url('./images/Device-iPhone.svg') no-repeat;
+ // background: url('p') no-repeat;
background-color: $tc-gray-neutral-light;
background-position: 50% 22px;
padding: 8 * $base-unit;
border-left: 1px solid $tc-dark-blue-30;
min-width: 260px;
display: block;
+ position: relative;
- .feature-preview-img {
- background: url('./images/Device-iPhone.svg') no-repeat;
+ .icon-feature-preview-img {
/*padding: (8 * $base-unit) (12 * $base-unit) ;*/
- padding: 22% 7%;
width: 100%;
max-width: 273px;
- background-size: contain;
}
-
+
img {
- display: inline-block;
- width: 100%;
- max-width: 235px;
/*max-height: 500px;*/
}
+}
+.mask {
+ margin: 100px;
}
\ No newline at end of file
diff --git a/src/projects/detail/components/FeatureSelector/FlattenedFeatureList.jsx b/src/projects/detail/components/FeatureSelector/FlattenedFeatureList.jsx
index 1aa28ba5c..130cbadbe 100644
--- a/src/projects/detail/components/FeatureSelector/FlattenedFeatureList.jsx
+++ b/src/projects/detail/components/FeatureSelector/FlattenedFeatureList.jsx
@@ -1,8 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import FeaturePicker from './FeaturePicker'
+import IconCustomFeatures from '../../../../assets/icons/custom-features.svg'
require('./FlattenedFeatureList.scss')
+
const allFeaturesMap = FeaturePicker.ALL_FEATURES_MAP
const FlattenedFeatureList = ({ addedFeatures }) => {
@@ -14,7 +16,7 @@ const FlattenedFeatureList = ({ addedFeatures }) => {
if (f.disabled) return
const feature = f.categoryId === 'custom' ? f : allFeaturesMap[f.id]
if (feature.categoryId === 'custom') {
- feature.icon = require('./images/custom-features.svg')
+ feature.icon = IconCustomFeatures
}
childrenDom.push(
+
-
diff --git a/src/projects/detail/components/FeatureSelector/PickerFeatureList.jsx b/src/projects/detail/components/FeatureSelector/PickerFeatureList.jsx
index 83ffa77ab..62cd03a00 100644
--- a/src/projects/detail/components/FeatureSelector/PickerFeatureList.jsx
+++ b/src/projects/detail/components/FeatureSelector/PickerFeatureList.jsx
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import { Icons } from 'appirio-tech-react-components'
+import IconUICheckBold from '../../../../assets/icons/icon-ui-check-bold.svg'
import classNames from 'classnames'
import _ from 'lodash'
require('./PickerFeatureList.scss')
@@ -36,7 +36,7 @@ class PickerFeatureList extends Component {
{name} {required && *}
- { isComplete ?
)
diff --git a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
index 54d0b9ca0..77eb9287c 100644
--- a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
+++ b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss
@@ -75,7 +75,7 @@
text-align: left;
text-indent: 0;
margin-bottom: 0;
- line-height: 25px;
+ line-height: 24.5px;
}
.radio-group-input,
diff --git a/src/projects/detail/components/SpecSection.jsx b/src/projects/detail/components/SpecSection.jsx
index bf1fc0576..173fdf3bc 100644
--- a/src/projects/detail/components/SpecSection.jsx
+++ b/src/projects/detail/components/SpecSection.jsx
@@ -28,7 +28,7 @@ const SpecSection = props => {
!subSection.hideTitle &&
diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js
index d67e3d095..342419e51 100644
--- a/src/projects/detail/containers/FeedContainer.js
+++ b/src/projects/detail/containers/FeedContainer.js
@@ -20,15 +20,15 @@ import ProjectSpecification from '../../../components/ProjectSpecification/Proje
import { loadDashboardFeeds, createProjectTopic, saveProjectTopic, deleteProjectTopic, loadFeedComments, addFeedComment, saveFeedComment, deleteFeedComment, getFeedComment } from '../../actions/projectTopics'
import spinnerWhileLoading from '../../../components/LoadingSpinner'
-import { Helpers, scroller } from 'react-scroll'
+import { ScrollElement, scroller } from 'react-scroll'
/*eslint-disable new-cap */
-const ScrollableFeed = Helpers.Element(Feed)
+const ScrollableFeed = ScrollElement(Feed)
const SYSTEM_USER = {
firstName: CODER_BOT_USER_FNAME,
lastName: CODER_BOT_USER_LNAME,
- photoURL: require('../../../assets/images/avatar-coder.png')
+ photoURL: require('../../../assets/images/avatar-coder.svg')
}
const isSystemUser = (userId) => [DISCOURSE_BOT_USERID, CODER_BOT_USERID].indexOf(userId) > -1
@@ -338,7 +338,7 @@ class FeedView extends React.Component {
}
render () {
- const {currentUser, project, currentMemberRole, isCreatingFeed, error } = this.props
+ const {currentUser, project, currentMemberRole, isCreatingFeed, error, allMembers} = this.props
const { feeds } = this.state
const showDraftSpec = project.status === PROJECT_STATUS_DRAFT && currentMemberRole === PROJECT_ROLE_CUSTOMER
const onLeaveMessage = this.onLeave() || ''
@@ -366,6 +366,7 @@ class FeedView extends React.Component {
onTopicChange={this.onTopicChange.bind(this, item.id)}
onSaveTopic={this.onSaveTopic.bind(this, item.id)}
onDeleteTopic={this.onDeleteTopic.bind(this, item.id)}
+ allMembers={allMembers}
>
{item.sendForReview &&
diff --git a/src/projects/list/components/Projects/ProjectCard.jsx b/src/projects/list/components/Projects/ProjectCard.jsx
index 382813c34..abce8629a 100644
--- a/src/projects/list/components/Projects/ProjectCard.jsx
+++ b/src/projects/list/components/Projects/ProjectCard.jsx
@@ -1,19 +1,23 @@
import React from 'react'
import PT from 'prop-types'
-import {Link} from 'react-router-dom'
+import { withRouter } from 'react-router-dom'
import { getProjectRoleForCurrentUser } from '../../../../helpers/projectHelper'
import AvatarGroup from '../../../../components/AvatarGroup/AvatarGroup'
import ProjectCardHeader from './ProjectCardHeader'
import ProjectCardBody from './ProjectCardBody'
import './ProjectCard.scss'
-function ProjectCard({ project, duration, disabled, currentUser }) {
-
+function ProjectCard({ project, duration, disabled, currentUser, history, onChangeStatus}) {
let className = `ProjectCard ${ disabled ? 'disabled' : 'enabled'}`
if (!project) return null
const currentMemberRole = getProjectRoleForCurrentUser({ project, currentUserId: currentUser.userId})
return (
-
+
{ feature.title }
- { isActive &&
diff --git a/src/projects/detail/components/FeatureSelector/images/Device-iPhone.svg b/src/projects/detail/components/FeatureSelector/images/Device-iPhone.svg
deleted file mode 100755
index e1e807c54..000000000
--- a/src/projects/detail/components/FeatureSelector/images/Device-iPhone.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/projects/detail/components/SidebarNav.jsx b/src/projects/detail/components/SidebarNav.jsx
index 31f60d3e3..891d25465 100644
--- a/src/projects/detail/components/SidebarNav.jsx
+++ b/src/projects/detail/components/SidebarNav.jsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link as DirectLink } from 'react-scroll'
import cn from 'classnames'
-import { Icons } from 'appirio-tech-react-components'
+import IconUICheckBold from '../../../assets/icons/icon-ui-check-bold.svg'
require('./SidebarNav.scss')
@@ -29,7 +29,7 @@ const renderSubNavItems = (child, idx) => {
- {typeof subSection.title === 'function' ? subSection.title(project): subSection.title } + {typeof subSection.title === 'function' ? subSection.title(project): subSection.title } {((typeof subSection.required === 'function') ? subSection.required(project, subSections) : subSection.required) ? '*' : ''}
@@ -383,6 +384,7 @@ class FeedView extends React.Component {
/>
[DISCOURSE_BOT_USERID, CODER_BOT_USERID].indexOf(userId) > -1
diff --git a/src/projects/detail/containers/ProjectInfoContainer.js b/src/projects/detail/containers/ProjectInfoContainer.js
index 970b28a60..1583414ad 100644
--- a/src/projects/detail/containers/ProjectInfoContainer.js
+++ b/src/projects/detail/containers/ProjectInfoContainer.js
@@ -46,12 +46,12 @@ class ProjectInfoContainer extends React.Component {
this.setDuration(project)
}
- onChangeStatus(status, reason) {
+ onChangeStatus(projectId, status, reason) {
const delta = {status}
if (reason && status === PROJECT_STATUS_CANCELLED) {
delta.cancelReason = reason
}
- this.props.updateProject(this.props.project.id, delta)
+ this.props.updateProject(projectId, delta)
}
onAddNewLink(link) {
diff --git a/src/projects/detail/containers/Specification.scss b/src/projects/detail/containers/Specification.scss
index b8b609560..ec41a5e46 100644
--- a/src/projects/detail/containers/Specification.scss
+++ b/src/projects/detail/containers/Specification.scss
@@ -952,7 +952,7 @@ $sideBarMaxWidth: 360px;
right: 10px;
width: 15px;
height: 15px;
- background: $tc-dark-blue-90;
+ background: $tc-dark-blue;
border-radius: 2px;
}
diff --git a/src/projects/detail/containers/SpecificationContainer.jsx b/src/projects/detail/containers/SpecificationContainer.jsx
index 3f4e22470..eff47a15c 100644
--- a/src/projects/detail/containers/SpecificationContainer.jsx
+++ b/src/projects/detail/containers/SpecificationContainer.jsx
@@ -12,7 +12,6 @@ import EditProjectForm from '../components/EditProjectForm'
import { findProduct } from '../../../config/projectWizard'
import { updateProject, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
import spinnerWhileLoading from '../../../components/LoadingSpinner'
-// import { Icons } from 'appirio-tech-react-components'
import typeToSpecification from '../../../config/projectSpecification/typeToSpecification'
require('./Specification.scss')
diff --git a/src/projects/list/components/Projects/NewProjectCard.jsx b/src/projects/list/components/Projects/NewProjectCard.jsx
index ac96ed466..92b31c457 100644
--- a/src/projects/list/components/Projects/NewProjectCard.jsx
+++ b/src/projects/list/components/Projects/NewProjectCard.jsx
@@ -1,8 +1,9 @@
import React from 'react'
import {Link} from 'react-router-dom'
-import SVGIconImage from '../../../../components/SVGIconImage'
import './ProjectCard.scss'
+import BoldAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
+
function NewProjectCard() {
return (
@@ -11,7 +12,7 @@ function NewProjectCard() {
-
New Project
{
+ history.push(`/projects/${project.id}/`)
+ }}
+ >
)
}
@@ -42,4 +47,4 @@ ProjectCard.propTypes = {
// duration: PT.object.isRequired,
}
-export default ProjectCard
+export default withRouter(ProjectCard)
diff --git a/src/projects/list/components/Projects/ProjectCard.scss b/src/projects/list/components/Projects/ProjectCard.scss
index c87a04b2b..5b51307e5 100644
--- a/src/projects/list/components/Projects/ProjectCard.scss
+++ b/src/projects/list/components/Projects/ProjectCard.scss
@@ -2,6 +2,7 @@
.ProjectCard {
display: flex;
+ cursor: pointer;
flex-direction: column;
height: 100%;
background-color: $tc-white;
@@ -9,7 +10,7 @@
padding: 4 * $base_unit;
&:hover {
- box-shadow: 0 2px 9px 0 rgba($tc-gray-90,0.15);
+ box-shadow: 0 2px 9px 0 rgba($tc-gray-90, 0.15);
}
&.NewProjectCard {
@@ -20,7 +21,7 @@
box-shadow: none;
.card-body .new-project-button .new-project-icon {
- @include background-gradient($tc-dark-blue-70, $tc-dark-blue-90);
+ @include background-gradient($tc-dark-blue-70, $tc-dark-blue);
}
}
@@ -32,7 +33,7 @@
.new-project-button {
@include tc-label-md;
text-transform: uppercase;
- color: $tc-dark-blue-90;
+ color: $tc-dark-blue;
display: flex;
justify-content: center;
flex-direction: column;
@@ -41,9 +42,10 @@
.new-project-icon {
width: 40px;
height: 40px;
- background-color: $tc-dark-blue-90;
+ background-color: $tc-dark-blue;
border-radius: 100%;
padding: 12px;
+
svg {
fill: $tc-white;
}
diff --git a/src/projects/list/components/Projects/ProjectCardBody.jsx b/src/projects/list/components/Projects/ProjectCardBody.jsx
index c88a88b6d..e1d25547a 100644
--- a/src/projects/list/components/Projects/ProjectCardBody.jsx
+++ b/src/projects/list/components/Projects/ProjectCardBody.jsx
@@ -39,6 +39,7 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount
canEdit={canEdit}
unifiedHeader={false}
onChangeStatus={onChangeStatus}
+ projectId={project.id}
/>
}
{(project.status === PROJECT_STATUS_ACTIVE && progress !== 0) &&
diff --git a/src/projects/list/components/Projects/ProjectCardBody.scss b/src/projects/list/components/Projects/ProjectCardBody.scss
index c53e5dbf6..1ab642b26 100644
--- a/src/projects/list/components/Projects/ProjectCardBody.scss
+++ b/src/projects/list/components/Projects/ProjectCardBody.scss
@@ -2,16 +2,17 @@
.project-card-body {
flex: 2;
+
.project-description {
overflow: hidden;
// max-height: 180px;
// min-height: 180px;
color: $tc-gray-80;
@include tc-label-md;
-
+
.read-more-link {
white-space: nowrap;
- color: $tc-dark-blue-90;
+ color: $tc-dark-blue;
}
}
@@ -21,25 +22,36 @@
display: flex;
justify-content: center;
margin-top: 20px;
- padding: 10px 0;
+ padding: 5px 0;
.panel { // avoid double padding for editable project status
padding: 0;
}
+ svg {
+ margin-top: 7px;
+ display: inline-block;
+ }
+
.status-header {
.status-label {
text-transform: uppercase;
+ line-height: 30px;
+ }
+
+ .caret {
+ margin-top: 3px;
}
}
.project-progress {
display: flex;
+
.progress-text {
text-transform: uppercase;
margin-left: 10px;
line-height: 16px;
- }
+ }
}
}
}
diff --git a/src/projects/list/components/Projects/ProjectCardHeader.jsx b/src/projects/list/components/Projects/ProjectCardHeader.jsx
index 076fe9ed7..a0522b02e 100644
--- a/src/projects/list/components/Projects/ProjectCardHeader.jsx
+++ b/src/projects/list/components/Projects/ProjectCardHeader.jsx
@@ -4,8 +4,117 @@ import React from 'react'
import PT from 'prop-types'
import TextTruncate from 'react-text-truncate'
import { findProduct } from '../../../../config/projectWizard'
-import SVGIconImage from '../../../../components/SVGIconImage'
import './ProjectCardHeader.scss'
+import IconAnalyticsAlgorithmOptimization from '../../../../assets/icons/product-analytics-algorithm-optimization.svg'
+import IconAnalyticsComputerVision from '../../../../assets/icons/product-analytics-computer-vision.svg'
+import IconAnalyticsDataExploration from '../../../../assets/icons/product-analytics-data-exploration.svg'
+import IconAnalyticsPredictiveAnalytics from '../../../../assets/icons/product-analytics-predictive-analytics.svg'
+import IconAppApp from '../../../../assets/icons/product-app-app.svg'
+import IconCatAnalytics from '../../../../assets/icons/product-cat-analytics.svg'
+import IconCatApp from '../../../../assets/icons/product-cat-app.svg'
+import IconCatChatbot from '../../../../assets/icons/product-cat-chatbot.svg'
+import IconCatDesign from '../../../../assets/icons/product-cat-design.svg'
+import IconCatDevelopment from '../../../../assets/icons/product-cat-development.svg'
+import IconCatQa from '../../../../assets/icons/product-cat-qa.svg'
+import IconCatWebsite from '../../../../assets/icons/product-cat-website.svg'
+import IconChatbotChatbot from '../../../../assets/icons/product-chatbot-chatbot.svg'
+import IconChatbotWatson from '../../../../assets/icons/product-chatbot-watson.svg'
+import IconDesignAppVisual from '../../../../assets/icons/product-design-app-visual.svg'
+import IconDesignInfographic from '../../../../assets/icons/product-design-infographic.svg'
+import IconDesignOther from '../../../../assets/icons/product-design-other.svg'
+import IconDesignWireframes from '../../../../assets/icons/product-design-wireframes.svg'
+import IconDevFrontendDev from '../../../../assets/icons/product-dev-front-end-dev.svg'
+import IconDevIntegration from '../../../../assets/icons/product-dev-integration.svg'
+import IconDevOther from '../../../../assets/icons/product-dev-other.svg'
+import IconDevPrototype from '../../../../assets/icons/product-dev-prototype.svg'
+import IconOtherDesign from '../../../../assets/icons/product-other-design.svg'
+import IconQaConsulting from '../../../../assets/icons/product-qa-consulting.svg'
+import IconQaCrowdTesting from '../../../../assets/icons/product-qa-crowd-testing.svg'
+import IconQaDigitalAccessability from '../../../../assets/icons/product-qa-digital-accessability.svg'
+import IconQaHelthCheck from '../../../../assets/icons/product-qa-health-check.svg'
+import IconQaMobilityTesting from '../../../../assets/icons/product-qa-mobility-testing.svg'
+import IconQaOsAutomation from '../../../../assets/icons/product-qa-os-automation.svg'
+import IconQaWebsitePrerfomance from '../../../../assets/icons/product-qa-website-performance.svg'
+import IconWebsiteWebsite from '../../../../assets/icons/product-website-website.svg'
+import IconOutlineWorkProject from '../../../../assets/icons/tech-32px-outline-work-project.svg'
+
+/**
+ * @params {string} type project type
+ */
+const ProjectTypeIcons = ({ type }) => {
+ switch(type){
+ case 'product-analytics-algorithm-optimization':
+ return
-
)
diff --git a/src/projects/list/components/Projects/ProjectDirectLinks.scss b/src/projects/list/components/Projects/ProjectDirectLinks.scss
index 8f2155fa7..3a48a6531 100644
--- a/src/projects/list/components/Projects/ProjectDirectLinks.scss
+++ b/src/projects/list/components/Projects/ProjectDirectLinks.scss
@@ -11,8 +11,9 @@
ul {
padding: 0;
li {
- background: url("../../assets/images/icon-direct-arrow.svg") no-repeat 0 center;
- padding-left: $base-unit*6;
+ .icon-direct-arrow {
+ margin-right: 20px;
+ }
}
}
}
\ No newline at end of file
diff --git a/src/projects/list/components/Projects/ProjectListNavHeader.jsx b/src/projects/list/components/Projects/ProjectListNavHeader.jsx
index a609cdf4e..0fe74bde0 100644
--- a/src/projects/list/components/Projects/ProjectListNavHeader.jsx
+++ b/src/projects/list/components/Projects/ProjectListNavHeader.jsx
@@ -1,8 +1,11 @@
require('./ProjectListNavHeader.scss')
import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import PT from 'prop-types'
import { PROJECT_STATUS } from '../../../../config/constants'
+import CardView from '../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
+import GridView from '../../../../assets/icons/grid-list-ico.svg'
+
export default class ProjectListNavHeader extends Component {
@@ -56,10 +59,14 @@ export default class ProjectListNavHeader extends Component {
@@ -67,6 +74,6 @@ export default class ProjectListNavHeader extends Component {
}
}
ProjectListNavHeader.propTypes = {
- applyFilters: PropTypes.func.isRequired,
- changeView: PropTypes.func.isRequired
+ applyFilters: PT.func.isRequired,
+ changeView: PT.func.isRequired
}
diff --git a/src/projects/list/components/Projects/ProjectListNavHeader.scss b/src/projects/list/components/Projects/ProjectListNavHeader.scss
index 0462cbfc1..fd9958345 100644
--- a/src/projects/list/components/Projects/ProjectListNavHeader.scss
+++ b/src/projects/list/components/Projects/ProjectListNavHeader.scss
@@ -9,6 +9,7 @@
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
+
.left-wrapper {
flex: 1 1 auto;
display: flex;
@@ -16,34 +17,42 @@
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
+
.list-nav-item {
flex: 0 1 auto;
}
}
+
.right-wrapper {
flex: 1 1 20%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
+
.list-nav-item {
flex: 1;
}
}
+
.list-nav-item {
position: relative;
display: block;
+
&.nav-icon {
flex: 0 0 46px;
}
}
+
.list-nav-btn {
position: relative;
display: inline-block;
background-color: transparent;
+
&:focus {
outline: 0;
}
+
&.lg {
padding: 0 15px;
margin-right: 5px;
@@ -54,12 +63,13 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-
}
+
&.sm {
width: 36px;
height: 30px;
}
+
&.active,
&:hover {
color: $tc-black;
@@ -69,43 +79,46 @@
border-radius: 6px;
box-shadow: 0px 1px 3px 0px $tc-gray-30;
}
+
&.right {
justify-content: flex-end;
}
- &.grid-view-ico {
- position: relative;
- i {
- font-size: 0;
- line-height: 0;
- background: url('./images/grid-list-ico.svg') no-repeat 0 0;
- width: 16px;
- height: 14px;
- display: block;
- position: absolute;
- top: 8px;
- left: 10px;
+
+ &.active {
+ .grid-view-ico g,
+ .card-view-ico path {
+ fill: $tc-black;
}
}
- &.card-view-ico {
+
+ .grid-view-ico {
position: relative;
- i {
- font-size: 0;
- line-height: 0;
- background: url('./images/ui-16px-2_grid-45-gray.svg') no-repeat 0 0;
- width: 16px;
- height: 16px;
- display: block;
- position: absolute;
- top: 7px;
- left: 10px;
- }
+ font-size: 0;
+ line-height: 0;
+ width: 16px;
+ height: 16px;
+ display: block;
+ position: absolute;
+ top: 8px;
+ left: 10px;
+ }
+
+ .card-view-ico {
+ position: relative;
+ font-size: 0;
+ line-height: 0;
+ width: 16px;
+ height: 16px;
+ display: block;
+ position: absolute;
+ top: 7px;
+ left: 10px;
+
&:hover i,
&.active i {
font-size: 0;
line-height: 0;
- background: url('./images/ui-16px-2_grid-45.svg') no-repeat 0 0;
}
}
}
-
}
diff --git a/src/projects/list/components/Projects/ProjectListProjectColHeader.jsx b/src/projects/list/components/Projects/ProjectListProjectColHeader.jsx
index 204d13bd8..4190f25d9 100644
--- a/src/projects/list/components/Projects/ProjectListProjectColHeader.jsx
+++ b/src/projects/list/components/Projects/ProjectListProjectColHeader.jsx
@@ -1,7 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
-import { Dropdown, DropdownItem } from 'appirio-tech-react-components'
+import cn from 'classnames'
+import { Dropdown } from 'appirio-tech-react-components'
+import IconCarretDownActive from '../../assets/icons/arrow-6px-carret-down-active.svg'
+import IconCarretDownNormal from '../../../../assets/icons/arrow-6px-carret-down-normal.svg'
+import IconCheckDark from '../../../../assets/icons/check-dark.svg'
const options = [
{ val: 'best match', label: 'Best Match' },
@@ -10,30 +14,65 @@ const options = [
{ val: 'name', label: 'Name A-Z' }
]
-const ProjectListProjectColHeader = ({currentSortField, sortHandler}) => {
- const cur = _.find(options, o => currentSortField.indexOf(o.val) > -1)
- || options[0]
-
- return (
-
+
-
- {directLinks.map((link, i) =>
- {link.name} )} + {directLinks.map((link, i) => +
+ {link.name} )}
- Projects
-
- {cur.label}
-
-
- )
+class ProjectListProjectColHeader extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = { focused: false }
+ }
+
+ toggleFocusState() {
+ this.state.focused = !this.state.focused
+ this.forceUpdate()
+ }
+
+ onOutsideClick(ev) {
+ const currNode = ev.target
+
+ if (currNode.className.indexOf('dropdown') > -1) {
+ return
+ }
+
+ this.state.focused = false
+ this.forceUpdate()
+ }
+
+ componentDidMount() {
+ document.addEventListener('click', ev => this.onOutsideClick(ev))
+ }
+
+ render() {
+ const {currentSortField, sortHandler} = this.props
+ const cur = _.find(options, o => currentSortField.indexOf(o.val) > -1)
+ || options[0]
+
+ return (
+
-
- -
- {
- options.map((item, i) =>
-
+ Projects
+
+ this.toggleFocusState(ev)}>
+ {cur.label}
+ {!this.state.focused?
+
+ )
+ }
}
diff --git a/src/projects/list/components/Projects/ProjectListTimeSortColHeader.jsx b/src/projects/list/components/Projects/ProjectListTimeSortColHeader.jsx
index 002c29b8d..3c577b447 100644
--- a/src/projects/list/components/Projects/ProjectListTimeSortColHeader.jsx
+++ b/src/projects/list/components/Projects/ProjectListTimeSortColHeader.jsx
@@ -1,7 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
-import { Dropdown, DropdownItem } from 'appirio-tech-react-components'
+import cn from 'classnames'
+import { Dropdown } from 'appirio-tech-react-components'
+import IconCarretDownActive from '../../../../assets/icons/arrow-6px-carret-down-active.svg'
+import IconCarretDownNormal from '../../../../assets/icons/arrow-6px-carret-down-normal.svg'
+import IconCheckDark from '../../../../assets/icons/check-dark.svg'
const options = [
{ val: 'updatedAt desc', label: 'Last Updated' },
@@ -9,29 +13,76 @@ const options = [
{ val: 'createdAt desc', label: 'Newest First' }
]
-const ProjectListTimeSortColHeader = ({currentSortField, sortHandler}) => {
- const cur = _.find(options, o => currentSortField === o.val)
- || options[0]
-
- return (
-
+
+ -
+ {
+ options.map((item, i) => {
+ const activeClass = cn({
+ active: item.val === currentSortField
+ })
+ return (
- sortHandler(item.val)}>
+ {activeClass?
: ''} + {item.label} + )
+ })
+ }
+
-
- {cur.label}
-
-
- )
+
+class ProjectListTimeSortColHeader extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = { focused: false }
+ this.onOutsideClick = this.onOutsideClick.bind(this)
+ }
+
+ toggleFocusState() {
+ this.setState({
+ focused: !this.state.focused
+ })
+ }
+
+ onOutsideClick(ev) {
+ const currNode = ev.target
+
+ if(typeof currNode.className === 'string' && currNode.className.indexOf('dropdown') > -1) {
+ return
+ }
+
+ if (this.refs.myRef) {
+ this.setState({
+ focused: false
+ })
+ }
+
+ }
+
+ componentDidMount() {
+ document.removeEventListener('click', this.onOutsideClick)
+ document.addEventListener('click', this.onOutsideClick)
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('click', this.onOutsideClick)
+ }
+
+ render() {
+ const cur = _.find(options, o => currentSortField === o.val)
+ || options[0]
+ const {currentSortField, sortHandler} = this.props
+
+ return (
+
-
- -
- {
- options.map((item, i) =>
-
+
+ this.toggleFocusState(ev)}>
+ {cur.label}
+ {!this.state.focused?
+
+ )
+ }
}
diff --git a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
index e84ccee4c..7e4b1fd6f 100644
--- a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
+++ b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx
@@ -9,13 +9,14 @@ const ProjectManagerAvatars = ({ managers }) => {
let extM = false
if (!managers || !managers.length)
return
+
+ -
+ {
+ options.map((item, i) => {
+ const activeClass = cn({
+ active: item.val === currentSortField
+ })
+ return (
- sortHandler(item.val)}>
+ {activeClass?
: ''} + {item.label} + )
+ })
+ }
+
Unclaimed
- if (managers.length > 3) {
- extM = managers.length - 3
- managers.length = 3
+ const uniqManagers = _.uniqBy(managers, 'userId')
+ if (uniqManagers.length > 3) {
+ extM = uniqManagers.length - 3
+ uniqManagers.length = 3
}
return (
- {_.uniqBy(managers, 'userId').map((user, i) => {
+ {uniqManagers.map((user, i) => {
return (
@@ -225,11 +227,12 @@ const mapStateToProps = ({ projectSearch, members, loadUser, projectState }) =>
pageNum : projectSearch.pageNum,
criteria : projectSearch.criteria,
infiniteAutoload: projectSearch.infiniteAutoload,
+ projectsListView: projectSearch.projectsListView,
isPowerUser,
gridView : isPowerUser
}
}
-const actionsToBind = { loadProjects, setInfiniteAutoload, updateProject }
+const actionsToBind = { loadProjects, setInfiniteAutoload, updateProject, setProjectsListView }
export default withRouter(connect(mapStateToProps, actionsToBind)(Projects))
diff --git a/src/projects/list/components/Projects/ProjectsCardView.jsx b/src/projects/list/components/Projects/ProjectsCardView.jsx
index e9572d249..ce50b4cb7 100644
--- a/src/projects/list/components/Projects/ProjectsCardView.jsx
+++ b/src/projects/list/components/Projects/ProjectsCardView.jsx
@@ -14,7 +14,7 @@ require('./ProjectsGridView.scss')
const ProjectsCardView = props => {
//const { projects, members, totalCount, criteria, pageNum, applyFilters, sortHandler, onPageChange, error, isLoading, onNewProjectIntent } = props
// TODO: use applyFilters and onNewProjectIntent. Temporary delete to avoid lint errors.
- const { projects, members, currentUser, onPageChange, pageNum, totalCount, infiniteAutoload, setInfiniteAutoload, isLoading, projectsStatus } = props
+ const { projects, members, currentUser, onPageChange, pageNum, totalCount, infiniteAutoload, setInfiniteAutoload, isLoading, projectsStatus, onChangeStatus } = props
// const currentSortField = _.get(criteria, 'sort', '')
// annotate projects with member data
@@ -36,6 +36,7 @@ const ProjectsCardView = props => {
project={project}
currentUser={currentUser}
duration={duration}
+ onChangeStatus={onChangeStatus}
/>
)
}
diff --git a/src/projects/list/components/Projects/ProjectsGridView.jsx b/src/projects/list/components/Projects/ProjectsGridView.jsx
index f45ebcc8d..e0185bd00 100644
--- a/src/projects/list/components/Projects/ProjectsGridView.jsx
+++ b/src/projects/list/components/Projects/ProjectsGridView.jsx
@@ -12,12 +12,125 @@ import { findProduct } from '../../../../config/projectWizard'
import TextTruncate from 'react-text-truncate'
import ProjectStatus from '../../../../components/ProjectStatus/ProjectStatus'
import editableProjectStatus from '../../../../components/ProjectStatus/editableProjectStatus'
-import SVGIconImage from '../../../../components/SVGIconImage'
import ProjectManagerAvatars from './ProjectManagerAvatars'
+import IconProjectStatusTitle from '../../../../assets/icons/status-ico.svg'
+import IconAnalyticsAlgorithmOptimization from '../../../../assets/icons/product-analytics-algorithm-optimization.svg'
+import IconAnalyticsComputerVision from '../../../../assets/icons/product-analytics-computer-vision.svg'
+import IconAnalyticsDataExploration from '../../../../assets/icons/product-analytics-data-exploration.svg'
+import IconAnalyticsPredictiveAnalytics from '../../../../assets/icons/product-analytics-predictive-analytics.svg'
+import IconAppApp from '../../../../assets/icons/product-app-app.svg'
+import IconCatAnalytics from '../../../../assets/icons/product-cat-analytics.svg'
+import IconCatApp from '../../../../assets/icons/product-cat-app.svg'
+import IconCatChatbot from '../../../../assets/icons/product-cat-chatbot.svg'
+import IconCatDesign from '../../../../assets/icons/product-cat-design.svg'
+import IconCatDevelopment from '../../../../assets/icons/product-cat-development.svg'
+import IconCatQa from '../../../../assets/icons/product-cat-qa.svg'
+import IconCatWebsite from '../../../../assets/icons/product-cat-website.svg'
+import IconChatbotChatbot from '../../../../assets/icons/product-chatbot-chatbot.svg'
+import IconChatbotWatson from '../../../../assets/icons/product-chatbot-watson.svg'
+import IconDesignAppVisual from '../../../../assets/icons/product-design-app-visual.svg'
+import IconDesignInfographic from '../../../../assets/icons/product-design-infographic.svg'
+import IconDesignOther from '../../../../assets/icons/product-design-other.svg'
+import IconDesignWireframes from '../../../../assets/icons/product-design-wireframes.svg'
+import IconDevFrontendDev from '../../../../assets/icons/product-dev-front-end-dev.svg'
+import IconDevIntegration from '../../../../assets/icons/product-dev-integration.svg'
+import IconDevOther from '../../../../assets/icons/product-dev-other.svg'
+import IconDevPrototype from '../../../../assets/icons/product-dev-prototype.svg'
+import IconOtherDesign from '../../../../assets/icons/product-other-design.svg'
+import IconQaConsulting from '../../../../assets/icons/product-qa-consulting.svg'
+import IconQaCrowdTesting from '../../../../assets/icons/product-qa-crowd-testing.svg'
+import IconQaDigitalAccessability from '../../../../assets/icons/product-qa-digital-accessability.svg'
+import IconQaHelthCheck from '../../../../assets/icons/product-qa-health-check.svg'
+import IconQaMobilityTesting from '../../../../assets/icons/product-qa-mobility-testing.svg'
+import IconQaOsAutomation from '../../../../assets/icons/product-qa-os-automation.svg'
+import IconQaWebsitePrerfomance from '../../../../assets/icons/product-qa-website-performance.svg'
+import IconWebsiteWebsite from '../../../../assets/icons/product-website-website.svg'
+import IconOutlineWorkProject from '../../../../assets/icons/tech-32px-outline-work-project.svg'
require('./ProjectsGridView.scss')
const EnhancedProjectStatus = editableProjectStatus(ProjectStatus)
+
+
+/**
+ * @params {string} class name
+ */
+const ProjectTypeIcons = ({ type }) => {
+ switch(type){
+ case 'product-analytics-algorithm-optimization':
+ return
+
diff --git a/src/routes/notifications/actions/index.js b/src/routes/notifications/actions/index.js
index 10e7e728d..7d886f0ea 100644
--- a/src/routes/notifications/actions/index.js
+++ b/src/routes/notifications/actions/index.js
@@ -68,6 +68,21 @@ export const toggleNotificationRead = (notificationId) => (dispatch) => {
})
}
+export const toggleBundledNotificationRead = (bundledNotificationId, bundledIds) => (dispatch) => {
+ dispatch({
+ type: NOTIFICATIONS_PENDING
+ })
+
+ notificationsService.markNotificationsRead(bundledIds.join('-')).then(() => {
+ dispatch({
+ type: TOGGLE_NOTIFICATION_READ,
+ payload: bundledNotificationId
+ })
+ }).catch(err => {
+ Alert.error(`Failed to mark notification read. ${err.message}`)
+ })
+}
+
export const viewOlderNotifications = (sourceId) => (dispatch) => dispatch({
type: VIEW_OLDER_NOTIFICATIONS_SUCCESS,
payload: sourceId
diff --git a/src/routes/notifications/constants/notifications.js b/src/routes/notifications/constants/notifications.js
index c6ca3094d..72d2c6da0 100644
--- a/src/routes/notifications/constants/notifications.js
+++ b/src/routes/notifications/constants/notifications.js
@@ -1,3 +1,9 @@
+/**
+ * Notifications rules
+ *
+ * Templates for `text`, `bundledText` and `GOTO` are handlebars templates.
+ * There are several custom Handlebars helpers defined in `../helpers/notifications.js`
+ */
import {
NOTIFICATION_TYPE,
ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR,
@@ -5,197 +11,348 @@ import {
} from '../../../config/constants'
const GOTO = {
- PROJECT_DASHBOARD: '/projects/[projectId]',
- PROJECT_SPECIFICATION: '/projects/[projectId]/specification',
- TOPIC: '/projects/[projectId]/#feed-[topicId]',
- POST: '/projects/[projectId]/#comment-[postId]',
- FILE_LIST: '/projects/[projectId]/specification#appDefinition-files'
+ PROJECT_DASHBOARD: '/projects/{{projectId}}',
+ PROJECT_SPECIFICATION: '/projects/{{projectId}}/specification',
+ TOPIC: '/projects/{{projectId}}/#feed-{{topicId}}',
+ POST: '/projects/{{projectId}}/#comment-{{postId}}',
+ FILE_LIST: '/projects/{{projectId}}/specification#appDefinition-files'
}
+// each notification can be displayed differently depend on WHO see them
+// that's why each notification can have several rules to display which describe user roles
+// NOTE for each version of notification have to repeat ALL rules, even if some rules are not changed
export const NOTIFICATIONS = [
// Outside project
{
eventType: 'notifications.connect.project.created',
type: NOTIFICATION_TYPE.NEW_PROJECT,
- text: 'Your Project was created successfully',
- projectRoles: [PROJECT_ROLE_OWNER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'Your Project was created successfully',
+ projectRoles: [PROJECT_ROLE_OWNER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.submittedForReview',
type: NOTIFICATION_TYPE.REVIEW_PENDING,
- text: 'Your project is now in review',
- projectRoles: [PROJECT_ROLE_OWNER]
- },
- {
- eventType: 'notifications.connect.project.submittedForReview',
- type: NOTIFICATION_TYPE.REVIEW_PENDING,
- text: 'Project is available for review',
- topcoderRoles: [ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR],
- goTo: GOTO.PROJECT_SPECIFICATION
+ rules: [{
+ text: 'Your project is now in review',
+ projectRoles: [PROJECT_ROLE_OWNER]
+ }, {
+ text: 'Project is available for review',
+ topcoderRoles: [ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR],
+ goTo: GOTO.PROJECT_SPECIFICATION
+ }]
},
{
eventType: 'notifications.connect.project.approved',
type: NOTIFICATION_TYPE.UPDATES,
- text: 'Your project was approved, work would soon start',
- projectRoles: [PROJECT_ROLE_OWNER]
- },
- {
- eventType: 'notifications.connect.project.approved',
- type: NOTIFICATION_TYPE.UPDATES,
- text: 'Project is available for pickup',
- topcoderRoles: [ROLE_CONNECT_COPILOT, ROLE_ADMINISTRATOR],
- goTo: GOTO.PROJECT_DASHBOARD
- },
- {
- eventType: 'notifications.connect.project.approved',
- type: NOTIFICATION_TYPE.UPDATES,
- text: 'Project was approved',
- projectRoles: [PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'Your project was approved, work would soon start',
+ projectRoles: [PROJECT_ROLE_OWNER]
+ }, {
+ text: 'Project is available for pickup',
+ topcoderRoles: [ROLE_CONNECT_COPILOT, ROLE_ADMINISTRATOR],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }, {
+ text: 'Project was approved',
+ projectRoles: [PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.paused',
type: NOTIFICATION_TYPE.REVIEW_PENDING,
- text: 'Your project was paused',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
- },
- {
- eventType: 'notifications.connect.project.paused',
- type: NOTIFICATION_TYPE.REVIEW_PENDING,
- text: 'A project was paused',
- topcoderRoles: [ROLE_ADMINISTRATOR],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'Your project was paused',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }, {
+ text: 'A project was paused',
+ topcoderRoles: [ROLE_ADMINISTRATOR],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.completed',
type: NOTIFICATION_TYPE.UPDATES,
- text: 'Your project completed successfully!',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.PROJECT_DASHBOARD
- },
- {
- eventType: 'notifications.connect.project.completed',
- type: NOTIFICATION_TYPE.UPDATES,
- text: 'A project was completed',
- topcoderRoles: [ROLE_ADMINISTRATOR],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'Your project completed successfully!',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }, {
+ text: 'A project was completed',
+ topcoderRoles: [ROLE_ADMINISTRATOR],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.canceled',
type: NOTIFICATION_TYPE.WARNING,
- text: 'Your project was canceled. If you think that was a mistake...',
- projectRoles: [PROJECT_ROLE_OWNER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'Your project was canceled. If you think that was a mistake...',
+ projectRoles: [PROJECT_ROLE_OWNER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
// User management
{
eventType: 'notifications.connect.project.member.joined',
type: NOTIFICATION_TYPE.MEMBER_ADDED,
- text: 'A new team member joined your project',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'A new team member joined your project',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} new team members joined your project',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.member.left',
type: NOTIFICATION_TYPE.WARNING,
- text: '[userHandle] left a project',
- projectRoles: [PROJECT_ROLE_MANAGER]
+ rules: [{
+ text: '{{userHandle}} left a project',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} team members left your project',
+ projectRoles: [PROJECT_ROLE_MANAGER]
+ }]
+ }, {
+ version: 2,
+ eventType: 'notifications.connect.project.member.left',
+ type: NOTIFICATION_TYPE.WARNING,
+ rules: [{
+ text: '{{userFullName}} left a project',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} team members left your project',
+ projectRoles: [PROJECT_ROLE_MANAGER]
+ }]
},
{
eventType: 'notifications.connect.project.member.removed',
type: NOTIFICATION_TYPE.WARNING,
- text: '[userHandle] was removed from project',
- projectRoles: [PROJECT_ROLE_MANAGER]
+ rules: [{
+ text: '{{userHandle}} was removed from project',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} team members were removed from your project',
+ projectRoles: [PROJECT_ROLE_MANAGER]
+ }, {
+ text: 'You were removed from a project',
+ toUserHandle: true
+ }]
}, {
+ version: 2,
eventType: 'notifications.connect.project.member.removed',
type: NOTIFICATION_TYPE.WARNING,
- text: 'You were removed from a project',
- toUserHandle: true
+ rules: [{
+ text: '{{userFullName}} was removed from project',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} team members were removed from your project',
+ projectRoles: [PROJECT_ROLE_MANAGER]
+ }, {
+ text: 'You were removed from a project',
+ toUserHandle: true
+ }]
},
{
eventType: 'notifications.connect.project.member.assignedAsOwner',
type: NOTIFICATION_TYPE.MEMBER_ADDED,
- text: 'You are now the owner of project',
- toUserHandle: true,
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'You are now the owner of project',
+ toUserHandle: true,
+ goTo: GOTO.PROJECT_DASHBOARD
+ }, {
+ text: 'Project owner was changed to {{userHandle}}',
+ projectRoles: [PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
}, {
+ version: 2,
eventType: 'notifications.connect.project.member.assignedAsOwner',
type: NOTIFICATION_TYPE.MEMBER_ADDED,
- text: 'Project owner was changed to [userHandle]',
- projectRoles: [PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'You are now the owner of project',
+ toUserHandle: true,
+ goTo: GOTO.PROJECT_DASHBOARD
+ }, {
+ text: 'Project owner was changed to {{userFullName}}',
+ projectRoles: [PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.member.copilotJoined',
type: NOTIFICATION_TYPE.MEMBER_ADDED,
- text: 'A copilot joined your project team',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'A copilot joined your project team',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} copilots joined your project team',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.member.managerJoined',
type: NOTIFICATION_TYPE.MEMBER_ADDED,
- text: 'A manager joined your project team',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: 'A manager joined your project team',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} managers joined your project team',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.topic.created',
type: NOTIFICATION_TYPE.NEW_POSTS,
- text: '[userHandle] created a new post ',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.TOPIC
+ rules: [{
+ text: '{{userHandle}} created a new post ',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.TOPIC
+ }]
+ }, {
+ version: 2,
+ eventType: 'notifications.connect.project.topic.created',
+ type: NOTIFICATION_TYPE.NEW_POSTS,
+ rules: [{
+ text: '{{userFullName}} created a new post ',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.TOPIC
+ }]
},
{
eventType: 'notifications.connect.project.post.created',
type: NOTIFICATION_TYPE.NEW_POSTS,
- text: '[userHandle] responded to your post',
- toTopicStarter: true,
- goTo: GOTO.POST
+ rules: [{
+ text: '{{userHandle}} responded to your post',
+ shouldBundle: true,
+ bundledText: '{{#showMore __history__ 3}}{{userHandle}}{{/showMore}} created {{bundledCount}} new posts to your topic',
+ toTopicStarter: true,
+ goTo: GOTO.POST
+ }, {
+ text: '{{userHandle}} responded to a post',
+ shouldBundle: true,
+ bundledText: '{{#showMore __history__ 3}}{{userHandle}}{{/showMore}} created {{bundledCount}} new posts',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.POST
+ }]
}, {
+ version: 2,
eventType: 'notifications.connect.project.post.created',
type: NOTIFICATION_TYPE.NEW_POSTS,
- text: '[userHandle] responded to a post',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.POST
+ rules: [{
+ text: '{{userFullName}} responded to your post',
+ shouldBundle: true,
+ bundledText: '{{#showMore __history__ 3}}{{fallback userFullName userHandle}}{{/showMore}} created {{bundledCount}} new posts to your topic',
+ toTopicStarter: true,
+ goTo: GOTO.POST
+ }, {
+ text: '{{userFullName}} responded to a post',
+ shouldBundle: true,
+ bundledText: '{{#showMore __history__ 3}}{{fallback userFullName userHandle}}{{/showMore}} created {{bundledCount}} new posts',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.POST
+ }]
+ },
+
+ {
+ version: 2,
+ eventType: 'notifications.connect.project.post.mention',
+ type: NOTIFICATION_TYPE.NEW_POSTS,
+ rules: [{
+ text: '{{userFullName}} mentioned your in a post',
+ toUserHandle: true,
+ goTo: GOTO.POST
+ }]
},
{
eventType: 'notifications.connect.project.linkCreated',
type: NOTIFICATION_TYPE.NEW_POSTS,
- text: '[userHandle] added to your project',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.PROJECT_DASHBOARD
+ rules: [{
+ text: '{{userHandle}} added to your project',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
+ }, {
+ version: 2,
+ eventType: 'notifications.connect.project.linkCreated',
+ type: NOTIFICATION_TYPE.NEW_POSTS,
+ rules: [{
+ text: '{{userFullName}} added to your project',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.PROJECT_DASHBOARD
+ }]
},
{
eventType: 'notifications.connect.project.fileUploaded',
type: NOTIFICATION_TYPE.NEW_POSTS,
- text: '[userHandle] added a new file',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.FILE_LIST
+ rules: [{
+ text: '{{userHandle}} added a new file',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} new files were added',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.FILE_LIST
+ }]
+ }, {
+ version: 2,
+ eventType: 'notifications.connect.project.fileUploaded',
+ type: NOTIFICATION_TYPE.NEW_POSTS,
+ rules: [{
+ text: '{{userFullName}} added a new file',
+ shouldBundle: true,
+ bundledText: '{{bundledCount}} new files were added',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.FILE_LIST
+ }]
},
{
eventType: 'notifications.connect.project.specificationModified',
type: NOTIFICATION_TYPE.UPDATES,
- text: '[userHandle] updated the project specification',
- projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
- goTo: GOTO.PROJECT_SPECIFICATION
+ rules: [{
+ text: '{{userHandle}} updated the project specification',
+ shouldBundle: true,
+ bundledText: 'Project specification is modified',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.PROJECT_SPECIFICATION
+ }]
+ }, {
+ version: 2,
+ eventType: 'notifications.connect.project.specificationModified',
+ type: NOTIFICATION_TYPE.UPDATES,
+ rules: [{
+ text: '{{userFullName}} updated the project specification',
+ shouldBundle: true,
+ bundledText: 'Project specification is modified',
+ projectRoles: [PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_MEMBER],
+ goTo: GOTO.PROJECT_SPECIFICATION
+ }]
}
]
+
+// create a flat list of all possible notifications (expand notification rules)
+export const NOTIFICATION_RULES = (() => {
+ const notificationRules = []
+
+ NOTIFICATIONS.forEach((notification) => {
+ notification.rules.forEach((notificationRule) => {
+ notificationRules.push({ ...notification, ...notificationRule })
+ })
+ })
+
+ return notificationRules
+})()
diff --git a/src/routes/notifications/containers/NotificationsContainer.jsx b/src/routes/notifications/containers/NotificationsContainer.jsx
index 3de0fac26..72f9c574f 100644
--- a/src/routes/notifications/containers/NotificationsContainer.jsx
+++ b/src/routes/notifications/containers/NotificationsContainer.jsx
@@ -7,7 +7,8 @@ import _ from 'lodash'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Sticky from 'react-stickynode'
-import { getNotifications, setNotificationsFilterBy, markAllNotificationsRead, toggleNotificationRead, viewOlderNotifications } from '../actions'
+import { getNotifications, setNotificationsFilterBy, markAllNotificationsRead,
+ toggleNotificationRead, viewOlderNotifications, toggleBundledNotificationRead } from '../actions'
import FooterV2 from '../../../components/FooterV2/FooterV2'
import NotificationsSection from '../../../components/NotificationsSection/NotificationsSection'
import NotificationsSectionTitle from '../../../components/NotificationsSectionTitle/NotificationsSectionTitle'
@@ -35,7 +36,8 @@ class NotificationsContainer extends React.Component {
return null
}
const { sources, notifications, filterBy, setNotificationsFilterBy,
- markAllNotificationsRead, toggleNotificationRead, viewOlderNotifications, oldSourceIds, pending } = this.props
+ markAllNotificationsRead, toggleNotificationRead, viewOlderNotifications,
+ oldSourceIds, pending, toggleBundledNotificationRead } = this.props
const notReadNotifications = filterReadNotifications(notifications)
const notificationsBySources = splitNotificationsBySources(sources, notReadNotifications, oldSourceIds)
let globalSource = notificationsBySources.length > 0 && notificationsBySources[0].id === 'global' ? notificationsBySources[0] : null
@@ -49,6 +51,18 @@ class NotificationsContainer extends React.Component {
}
}
+ const toggleNotificationOrBundleRead = (notificationId) => {
+ if (!pending) {
+ const notification = _.find(notReadNotifications, { id: notificationId })
+ // if it's bundled notification, then toggle all notifications inside the bundle
+ if (notification.bundledIds) {
+ toggleBundledNotificationRead(notificationId, notification.bundledIds)
+ } else {
+ toggleNotificationRead(notificationId)
+ }
+ }
+ }
+
return (
-
- {cur.label}
-
-
- )
+
+
+class ProjectSegmentSelect extends React.Component {
+
+ render() {
+ const {currentSegment, currentSortField, sortHandler} = this.props
+ const cur = _.find(options, o => currentSegment === o.val)
+ || options[0]
+
+ return (
+
-
- -
- {
- options.map((item, i) =>
-
+
+ {cur.label}
+
+
+ )
+ }
}
diff --git a/src/projects/list/components/Projects/Projects.jsx b/src/projects/list/components/Projects/Projects.jsx
index b03656516..ec65fb0ad 100755
--- a/src/projects/list/components/Projects/Projects.jsx
+++ b/src/projects/list/components/Projects/Projects.jsx
@@ -7,18 +7,13 @@ import CoderBot from '../../../../components/CoderBot/CoderBot'
import ProjectListNavHeader from './ProjectListNavHeader'
import ProjectsGridView from './ProjectsGridView'
import ProjectsCardView from './ProjectsCardView'
-import { loadProjects, setInfiniteAutoload } from '../../../actions/loadProjects'
+import { loadProjects, setInfiniteAutoload, setProjectsListView } from '../../../actions/loadProjects'
import _ from 'lodash'
import querystring from 'query-string'
import { updateProject } from '../../../actions/project'
-import { ROLE_CONNECT_MANAGER, ROLE_CONNECT_COPILOT, ROLE_ADMINISTRATOR,
-ROLE_CONNECT_ADMIN, PROJECT_STATUS, PROJECT_STATUS_CANCELLED } from '../../../../config/constants'
-
-/*
- Definiing default project criteria. This is used to later to determine if
- walkthrough component should be rendered instead of no results
- */
-const defaultCriteria = {sort: 'updatedAt desc'}
+import { ROLE_CONNECT_MANAGER, ROLE_CONNECT_COPILOT, ROLE_ADMINISTRATOR,
+ ROLE_CONNECT_ADMIN, PROJECT_STATUS, PROJECT_STATUS_CANCELLED, PROJECT_STATUS_ACTIVE,
+ PROJECT_LIST_DEFAULT_CRITERIA, PROJECTS_LIST_VIEW } from '../../../../config/constants'
const page500 = compose(
withProps({code:500})
@@ -105,6 +100,12 @@ class Projects extends Component {
// perform initial load only if there are not projects already loaded
// otherwise we will get projects duplicated in store
if (projects.length === 0) {
+ // for powerful user filter by 'active' status by default
+ // we cannot put it to PROJECT_LIST_DEFAULT_CRITERIA because
+ // it would apply for both powerful and regular users
+ if (props.isPowerUser && !criteria.status) {
+ criteria.status = PROJECT_STATUS_ACTIVE
+ }
this.routeWithParams(criteria)
}
}
@@ -148,11 +149,11 @@ class Projects extends Component {
}
render() {
- const { isPowerUser, isLoading, totalCount, criteria, currentUser } = this.props
+ const { isPowerUser, isLoading, totalCount, criteria, currentUser, projectsListView, setProjectsListView } = this.props
// show walk through if user is customer and no projects were returned
// for default filters
const showWalkThrough = !isLoading && totalCount === 0 &&
- _.isEqual(criteria, defaultCriteria) &&
+ _.isEqual(criteria, PROJECT_LIST_DEFAULT_CRITERIA) &&
!isPowerUser
const getStatusCriteriaText = (criteria) => {
return (_.find(PROJECT_STATUS, { value: criteria.status }) || { name: ''}).name
@@ -171,16 +172,17 @@ class Projects extends Component {
// onPageChange={this.onPageChange}
// sortHandler={this.sortHandler}
onPageChange={this.onPageChange}
+ onChangeStatus={this.onChangeStatus}
projectsStatus={getStatusCriteriaText(criteria)}
/>
)
let projectsView
- const chosenView = this.state.selectedView || 'grid'
+ const chosenView = projectsListView
const currentStatus = this.state.status || null
if (isPowerUser) {
- if (chosenView === 'grid') {
+ if (chosenView === PROJECTS_LIST_VIEW.GRID) {
projectsView = gridView
- } else if (chosenView === 'card') {
+ } else if (chosenView === PROJECTS_LIST_VIEW.CARD) {
projectsView = cardView
}
} else {
@@ -191,7 +193,7 @@ class Projects extends Component {
+
+ -
+ {
+ options.map((item, i) => {
+ const activeClass = cn({
+ active: item.val === currentSortField
+ })
+ return (
-
+ {activeClass?
: ''} + {item.label} + )
+ })
+ }
+
{(isPowerUser && !showWalkThrough) &&
- }
+ }
{ showWalkThrough ?
-
)
@@ -144,7 +257,7 @@ const ProjectsGridView = props => {
}
}, {
id: 'status',
- headerLabel: ,
+ headerLabel:
-
+
diff --git a/src/projects/list/components/Walkthrough/Walkthrough.scss b/src/projects/list/components/Walkthrough/Walkthrough.scss
index f5f0e67cc..bff3dc288 100644
--- a/src/projects/list/components/Walkthrough/Walkthrough.scss
+++ b/src/projects/list/components/Walkthrough/Walkthrough.scss
@@ -10,7 +10,6 @@
padding: 20px 86px;
.text-img{
- background: url('../../../../assets/images/pointer-new-project.svg') no-repeat 0 0;
background-size: 100% 100%;
position: absolute;
display:block;
@@ -100,7 +99,6 @@
}
}
.robot{
- background: url('../../../../assets/images/coder-welcome.svg') no-repeat 0 0;
background-size: 238px 281px;
position: absolute;
width: 238px;
@@ -111,7 +109,6 @@
z-index:2;
}
.shadow{
- background: url('../../../../assets/images/ground-shadow.svg') no-repeat 0 0;
background-size: 960px 11px;
position: absolute;
width: 960px;
diff --git a/src/projects/reducers/projectSearch.js b/src/projects/reducers/projectSearch.js
index be99c3365..32551d61f 100644
--- a/src/projects/reducers/projectSearch.js
+++ b/src/projects/reducers/projectSearch.js
@@ -2,7 +2,10 @@ import {
PROJECT_SEARCH_PENDING, PROJECT_SEARCH_SUCCESS, PROJECT_SEARCH_FAILURE,
GET_PROJECTS_PENDING, GET_PROJECTS_SUCCESS, GET_PROJECTS_FAILURE,
LOAD_MORE_PROJECTS, CLEAR_PROJECT_SEARCH, SET_PROJECTS_SEARCH_CRITERIA,
- SET_PROJECTS_INFINITE_AUTOLOAD
+ SET_PROJECTS_INFINITE_AUTOLOAD,
+ SET_PROJECTS_LIST_VIEW,
+ PROJECTS_LIST_VIEW,
+ PROJECT_LIST_DEFAULT_CRITERIA
} from '../../config/constants'
import update from 'react-addons-update'
@@ -12,9 +15,9 @@ export const initialState = {
error: false,
totalCount: 0,
pageNum: 1,
- criteria: {
- sort: 'updatedAt desc'
- }
+ // make a copy of constant to avoid unintentional modifications
+ criteria: {...PROJECT_LIST_DEFAULT_CRITERIA},
+ projectsListView: PROJECTS_LIST_VIEW.GRID
}
export default function(state = initialState, action) {
@@ -71,6 +74,11 @@ export default function(state = initialState, action) {
infiniteAutoload: action.payload
})
+ case SET_PROJECTS_LIST_VIEW:
+ return Object.assign({}, state, {
+ projectsListView: action.payload
+ })
+
default:
return state
}
diff --git a/src/projects/routes.jsx b/src/projects/routes.jsx
index b4918ef6a..b4d4aa63b 100644
--- a/src/projects/routes.jsx
+++ b/src/projects/routes.jsx
@@ -7,6 +7,7 @@ import Projects from './list/components/Projects/Projects'
import TopBarContainer from '../components/TopBar/TopBarContainer'
import ProjectsToolBar from '../components/TopBar/ProjectsToolBar'
import ProjectToolBar from '../components/TopBar/ProjectToolBar'
+import FileDownload from '../components/FileDownload'
import ProjectDetail from './detail/ProjectDetail'
import Dashboard from './detail/Dashboard'
import ProjectMessages from './detail/Messages'
@@ -14,6 +15,7 @@ import SpecificationContainer from './detail/containers/SpecificationContainer'
import { requiresAuthentication } from '../components/AuthenticatedComponent'
const ProjectLayoutWithAuth = requiresAuthentication(ProjectLayout)
+const FileDownloadWithAuth = requiresAuthentication(FileDownload)
// NOTE:
// we cannot move up ProjectDetail component
@@ -36,6 +38,7 @@ const projectRoutes = (
path="/projects"
render={() => (
-
-
+ 010010010010100101001000100100101
-
010010010010100101001000100100101
Bzzt …I mean… Hello, {currentUser.firstName}!
- Welcome to Connect! I’m Coder the Robot. I see you have no projects yet. To get you started, press the “New Project” and let’s build something.
+Welcome to Connect! I’m Coder the Robot. I see you have no projects yet. To get you started, press the “New Project” icon and let’s build something.
@@ -57,7 +71,7 @@ class NotificationsContainer extends React.Component {
{...globalSource}
isGlobal
onMarkAllClick={() => !pending && markAllNotificationsRead('global', notifications)}
- onReadToggleClick={(id) => !pending && toggleNotificationRead(id)}
+ onReadToggleClick={toggleNotificationOrBundleRead}
onViewOlderClick={() => viewOlderNotifications(globalSource.id)}
/>
}
@@ -67,7 +81,7 @@ class NotificationsContainer extends React.Component {
key={source.id}
{...source}
onMarkAllClick={() => !pending && markAllNotificationsRead(source.id, notifications)}
- onReadToggleClick={(id) => !pending && toggleNotificationRead(id)}
+ onReadToggleClick={toggleNotificationOrBundleRead}
onViewOlderClick={() => viewOlderNotifications(source.id)}
/>
)}
@@ -119,7 +133,8 @@ const mapDispatchToProps = {
setNotificationsFilterBy,
markAllNotificationsRead,
toggleNotificationRead,
- viewOlderNotifications
+ viewOlderNotifications,
+ toggleBundledNotificationRead
}
export default connect(mapStateToProps, mapDispatchToProps)(NotificationsContainerWithLoaderAndAuth)
diff --git a/src/routes/notifications/helpers/notifications.js b/src/routes/notifications/helpers/notifications.js
index 2907cb44a..59cb96384 100644
--- a/src/routes/notifications/helpers/notifications.js
+++ b/src/routes/notifications/helpers/notifications.js
@@ -3,11 +3,66 @@
*/
import _ from 'lodash'
import { OLD_NOTIFICATION_TIME } from '../../../config/constants'
-import { NOTIFICATIONS } from '../constants/notifications'
+import { NOTIFICATION_RULES } from '../constants/notifications'
+import Handlebars from 'handlebars'
// how many milliseconds in one minute
const MILLISECONDS_IN_MINUTE = 60000
+/**
+ * Handlebars helper to display limited quantity of item and text +N more
+ *
+ * Example:
+ * ```
+ * {{#showMore __history__ 3}}{{userHandle}}{{/showMore}}
+ * ```
+ * Gets 3 items from `__history__` array and render them comma-separated.
+ * If there are more than 3 items, adds '+N more'. Output can be:
+ * ```
+ * userHandle1, userHandle1, userHandle3 +7 more
+ * ```
+ *
+ * @param {Array} items list of items
+ * @param {Number} max max items to display
+ * @param {Object} options handlebars options
+ */
+const handlebarsShowMoreHelper = (items, max, options) => {
+ const renderedItems = items.map(options.fn)
+ const uniqRenderedItems = _.uniq(renderedItems)
+ const maxRenderedItems = uniqRenderedItems.slice(0, max)
+ const restItemsCount = uniqRenderedItems.length - maxRenderedItems.length
+
+ let out = maxRenderedItems.join(', ')
+
+ if (restItemsCount > 0) {
+ out += ` +${restItemsCount} more`
+ }
+
+ return out
+}
+
+/**
+ * Handlebars helper which displays fallback value if the value is not provided (falsy)
+ *
+ * Example:
+ * ```
+ * {{fallback userFullName userHandle}}
+ * ```
+ * Will output `userHandle` if `userFullName` is not provided
+ *
+ * @param {String} value value
+ * @param {String} fallbackValue fallback value
+ */
+const handlebarsFallbackHelper = (value, fallbackValue) => {
+ const out = value || fallbackValue
+
+ return new Handlebars.SafeString(out)
+}
+
+// register handlebars helpers
+Handlebars.registerHelper('showMore', handlebarsShowMoreHelper)
+Handlebars.registerHelper('fallback', handlebarsFallbackHelper)
+
/**
* Get notification filters by sources
*
@@ -103,28 +158,6 @@ export const limitQuantityInSources = (notificationsBySources, maxPerSource, max
return notificationsBySourceLimited
}
-/**
- * Render template with [variable] placeholders
- *
- * @param {String} templateStr template
- * @param {Object} values values for template placeholders
- *
- * @return {String} rendered template
- */
-const renderTemplate = (templateStr, values) => {
- const regexp = /\[([^\]]+)\]/g
- let output = templateStr
- let match
-
- while (match = regexp.exec(templateStr)) { // eslint-disable-line no-cond-assign
- if (values[match[1]]) {
- output = output.replace(match[0], values[match[1]])
- }
- }
-
- return output
-}
-
/**
* Get a rule for notification
*
@@ -133,9 +166,13 @@ const renderTemplate = (templateStr, values) => {
* @return {Object} notification rule
*/
const getNotificationRule = (notification) => {
- const notificationRule = _.find(NOTIFICATIONS, (_notificationRule) => {
+ const notificationRule = _.find(NOTIFICATION_RULES, (_notificationRule) => {
let match = _notificationRule.eventType === notification.eventType
+ if (notification.version) {
+ match = match && _notificationRule.version === notification.version
+ }
+
if (notification.contents.toTopicStarter) {
match = match && _notificationRule.toTopicStarter
}
@@ -156,12 +193,95 @@ const getNotificationRule = (notification) => {
})
if (!notificationRule) {
- throw new Error(`Cannot find notification rule for eventType ${notification.eventType}.`)
+ throw new Error(`Cannot find notification rule for eventType '${notification.eventType}' version '${notification.version}'.`)
}
return notificationRule
}
+/**
+ * Compare notification rules ignoring version
+ *
+ * @param {Object} rule1 notification rule 1
+ * @param {Object} rule2 notification rule 2
+ *
+ * @returns {Boolean} true if rules are equal
+ */
+const isNotificationRuleEqual = (rule1, rule2) => {
+ /**
+ * Properties which distinguish one rule from another
+ *
+ * @type {Array}
+ */
+ const ESSENTIAL_RULE_PROPERTIES = ['eventType', 'toTopicStarter', 'toUserHandle', 'projectRole', 'topcoderRole']
+ const essentialRule1 = _.pick(rule1, ESSENTIAL_RULE_PROPERTIES)
+ const essentialRule2 = _.pick(rule2, ESSENTIAL_RULE_PROPERTIES)
+
+ return _.isEqual(essentialRule1, essentialRule2)
+}
+
+/**
+ * Bundle same type notifications for the same project
+ *
+ * @param {Array<{notification, notificationRule}>} notificationsWithRules list of notification with rules
+ *
+ * @returns {Array<{notification, notificationRule}>} bundled notifications with rules
+ */
+const bundleNotifications = (notificationsWithRules) => {
+ /**
+ * List of `contents` properties for which we want to keep the whole history
+ *
+ * @type {Array}
+ */
+ const PROPERTIES_KEEP_IN_HISTORY = ['userHandle', 'userFullName']
+ const bundledNotificationsWithRules = []
+
+ // starting from the latest notifications
+ // find older notifications with the same notification rule and the same project
+ _.reverse(notificationsWithRules).forEach((notificationWithRule) => {
+ // if notifications doesn't have to be bundled, add it to notifications list as it is
+ if (!notificationWithRule.notificationRule.shouldBundle) {
+ bundledNotificationsWithRules.push(notificationWithRule)
+ }
+
+ // try to find existent notification in the list to which we can bundle current one
+ const existentNotificationWithRule = _.find(bundledNotificationsWithRules, (bundledNotificationWithRule) => (
+ // same source id means same project
+ bundledNotificationWithRule.notification.sourceId === notificationWithRule.notification.sourceId
+ // same notification rule means same type
+ && isNotificationRuleEqual(bundledNotificationWithRule.notificationRule, notificationWithRule.notificationRule)
+ ))
+
+ // if already have notification of the same type, update it instead of adding new notification to the list
+ if (existentNotificationWithRule) {
+ // if haven't bundled any notifications yet, then init properties which only bundled notifications has
+ if (!existentNotificationWithRule.notification.bundledIds) {
+ existentNotificationWithRule.notification.bundledIds = [
+ existentNotificationWithRule.notification.id
+ ]
+ existentNotificationWithRule.notification.contents.bundledCount = 1
+ existentNotificationWithRule.notification.contents.__history__ = [
+ _.pick(existentNotificationWithRule.notification.contents, PROPERTIES_KEEP_IN_HISTORY)
+ ]
+ }
+
+ // at this point bundled notification is initialized,
+ // so we just update values of bundled notifications
+ existentNotificationWithRule.notification.bundledIds.push(
+ notificationWithRule.notification.id
+ )
+ existentNotificationWithRule.notification.contents.bundledCount += 1
+ existentNotificationWithRule.notification.contents.__history__.push(
+ _.pick(notificationWithRule.notification.contents, PROPERTIES_KEEP_IN_HISTORY)
+ )
+ } else {
+ bundledNotificationsWithRules.push(notificationWithRule)
+ }
+ })
+
+ return bundledNotificationsWithRules
+}
+
/**
* Prepare notifications
*
@@ -170,7 +290,7 @@ const getNotificationRule = (notification) => {
* @return {Array} notification list
*/
export const prepareNotifications = (rowNotifications) => {
- const notifications = rowNotifications.map((rowNotification) => ({
+ const notificationsWithRules = rowNotifications.map((rowNotification) => ({
id: `${rowNotification.id}`,
sourceId: rowNotification.contents.projectId ? `${rowNotification.contents.projectId}` : 'global',
sourceName: rowNotification.contents.projectId ? (rowNotification.contents.projectName || 'project') : 'Global',
@@ -178,17 +298,39 @@ export const prepareNotifications = (rowNotifications) => {
date: rowNotification.createdAt,
isRead: rowNotification.read,
isOld: new Date().getTime() - OLD_NOTIFICATION_TIME * MILLISECONDS_IN_MINUTE > new Date(rowNotification.createdAt).getTime(),
- contents: rowNotification.contents
+ contents: rowNotification.contents,
+ version: rowNotification.version
})).map((notification) => {
const notificationRule = getNotificationRule(notification)
// populate notification data
notification.type = notificationRule.type
- notification.text = renderTemplate(notificationRule.text, notification.contents)
- notification.goto = renderTemplate(notificationRule.goTo, notification.contents)
+ if (notificationRule.goTo){
+ const renderGoTo = Handlebars.compile(notificationRule.goTo)
+ notification.goto = renderGoTo(notification.contents)
+ }
- return notification
+ return {
+ notification,
+ notificationRule
+ }
})
+ const bundledNotificationsWithRules = bundleNotifications(notificationsWithRules)
+
+ // render notifications texts
+ bundledNotificationsWithRules.forEach((bundledNotificationWithRule) => {
+ const { notification, notificationRule } = bundledNotificationWithRule
+ const textTpl = notification.contents.bundledCount
+ // if text for bundled notification is not defined, just use regular text
+ ? (notificationRule.bundledText || notificationRule.text)
+ : notificationRule.text
+
+ const renderText = Handlebars.compile(textTpl)
+ notification.text = renderText(notification.contents)
+ })
+
+ const notifications = _.map(bundledNotificationsWithRules, 'notification')
+
return notifications
}
diff --git a/src/routes/settings/routes/notifications/components/NotificationSettingsForm.jsx b/src/routes/settings/routes/notifications/components/NotificationSettingsForm.jsx
index 85b717ff5..e504f83fd 100644
--- a/src/routes/settings/routes/notifications/components/NotificationSettingsForm.jsx
+++ b/src/routes/settings/routes/notifications/components/NotificationSettingsForm.jsx
@@ -5,10 +5,11 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Formsy, SwitchButton } from 'appirio-tech-react-components'
import BtnGroup from '../../../../../components/BtnGroup/BtnGroup'
-import iconWeb from '../../../../../assets/images/icon-web.png'
+import IconSettingsWeb from '../../../../../assets/icons/settings-icon-web.svg'
import './NotificationSettingsForm.scss'
import _ from 'lodash'
+
// list of the notification groups and related event types
// TODO move it to constants and reuse the same list in services/settings.js
const topics = [
@@ -138,7 +139,9 @@ class NotificationSettingsForm extends React.Component {
Notifications
- 
Web
+
{/* as email notification currently not supported, hide them for now */}
{/*
Email
diff --git a/src/routes/settings/routes/notifications/components/NotificationSettingsForm.scss b/src/routes/settings/routes/notifications/components/NotificationSettingsForm.scss
index d3090ab98..a07f7db92 100644
--- a/src/routes/settings/routes/notifications/components/NotificationSettingsForm.scss
+++ b/src/routes/settings/routes/notifications/components/NotificationSettingsForm.scss
@@ -73,6 +73,7 @@
.th-with-icon {
display: inline-block;
+ height: 0;
> img,
> span {
@@ -82,6 +83,7 @@
> span {
margin-left: 10px;
+ margin-bottom: 10px;
}
}
diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
index ab113a364..e814fbe38 100644
--- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
+++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx
@@ -4,11 +4,13 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Formsy, TCFormFields } from 'appirio-tech-react-components'
-import SVGIconImage from '../../../../../components/SVGIconImage'
import TextInputWithCounter from '../../../../../components/TextInputWithCounter/TextInputWithCounter'
import ProfileSeetingsAvatar from './ProfileSeetingsAvatar'
import { MAX_USERNAME_LENGTH } from '../../../../../config/constants'
import './ProfileSettingsForm.scss'
+import IconImage from '../../assets/icons/users-16px_single-01.svg'
+
+
const ProfileSettingsForm = (props) => {
const { username, photoSrc, firstname, lastname, company, mobilephone1, mobilephone2 } = props
@@ -22,7 +24,7 @@ const ProfileSettingsForm = (props) => {
diff --git a/src/routes/settings/routes/system/components/ChangeEmailForm.jsx b/src/routes/settings/routes/system/components/ChangeEmailForm.jsx
index 4e177e793..05f5fdd55 100644
--- a/src/routes/settings/routes/system/components/ChangeEmailForm.jsx
+++ b/src/routes/settings/routes/system/components/ChangeEmailForm.jsx
@@ -8,11 +8,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
-import LoadingIndicator from '../../../../../components/LoadingIndicator/LoadingIndicator'
-import SVGIconImage from '../../../../../components/SVGIconImage'
import { EMAIL_AVAILABILITY_CHECK_DEBOUNCE } from '../../../../../config/constants'
import { Formsy, TCFormFields } from 'appirio-tech-react-components'
import './ChangeEmailForm.scss'
+import IconCheck from '../../assets/icons/check.svg'
+
class ChangeEmailForm extends React.Component {
constructor(props) {
@@ -111,7 +111,7 @@ class ChangeEmailForm extends React.Component {
/>
-
{isCheckingCurrentEmail &&
diff --git a/src/styles/i/icon-chat-active.svg b/src/styles/i/icon-chat-active.svg
deleted file mode 100644
index f1781765d..000000000
--- a/src/styles/i/icon-chat-active.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-chat-hover.svg b/src/styles/i/icon-chat-hover.svg
deleted file mode 100644
index d1862e111..000000000
--- a/src/styles/i/icon-chat-hover.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-chat.svg b/src/styles/i/icon-chat.svg
deleted file mode 100644
index 24c1e317a..000000000
--- a/src/styles/i/icon-chat.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-dashboard-active.svg b/src/styles/i/icon-dashboard-active.svg
deleted file mode 100644
index f77f869d2..000000000
--- a/src/styles/i/icon-dashboard-active.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-dashboard-hover.svg b/src/styles/i/icon-dashboard-hover.svg
deleted file mode 100644
index b1aea1687..000000000
--- a/src/styles/i/icon-dashboard-hover.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-dashboard.svg b/src/styles/i/icon-dashboard.svg
deleted file mode 100644
index 2c284931a..000000000
--- a/src/styles/i/icon-dashboard.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-direct-arrow.svg b/src/styles/i/icon-direct-arrow.svg
deleted file mode 100644
index f9b5e5a84..000000000
--- a/src/styles/i/icon-direct-arrow.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/styles/i/icon-hammer-active.svg b/src/styles/i/icon-hammer-active.svg
deleted file mode 100644
index 89d617429..000000000
--- a/src/styles/i/icon-hammer-active.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-hammer-hover.svg b/src/styles/i/icon-hammer-hover.svg
deleted file mode 100644
index a1231e407..000000000
--- a/src/styles/i/icon-hammer-hover.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-hammer.svg b/src/styles/i/icon-hammer.svg
deleted file mode 100644
index 3312a0e37..000000000
--- a/src/styles/i/icon-hammer.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-ruler-pencil-active.svg b/src/styles/i/icon-ruler-pencil-active.svg
deleted file mode 100644
index f98f6aa2e..000000000
--- a/src/styles/i/icon-ruler-pencil-active.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-ruler-pencil-hover.svg b/src/styles/i/icon-ruler-pencil-hover.svg
deleted file mode 100644
index 2e1645bbb..000000000
--- a/src/styles/i/icon-ruler-pencil-hover.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/i/icon-ruler-pencil.svg b/src/styles/i/icon-ruler-pencil.svg
deleted file mode 100644
index 7fb99648c..000000000
--- a/src/styles/i/icon-ruler-pencil.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file