Url share done

browser/main/HomePage.js

@@ -9,7 +9,7 @@ import _ from 'lodash'
 import { isModalOpen, closeModal } from 'boost/modal'
 
 const electron = require('electron')
-const BrowserWindow = electron.remote.BrowserWindow
+const remote = electron.remote
 
 const TEXT_FILTER = 'TEXT_FILTER'
 const FOLDER_FILTER = 'FOLDER_FILTER'
@@ -29,10 +29,10 @@ class HomePage extends React.Component {
   }
 
   handleKeyDown (e) {
-    if (process.env.BOOST_ENV === 'development' && e.keyCode === 73 && e.metaKey && e.altKey) {
+    if (e.keyCode === 73 && e.metaKey && e.altKey) {
       e.preventDefault()
       e.stopPropagation()
-      BrowserWindow.getFocusedWindow().toggleDevTools()
+      remote.getCurrentWebContents().openDevTools()
       return
     }
 
@@ -106,7 +106,7 @@ class HomePage extends React.Component {
           list.selectNextArticle()
         }
 
-        if (e.keyCode === 65 || (e.keyCode === 13 && e.metaKey) || (e.keyCode === 78 && e.metaKey)) {
+        if ((e.keyCode === 65 && !e.metaKey && !e.ctrlKey) || (e.keyCode === 13 && e.metaKey) || (e.keyCode === 78 && e.metaKey)) {
           nav.handleNewPostButtonClick()
           e.preventDefault()
         }
@@ -142,6 +142,7 @@ class HomePage extends React.Component {
         <ArticleDetail
           ref='detail'
           dispatch={dispatch}
+          user={user}
           activeArticle={activeArticle}
           folders={folders}
           status={status}

browser/main/HomePage/ArticleDetail/ShareButton.js

@@ -0,0 +1,135 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import api from 'boost/api'
+import clientKey from 'boost/clientKey'
+const clipboard = require('electron').clipboard
+
+function getDefault () {
+  return {
+    openDropdown: false,
+    isSharing: false,
+    // Fetched url
+    url: null,
+    // for tooltip Copy -> Copied!
+    copied: false
+  }
+}
+
+export default class ShareButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = getDefault()
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.setState(getDefault())
+  }
+
+  componentDidMount () {
+    this.dropdownInterceptor = e => {
+      this.dropdownClicked = true
+    }
+    ReactDOM.findDOMNode(this.refs.dropdown).addEventListener('click', this.dropdownInterceptor)
+    this.shareWithPublicURLHandler = e => {
+      this.handleShareWithPublicURLClick(e)
+    }
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.dropdownHandler)
+    ReactDOM.findDOMNode(this.refs.dropdown).removeEventListener('click', this.dropdownInterceptor)
+  }
+
+  handleOpenButtonClick (e) {
+    this.openDropdown()
+    if (this.dropdownHandler == null) {
+      this.dropdownHandler = e => {
+        if (!this.dropdownClicked) {
+          this.closeDropdown()
+        } else {
+          this.dropdownClicked = false
+        }
+      }
+    }
+    document.removeEventListener('click', this.dropdownHandler)
+    document.addEventListener('click', this.dropdownHandler)
+  }
+
+  openDropdown () {
+    this.setState({openDropdown: true})
+  }
+
+  closeDropdown () {
+    document.removeEventListener('click', this.dropdownHandler)
+    this.setState({openDropdown: false})
+  }
+
+  handleShareWithPublicURLClick (e) {
+    let input = Object.assign({}, this.props.article, {clientKey: clientKey.get()})
+    api.shareWithPublicURL(input)
+      .then(res => {
+        let url = res.body.url
+        this.setState({url: url})
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+
+  handleCopyURLClick () {
+    clipboard.writeText(this.state.url)
+    this.setState({copied: true})
+  }
+
+  // Restore copy url tooltip
+  handleCopyURLMouseLeave () {
+    this.setState({copied: false})
+  }
+
+  render () {
+    let hasPublicURL = this.state.url != null
+    return (
+      <div className='ShareButton'>
+        <button ref='openButton' onClick={e => this.handleOpenButtonClick(e)} className='ShareButton-open-button'>
+          <i className='fa fa-fw fa-share-alt'/>
+          {
+            this.state.openDropdown ? null : (
+              <span className='tooltip'>Share</span>
+            )
+          }
+        </button>
+        <div ref='dropdown' className={'share-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
+          {
+            !hasPublicURL ? (
+              <button
+                onClick={e => this.shareWithPublicURLHandler(e)}
+                ref='sharePublicURL'
+                disabled={this.state.isSharing}>
+                <i className='fa fa-fw fa-external-link'/> {!this.state.isSharing ? 'Share with public URL' : 'Sharing...'}
+              </button>
+            ) : (
+              <div className='ShareButton-url'>
+                <input className='ShareButton-url-input' value={this.state.url} readOnly/>
+                <button
+                  onClick={e => this.handleCopyURLClick(e)}
+                  className='ShareButton-url-button'
+                  onMouseLeave={e => this.handleCopyURLMouseLeave(e)}
+                  >
+                  <i className='fa fa-fw fa-clipboard'/>
+                  <div className='ShareButton-url-button-tooltip'>{this.state.copied ? 'Copied!' : 'Copy URL'}</div>
+                </button>
+                <div className='ShareButton-url-alert'>This url is valid for 7 days.</div>
+              </div>
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+ShareButton.propTypes = {
+  article: PropTypes.shape({
+    publicURL: PropTypes.string
+  })
+}

browser/main/HomePage/ArticleDetail/index.js

@@ -24,6 +24,8 @@ import TagLink from 'boost/components/TagLink'
 import TagSelect from 'boost/components/TagSelect'
 import ModeSelect from 'boost/components/ModeSelect'
 import activityRecord from 'boost/activityRecord'
+import api from 'boost/api'
+import ShareButton from './ShareButton'
 
 const electron = require('electron')
 const clipboard = electron.clipboard
@@ -106,12 +108,16 @@ export default class ArticleDetail extends React.Component {
       isTagChanged: false,
       isTitleChanged: false,
       isContentChanged: false,
-      isModeChanged: false
+      isModeChanged: false,
+      openShareDropdown: false
     }
   }
 
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+    this.shareDropdownInterceptor = e => {
+      e.stopPropagation()
+    }
   }
 
   componentWillUnmount () {
@@ -234,9 +240,12 @@ export default class ArticleDetail extends React.Component {
                 <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
               </div>
               <div className='right'>
+                <ShareButton article={activeArticle}/>
+
                 <button onClick={e => this.handleClipboardButtonClick(e)} className='editBtn'>
                   <i className='fa fa-fw fa-clipboard'/><span className='tooltip'>Copy to clipboard</span>
                 </button>
+
                 <button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
                   <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit (e)</span>
                 </button>
@@ -586,7 +595,8 @@ export default class ArticleDetail extends React.Component {
 ArticleDetail.propTypes = {
   status: PropTypes.shape(),
   activeArticle: PropTypes.shape(),
-  activeUser: PropTypes.shape(),
+  user: PropTypes.shape(),
+  folders: PropTypes.array,
   dispatch: PropTypes.func
 }
 ArticleDetail.prototype.linkState = linkState

browser/main/MainPage.js

@@ -2,8 +2,6 @@ const electron = require('electron')
 const ipc = electron.ipcRenderer
 import React, { PropTypes } from 'react'
 
-var ContactModal = require('boost/components/modal/ContactModal')
-
 export default class MainContainer extends React.Component {
   constructor (props) {
     super(props)
@@ -20,20 +18,12 @@ export default class MainContainer extends React.Component {
     ipc.send('update-app', 'Deal with it.')
   }
 
-  openContactModal () {
-    this.openModal(ContactModal)
-  }
-
   render () {
     return (
       <div className='Main'>
         {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'/>
-          <div className='tooltip'>Contact us</div>
-        </button> */}
         {this.props.children}
       </div>
     )

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

@@ -284,7 +284,87 @@ iptFocusBorderColor = #369DCD
             color noTagsColor
       .right
         z-index 30
-        button
+        div.share-dropdown
+          position absolute
+          right 5px
+          top 30px
+          background-color transparentify(invBackgroundColor, 80%)
+          padding 5px 0
+          width 200px
+          &.hide
+            display none
+          &>button
+            width 200px
+            text-align left
+            display block
+            height 33px
+            background-color transparent
+            color white
+            font-size 14px
+            padding 0 10px
+            border none
+            &:hover
+              background-color transparentify(lighten(invBackgroundColor, 30%), 80%)
+          &>.ShareButton-url
+            clearfix()
+            input.ShareButton-url-input
+              width 155px
+              margin 0 0 0 5px
+              height 25px
+              outline none
+              border none
+              border-top-left-radius 5px
+              border-bottom-left-radius 5px
+              float left
+              padding 5px
+            button.ShareButton-url-button
+              width 35px
+              height 25px
+              border none
+              margin 0 5px 0 0
+              outline none
+              border-top-right-radius 5px
+              border-bottom-right-radius 5px
+              background-color darken(white, 5%)
+              color inactiveTextColor
+              float right
+              div.ShareButton-url-button-tooltip
+                tooltip()
+                right 10px
+              &:hover
+                color textColor
+                div.ShareButton-url-button-tooltip
+                  opacity 1
+            div.ShareButton-url-alert
+              float left
+              height 25px
+              line-height 25px
+              padding 0 15px
+              color white
+
+        .ShareButton
+          display inline-block
+          button.ShareButton-open-button
+            border-radius 16.5px
+            cursor pointer
+            height 33px
+            width 33px
+            border none
+            margin-right 5px
+            font-size 18px
+            color inactiveTextColor
+            background-color darken(white, 5%)
+            padding 0
+            .tooltip
+              tooltip()
+              margin-top 25px
+              margin-left -40px
+            &:hover
+              color textColor
+              .tooltip
+                opacity 1
+
+        &>button
           border-radius 16.5px
           cursor pointer
           height 33px