Merge pull request #237 from sota1235/feature-add_folder_on_note_detail

Add folder selector on note detail.

browser/main/Detail/FolderSelect.js

@@ -262,13 +262,11 @@ class FolderSelect extends React.Component {
           : <div styleName='idle'>
             <div styleName='idle-label'>
               <span styleName='idle-label-name'
-                style={{borderColor: currentOption.folder.color}}
+                style={{color: currentOption.folder.color}}
               >
-                {currentOption.folder.name}
-                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
+                {currentOption.folder.name} /
               </span>
             </div>
-            <i styleName='idle-caret' className='fa fa-fw fa-caret-down' />
           </div>
         }
 

browser/main/Detail/FolderSelect.styl

@@ -7,29 +7,28 @@
   transition 0.15s
   user-select none
   &:hover
-    background-color white
-    border-color $ui-borderColor
+    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color white
+  background-color $ui-noteDetail-backgroundColor = #F4F4F4
   border-color $ui-input--focus-borderColor
+  width 100px
   &:hover
-    background-color white
     border-color $ui-input--focus-borderColor
 
 .idle
   position relative
   cursor pointer
+
 .idle-label
-  absolute left top
-  padding 0 0 0 5px
   right 20px
   overflow ellipsis
 
 .idle-label-name
-  border-left solid 4px transparent
-  padding 2px 5px
+  font-size 16px
+  padding 2px
+
 .idle-label-name-surfix
   font-size 10px
   color $ui-inactive-text-color
@@ -60,9 +59,9 @@
   max-height 450px
   overflow auto
   z-index 200
+  border $ui-border
   background-color white
   border-radius 2px
-  box-shadow 2px 2px 10px gray
 
 .search-optionList-item
   height 34px
@@ -115,8 +114,8 @@ body[data-theme="dark"]
 
   .search-optionList
     color white
+    border-color $ui-dark-borderColor
     background-color $ui-dark-button--hover-backgroundColor
-    box-shadow 2px 2px 10px black
 
   .search-optionList-item
     &:hover

browser/main/Detail/LastUpdatedString.styl

@@ -1,5 +1,7 @@
 .info-right-date
   display inline
+  line-height 24px
+  padding-right 25px
   font-size 11px
   color $ui-button-color
 

browser/main/Detail/MarkdownNoteDetail.js

@@ -4,7 +4,7 @@ import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import LastUpdatedString from './LastUpdatedString'
+import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -205,7 +205,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    let { data, config } = this.props
     let { note } = this.state
 
     return (
@@ -219,6 +219,15 @@ class MarkdownNoteDetail extends React.Component {
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                data={data}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
+            </div>
+
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -226,7 +235,6 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
@@ -248,6 +256,7 @@ class MarkdownNoteDetail extends React.Component {
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/NoteDetailInfo.styl

@@ -16,6 +16,19 @@ $info-margin-under-border = 27px
   padding 0 5px
   margin 0px 2px
 
+.info-left-top
+  display inline-block
+  height $info-height
+  line-height $info-height
+
+.info-left-top-folderSelect
+  display inline-block
+  padding 0 3px
+  height 34px
+  line-height 34px
+  vertical-align middle
+  border-radius 3px
+
 .info-left-button
   width 34px
   height 34px

browser/main/Detail/SnippetNoteDetail.js

@@ -5,7 +5,7 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import LastUpdatedString from './LastUpdatedString'
+import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -460,7 +460,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    let { data, config } = this.props
     let { note } = this.state
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
@@ -528,6 +528,15 @@ class SnippetNoteDetail extends React.Component {
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                data={data}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
+            </div>
+
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -535,7 +544,6 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
@@ -596,6 +604,7 @@ class SnippetNoteDetail extends React.Component {
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/SnippetNoteDetail.styl

@@ -56,6 +56,7 @@
 
 .override
   absolute bottom left
+  left 60px
   height 23px
   z-index 1
   button

browser/main/Detail/StarButton.styl

@@ -1,5 +1,4 @@
 .root
-  position absolute
   left 7px
   top 0
   padding 0

browser/main/Detail/TagSelect.styl

@@ -1,7 +1,6 @@
 .root
-  position absolute
+  display inline-block
   top 19px
-  left 44px
   user-select none
   vertical-align middle
   width 300px

browser/main/StatusBar/index.js

@@ -2,6 +2,7 @@ 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
@@ -52,22 +53,23 @@ class StatusBar extends React.Component {
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='blank' />
-        {status.updateReady
-          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-          </button>
-          : null
-        }
-        {/* <button styleName='help'>
-          <i className='fa fa-info-circle' />
-        </button> */}
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
           <i className='fa fa-search-plus' />&nbsp;
           {Math.floor(config.zoom * 100)}%
         </button>
+
+        <div styleName='blank' />
+
+        {status.updateReady
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            </button>
+          : null
+        }
+
+        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }
@@ -77,7 +79,8 @@ StatusBar.contextTypes = {
   status: PropTypes.shape({
     updateReady: PropTypes.bool.isRequired
   }).isRequired,
-  config: PropTypes.shape({}).isRequired
+  config: PropTypes.shape({}).isRequired,
+  date: PropTypes.string
 }
 
 StatusBar.propTypes = {

docs/build.md

@@ -29,11 +29,6 @@ $ npm run hot
 ```
 > Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
-If the app gets stuck on load, you may need to run the following.
-```
-$ npm run vendor
-```
-
 By this, webpack will watch the code changes and apply it automatically.
 
 > ### Notice

gruntfile.js

@@ -98,7 +98,7 @@ module.exports = function (grunt) {
       prune: true,
       overwrite: true,
       out: path.join(__dirname, 'dist'),
-      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|dist|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
+      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
     }
     switch (platform) {
       case 'win':

package.json

@@ -117,11 +117,6 @@
     "grunt-electron-installer-debian": "^0.2.0"
   },
   "optional": false,
-  "standard": {
-    "globals": [
-      "localStorage"
-    ]
-  },
   "ava": {
     "files": [
       "tests/**/*-test.js"