実装 - PlanetHeaderにPrivate鍵表示

browser/main/Components/PlanetHeader.jsx

@@ -37,6 +37,14 @@ module.exports = React.createClass({
         <div className='headerLabel'>
           <span className='userName'>{currentUserName}</span><br/>
           <span className='planetName'>{currentPlanetName}</span>
+
+          {this.props.currentPlanet.public ? null : (
+            <div className='private'>
+              <i className='fa fa-lock'/>
+              <div className='privateTooltip'>Private planet</div>
+            </div>
+          )}
+
         <button onClick={this.openPlanetSettingModal} className='menuBtn'>
             <i className='fa fa-chevron-down'></i>
           </button>

browser/styles/main/containers/PlanetContainer.styl

@@ -51,6 +51,35 @@ articleListWidth= 275px
       white-space nowrap
       &:hover
         color darken(brandBorderColor, 30%)
+    .private
+      position absolute
+      top 12px
+      right 38px
+      width 33px
+      height 33px
+      line-height 33px
+      text-align center
+      color inactiveColor
+      &:hover
+        color textColor
+      .privateTooltip
+        position fixed
+        z-index popupZIndex
+        background-color transparentify(invBackgroundColor, 80%)
+        color invTextColor
+        padding 10px
+        font-size 0.9em
+        line-height 0.9em
+        border-radius 5px
+        white-space nowrap
+        opacity 0
+        transition 0.1s
+        pointer-events none
+        margin-left -30px
+      &:hover .privateTooltip
+        opacity 1
+
+
     .menuBtn
       position absolute
       top 12px

browser/styles/main/containers/UserContainer.styl

@@ -126,7 +126,7 @@
           background-color white
         .planetTooltip
           position absolute
-          z-index 500
+          z-index popupZIndex
           background-color transparentify(invBackgroundColor, 80%)
           color invTextColor
           padding 10px