実装 - Team pageとPlanet pageにMember List表示

browser/main/Components/PlanetHeader.jsx

@@ -1,5 +1,6 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
 
 var Modal = require('../Mixins/Modal')
 var ExternalLink = require('../Mixins/ExternalLink')
@@ -35,7 +36,7 @@ module.exports = React.createClass({
     return (
       <div className='PlanetHeader'>
         <div className='headerLabel'>
-          <span className='userName'>{currentUserName}</span><br/>
+          <Link to='userHome' params={{userName: currentUserName}} className='userName'>{currentUserName}</Link>
           <span className='planetName'>{currentPlanetName}</span>
 
           {this.props.currentPlanet.public ? null : (

browser/main/Containers/UserContainer.jsx

@@ -189,6 +189,30 @@ module.exports = React.createClass({
       } else {
         return this.renderUserHome(currentUser)
       }
+    } else if (this.isActive('planet') && user != null && user.userType === 'team') {
+      console.log(user.Members)
+      var members = user.Members.map(function (member) {
+        return (
+          <li key={'user-' + member.id}><Link to='userHome' params={{userName: member.name}}>
+            <ProfileImage className='memberImage' size='22' email={member.email}/>
+            <div className='memberInfo'>
+              <div className='memberProfileName'>{member.profileName}</div>
+              <div className='memberName'>@{member.name}</div>
+            </div>
+          </Link></li>
+        )
+      })
+      return (
+        <div className='UserContainer'>
+          <RouteHandler/>
+          <div className='memberPopup'>
+            <div className='label'>Members</div>
+            <ul className='members'>
+              {members}
+            </ul>
+          </div>
+        </div>
+      )
     } else {
       return (
         <div className='UserContainer'>
@@ -214,8 +238,14 @@ module.exports = React.createClass({
     var members = user.Members == null ? [] : user.Members.map(function (member) {
       return (
         <li key={'user-' + member.id}>
-          <Link to='userHome' params={{userName: member.name}}>{member.profileName} ({member.name})</Link>
-          <div className='role'>{member.TeamMember.role}</div>
+          <Link to='userHome' params={{userName: member.name}}>
+            <ProfileImage size='22' className='memberImage' email={member.email}/>
+            <div className='memberInfo'>
+              <div className='memberProfileName'>{member.profileName} <span className='memberRole'>({member.TeamMember.role})</span></div>
+              <div className='memberName'>@{member.name}</div>
+            </div>
+          </Link>
+          <div className='role'></div>
         </li>
       )
     })

browser/styles/main/containers/PlanetContainer.styl

@@ -37,8 +37,10 @@ articleListWidth= 275px
       width 140px
       font-size 1em
       color textColor
+      text-decoration none
       &:hover
         color darken(lightButtonColor, 50%)
+        text-decoration underline
     .planetName
       position absolute
       top 5px

browser/styles/main/containers/UserContainer.styl

@@ -186,6 +186,35 @@
   .UserContainer
     absolute top bottom right
     left 55px
+    .memberPopup
+      absolute left
+      top 235px
+      z-index popupZIndex
+      padding 0 15px 10px
+      width 200px
+      .label
+        padding 10px 0
+        font-size 0.9em
+        border-bottom solid 1px borderColor
+        margin-bottom 15px
+      .members
+        li
+          padding 0 10px
+          margin-bottom 15px
+          clearfix()
+          .memberImage
+            float left
+            margin-right 7px
+          .memberInfo
+            float left
+            .memberProfileName
+              margin-bottom 5px
+            .memberName
+              margin-left 5px
+              font-size 0.8em
+              color inactiveTextColor
+          a:hover .memberProfileName, a:hover .memberName
+            text-decoration underline
     .userProfile
       absolute top left right
       padding 15px
@@ -221,13 +250,34 @@
       .teamLabel, .memberLabel
         font-size 1.2em
         margin-bottom 15px
-      .teams, .members
+      .teams
         margin-left 10px
         li
           margin-bottom 10px
           font-size 1.1em
           .createTeamButton, .addMemberButton
             btnStripDefault()
+      .members
+        li
+          padding 0 10px
+          margin-bottom 15px
+          clearfix()
+          .memberImage
+            float left
+            margin-right 7px
+          .memberInfo
+            float left
+            .memberProfileName
+              margin-bottom 5px
+              .memberRole
+                font-size 0.8em
+                color inactiveTextColor
+            .memberName
+              margin-left 5px
+              font-size 0.8em
+              color inactiveTextColor
+          .createTeamButton, .addMemberButton
+            btnStripDefault()
       .members .role
         margin-left 7px
         margin-top 2px