Merge pull request #698 from BoostIO/update-layout

Update layout

browser/main/Detail/InfoButton.js

@@ -8,7 +8,7 @@ const InfoButton = ({
   <button styleName='control-infoButton'
     onClick={onClick}
   >
-    <i className='fa fa-info-circle infoButton' styleName='info-button' />
+    <i className='fa fa-info infoButton' styleName='info-button' />
   </button>
 )
 

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()

browser/main/Detail/InfoPanel.js

@@ -24,7 +24,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        CreatedAt
+        Created at
       </div>
       <div styleName='group-section-control'>
         {createdAt}
@@ -32,7 +32,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        UpdatedAt
+        Updated at
       </div>
       <div styleName='group-section-control'>
         {updatedAt}

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

browser/main/Detail/LastUpdatedString.js

@@ -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 (
-    <p styleName='info-right-date'>{text}</p>
-  )
-}
-
-LastUpdatedString.propTypes = {
-  date: PropTypes.string
-}
-
-export default CSSModules(LastUpdatedString, styles)

browser/main/Detail/LastUpdatedString.styl

@@ -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

browser/main/Detail/MarkdownNoteDetail.styl

@@ -29,7 +29,7 @@
 
 .control-fullScreenButton
   float right
-  padding 7px
+  padding 0 0 2px 0
   topBarButtonLight()
 
 .body

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 {
       </div>
     })
 
+    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'
         style={this.props.style}
@@ -527,6 +549,16 @@ class SnippetNoteDetail extends React.Component {
             >
               <i className='fa fa-expand' styleName='fullScreen-button' />
             </button>
+            <InfoButton
+              onClick={(e) => this.handleInfoButtonClick(e)}
+            />
+            <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/Detail/SnippetNoteDetail.styl

@@ -68,7 +68,7 @@
 
 .control-fullScreenButton
   float right
-  padding 7px
+  padding 0 0 2px 0
   topBarButtonLight()
 
 body[data-theme="dark"]

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 {
             </button>
           : null
         }
-
-        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }

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%)