Skip to content

Commit 3c8097c

Browse files
youtionyoution
committed
fix: issue #1169 
1 parent cff8163 commit 3c8097c

File tree

9 files changed

+126
-63
lines changed

9 files changed

+126
-63
lines changed

‎src/components/ChallengeEditor/ChallengeView/index.js‎

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React, { useState, useEffect } from 'react'
22
import _ from 'lodash'
3-
import { Helmet } from 'react-helmet'
43
import PropTypes from 'prop-types'
54
import cn from 'classnames'
65
import { withRouter } from 'react-router-dom'
76
import styles from './ChallengeView.module.scss'
87
import xss from 'xss'
9-
import { PrimaryButton } from '../../Buttons'
108
import Track from '../../Track'
119
import NDAField from '../NDAField'
1210
import UseSchedulingAPIField from '../UseSchedulingAPIField'
@@ -19,13 +17,11 @@ import CopilotFeeField from '../CopilotFee-Field'
1917
import ChallengeTotalField from '../ChallengeTotal-Field'
2018
import Loader from '../../Loader'
2119
import PhaseInput from '../../PhaseInput'
22-
import LegacyLinks from '../../LegacyLinks'
2320
import AssignedMemberField from '../AssignedMember-Field'
2421
import { getResourceRoleByName } from '../../../util/tc'
2522
import { isBetaMode } from '../../../util/cookie'
2623
import { loadGroupDetails } from '../../../actions/challenges'
27-
import Tooltip from '../../Tooltip'
28-
import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
24+
import { REVIEW_TYPES } from '../../../config/constants'
2925

3026
const ChallengeView = ({
3127
projectDetail,
@@ -86,47 +82,6 @@ const ChallengeView = ({
8682
const isTask = _.get(challenge, 'task.isTask', false)
8783
return (
8884
<div className={styles.wrapper}>
89-
<Helmet title='View Details' />
90-
{!isTask && (
91-
<div className={cn(styles.actionButtons, styles.button, styles.actionButtonsLeft)}>
92-
<LegacyLinks challenge={challenge} challengeView />
93-
</div>
94-
)}
95-
<div className={styles.title}>View Details</div>
96-
<div className={cn(styles.actionButtons, styles.button, styles.actionButtonsRight)}>
97-
{
98-
challenge.status === 'Draft' && (
99-
<div className={styles.button}>
100-
{(challenge.legacyId || isTask) ? (
101-
<PrimaryButton text={'Launch'} type={'info'} onClick={onLaunchChallenge} />
102-
) : (
103-
<Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
104-
{/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
105-
<PrimaryButton text={'Launch'} type={'disabled'} />
106-
</Tooltip>
107-
)}
108-
</div>
109-
)
110-
}
111-
{
112-
isTask && challenge.status === 'Active' && (
113-
<div className={styles.button}>
114-
{ assignedMemberDetails ? (
115-
<Tooltip content={MESSAGE.MARK_COMPLETE}>
116-
<PrimaryButton text={'Mark Complete'} type={'success'} onClick={onCloseTask} />
117-
</Tooltip>
118-
) : (
119-
<Tooltip content={MESSAGE.NO_TASK_ASSIGNEE}>
120-
{/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
121-
<PrimaryButton text={'Mark Complete'} type={'disabled'} />
122-
</Tooltip>
123-
)}
124-
</div>
125-
)
126-
}
127-
{ enableEdit && <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} /> }
128-
<PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
129-
</div>
13085
<div className={styles.container}>
13186
<div className={styles.formContainer}>
13287
<div className={styles.group}>

‎src/components/ChallengeEditor/ChallengeViewTabs/ChallengeViewTabs.module.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,57 @@
33
$tc-dark-blue: #0681ff;
44
$tc-white: #FFFFFF;
55

6+
.actionButtons {
7+
display: flex;
8+
position: absolute;
9+
top: 30px;
10+
margin-top: 53px;
11+
}
12+
13+
.actionButtonsLeft {
14+
left: 20px;
15+
}
16+
17+
.actionButtonsRight {
18+
right: 20px;
19+
20+
.button:not(:last-child),
21+
a:not(:last-child) {
22+
margin-right: 20px;
23+
}
24+
25+
button {
26+
white-space: nowrap;
27+
}
28+
}
29+
30+
.button {
31+
height: 40px;
32+
span {
33+
padding: 0 20px;
34+
}
35+
}
36+
37+
.title {
38+
@include roboto-bold();
39+
40+
font-size: 24px;
41+
font-weight: 700;
42+
line-height: 29px;
43+
color: $challenges-title;
44+
margin-top: 25px;
45+
text-align: center;
46+
47+
span {
48+
color: $tc-red;
49+
}
50+
}
651

752
.challenge-view-selector {
853
display: flex;
954
flex-wrap: wrap;
1055
justify-content: center;
56+
margin-top: 20px;
1157
position: relative;
1258
border-bottom: 1px solid silver;
1359

‎src/components/ChallengeEditor/ChallengeViewTabs/index.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@
33
*/
44
import React, { useState, useMemo } from 'react'
55
import PropTypes from 'prop-types'
6+
import { Helmet } from 'react-helmet'
67
import cn from 'classnames'
78
import _ from 'lodash'
89

910
import ChallengeViewComponent from '../ChallengeView'
11+
import { PrimaryButton } from '../../Buttons'
12+
import LegacyLinks from '../../LegacyLinks'
1013
import Registrants from '../Registrants'
1114
import Submissions from '../Submissions'
1215
import { getResourceRoleByName } from '../../../util/tc'
16+
import { MESSAGE } from '../../../config/constants'
17+
import Tooltip from '../../Tooltip'
1318
import 'react-tabs/style/react-tabs.css'
1419
import styles from './ChallengeViewTabs.module.scss'
1520

@@ -56,8 +61,50 @@ const ChallengeViewTabs = ({
5661
return s
5762
})
5863
}, [challengeSubmissions, registrants])
64+
65+
const isTask = _.get(challenge, 'task.isTask', false)
66+
5967
return (
6068
<div className={styles.list}>
69+
<Helmet title='View Details' />
70+
{!isTask && (
71+
<div className={cn(styles.actionButtons, styles.button, styles.actionButtonsLeft)}>
72+
<LegacyLinks challenge={challenge} />
73+
</div>
74+
)}
75+
<div className={styles.title}>View Details</div>
76+
<div className={cn(styles.actionButtons, styles.button, styles.actionButtonsRight)}>
77+
{
78+
challenge.status === 'Draft' && (
79+
<div className={styles.button}>
80+
{(challenge.legacyId || isTask) ? (
81+
<PrimaryButton text={'Launch'} type={'info'} onClick={onLaunchChallenge} />
82+
) : (
83+
<Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
84+
{/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
85+
<PrimaryButton text={'Launch'} type={'disabled'} />
86+
</Tooltip>
87+
)}
88+
</div>
89+
)
90+
}
91+
{
92+
isTask && challenge.status === 'Active' && (
93+
<div className={styles.button}>
94+
{ assignedMemberDetails ? (
95+
<PrimaryButton text={'Close Task'} type={'danger'} onClick={onCloseTask} />
96+
) : (
97+
<Tooltip content={MESSAGE.NO_TASK_ASSIGNEE}>
98+
{/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
99+
<PrimaryButton text={'Close Task'} type={'disabled'} />
100+
</Tooltip>
101+
)}
102+
</div>
103+
)
104+
}
105+
{ enableEdit && <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} /> }
106+
<PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
107+
</div>
61108
<div className={styles['challenge-view-selector']}>
62109
<a
63110
tabIndex='0'

‎src/components/ChallengeEditor/Registrants/Registrants.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ $member-red: #ea1900;
1616
.container {
1717
@include roboto;
1818

19-
padding-top: 66px;
2019
padding-bottom: 197px;
2120
max-width: 966px;
2221
margin: 0 auto;
@@ -30,7 +29,8 @@ $member-red: #ea1900;
3029
font-weight: 500;
3130
font-size: 13px;
3231
line-height: 15px;
33-
padding-bottom: 14px;
32+
padding-top: 13px;
33+
padding-bottom: 13px;
3434
color: $tc-gray-50;
3535
display: flex;
3636
border-bottom: 1px solid $tc-gray-10;

‎src/components/ChallengeEditor/Registrants/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,6 @@ export default class Registrants extends React.Component {
313313
type='button'
314314
>
315315
<ReactSVG
316-
className={styles.passed}
317316
path={assets(`${ArrowDown}`)}
318317
/>
319318
</div>

‎src/components/ChallengeEditor/Submissions/Submissions.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ $base-unit: 5px;
188188
}
189189

190190
.container.dev {
191-
margin: 30px 80px;
191+
margin: 0;
192192
padding-bottom: 30px;
193193
line-height: 50px;
194194
text-align: center;

‎src/components/TopBar/Topbar.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
border-bottom: 1px solid $gray;
77
}
88

9+
.hide-line {
10+
border-bottom: none;
11+
}
12+
913
.details {
1014
display: block;
1115
margin-left: auto;

‎src/components/TopBar/index.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,38 @@
33
*/
44
import React from 'react'
55
import PropTypes from 'prop-types'
6+
import cn from 'classnames'
67
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
78
import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
89
import { get } from 'lodash'
910
import styles from './Topbar.module.scss'
1011
import Handle from '../Handle'
1112
import { COMMUNITY_APP_URL } from '../../config/constants'
1213

13-
const TopBar = ({ user }) => {
14+
const TopBar = ({ user, hideBottomLine }) => {
1415
return (
15-
<div className={styles.topbar}>
16-
{user &&
17-
<div className={styles.details}>
18-
Welcome, <Handle handle={user.handle} rating={get(user, 'maxRating.rating', 0)} />
19-
<a href={`${COMMUNITY_APP_URL}/logout`}>
20-
<FontAwesomeIcon icon={faSignInAlt} className={styles.icon} />
21-
</a>
22-
</div>
23-
}
16+
<div
17+
className={cn(styles.topbar, { [styles['hide-line']]: hideBottomLine })}
18+
>
19+
{user && (
20+
<div className={styles.details}>
21+
Welcome,{' '}
22+
<Handle
23+
handle={user.handle}
24+
rating={get(user, 'maxRating.rating', 0)}
25+
/>
26+
<a href={`${COMMUNITY_APP_URL}/logout`}>
27+
<FontAwesomeIcon icon={faSignInAlt} className={styles.icon} />
28+
</a>
29+
</div>
30+
)}
2431
</div>
2532
)
2633
}
2734

2835
TopBar.propTypes = {
29-
user: PropTypes.object
36+
user: PropTypes.object,
37+
hideBottomLine: PropTypes.bool
3038
}
3139

3240
export default TopBar

‎src/containers/TopbarContainer/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React, { Component } from 'react'
55
import PropTypes from 'prop-types'
66
import { loadUser } from '../../actions/auth'
77
import { setActiveProject } from '../../actions/sidebar'
8+
import { withRouter } from 'react-router-dom'
89
import { connect } from 'react-redux'
910
import TopBar from '../../components/TopBar'
1011

@@ -20,14 +21,17 @@ class TopbarContainer extends Component {
2021
}
2122

2223
render () {
24+
const { match } = this.props
25+
const isChalengeViewPage = match.path === '/projects/:projectId/challenges/:challengeId'
2326
const { user } = this.props.auth
24-
return <TopBar user={user} />
27+
return <TopBar user={user} hideBottomLine={isChalengeViewPage} />
2528
}
2629
}
2730

2831
TopbarContainer.propTypes = {
2932
loadUser: PropTypes.func.isRequired,
3033
setActiveProject: PropTypes.func.isRequired,
34+
match: PropTypes.any.isRequired,
3135
auth: PropTypes.object.isRequired,
3236
activeProjectId: PropTypes.number,
3337
projectId: PropTypes.string
@@ -42,4 +46,4 @@ const mapDispatchToProps = {
4246
setActiveProject
4347
}
4448

45-
export default connect(mapStateToProps, mapDispatchToProps)(TopbarContainer)
49+
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TopbarContainer))

0 commit comments

Comments
 (0)