From 91ba249a2d07982d1f6444454473f8e175f9b515 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Sat, 28 May 2022 08:46:04 +0700 Subject: [PATCH] improvement(reskin): mm submission fixes f2f --- .../SubmissionManagement/Icons/IconZoom.svg | 3 + src/shared/components/Tooltip/style.scss | 6 + .../MySubmissions/SubmissionsDetail/index.jsx | 419 +++++++++--------- .../SubmissionsDetail/styles.scss | 120 ++++- .../MySubmissions/SubmissionsList/index.jsx | 22 +- .../MySubmissions/SubmissionsList/styles.scss | 26 +- .../challenge-detail/MySubmissions/index.jsx | 59 ++- .../MySubmissions/styles.scss | 61 ++- .../challenge-detail/icons/failed.svg | 22 +- 9 files changed, 463 insertions(+), 275 deletions(-) create mode 100644 src/shared/components/SubmissionManagement/Icons/IconZoom.svg diff --git a/src/shared/components/SubmissionManagement/Icons/IconZoom.svg b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg new file mode 100644 index 0000000000..30f678532e --- /dev/null +++ b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss index 651af0c2ae..3849c4b600 100644 --- a/src/shared/components/Tooltip/style.scss +++ b/src/shared/components/Tooltip/style.scss @@ -13,6 +13,12 @@ padding: 0; } + .toolTipPadding { + .rc-tooltip-inner { + padding: 8px 10px; + } + } + .rc-tooltip-arrow { background: url(assets/images/tooltip-arrow.svg); width: 30px; diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx index cc5afe0578..71ca8c6fea 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx @@ -7,10 +7,10 @@ import PT from 'prop-types'; import _ from 'lodash'; import cn from 'classnames'; import sortList from 'utils/challenge-detail/sort'; +import Tooltip from 'components/Tooltip'; +import IconClose from 'assets/images/icon-close-green.svg'; import ArrowDown from '../../../../../assets/images/arrow-down.svg'; -import IconComplete from '../../icons/completed.svg'; -import IconQueued from '../../icons/queued.svg'; import IconFail from '../../icons/failed.svg'; import './styles.scss'; @@ -85,7 +85,7 @@ class SubmissionsDetailView extends React.Component { */ updateSortedSubmissions() { const { submission: { review } } = this.props; - const sortedSubmissions = _.cloneDeep(review); + const sortedSubmissions = _.cloneDeep(review || []); this.sortSubmissions(sortedSubmissions); this.setState({ sortedSubmissions }); } @@ -158,220 +158,225 @@ class SubmissionsDetailView extends React.Component { } return (
-
- -
- Submission Details: - {submission.id} ({submission.submissionId}) +
+

Submission Details

+
onCancel()}> +
-
-
- Review Summary -
-
- Artifacts +
+
+
+ Submission: + {submission.id} ({submission.submissionId})
-
-
-
- -
-
- +
+
- Reviewer -
-
- -
-
- +
+
- Score -
-
- -
-
- +
+
- Status -
-
- + +
-
- { - sortedSubmissions.map((review) => { - let { score } = review; - if (_.isNumber(score)) { - if (score > 0) { - score = score.toFixed(2); + { + sortedSubmissions.map((review) => { + let { score } = review; + if (_.isNumber(score)) { + if (score > 0) { + score = score.toFixed(2); + } + } else { + score = '-'; } - } else { - score = '-'; - } - return ( -
-
- {this.getReviewName(review)} -
-
- TC System -
-
- {(score < 0) ? () : ({score})} -
-
- {(review.status === 'completed') ? ( - - ) : ()} + return ( +
+
+
Review Type
+ {this.getReviewName(review)} +
+
+
Reviewer
+ TC System +
+
+
Score
+ + {(score < 0) ? ( + + + + ) : ({score})} +
+
+
Status
+ + {(review.status === 'completed') ? ( + Complete + ) : ( + Failed + )} +
-
- ); - }) - } -
-
- Final Score -
-
-
- {finalScore} -
-
- {submission.provisionalScoringIsCompleted ? ( - - ) : ()} + ); + }) + } +
+
+
Review Type
+ Final Score +
+
+
Reviewer
+ N/A +
+
+
Score
+ {finalScore || 'N/A'} +
+
+
Status
+ {submission.provisionalScoringIsCompleted ? ( + Complete + ) : (In Queue)} +
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss index 4f6b6befb0..5ca7735253 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss @@ -1,4 +1,4 @@ -@import '~styles/mixins'; +@import "~styles/mixins"; .wrapper { @include roboto-medium; @@ -22,6 +22,27 @@ } } +.header { + display: flex; + justify-content: space-between; + padding-bottom: 25px; + + .title { + @include barlow-medium; + + font-weight: 600; + color: #2a2a2a; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + } + + .icon { + cursor: pointer; + margin-top: 5px; + } +} + .table-header { background: #fafafb; justify-content: center; @@ -36,11 +57,19 @@ display: flex; height: 40px; align-items: center; - border: 1px solid #ededf2; - border-bottom: none; + border-bottom: 1px solid #ededf2; - &:last-child { - border-bottom: 1px solid #ededf2; + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + gap: 20px; + height: inherit; + padding-top: 18px; + padding-bottom: 18px; + + &:first-child { + border-top: 1px solid #ededf2; + } } } @@ -70,7 +99,6 @@ } .title-detail { - color: $tc-dark-blue; margin-left: 2px; } @@ -96,13 +124,22 @@ } .column-1 { - color: $tc-dark-blue; + color: black; padding-left: 22px; + font-size: 14px; + + @include xs-to-sm { + padding-left: 0; + } } .table-content-header { color: $tc-black; + @include xs-to-sm { + display: none; + } + .column-1 { color: $tc-black; } @@ -118,6 +155,12 @@ &.column-1 { justify-content: flex-start; } + + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + font-size: 14px; + } } .table-content-footer { @@ -127,7 +170,7 @@ } .col-arrow { - display: flex; + display: none; padding-left: 5px; margin-right: -19px; @@ -139,7 +182,24 @@ } } +.hr { + width: 100%; + margin: 0; +} + +.sub-header { + font-size: 16px; + margin-top: 24px; + margin-bottom: 24px; + + .title-detail { + font-weight: bold; + } +} + .col-arrow-is-sorting { + display: block; + :global { g { fill: $tc-dark-blue; @@ -158,10 +218,15 @@ } } -.header-sort { +button.header-sort { display: flex; justify-content: center; align-items: center; + font-size: 11px; + color: #767676; + text-transform: uppercase; + font-weight: 600; + font-family: "Barlow", Helvetica, Arial, sans-serif; &:hover { color: $tc-dark-blue; @@ -174,7 +239,38 @@ } } -button.is-highlight, -.is-highlight { - background: rgba(26, 133, 255, 0.05); +.status-complete { + font-size: 14px; + color: #0ab88a; + font-weight: 500; +} + +.status-failed { + font-size: 14px; + color: #ef476f; + font-weight: 500; +} + +.status-in-queue { + font-size: 14px; + color: #f46500; + font-weight: 500; +} + +.mobile-header { + display: none; + font-weight: 600; + color: #767676; + padding-bottom: 3px; + + @include xs-to-sm { + display: block; + } +} + +.inner-content { + @include xs-to-sm { + max-height: calc(100vh - 150px); + overflow: auto; + } } diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx index 93e5f862f5..621cf81fad 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx @@ -14,10 +14,12 @@ import sortList from 'utils/challenge-detail/sort'; import IconClose from 'assets/images/icon-close-green.svg'; import DateSortIcon from 'assets/images/icon-date-sort.svg'; import SortIcon from 'assets/images/icon-sort.svg'; +import Tooltip from 'components/Tooltip'; import IconFail from '../../icons/failed.svg'; import DownloadIcon from '../../../SubmissionManagement/Icons/IconSquareDownload.svg'; -// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg'; +import ZoomIcon from '../../../SubmissionManagement/Icons/IconZoom.svg'; +// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg'; import style from './styles.scss'; const { getService } = services.submissions; @@ -379,18 +381,14 @@ class SubmissionsListView extends React.Component { 'submission-table-column column-1', )} > - +
Provisional Score
- {(provisionalScore < 0) ? () : ({provisionalScore})} + {(provisionalScore < 0) ? ( + + + + ) : ({provisionalScore})}
+ + {/* */} diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss index de9640e3ef..04ba214a53 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss @@ -96,8 +96,7 @@ flex-direction: column; font-size: 13px; line-height: 20px; - padding-top: 30px; - padding-bottom: 50px; + padding-top: 10px; margin: 0 41px; @include xs-to-sm { @@ -147,12 +146,13 @@ button.column-1-1, display: flex; justify-content: flex-start; align-items: center; - height: 40px; + height: 56px; @include xs-to-sm { display: flex; flex-direction: column; justify-content: flex-start; + align-items: flex-start; height: auto; } } @@ -306,6 +306,10 @@ button.column-1-1, margin-left: 17px; } +.icon-zoom { + margin-left: 17px; +} + .col-arrow { display: flex; padding-left: 5px; @@ -336,11 +340,6 @@ button.column-1-1, } } -button.is-highlight, -.is-highlight { - display: inherit; -} - .mobile-header { display: none; @@ -464,3 +463,14 @@ hr { margin-bottom: 16px; } } + +.is-highlight, +button.is-highlight { + display: inherit; + + .header-sort { + span { + color: black; + } + } +} diff --git a/src/shared/components/challenge-detail/MySubmissions/index.jsx b/src/shared/components/challenge-detail/MySubmissions/index.jsx index a3232f8c56..d0d80eb630 100644 --- a/src/shared/components/challenge-detail/MySubmissions/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/index.jsx @@ -7,12 +7,19 @@ import PT from 'prop-types'; import _ from 'lodash'; import { goToLogin } from 'utils/tc'; import LoadingIndicator from 'components/LoadingIndicator'; +import tc from 'components/buttons/themed/tc.scss'; + import { isTokenExpired } from '@topcoder-platform/tc-auth-lib'; +import { Modal, PrimaryButton } from 'topcoder-react-ui-kit'; import SubmissionsList from './SubmissionsList'; import SubmissionsDetail from './SubmissionsDetail'; -import './styles.scss'; +import style from './styles.scss'; + +const buttonThemes = { + tc, +}; class MySubmissionsView extends React.Component { constructor(props) { @@ -64,13 +71,14 @@ class MySubmissionsView extends React.Component { const { selectedSubmission, submissionsSortDetail } = this.state; if (!_.isEmpty(loadingMMSubmissionsForChallengeId)) { - return
; + return
; } return ( -
-
- {selectedSubmission ? ( +
+
+ { selectedSubmission && ( + this.setState({ selectedSubmission: null })} theme={style}> this.setState({ selectedSubmission: null })} submission={selectedSubmission} @@ -78,22 +86,33 @@ class MySubmissionsView extends React.Component { submissionsSort={submissionsSortDetail} onSortChange={sort => this.setState({ submissionsSortDetail: sort })} /> - ) : ( - this.setState({ selectedSubmission: submission })} - challengesUrl={challengesUrl} - challenge={challenge} - hasRegistered={hasRegistered} - unregistering={unregistering} - submissionEnded={submissionEnded} - isMM={isMM} - isLegacyMM={isLegacyMM} - mySubmissions={mySubmissions} - auth={auth} - submissionsSort={submissionsSort} - onSortChange={onSortChange} - /> + +
+ this.setState({ selectedSubmission: null })} + theme={{ + button: buttonThemes.tc['primary-green-md'], + }} + > + Close + +
+ )} + this.setState({ selectedSubmission: submission })} + challengesUrl={challengesUrl} + challenge={challenge} + hasRegistered={hasRegistered} + unregistering={unregistering} + submissionEnded={submissionEnded} + isMM={isMM} + isLegacyMM={isLegacyMM} + mySubmissions={mySubmissions} + auth={auth} + submissionsSort={submissionsSort} + onSortChange={onSortChange} + />
); diff --git a/src/shared/components/challenge-detail/MySubmissions/styles.scss b/src/shared/components/challenge-detail/MySubmissions/styles.scss index e3d3cfb71c..d8e8b0fc4d 100644 --- a/src/shared/components/challenge-detail/MySubmissions/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/styles.scss @@ -1,4 +1,4 @@ -@import '~styles/mixins'; +@import "~styles/mixins"; .wrapper { @include roboto-regular; @@ -17,3 +17,62 @@ .loading { margin-top: 30px; } + +.close-btn { + cursor: pointer; + display: flex; + justify-content: flex-end; + margin-top: 24px; + margin-bottom: 32px; + background-color: #137d60; + padding: 8px 24px; + border-radius: 24px; + float: right; + + span { + @include roboto-bold; + + font-weight: 700; + font-size: 14px; + line-height: 24px; + color: #fff; + } + + @include xs-to-sm { + border-top: 1px solid #e9e9e9; + position: sticky; + margin-bottom: 16px; + } +} + +.buttons { + margin-top: 24px; + float: right; + + @include xs-to-sm { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + display: flex; + justify-content: flex-end; + padding: 24px 16px; + background-color: white; + } +} + +.container { + padding: 25px; + width: 750px; + border-radius: 8px; + + @include xs-to-sm { + width: 100%; + margin: 0; + max-width: 100vw; + height: 100%; + max-height: 100vh; + padding: 24px 16px; + z-index: 999999; + } +} diff --git a/src/shared/components/challenge-detail/icons/failed.svg b/src/shared/components/challenge-detail/icons/failed.svg index 0c407d0d54..0ac7360987 100644 --- a/src/shared/components/challenge-detail/icons/failed.svg +++ b/src/shared/components/challenge-detail/icons/failed.svg @@ -1,19 +1,3 @@ - - - Submission Failed - - - - - - - - - - - - - - - - \ No newline at end of file + + +