Merge branch 'feature/member-list-redesign' into dev

Author: maxceem

src/components/Sticky.jsx

@@ -7,14 +7,26 @@ export default class Sticky extends React.Component {
     super(props)
     this.mountSticky = (sticky) => { this.sticky = sticky }
     this.handleScroll = this.handleScroll.bind(this)
+    this.updateSticky = this.updateSticky.bind(this)
   }
 
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('refreshsticky', this.updateSticky)
   }
 
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('refreshsticky', this.updateSticky)
+  }
+
+  updateSticky() {
+    setTimeout(() => {
+      if (this.sticky) {
+        this.sticky.updateInitialDimension()
+        this.sticky.update()
+      }
+    })
   }
 
   handleScroll() {

src/components/TeamManagement/TeamManagement.jsx

@@ -52,12 +52,21 @@ class TeamManagement extends React.Component {
   }
 
   topcoderTeamInviteButtonClick() {
+    this.refreshStickyComp()
     this.setState({topcoderTeamInviteButtonExpanded: !this.state.topcoderTeamInviteButtonExpanded})
   }
 
   projectTeamInviteButtonClick() {
+    this.refreshStickyComp()
     this.setState({projectTeamInviteButtonExpanded: !this.state.projectTeamInviteButtonExpanded})
   }
+
+  refreshStickyComp() {
+    const event = document.createEvent('Event')
+    event.initEvent('refreshsticky', true, true)
+    document.dispatchEvent(event)
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.processingMembers !== nextProps.processingMembers && (!nextProps.processingMembers)) {
       this.props.onJoin(false)

src/projects/detail/containers/AssetsLibraryContainer.jsx

@@ -122,7 +122,7 @@ class AssetsLibraryContainer extends React.Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
               } else {
                 return leftArea
               }

src/projects/detail/containers/DashboardContainer.jsx

@@ -212,7 +212,7 @@ class DashboardContainer extends React.Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
               } else {
                 return leftArea
               }

src/projects/detail/containers/MessagesContainer.js

@@ -460,7 +460,7 @@ class MessagesView extends React.Component {
       <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
         {matches => {
           if (matches) {
-            return <Sticky top={60}>{leftArea}</Sticky>
+            return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
           } else {
             return leftArea
           }

src/projects/detail/containers/MessagesTabContainer.jsx

@@ -158,7 +158,7 @@ class MessagesTabContainer extends React.Component {
       <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
         {matches => {
           if (matches) {
-            return <Sticky top={60}>{leftArea}</Sticky>
+            return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
           } else {
             return leftArea
           }

src/projects/detail/containers/ProjectSummaryReportContainer.jsx

@@ -74,7 +74,7 @@ class ProjectSummaryReportContainer extends React.Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
               } else {
                 return leftArea
               }

src/projects/detail/containers/ScopeAndSpecificationContainer.jsx

@@ -184,7 +184,7 @@ class SpecificationContainer extends Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
               } else {
                 return leftArea
               }

src/projects/list/components/Projects/Projects.jsx

@@ -286,7 +286,7 @@ class Projects extends Component {
             {(matches) => {
               if (matches) {
                 return (
-                  <Sticky top={60}>
+                  <Sticky top={60} bottomBoundary="#wrapper-main">
                     <UserSidebar user={user}/>
                   </Sticky>
                 )

src/routes/metadata/components/MetaDataLayout.jsx

@@ -21,7 +21,7 @@ class MetaDataLayout extends React.Component {
             {(matches) => {
               if (matches) {
                 return (
-                  <Sticky top={60}>
+                  <Sticky top={60} bottomBoundary="#wrapper-main">
                     <MetadataSidebar/>
                   </Sticky>
                 )