From 81e8a290f0945a767badf2e5e24c9d2a693cb37b Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sat, 8 Jul 2017 13:15:56 +0900 Subject: [PATCH 1/5] Add infomation panel --- browser/main/Detail/InfoButton.js | 32 ++++++++++++ browser/main/Detail/InfoButton.styl | 18 +++++++ browser/main/Detail/InfoPanel.js | 60 +++++++++++++++++++++++ browser/main/Detail/InfoPanel.styl | 44 +++++++++++++++++ browser/main/Detail/MarkdownNoteDetail.js | 26 +++++++++- browser/main/index.js | 8 +++ 6 files changed, 187 insertions(+), 1 deletion(-) create mode 100644 browser/main/Detail/InfoButton.js create mode 100644 browser/main/Detail/InfoButton.styl create mode 100644 browser/main/Detail/InfoPanel.js create mode 100644 browser/main/Detail/InfoPanel.styl diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js new file mode 100644 index 00000000..1c1e0c11 --- /dev/null +++ b/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 ( + + ) + } +} + +InfoButton.propTypes = { +} + +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..23ec1e57 --- /dev/null +++ b/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 +}) => ( +
+
+
+ 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 +} + +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/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index c8d9f8f4..195c36dc 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 @@ -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 (
+ +
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) From a7bd3f253f58f401e6516d04b5e680e77a08b028 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sat, 8 Jul 2017 13:09:33 +0900 Subject: [PATCH 2/5] Rename getLastUpdated() to formatDate() --- browser/lib/date-formatter.js | 2 +- browser/main/Detail/LastUpdatedString.js | 4 ++-- tests/date-formatter-test.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) 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/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/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.' ) }) From 805829be780d230857927cb5a52783b77f0b71e3 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sat, 8 Jul 2017 13:29:25 +0900 Subject: [PATCH 3/5] Make InfoButton component stateless --- browser/main/Detail/InfoButton.js | 32 +++++++---------------- browser/main/Detail/MarkdownNoteDetail.js | 9 ++++++- 2 files changed, 17 insertions(+), 24 deletions(-) diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js index 1c1e0c11..24498880 100644 --- a/browser/main/Detail/InfoButton.js +++ b/browser/main/Detail/InfoButton.js @@ -2,29 +2,15 @@ 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 ( - - ) - } -} +const InfoButton = ({ + onClick +}) => ( + +) InfoButton.propTypes = { } diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 195c36dc..559262b2 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -232,6 +232,11 @@ class MarkdownNoteDetail extends React.Component { this.focus() } + handleInfoButtonClick (e) { + const infoPanel= document.querySelector('.infoPanel') + infoPanel.style.display = display === 'none' ? 'inline' : 'none' + } + render () { let { data, config, location } = this.props let { note } = this.state @@ -303,7 +308,9 @@ class MarkdownNoteDetail extends React.Component { > - + Date: Sat, 8 Jul 2017 13:37:24 +0900 Subject: [PATCH 4/5] Fix some pointed by lint --- browser/main/Detail/InfoPanel.js | 2 +- browser/main/Detail/MarkdownNoteDetail.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js index 23ec1e57..193dc80f 100644 --- a/browser/main/Detail/InfoPanel.js +++ b/browser/main/Detail/InfoPanel.js @@ -43,7 +43,7 @@ const InfoPanel = ({ Note Link
- { e.target.select()}} /> + { e.target.select() }} />
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 559262b2..aeb80dd8 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -233,7 +233,7 @@ class MarkdownNoteDetail extends React.Component { } handleInfoButtonClick (e) { - const infoPanel= document.querySelector('.infoPanel') + const infoPanel = document.querySelector('.infoPanel') infoPanel.style.display = display === 'none' ? 'inline' : 'none' } From f005bb1e46869fe887ef60876f6ed65da5596bc6 Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sat, 8 Jul 2017 14:02:03 +0900 Subject: [PATCH 5/5] hoge --- browser/main/Detail/InfoButton.js | 3 ++- browser/main/Detail/InfoPanel.js | 4 +++- browser/main/Detail/MarkdownNoteDetail.js | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js index 24498880..ce9f35de 100644 --- a/browser/main/Detail/InfoButton.js +++ b/browser/main/Detail/InfoButton.js @@ -6,13 +6,14 @@ const InfoButton = ({ onClick }) => ( ) InfoButton.propTypes = { + onClick: PropTypes.func.isRequired } export default CSSModules(InfoButton, styles) diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js index 193dc80f..5a1437f7 100644 --- a/browser/main/Detail/InfoPanel.js +++ b/browser/main/Detail/InfoPanel.js @@ -54,7 +54,9 @@ const InfoPanel = ({ InfoPanel.propTypes = { storageName: PropTypes.string.isRequired, folderName: PropTypes.string.isRequired, - noteKey: 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/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index aeb80dd8..e5d35a28 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -234,7 +234,7 @@ class MarkdownNoteDetail extends React.Component { handleInfoButtonClick (e) { const infoPanel = document.querySelector('.infoPanel') - infoPanel.style.display = display === 'none' ? 'inline' : 'none' + if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none' } render () { @@ -309,7 +309,7 @@ class MarkdownNoteDetail extends React.Component { this.handleInfoButtonClick(e)} />