Merge pull request BoostIO#110 from BoostIO/ui-improvement

Ui improvement for v0.6.5

Author: Rokt33r

browser/components/MarkdownPreview.js

@@ -140,7 +140,7 @@ export default class MarkdownPreview extends React.Component {
     `
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
-    this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
+    this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       el.addEventListener('click', this.anchorClickHandler)

browser/lib/markdown.js

@@ -129,8 +129,40 @@ md.renderer.render = function render (tokens, options, env) {
 }
 window.md = md
 
-export default function markdown (content) {
-  if (!_.isString(content)) content = ''
+function strip (input) {
+  var output = input
+  try {
+    output = output
+      .replace(/^([\s\t]*)([\*\-\+]|\d\.)\s+/gm, '$1')
+      .replace(/\n={2,}/g, '\n')
+      .replace(/~~/g, '')
+      .replace(/`{3}.*\n/g, '')
+      .replace(/<(.*?)>/g, '$1')
+      .replace(/^[=\-]{2,}\s*$/g, '')
+      .replace(/\[\^.+?\](\: .*?$)?/g, '')
+      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
+      .replace(/\!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+      .replace(/>/g, '')
+      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
+      .replace(/^\#{1,6}\s*([^#]*)\s*(\#{1,6})?/gm, '$1')
+      .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
+      .replace(/(`{3,})(.*?)\1/gm, '$2')
+      .replace(/^-{3,}\s*$/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\n{2,}/g, '\n\n')
+  } catch (e) {
+    console.error(e)
+    return input
+  }
+  return output
+}
 
-  return md.render(content)
+const markdown = {
+  render: function markdown (content) {
+    if (!_.isString(content)) content = ''
+    return md.render(content)
+  },
+  strip
 }
+export default markdown

browser/main/Detail/FolderSelect.js

@@ -200,6 +200,11 @@ class FolderSelect extends React.Component {
 
     let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
+    if (this.state.search.trim().length > 0) {
+      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      options = options.filter((option) => filter.test(option.folder.name))
+    }
+
     let optionList = options
       .map((option, index) => {
         return (

browser/main/Detail/FolderSelect.styl

@@ -57,12 +57,13 @@
 
 .search-optionList
   position fixed
+  max-height 450px
+  overflow auto
   z-index 200
   background-color white
   border-radius 2px
   box-shadow 2px 2px 10px gray
 
-
 .search-optionList-item
   height 34px
   width 250px

browser/main/Detail/MarkdownNoteDetail.js

@@ -8,6 +8,7 @@ import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
+import markdown from 'browser/lib/markdown'
 
 const electron = require('electron')
 const { remote } = electron
@@ -72,6 +73,8 @@ class MarkdownNoteDetail extends React.Component {
       }
     }
 
+    title = markdown.strip(title)
+
     return title
   }
 

browser/main/Detail/SnippetNoteDetail.js

@@ -247,27 +247,39 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
-  handleTabButtonClick (index) {
-    return (e) => {
-      this.setState({
-        snippetIndex: index
-      })
-    }
+  handleTabButtonClick (e, index) {
+    this.setState({
+      snippetIndex: index
+    })
   }
 
-  handleTabDeleteButtonClick (index) {
-    return (e) => {
-      if (this.state.note.snippets.length > 1) {
-        let snippets = this.state.note.snippets.slice()
-        snippets.splice(index, 1)
-        this.state.note.snippets = snippets
-        this.setState({
-          note: this.state.note
+  handleTabDeleteButtonClick (e, index) {
+    if (this.state.note.snippets.length > 1) {
+      if (this.state.note.snippets[index].content.trim().length > 0) {
+        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+          type: 'warning',
+          message: 'Delete a snippet',
+          detail: 'This work cannot be undone.',
+          buttons: ['Confirm', 'Cancel']
         })
+        if (dialogIndex === 0) {
+          this.deleteSnippetByIndex(index)
+        }
+      } else {
+        this.deleteSnippetByIndex(index)
       }
     }
   }
 
+  deleteSnippetByIndex (index) {
+    let snippets = this.state.note.snippets.slice()
+    snippets.splice(index, 1)
+    this.state.note.snippets = snippets
+    this.setState({
+      note: this.state.note
+    })
+  }
+
   handleNameInputChange (e, index) {
     let snippets = this.state.note.snippets.slice()
     snippets[index].name = e.target.value
@@ -344,7 +356,7 @@ class SnippetNoteDetail extends React.Component {
         key={index}
       >
         <button styleName='tabList-item-button'
-          onClick={(e) => this.handleTabButtonClick(index)(e)}
+          onClick={(e) => this.handleTabButtonClick(e, index)}
         >
           {snippet.name.trim().length > 0
             ? snippet.name
@@ -355,7 +367,7 @@ class SnippetNoteDetail extends React.Component {
         </button>
         {note.snippets.length > 1 &&
           <button styleName='tabList-item-deleteButton'
-            onClick={(e) => this.handleTabDeleteButtonClick(index)(e)}
+            onClick={(e) => this.handleTabDeleteButtonClick(e, index)}
           >
             <i className='fa fa-times'/>
           </button>

browser/main/Main.js

@@ -20,8 +20,10 @@ class Main extends React.Component {
     let { config } = props
 
     this.state = {
-      isSliderFocused: false,
-      listWidth: config.listWidth
+      isRightSliderFocused: false,
+      listWidth: config.listWidth,
+      navWidth: config.listWidth,
+      isLeftSliderFocused: false
     }
   }
 
@@ -49,17 +51,24 @@ class Main extends React.Component {
       })
   }
 
-  handleSlideMouseDown (e) {
+  handleLeftSlideMouseDown (e) {
     e.preventDefault()
     this.setState({
-      isSliderFocused: true
+      isLeftSliderFocused: true
+    })
+  }
+
+  handleRightSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isRightSliderFocused: true
     })
   }
 
   handleMouseUp (e) {
-    if (this.state.isSliderFocused) {
+    if (this.state.isRightSliderFocused) {
       this.setState({
-        isSliderFocused: false
+        isRightSliderFocused: false
       }, () => {
         let { dispatch } = this.props
         let newListWidth = this.state.listWidth
@@ -71,10 +80,24 @@ class Main extends React.Component {
         })
       })
     }
+    if (this.state.isLeftSliderFocused) {
+      this.setState({
+        isLeftSliderFocused: false
+      }, () => {
+        let { dispatch } = this.props
+        let navWidth = this.state.navWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({listWidth: navWidth})
+        dispatch({
+          type: 'SET_NAV_WIDTH',
+          listWidth: navWidth
+        })
+      })
+    }
   }
 
   handleMouseMove (e) {
-    if (this.state.isSliderFocused) {
+    if (this.state.isRightSliderFocused) {
       let offset = this.refs.body.getBoundingClientRect().left
       let newListWidth = e.pageX - offset
       if (newListWidth < 10) {
@@ -86,6 +109,17 @@ class Main extends React.Component {
         listWidth: newListWidth
       })
     }
+    if (this.state.isLeftSliderFocused) {
+      let navWidth = e.pageX
+      if (navWidth < 80) {
+        navWidth = 80
+      } else if (navWidth > 600) {
+        navWidth = 600
+      }
+      this.setState({
+        navWidth: navWidth
+      })
+    }
   }
 
   render () {
@@ -105,9 +139,20 @@ class Main extends React.Component {
             'config',
             'location'
           ])}
+          width={this.state.navWidth}
         />
+        {!config.isSideNavFolded &&
+          <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
+            style={{left: this.state.navWidth - 1}}
+            onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox'/>
+          </div>
+        }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
+          style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >
           <TopBar style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
@@ -127,9 +172,9 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isSliderFocused ? 'slider--active' : 'slider'}
+          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
             style={{left: this.state.listWidth}}
-            onMouseDown={(e) => this.handleSlideMouseDown(e)}
+            onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox'/>
@@ -143,7 +188,7 @@ class Main extends React.Component {
               'params',
               'location'
             ])}
-            ignorePreviewPointerEvents={this.state.isSliderFocused}
+            ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
         <StatusBar