From 81e8a290f0945a767badf2e5e24c9d2a693cb37b Mon Sep 17 00:00:00 2001 From: asmsuechan Date: Sat, 8 Jul 2017 13:15:56 +0900 Subject: [PATCH] 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)