renew SideNav

add contextmenu
fix MutableSet bug

Author: Rokt33r

browser/lib/Mutable.js

@@ -61,7 +61,7 @@ class MutableSet {
   constructor (iterable) {
     this._set = new Set(iterable)
     Object.defineProperty(this, 'size', {
-      get: () => this._map.size,
+      get: () => this._set.size,
       set: function (value) {
         this['size'] = value
       }

browser/main/NoteList/index.js

@@ -38,7 +38,6 @@ class NoteList extends React.Component {
     }
 
     this.state = {
-      range: 0
     }
   }
 
@@ -57,19 +56,6 @@ class NoteList extends React.Component {
 
   resetScroll () {
     this.refs.list.scrollTop = 0
-    this.setState({
-      range: 0
-    })
-  }
-
-  handleScroll (e) {
-    let notes = this.notes
-
-    if (e.target.offsetHeight + e.target.scrollTop > e.target.scrollHeight - 250 && notes.length > this.state.range * 20 + 20) {
-      this.setState({
-        range: this.state.range + 1
-      })
-    }
   }
 
   componentWillUnmount () {
@@ -82,6 +68,7 @@ class NoteList extends React.Component {
 
   componentDidUpdate (prevProps) {
     let { location } = this.props
+
     if (this.notes.length > 0 && location.query.key == null) {
       let { router } = this.context
       router.replace({
@@ -325,7 +312,7 @@ class NoteList extends React.Component {
     this.notes = notes = this.getNotes()
       .sort(sortFunc)
 
-    let noteList = notes.slice(0, 20 + 20 * this.state.range)
+    let noteList = notes
       .map((note) => {
         if (note == null) return null
         let tagElements = _.isArray(note.tags)
@@ -424,7 +411,6 @@ class NoteList extends React.Component {
           ref='list'
           tabIndex='-1'
           onKeyDown={(e) => this.handleNoteListKeyDown(e)}
-          onScroll={(e) => this.handleScroll(e)}
         >
           {noteList}
         </div>

browser/main/SideNav/StorageItem.js

@@ -2,6 +2,13 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageItem.styl'
 import { hashHistory } from 'react-router'
+import modal from 'browser/main/lib/modal'
+import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
+import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
+import dataApi from 'browser/main/lib/dataApi'
+
+const { remote } = require('electron')
+const { Menu, MenuItem, dialog } = remote
 
 class StorageItem extends React.Component {
   constructor (props) {
@@ -12,12 +19,59 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleHeaderContextMenu (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Add Folder',
+      click: (e) => this.handleAddFolderButtonClick(e)
+    }))
+    menu.append(new MenuItem({
+      type: 'separator'
+    }))
+    menu.append(new MenuItem({
+      label: 'Unlink Storage',
+      click: (e) => this.handleUnlinkStorageClick(e)
+    }))
+    menu.popup()
+  }
+
+  handleUnlinkStorageClick (e) {
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Unlink Storage',
+      detail: 'This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      let { storage, dispatch } = this.props
+      dataApi.removeStorage(storage.key)
+        .then(() => {
+          dispatch({
+            type: 'REMOVE_STORAGE',
+            storageKey: storage.key
+          })
+        })
+        .catch((err) => {
+          throw err
+        })
+    }
+  }
+
   handleToggleButtonClick (e) {
     this.setState({
       isOpen: !this.state.isOpen
     })
   }
 
+  handleAddFolderButtonClick (e) {
+    let { storage } = this.props
+
+    modal.open(CreateFolderModal, {
+      storage
+    })
+  }
+
   handleHeaderInfoClick (e) {
     let { storage } = this.props
     hashHistory.push('/storages/' + storage.key)
@@ -30,22 +84,78 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleFolderButtonContextMenu (e, folder) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Rename Folder',
+      click: (e) => this.handleRenameFolderClick(e, folder)
+    }))
+    menu.append(new MenuItem({
+      type: 'separator'
+    }))
+    menu.append(new MenuItem({
+      label: 'Delete Folder',
+      click: (e) => this.handleFolderDeleteClick(e, folder)
+    }))
+    menu.popup()
+  }
+
+  handleRenameFolderClick (e, folder) {
+    let { storage } = this.props
+    modal.open(RenameFolderModal, {
+      storage,
+      folder
+    })
+  }
+
+  handleFolderDeleteClick (e, folder) {
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Delete Folder',
+      detail: 'This work will deletes all notes in the folder and can not be undone.',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      let { storage, dispatch } = this.props
+      dataApi
+        .deleteFolder(storage.key, folder.key)
+        .then((data) => {
+          dispatch({
+            type: 'DELETE_FOLDER',
+            storage: data.storage,
+            folderKey: data.folderKey
+          })
+        })
+    }
+  }
+
   render () {
-    let { storage, location, isFolded } = this.props
+    let { storage, location, isFolded, data } = this.props
+    let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
       let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
+
+      let noteCount = noteSet != null
+        ? noteSet.size
+        : 0
       return <button styleName={isActive
           ? 'folderList-item--active'
           : 'folderList-item'
         }
         key={folder.key}
         onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+        onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
       >
         <span styleName='folderList-item-name'
           style={{borderColor: folder.color}}
         >
           {isFolded ? folder.name.substring(0, 1) : folder.name}
         </span>
+        {!isFolded &&
+          <span styleName='folderList-item-noteCount'>{noteCount}</span>
+        }
         {isFolded &&
           <span styleName='folderList-item-tooltip'>
             {folder.name}
@@ -61,9 +171,11 @@ class StorageItem extends React.Component {
         key={storage.key}
       >
         <div styleName={isActive
-              ? 'header--active'
-              : 'header'
-            }>
+            ? 'header--active'
+            : 'header'
+          }
+          onContextMenu={(e) => this.handleHeaderContextMenu(e)}
+        >
           <button styleName='header-toggleButton'
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
@@ -73,21 +185,24 @@ class StorageItem extends React.Component {
               }
             />
           </button>
+
+          {!isFolded &&
+            <button styleName='header-addFolderButton'
+              onClick={(e) => this.handleAddFolderButtonClick(e)}
+            >
+              <i className='fa fa-plus'/>
+            </button>
+          }
+
           <button styleName='header-info'
             onClick={(e) => this.handleHeaderInfoClick(e)}
           >
             <span styleName='header-info-name'>
               {isFolded ? storage.name.substring(0, 1) : storage.name}
             </span>
-            <span styleName='header-info-path'>
-              ({storage.path})
-            </span>
             {isFolded &&
               <span styleName='header-info--folded-tooltip'>
                 {storage.name}
-                <span styleName='header-info--folded-tooltip-path'>
-                  ({storage.path})
-                </span>
               </span>
             }
           </button>

browser/main/SideNav/StorageItem.styl

@@ -9,15 +9,22 @@
     background-color $ui-button--hover-backgroundColor
   &:active
     .header-toggleButton
+    .header-addFolderButton
       color white
+      &:active
+        color $ui-active-color
+
 .header--active
   @extend .header
   .header-info
     color $ui-button--active-color
     background-color $ui-button--active-backgroundColor
   .header-toggleButton
+  .header-addFolderButton
     color white
     &:active
+    &:hover
+    &:hover:active
       color white
 
 .header-toggleButton
@@ -55,8 +62,23 @@
 .header-info-path
   font-size 10px
   margin 0 5px
+
+.header-addFolderButton
+  position absolute
+  right 0
+  width 25px
+  height 26px
+  padding 0
+  border none
+  color $ui-inactive-text-color
+  background-color transparent
+  &:hover
+    color $ui-text-color
+  &:active
+    color $ui-active-color
+
 .folderList-item
-  display block
+  display flex
   width 100%
   height 26px
   background-color transparent
@@ -74,21 +96,31 @@
   &:active
     color $ui-button--active-color
     background-color $ui-button--active-backgroundColor
+
 .folderList-item--active
   @extend .folderList-item
   color $ui-button--active-color
   background-color $ui-button--active-backgroundColor
   &:hover
     color $ui-button--active-color
     background-color $ui-button--active-backgroundColor
+
 .folderList-item-name
   display block
+  flex 1
   padding 0 10px
   height 26px
   line-height 26px
   border-width 0 0 0 6px
   border-style solid
   border-color transparent
+
+.folderList-item-noteCount
+  float right
+  line-height 26px
+  padding-right 5px
+  font-size 12px
+
 .folderList-item-tooltip
   tooltip()
   position fixed
@@ -102,6 +134,7 @@
   height 26px
   margin-top -26px
   line-height 26px
+
 .root--folded
   @extend .root
   .header
@@ -133,3 +166,17 @@
       opacity 1
   .folderList-item-name
     padding-left 14px
+body[data-theme="dark"]
+  .header-toggleButton
+  .header-addFolderButton
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-active-color
+  .header--active
+    .header-toggleButton
+    .header-addFolderButton
+      color white
+      &:active
+        color white

browser/main/SideNav/index.js

@@ -36,7 +36,7 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { data, location, config } = this.props
+    let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
     let isHomeActive = location.pathname.match(/^\/home$/)
@@ -46,8 +46,10 @@ class SideNav extends React.Component {
       return <StorageItem
         key={storage.key}
         storage={storage}
+        data={data}
         location={location}
         isFolded={isFolded}
+        dispatch={dispatch}
       />
     })
     let style = {}