diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js index ce9f35de..e4a9dedc 100644 --- a/browser/main/Detail/InfoButton.js +++ b/browser/main/Detail/InfoButton.js @@ -8,7 +8,7 @@ const InfoButton = ({ ) diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl index 41449cfb..45c378fe 100644 --- a/browser/main/Detail/InfoButton.styl +++ b/browser/main/Detail/InfoButton.styl @@ -7,12 +7,15 @@ pointer-events none top 50px z-index 200 - padding 5px line-height normal border-radius 2px opacity 0 transition 0.1s +.infoButton + padding 0px + margin 15px 0 + body[data-theme="dark"] .control-infoButton topBarButtonDark() diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js index 5a1437f7..33858665 100644 --- a/browser/main/Detail/InfoPanel.js +++ b/browser/main/Detail/InfoPanel.js @@ -24,7 +24,7 @@ const InfoPanel = ({
- CreatedAt + Created at
{createdAt} @@ -32,7 +32,7 @@ const InfoPanel = ({
- UpdatedAt + Updated at
{updatedAt} diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 08b22bd4..f0fd46ad 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -3,42 +3,54 @@ pointer-events none top 50px z-index 200 - padding 5px line-height normal - border-radius 2px + border-radius 4px opacity 0 - transition 0.1s + transition 0.2s .control-infoButton-panel z-index 200 - margin-top 60px - margin-left -160px + margin-top 45px + margin-left -210px 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) + padding 20px + width 340px + background-color $ui-noteList-backgroundColor + border 1px solid $border-color .group-section display flex line-height 30px - font-size 12px + font-size 13px .group-section-label width 70px height 20px text-align left - margin-right 30px - font-size 11px - color #939395 + margin-right 50px + font-size 13px + color $ui-inactive-text-color .group-section-control flex 1 + font-size 13px + color $ui-text-color + +.group-section-control input + width 160px + height 25px body[data-theme="dark"] .control-infoButton-panel - background-color #3a404c - border 1px solid #474f5c - color #ffffff + background-color $ui-dark-noteList-backgroundColor + border 1px solid $ui-dark-borderColor + + .group-section-label + color $ui-inactive-text-color + + .group-section-control + color $ui-dark-text-color + + .group-section-control input + background-color alpha($ui-dark-borderColor, 80%) + color $ui-dark-text-color diff --git a/browser/main/Detail/LastUpdatedString.js b/browser/main/Detail/LastUpdatedString.js deleted file mode 100644 index 3eae431f..00000000 --- a/browser/main/Detail/LastUpdatedString.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @fileoverview Component for show updated date of the detail. - */ -import React, { PropTypes } from 'react' -import { formatDate } from 'browser/lib/date-formatter' -import CSSModules from 'browser/lib/CSSModules' -import styles from './LastUpdatedString.styl' - -const LastUpdatedString = ({ date }) => { - let text = '' - - try { - text = `Last updated at ${formatDate(date)}` - } catch (e) { - text = '' - } - - return ( -

{text}

- ) -} - -LastUpdatedString.propTypes = { - date: PropTypes.string -} - -export default CSSModules(LastUpdatedString, styles) diff --git a/browser/main/Detail/LastUpdatedString.styl b/browser/main/Detail/LastUpdatedString.styl deleted file mode 100644 index e5270dc4..00000000 --- a/browser/main/Detail/LastUpdatedString.styl +++ /dev/null @@ -1,10 +0,0 @@ -.info-right-date - display inline - line-height 24px - padding-right 25px - font-size 11px - color $ui-button-color - -body[data-theme="dark"] - .info-right-date - color $ui-dark-button-color diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index e641f441..131ff9fd 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -29,7 +29,7 @@ .control-fullScreenButton float right - padding 7px + padding 0 0 2px 0 topBarButtonLight() .body diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index ac857250..1f8e3b90 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -18,6 +18,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' function pass (name) { switch (name) { @@ -54,7 +57,7 @@ class SnippetNoteDetail extends React.Component { } componentWillReceiveProps (nextProps) { - if (nextProps.note.key !== this.props.note.key) { + if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) { if (this.saveQueue != null) this.saveNow() let nextNote = Object.assign({ description: '' @@ -433,10 +436,18 @@ class SnippetNoteDetail extends React.Component { this.refs['code-' + this.state.snippetIndex].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 editorFontSize = parseInt(config.editor.fontSize, 10) if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14 let editorIndentSize = parseInt(config.editor.indentSize, 10) @@ -491,6 +502,17 @@ class SnippetNoteDetail extends React.Component {
}) + 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/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 148a3d85..5b6f15cf 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -68,7 +68,7 @@ .control-fullScreenButton float right - padding 7px + padding 0 0 2px 0 topBarButtonLight() body[data-theme="dark"] diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js index fdd59d32..f3748548 100644 --- a/browser/main/StatusBar/index.js +++ b/browser/main/StatusBar/index.js @@ -2,7 +2,6 @@ import React, { PropTypes } from 'react' import CSSModules from 'browser/lib/CSSModules' import styles from './StatusBar.styl' import ZoomManager from 'browser/main/lib/ZoomManager' -import LastUpdatedString from '../Detail/LastUpdatedString' const electron = require('electron') const { remote, ipcRenderer } = electron @@ -68,8 +67,6 @@ class StatusBar extends React.Component { : null } - -
) } diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 94f6a5e9..16c6ccb2 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -160,8 +160,7 @@ topBarButtonLight() height 34px border-radius 17px font-size 14px - margin 13px 7px - padding-top 7px + margin 15px 7px border none color $ui-button-color fill $ui-button-color @@ -182,7 +181,7 @@ $ui-dark-noteDetail-backgroundColor = #2D3033 $ui-dark-tag-backgroundColor = #3A404C $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD -$ui-dark-button--active-color = white +$ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-backgroundColor = #3A404C $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)