diff --git a/browser/lib/date-formatter.js b/browser/lib/date-formatter.js index 4f6a4002..8f74fe4d 100644 --- a/browser/lib/date-formatter.js +++ b/browser/lib/date-formatter.js @@ -8,7 +8,7 @@ import moment from 'moment' * @param {mixed} * @return {string} */ -export function getLastUpdated (date) { +export function formatDate (date) { const m = moment(date) if (!m.isValid()) { throw Error('Invalid argument.') diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js new file mode 100644 index 00000000..ce9f35de --- /dev/null +++ b/browser/main/Detail/InfoButton.js @@ -0,0 +1,19 @@ +import React, { PropTypes } from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './InfoButton.styl' + +const InfoButton = ({ + onClick +}) => ( + +) + +InfoButton.propTypes = { + onClick: PropTypes.func.isRequired +} + +export default CSSModules(InfoButton, styles) diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl new file mode 100644 index 00000000..41449cfb --- /dev/null +++ b/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() diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js new file mode 100644 index 00000000..5a1437f7 --- /dev/null +++ b/browser/main/Detail/InfoPanel.js @@ -0,0 +1,62 @@ +import React, { PropTypes } from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './InfoPanel.styl' + +const InfoPanel = ({ + storageName, folderName, noteKey, updatedAt, createdAt +}) => ( +
+
+
+ Storage +
+
+ {storageName} +
+
+
+
+ Folder +
+
+ {folderName} +
+
+
+
+ CreatedAt +
+
+ {createdAt} +
+
+
+
+ UpdatedAt +
+
+ {updatedAt} +
+
+
+
+ Note Link +
+
+ { e.target.select() }} /> +
+
+ +
+
+) + +InfoPanel.propTypes = { + storageName: PropTypes.string.isRequired, + folderName: PropTypes.string.isRequired, + noteKey: PropTypes.string.isRequired, + updatedAt: PropTypes.string.isRequired, + createdAt: PropTypes.string.isRequired +} + +export default CSSModules(InfoPanel, styles) diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl new file mode 100644 index 00000000..08b22bd4 --- /dev/null +++ b/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 diff --git a/browser/main/Detail/LastUpdatedString.js b/browser/main/Detail/LastUpdatedString.js index eb67fa80..3eae431f 100644 --- a/browser/main/Detail/LastUpdatedString.js +++ b/browser/main/Detail/LastUpdatedString.js @@ -2,7 +2,7 @@ * @fileoverview Component for show updated date of the detail. */ import React, { PropTypes } from 'react' -import { getLastUpdated } from 'browser/lib/date-formatter' +import { formatDate } from 'browser/lib/date-formatter' import CSSModules from 'browser/lib/CSSModules' import styles from './LastUpdatedString.styl' @@ -10,7 +10,7 @@ const LastUpdatedString = ({ date }) => { let text = '' try { - text = `Last updated at ${getLastUpdated(date)}` + text = `Last updated at ${formatDate(date)}` } catch (e) { text = '' } diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 375af1f5..ba64c590 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/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 @@ -229,9 +232,27 @@ class MarkdownNoteDetail extends React.Component { this.focus() } + handleInfoButtonClick (e) { + const infoPanel = document.querySelector('.infoPanel') + if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none' + } + 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 (
+ this.handleInfoButtonClick(e)} + /> +
diff --git a/browser/main/index.js b/browser/main/index.js index 45591328..c8a72e9c 100644 --- a/browser/main/index.js +++ b/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) diff --git a/tests/date-formatter-test.js b/tests/date-formatter-test.js index cb8770a1..265ca4c4 100644 --- a/tests/date-formatter-test.js +++ b/tests/date-formatter-test.js @@ -2,11 +2,11 @@ * @fileoverview Unit test for browser/lib/date-formatter.js */ const test = require('ava') -const { getLastUpdated } = require('browser/lib/date-formatter') +const { formatDate } = require('browser/lib/date-formatter') test(t => { t.throws( - () => getLastUpdated('invalid argument'), + () => formatDate('invalid argument'), 'Invalid argument.' ) })