Reskin profile updates

.circleci/config.yml

@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - reskin-profile-settings
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

src/shared/components/ProfilePage/Stats/ChartTooltip/index.jsx

@@ -5,15 +5,18 @@
 import React from 'react';
 import PT from 'prop-types';
 import './styles.scss';
+import cn from 'classnames';
 
 const ChartTooltip = ({
   show, left, top, challengeName,
-  challengeData, rating, ratingColor, href,
+  challengeData, rating, rotated, ratingColor, href,
+  id,
 }) => (
   <a
-    styleName="chart-tooltip"
+    id={`chart-tooltip-${id}`}
+    styleName={cn('chart-tooltip', rotated ? 'rotated' : null)}
     style={{
-      opacity: show ? 1 : 0,
+      display: show ? 'block' : 'none',
       left,
       top,
       pointerEvents: href ? 'all' : 'none',
@@ -44,6 +47,8 @@ ChartTooltip.defaultProps = {
   rating: 0,
   ratingColor: '',
   href: null,
+  rotated: false,
+  id: '',
 };
 
 ChartTooltip.propTypes = {
@@ -55,6 +60,8 @@ ChartTooltip.propTypes = {
   rating: PT.number,
   ratingColor: PT.string,
   href: PT.string,
+  rotated: PT.bool,
+  id: PT.string,
 };
 
 export default ChartTooltip;

src/shared/components/ProfilePage/Stats/ChartTooltip/styles.scss

@@ -2,26 +2,19 @@
 
 .chart-tooltip {
   display: block;
-  opacity: 0;
   position: absolute;
   box-sizing: border-box;
   width: 320px;
-  height: 115px;
+  min-height: 115px;
   padding: 15px;
   color: $tc-white !important;
   background-color: $tc-gray-80;
-  transform: translate(-160px, -45px);
   border-radius: 5px;
   transition: opacity 200ms ease;
   transition-delay: 200ms;
   font-family: sans-serif;
   z-index: 3;
 
-  &:hover {
-    opacity: 1 !important;
-    color: $tc-white;
-  }
-
   &::before {
     content: '';
     position: absolute;
@@ -33,6 +26,22 @@
     transform: rotate(45deg);
   }
 
+  &.rotated {
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 96%;
+      left: 50%;
+      width: 10px;
+      background-color: $tc-gray-80;
+      transform: rotate(45deg);
+    }
+  }
+
   .tooltip-rating {
     width: 60px;
     height: 60px;

src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx

@@ -183,6 +183,55 @@ export default class DistributionGraph extends React.Component {
       .attr('height', d => totalH - padding.bottom - yScale(d.number))
       .attr('fill', d => getRatingColor(d.start));
 
+    const updateTooltipPosition = () => {
+      const e = d3.mouse(document.getElementById('distribution-graph-container'));
+      const profileModalContainerEl = document.querySelector('.ProfileModalContainer');
+      const profileModalContainerRect = profileModalContainerEl
+        ? profileModalContainerEl.getBoundingClientRect() : null;
+      const graphEl = document.getElementById('distribution-graph-container');
+      const graphRect = graphEl ? graphEl.getBoundingClientRect() : null;
+      const tooltipElement = document.getElementById('chart-tooltip-distribution-graph');
+
+      let cx = e[0];
+      let cy = e[1];
+      const defaultWidth = 320;
+      const defaultHeight = 115;
+      if (tooltipElement) {
+        const { clientWidth, clientHeight } = tooltipElement;
+        cx -= ((clientWidth || defaultWidth) / 2);
+        cy += 15;
+
+        if (graphRect && profileModalContainerRect) {
+          const minLeft = profileModalContainerRect.x - graphRect.x;
+          const minTop = profileModalContainerRect.y - graphRect.y;
+          const maxRight = profileModalContainerRect.width + minLeft;
+          const maxBottom = profileModalContainerRect.height + minTop;
+          const minXTooltipPosition = minLeft;
+          const maxXTooltipPosition = maxRight - (clientWidth || defaultWidth);
+          const minYTooltipPosition = minTop;
+          const maxYTooltipPosition = maxBottom - (clientHeight || defaultHeight);
+          if (cx < minXTooltipPosition) {
+            cx = minXTooltipPosition;
+          }
+          if (cx > maxXTooltipPosition) {
+            cx = maxXTooltipPosition;
+          }
+          if (cy < minYTooltipPosition) {
+            cy = minYTooltipPosition;
+          }
+          if (cy > maxYTooltipPosition) {
+            cy = maxYTooltipPosition;
+          }
+        }
+      }
+
+      $scope.setState({
+        show: true,
+        left: cx,
+        top: cy,
+      });
+    };
+
     svg.selectAll('rect.hover')
       .data(ranges)
       .enter()
@@ -194,24 +243,16 @@ export default class DistributionGraph extends React.Component {
       .attr('width', xScale.rangeBand())
       .attr('height', d => totalH - padding.bottom - yScale(d.number))
       .on('mouseover', (d) => {
-        const e = d3.event;
         $scope.setState({
-          show: true,
-          left: e.pageX,
-          top: e.pageY,
           challengeName: `${d.number} Coders`,
           challengeData: `Rating Range: ${d.start} - ${d.start + 99}`,
           rating: d.number,
           ratingColor: getRatingColor(d.start),
         });
+        updateTooltipPosition();
       })
       .on('mousemove', () => {
-        const e = d3.event;
-        $scope.setState({
-          show: true,
-          left: e.pageX,
-          top: e.pageY,
-        });
+        updateTooltipPosition();
       })
       .on('mouseout', () => {
         $scope.setState({
@@ -253,8 +294,8 @@ export default class DistributionGraph extends React.Component {
 
   render() {
     return (
-      <div styleName="distribution-graph" ref={this.graphRef}>
-        <ChartTooltip {...this.state} />
+      <div id="distribution-graph-container" styleName="distribution-graph" ref={this.graphRef}>
+        <ChartTooltip id="distribution-graph" {...this.state} />
       </div>
     );
   }

src/shared/components/ProfilePage/Stats/DistributionGraph/index.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  position: relative;
 
   .axis path,
   .axis line {

src/shared/components/ProfilePage/Stats/HistoryGraph/index.jsx

@@ -34,7 +34,12 @@ export default class HistoryGraph extends React.Component {
       }
     };
     window.addEventListener('resize', this.resizeHandle);
-    this.bodyClickHandle = () => this.setState({ show: false });
+    this.bodyClickHandle = (event) => {
+      if (event.target && event.target.tagName === 'circle') {
+        return;
+      }
+      this.setState({ show: false });
+    };
     document.body.addEventListener('click', this.bodyClickHandle);
   }
 
@@ -240,6 +245,58 @@ export default class HistoryGraph extends React.Component {
       .attr('stroke-width', 3);
       */
 
+    const updateTooltipPosition = () => {
+      const e = d3.mouse(document.getElementById('history-graph-container'));
+      const profileModalContainerEl = document.querySelector('.ProfileModalContainer');
+      const profileModalContainerRect = profileModalContainerEl
+        ? profileModalContainerEl.getBoundingClientRect() : null;
+      const graphEl = document.getElementById('history-graph-container');
+      const graphRect = graphEl ? graphEl.getBoundingClientRect() : null;
+      const tooltipElement = document.getElementById('chart-tooltip-history-graph');
+
+      let cx = e[0];
+      let cy = e[1];
+      let rotated = false;
+      const defaultWidth = 320;
+      const defaultHeight = 115;
+      if (tooltipElement) {
+        const { clientWidth, clientHeight } = tooltipElement;
+        cx -= ((clientWidth || defaultWidth) / 2);
+        cy += 15;
+
+        if (graphRect && profileModalContainerRect) {
+          const minLeft = profileModalContainerRect.x - graphRect.x;
+          const minTop = profileModalContainerRect.y - graphRect.y;
+          const maxRight = profileModalContainerRect.width + minLeft;
+          const maxBottom = profileModalContainerRect.height + minTop;
+          const minXTooltipPosition = minLeft;
+          const maxXTooltipPosition = maxRight - (clientWidth || defaultWidth);
+          const minYTooltipPosition = minTop;
+          const maxYTooltipPosition = maxBottom - (clientHeight || defaultHeight);
+          if (cx < minXTooltipPosition) {
+            cx = minXTooltipPosition;
+          }
+          if (cx > maxXTooltipPosition) {
+            cx = maxXTooltipPosition;
+          }
+          if (cy < minYTooltipPosition) {
+            cy = minYTooltipPosition;
+          }
+          if (cy > maxYTooltipPosition) {
+            cy -= clientHeight + 25;
+            rotated = true;
+          }
+        }
+      }
+
+      $scope.setState({
+        rotated,
+        show: true,
+        left: cx,
+        top: cy,
+      });
+    };
+
     svg.selectAll('circle')
       .data(history)
       .enter()
@@ -249,24 +306,25 @@ export default class HistoryGraph extends React.Component {
       .attr('r', 5.5)
       .attr('fill', d => getRatingColor(d.newRating))
       .on('mouseover', (d) => {
-        const e = d3.event;
         $scope.setState({
-          show: true,
-          left: e.pageX,
-          top: e.pageY,
           challengeName: d.challengeName,
           challengeData: moment(d.ratingDate).format('MMM DD, YYYY'),
           rating: d.newRating,
           ratingColor: getRatingColor(d.newRating),
           href: getChallengeLink(d.challengeId),
         });
+
+        updateTooltipPosition();
+      })
+      .on('mousemove', () => {
+        updateTooltipPosition();
       });
   }
 
   render() {
     return (
-      <div styleName="history-graph" ref={this.graphRef}>
-        <ChartTooltip {...this.state} />
+      <div id="history-graph-container" styleName="history-graph" ref={this.graphRef}>
+        <ChartTooltip id="history-graph" {...this.state} />
       </div>
     );
   }

src/shared/components/ProfilePage/Stats/HistoryGraph/index.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  position: relative;
 
   .axis path,
   .axis line {

src/shared/components/ProfilePage/index.jsx

@@ -8,6 +8,8 @@ import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { isomorphy } from 'topcoder-react-utils';
+import { Modal } from 'topcoder-react-ui-kit';
+import IconClose from 'assets/images/icon-close-green.svg';
 import shortId from 'shortid';
 import { actions } from 'topcoder-react-lib';
 import { connect } from 'react-redux';
@@ -17,12 +19,12 @@ import { dataMap } from './ExternalLink';
 import Header from './Header';
 import MemberTracks from './MemberTracks';
 
-import './styles.scss';
+import styles from './styles.scss';
 import Skills from './Skills';
 import MemberInfo from './MemberInfo';
 import Activity from './Activity';
 import TcaCertificates from './TcaCertificates';
-import ProfileModal from './ProfileModal';
+// import ProfileModal from './ProfileModal';
 // import Awards from './Awards';
 
 /**
@@ -249,26 +251,38 @@ class ProfilePage extends React.Component {
           }}
         />
         { showDetails && (
-          <ProfileModal
-            title={(
-              subTrack === 'SRM'
-                ? 'Single round match'
-                : subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')
-            )}
+          <Modal
+            theme={{
+              container: `${track === 'COPILOT' ? styles['modal-container-copilot'] : styles['modal-container']} ProfileModalContainer`,
+              overlay: styles['modal-overlay'],
+            }}
             onCancel={this.closeDetails}
           >
-            <ProfileStats
-              handleParam={handleParam}
-              meta={meta}
-              track={track}
-              subTrack={subTrack}
-              tab={tab}
-              setTab={(tab) => {
-                this.setState({ tab });
-              }}
-              isAlreadyLoadChallenge={this.isAlreadyLoadChallenge}
-            />
-          </ProfileModal>
+            <React.Fragment>
+              <div styleName="header">
+                <h2 styleName="title">
+                  {
+                    subTrack === 'SRM' ? 'Single round match'
+                      : subTrack.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')
+                  }
+                </h2>
+                <div styleName="icon" role="presentation" onClick={this.closeDetails}>
+                  <IconClose />
+                </div>
+              </div>
+              <ProfileStats
+                handleParam={handleParam}
+                meta={meta}
+                track={track}
+                subTrack={subTrack}
+                tab={tab}
+                setTab={(tab) => {
+                  this.setState({ tab });
+                }}
+                isAlreadyLoadChallenge={this.isAlreadyLoadChallenge}
+              />
+            </React.Fragment>
+          </Modal>
         )}
       </div>
     );