FinderにCopy to clipboard button追加

Rokt33r · Rokt33r · commit 3e980fd2d45f · 2015-11-15T01:22:56.000+09:00
diff --git a/browser/finder/FinderDetail.js b/browser/finder/FinderDetail.js
@@ -11,7 +11,16 @@ export default class FinderDetail extends React.Component {
       return (
         <div className='FinderDetail'>
           <div className='header'>
-          <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}</div>
+            <div className='left'>
+            <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}
+            </div>
+            <div className='right'>
+              <button onClick={this.props.saveToClipboard} className='clipboardBtn'>
+                <i className='fa fa-clipboard fa-fw'/>
+                <span className='tooltip'>Copy to clipboard (Enter)</span>
+              </button>
+            </div>
+          </div>
           <div className='content'>
             {activeArticle.mode === 'markdown'
               ? <MarkdownPreview content={activeArticle.content}/>
@@ -30,5 +39,6 @@ export default class FinderDetail extends React.Component {
 }
 
 FinderDetail.propTypes = {
-  activeArticle: PropTypes.shape()
+  activeArticle: PropTypes.shape(),
+  saveToClipboard: PropTypes.func
 }
diff --git a/browser/finder/index.html b/browser/finder/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 
-  <title>CodeXen Popup</title>
+  <title>Boost Finder</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 
diff --git a/browser/finder/index.js b/browser/finder/index.js
@@ -45,10 +45,7 @@ class FinderMain extends React.Component {
     }
 
     if (e.keyCode === 13) {
-      let { activeArticle } = this.props
-      clipboard.writeText(activeArticle.content)
-      activityRecord.emit('FINDER_COPY')
-      hideFinder()
+      this.saveToClipboard()
       e.preventDefault()
     }
     if (e.keyCode === 27) {
@@ -57,6 +54,13 @@ class FinderMain extends React.Component {
     }
   }
 
+  saveToClipboard () {
+    let { activeArticle } = this.props
+    clipboard.writeText(activeArticle.content)
+    activityRecord.emit('FINDER_COPY')
+    hideFinder()
+  }
+
   handleSearchChange (e) {
     let { dispatch } = this.props
 
@@ -83,6 +87,7 @@ class FinderMain extends React.Component {
 
   render () {
     let { articles, activeArticle, status, dispatch } = this.props
+    let saveToClipboard = () => this.saveToClipboard()
     return (
       <div onClick={e => this.handleClick(e)} onKeyDown={e => this.handleKeyDown(e)} className='Finder'>
         <FinderInput
@@ -98,7 +103,10 @@ class FinderMain extends React.Component {
           dispatch={dispatch}
           selectArticle={article => this.selectArticle(article)}
         />
-        <FinderDetail activeArticle={activeArticle}/>
+        <FinderDetail
+          activeArticle={activeArticle}
+          saveToClipboard={saveToClipboard}
+        />
       </div>
     )
   }
diff --git a/browser/styles/finder/index.styl b/browser/styles/finder/index.styl
@@ -79,6 +79,31 @@ body
       white-space nowrap
       text-overflow ellipsis
       overflow-x hidden
+      clearfix()
+      .left
+        float left
+      .right
+        float right
+        button
+          border-radius 16.5px
+          cursor pointer
+          height 33px
+          width 33px
+          border none
+          margin-right 5px
+          font-size 18px
+          color inactiveTextColor
+          background-color transparent
+          padding 0
+          .tooltip
+            tooltip()
+          &.clipboardBtn .tooltip
+            margin-left -160px
+            margin-top 25px
+          &:hover
+            color textColor
+            .tooltip
+              opacity 1
     .content
       position absolute
       top 55px
