実装 - tooltip (Refresh, Planet setting, Planet refresh, Edit article, Delete article, Contact)

browser/main/Components/HomeNavigator.jsx

@@ -137,7 +137,7 @@ module.exports = React.createClass({
         </ul>
         <button onClick={this.openPlanetCreateModal} className='newPlanet'>
           <i className='fa fa-plus'/>
-          <div className='newPlanetTooltip'>Create new planet</div>
+          <div className='tooltip'>Create new planet</div>
         </button>
       </div>
     )

browser/main/Components/PlanetArticleDetail.jsx

@@ -76,8 +76,14 @@ module.exports = React.createClass({
             </div>
 
             <span className='itemControl'>
-              <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+              <button onClick={this.openEditModal} className='editButton'>
-              <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+                <i className='fa fa-edit fa-fw'></i>
+                <div className='tooltip'>Edit</div>
+              </button>
+              <button onClick={this.openDeleteModal} className='deleteButton'>
+                <i className='fa fa-trash fa-fw'></i>
+                <div className='tooltip'>Delete</div>
+              </button>
             </span>
           </div>
           <div className='detailBody'>
@@ -101,8 +107,14 @@ module.exports = React.createClass({
           </div>
 
           <span className='itemControl'>
-            <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+            <button onClick={this.openEditModal} className='editButton'>
-            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+              <i className='fa fa-edit fa-fw'></i>
+              <div className='tooltip'>Edit</div>
+            </button>
+            <button onClick={this.openDeleteModal} className='deleteButton'>
+              <i className='fa fa-trash fa-fw'></i>
+              <div className='tooltip'>Delete</div>
+            </button>
           </span>
         </div>
         <div className='detailBody'>

browser/main/Components/PlanetHeader.jsx

@@ -56,12 +56,13 @@ module.exports = React.createClass({
           {this.props.currentPlanet.public ? null : (
             <div className='private'>
               <i className='fa fa-lock'/>
-              <div className='privateTooltip'>Private planet</div>
+              <div className='tooltip'>Private planet</div>
             </div>
           )}
 
-        <button onClick={this.openPlanetSettingModal} className='menuBtn'>
+          <button onClick={this.openPlanetSettingModal} className='planetSettingButton'>
             <i className='fa fa-chevron-down'></i>
+            <div className='tooltip'>Planet setting</div>
           </button>
         </div>
         <div className='headerControl'>
@@ -69,9 +70,13 @@ module.exports = React.createClass({
             <i className='fa fa-search'/>
             <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </div>
-          <button onClick={this.refresh} className='refreshButton'><i className='fa fa-refresh'/></button>
+          <button onClick={this.refresh} className='refreshButton'>
+            <i className='fa fa-refresh'/>
+            <div className='tooltip'>Refresh planet</div>
+          </button>
           <a onClick={this.openExternal} href='http://b00st.io' className='logo'>
             <img width='44' height='44' src='resources/favicon-230x230.png'/>
+            <div className='tooltip'>Boost official page</div>
           </a>
         </div>
       </div>

browser/main/Containers/MainContainer.jsx

@@ -96,7 +96,10 @@ module.exports = React.createClass({
         {this.state.updateAvailable ? (
         <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
-        <button onClick={this.openContactModal} className='contactButton'><i className='fa fa-paper-plane-o'/></button>
+        <button onClick={this.openContactModal} className='contactButton'>
+          <i className='fa fa-paper-plane-o'/>
+          <div className='tooltip'>Contact us</div>
+        </button>
         <RouteHandler/>
       </div>
     )

browser/styles/main/containers/PlanetContainer.styl

@@ -64,40 +64,35 @@ articleListWidth= 275px
       color inactiveColor
       &:hover
         color textColor
-      .privateTooltip
+      .tooltip
-        position fixed
+        tooltip()
-        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
+      &:hover .tooltip
         opacity 1
 
 
-    .menuBtn
+    .planetSettingButton
       position absolute
-      top 12px
+      top 15px
       right 5px
-      font-size 1em
+      font-size 0.8em
       btnDefault()
       box-sizing border-box
       circle()
-      width 33px
+      width 26px
-      height 33px
+      height 26px
       text-align center
       cursor pointer
       transition 0.1s
-      transform scale(0.8)
       &:focus, &.focus
         outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -36px
+      &:hover .tooltip
+        opacity 1
+
   .headerControl
     noSelect()
     absolute top bottom right
@@ -118,10 +113,11 @@ articleListWidth= 275px
     .refreshButton
       display block
       position absolute
-      top 12px
+      top 15px
       right 55px
-      width 28px
+      width 26px
-      height 28px
+      height 26px
+      font-size 0.8em
       btnDefault()
       circle()
       text-align center
@@ -129,16 +125,28 @@ articleListWidth= 275px
       transition 0.1s
       &:focus, &.focus
         outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -39px
+      &:hover .tooltip
+        opacity 1
     .logo
       display block
       position absolute
       top 4px
       right 10px
       cursor pointer
-      transition 0.1s
+      img
-      opacity 0.9
+        transition 0.1s
-      &:hover, &.hover
+        opacity 0.9
+      &:hover img, &:hover .tooltip
         opacity 1
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left -67px
+
 
 .PlanetNavigator
   absolute bottom left
@@ -283,6 +291,23 @@ articleListWidth= 275px
       z-index 1
       top 2px
       right 2px
+      .deleteButton, .editButton
+        btnDefault()
+        text-align center
+        width 33px
+        height 33px
+        border-radius 16.5px
+        font-size 15px
+        margin 0 3px
+        .tooltip
+          tooltip()
+          margin-top 10px
+        &:hover .tooltip
+          opacity 1
+      .editButton .tooltip
+        margin-left -12px
+      .deleteButton .tooltip
+        margin-left -26px
   .detailBody
     absolute left right bottom
     top 105px

browser/styles/main/containers/UserContainer.styl

@@ -159,22 +159,11 @@
         border-color darken(brandBorderColor, 10%)
         background-color brandColor
         color white
-      .newPlanetTooltip
+      .tooltip
-        position fixed
+        tooltip()
-        z-index 500
+        margin-top -22px
-        background-color transparentify(invBackgroundColor, 80%)
-        color invTextColor
-        padding 10px
-        line-height 1em
-        border-radius 5px
-        margin-top -23px
         margin-left 33px
-        white-space nowrap
+      &:hover .tooltip
-        font-size 1.1em
-        opacity 0
-        transition 0.1s
-        pointer-events none
-      &:hover .newPlanetTooltip
         opacity 1
   .UserContainer
     absolute top bottom right

browser/styles/main/index.styl

@@ -16,6 +16,8 @@ body
   color textColor
   font-size fontSize
   font-weight 400
+button
+  font-family "Lato"
 
 div, span, a, button, input, textarea
   box-sizing border-box
@@ -118,3 +120,9 @@ textarea.block-input
     padding 10px 15px
     border-radius 5px
     background-color backgroundColor
+    .tooltip
+      tooltip()
+      margin-top -22px
+      margin-left -97px
+    &:hover .tooltip
+      opacity 1

browser/styles/mixins/tooltip.styl

@@ -0,0 +1,13 @@
+tooltip()
+  position fixed
+  z-index popupZIndex
+  background-color transparentify(invBackgroundColor, 80%)
+  color invTextColor
+  padding 10px
+  font-size 12px
+  line-height 12px
+  border-radius 5px
+  white-space nowrap
+  opacity 0
+  transition 0.1s
+  pointer-events none