Add infomation panel

browser/main/Detail/InfoButton.js

@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoButton.styl'
+
+class InfoButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.handleInfoButtonClick = this.handleInfoButtonClick.bind(this)
+  }
+
+  handleInfoButtonClick (e) {
+    e.preventDefault()
+    const infoPanel= document.querySelector('.infoPanel')
+    infoPanel.style.display = display === 'none' ? 'inline' : 'none'
+  }
+
+  render () {
+    return (
+      <button styleName='control-infoButton'
+        onClick={(e) => this.handleInfoButtonClick(e)}
+      >
+        <i className='fa fa-info-circle infoButton' styleName='info-button' />
+      </button>
+    )
+  }
+}
+
+InfoButton.propTypes = {
+}
+
+export default CSSModules(InfoButton, styles)

browser/main/Detail/InfoButton.styl

@@ -0,0 +1,18 @@
+.control-infoButton
+  float right
+  topBarButtonLight()
+
+.control-infoPanel
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-infoButton
+    topBarButtonDark()

browser/main/Detail/InfoPanel.js

@@ -0,0 +1,60 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+
+const InfoPanel = ({
+  storageName, folderName, noteKey, updatedAt, createdAt
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Storage
+      </div>
+      <div styleName='group-section-control'>
+        {storageName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Folder
+      </div>
+      <div styleName='group-section-control'>
+        {folderName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        CreatedAt
+      </div>
+      <div styleName='group-section-control'>
+        {createdAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        UpdatedAt
+      </div>
+      <div styleName='group-section-control'>
+        {updatedAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Note Link
+      </div>
+      <div styleName='group-section-control'>
+        <input value={noteKey} onClick={(e) => { e.target.select()}} />
+      </div>
+    </div>
+
+    <div styleName='group-export' />
+  </div>
+)
+
+InfoPanel.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  noteKey: PropTypes.string.isRequired
+}
+
+export default CSSModules(InfoPanel, styles)

browser/main/Detail/InfoPanel.styl

@@ -0,0 +1,44 @@
+.control-infoPanel
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-infoButton-panel
+  z-index 200
+  margin-top 60px
+  margin-left -160px
+  position absolute
+  padding 10px
+  padding-left 15px
+  width 300px
+  background-color #EAEAEA
+  border 1px solid #d0d0d0
+  box-shadow 0 0 1px rgba(76,86,103,0.15), 0 2px 18px rgba(31,37,50,0.22)
+
+.group-section
+  display flex
+  line-height 30px
+  font-size 12px
+
+.group-section-label
+  width 70px
+  height 20px
+  text-align left
+  margin-right 30px
+  font-size 11px
+  color #939395
+
+.group-section-control
+  flex 1
+
+body[data-theme="dark"]
+  .control-infoButton-panel
+    background-color #3a404c
+    border 1px solid #474f5c
+    color #ffffff

browser/main/Detail/MarkdownNoteDetail.js

@@ -15,6 +15,9 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import { formatDate } from 'browser/lib/date-formatter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -230,8 +233,21 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   render () {
-    let { data, config } = this.props
+    let { data, config, location } = this.props
     let { note } = this.state
+    let storageKey = note.storage
+    let folderKey = note.folder
+
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     return (
       <div className='NoteDetail'
@@ -287,6 +303,14 @@ class MarkdownNoteDetail extends React.Component {
             >
               <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
             </button>
+            <InfoButton />
+            <InfoPanel
+              storageName={currentOption.storage.name}
+              folderName={currentOption.folder.name}
+              noteKey={location.query.key}
+              updatedAt={formatDate(note.updatedAt)}
+              createdAt={formatDate(note.createdAt)}
+            />
           </div>
         </div>
 

browser/main/index.js

@@ -23,6 +23,14 @@ document.addEventListener('dragover', function (e) {
   e.stopPropagation()
 })
 
+document.addEventListener('click', function (e) {
+  const isInfoButton = e.target.className.includes('infoButton')
+  const isInfoPanel = e.target.offsetParent.className.includes('infoPanel')
+  if (isInfoButton || isInfoPanel) return
+  const infoPanel = document.querySelector('.infoPanel')
+  if (infoPanel) infoPanel.style.display = 'none'
+})
+
 let el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)