Merge branch 'develop' into submission_delete_button

Author: luizrrodrigues

.circleci/config.yml

@@ -349,8 +349,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
-                - submission_delete_button
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global
@@ -364,21 +363,22 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - reskin-profile-settings
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - footer-update
+                - social-share-updates
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global
           filters: &filters-staging
             branches:
               only:
                 - develop
+                - old-mm-fix
       # Production builds are exectuted
       # when PR is merged to the master
       # Don't change anything in this configuration

package.json

@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.8",
+    "topcoder-react-lib": "1.2.10",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/assets/images/open-graph/challenges/02-Design-Preview.png

@@ -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/assets/images/open-graph/challenges/03-Development.png

@@ -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/assets/images/open-graph/challenges/04-Data-Science.png

@@ -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/assets/images/open-graph/challenges/05-QA.png

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

src/assets/images/open-graph/challenges/06-Big-Prize.png

@@ -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/assets/images/open-graph/challenges/09-First2Finish.png

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