External link用のDropdown menu追加

Author: Rokt33r

browser/main/HomePage/ArticleTopBar.js

@@ -35,7 +35,8 @@ export default class ArticleTopBar extends React.Component {
     super(props)
 
     this.state = {
-      isTooltipHidden: true
+      isTooltipHidden: true,
+      isLinksDropdownOpen: false
     }
   }
 
@@ -96,6 +97,28 @@ export default class ArticleTopBar extends React.Component {
     dispatch(toggleTutorial())
   }
 
+  handleLinksDropdownClick (e) {
+    e.preventDefault()
+    let linksButton = document.activeElement
+    this.handleLinksDropdownClickHandler = e => {
+      if (linksButton !== document.activeElement) {
+        console.log('hide dropdown')
+        document.removeEventListener('click', this.handleLinksDropdownClickHandler)
+        this.setState({
+          isLinksDropdownOpen: false
+        })
+      }
+    }
+
+    if (!this.state.isLinksDropdownOpen) {
+      document.removeEventListener('click', this.handleLinksDropdownClickHandler)
+      document.addEventListener('click', this.handleLinksDropdownClickHandler)
+      this.setState({
+        isLinksDropdownOpen: true
+      })
+    }
+  }
+
   render () {
     let { status } = this.props
     return (
@@ -132,10 +155,23 @@ export default class ArticleTopBar extends React.Component {
         <div className='right'>
           <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
           </button>
-          <ExternalLink className='logo' href='http://b00st.io'>
+          <a className='linksBtn' onClick={e => this.handleLinksDropdownClick(e)} href>
             <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
-            <span className='tooltip'>Boost official page</span>
-          </ExternalLink>
+          </a>
+          {
+            this.state.isLinksDropdownOpen
+              ? (
+                <div className='links-dropdown'>
+                  <ExternalLink className='links-item' href='https://b00st.io'>
+                    <i className='fa fa-fw fa-home'/>Boost official page
+                  </ExternalLink>
+                  <ExternalLink className='links-item' href='https://github.com/BoostIO/boost-app-discussions/issues'>
+                    <i className='fa fa-fw fa-bullhorn'/> Discuss
+                  </ExternalLink>
+                </div>
+              )
+              : null
+          }
         </div>
 
         {status.isTutorialOpen ? (

browser/styles/main/HomeContainer/components/ArticleTopBar.styl

@@ -147,17 +147,33 @@ infoBtnActiveBgColor = #3A3A3A
         .tooltip
           opacity 1
 
-    &>.logo
+    &>.linksBtn
       display block
       position absolute
       top 8px
       right 15px
       opacity 0.7
-      .tooltip
-        tooltip()
-        margin-top 44px
-        margin-left -120px
       &:hover
         opacity 1
         .tooltip
           opacity 1
+    &>.links-dropdown
+      position fixed
+      z-index 50
+      right 10px
+      top 40px
+      background-color transparentify(invBackgroundColor, 80%)
+      padding 5px 0
+      .links-item
+        padding 0 10px
+        height 33px
+        width 100%
+        display block
+        line-height 33px
+        text-decoration none
+        color white
+        &:hover
+          background-color transparentify(lighten(invBackgroundColor, 30%), 80%)
+
+
+