move statusbar

browser/main/Detail/MarkdownNoteDetail.js

@@ -9,6 +9,8 @@ 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'
+import StatusBar from '../StatusBar'
+import _ from 'lodash'
 
 const electron = require('electron')
 const { remote } = electron
@@ -253,7 +255,7 @@ class MarkdownNoteDetail extends React.Component {
               onClick={(e) => this.handleShareButtonClick(e)}
               disabled
             >
-              <i className='fa fa-share-alt fa-fw'/>
+              <i className='fa fa-share-alt fa-fw' />
               <span styleName='info-right-button-tooltip'
                 style={{right: 20}}
               >Share Note</span>
@@ -261,7 +263,7 @@ class MarkdownNoteDetail extends React.Component {
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v'/>
+              <i className='fa fa-ellipsis-v' />
               <span styleName='info-right-button-tooltip'
                 style={{right: 5}}
               >More Options</span>
@@ -279,6 +281,10 @@ class MarkdownNoteDetail extends React.Component {
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />
         </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+        />
       </div>
     )
   }

browser/main/Detail/MarkdownNoteDetail.styl

@@ -1,7 +1,7 @@
 $info-height = 75px
 
 .root
-  absolute top bottom right
+  absolute top right bottom
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
@@ -61,8 +61,9 @@ $info-height = 75px
   border-radius 2px
 
 .body
-  absolute bottom left right
+  absolute left right
   top $info-height
+  bottom $statusBar-height
 
 .body-noteEditor
   absolute top bottom left right

browser/main/Detail/SnippetNoteDetail.js

@@ -11,6 +11,9 @@ import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
 import SnippetTab from './SnippetTab'
+import StatusBar from '../StatusBar'
+import context from 'browser/lib/context'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 function pass (name) {
   switch (name) {
@@ -46,10 +49,6 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
-  focus () {
-    this.refs.description.focus()
-  }
-
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key) {
       if (this.saveQueue != null) this.saveNow()
@@ -205,12 +204,10 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleContextButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
+    context.popup([{
       label: 'Delete',
       click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
+    }])
   }
 
   handleDeleteMenuClick (e) {
@@ -242,24 +239,6 @@ class SnippetNoteDetail extends React.Component {
     this.addSnippet()
   }
 
-  addSnippet () {
-    let { note } = this.state
-
-    note.snippets = note.snippets.concat([{
-      name: '',
-      mode: 'text',
-      content: ''
-    }])
-    let snippetIndex = note.snippets.length - 1
-
-    this.setState({
-      note,
-      snippetIndex
-    }, () => {
-      this.refs['tab-' + snippetIndex].startRenaming()
-    })
-  }
-
   handleTabButtonClick (e, index) {
     this.setState({
       snippetIndex: index
@@ -312,19 +291,6 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
-  handleModeButtonClick (index) {
-    return (e) => {
-      let menu = new Menu()
-      CodeMirror.modeInfo.forEach((mode) => {
-        menu.append(new MenuItem({
-          label: mode.name,
-          click: (e) => this.handleModeOptionClick(index, mode.name)(e)
-        }))
-      })
-      menu.popup(remote.getCurrentWindow())
-    }
-  }
-
   handleModeOptionClick (index, name) {
     return (e) => {
       let snippets = this.state.note.snippets.slice()
@@ -367,26 +333,123 @@ class SnippetNoteDetail extends React.Component {
         }
         break
       case 76:
-        let shouldFocus = global.process.platform === 'darwin'
-          ? e.metaKey
-          : e.ctrlKey
-        if (shouldFocus) {
-          e.preventDefault()
-          this.focus()
+        {
+          let isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.focus()
+          }
         }
         break
       case 84:
         {
-          let shouldFocus = global.process.platform === 'darwin'
+          let isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
-          if (e.shouldFocus) {
+          if (isSuper) {
             e.preventDefault()
             this.addSnippet()
           }
         }
+        break
     }
+  }
 
+  handleModeButtonClick (e, index) {
+    let menu = new Menu()
+    CodeMirror.modeInfo.forEach((mode) => {
+      menu.append(new MenuItem({
+        label: mode.name,
+        click: (e) => this.handleModeOptionClick(index, mode.name)(e)
+      }))
+    })
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleIndentTypeButtonClick (e) {
+    context.popup([
+      {
+        label: 'tab',
+        click: (e) => this.handleIndentTypeItemClick(e, 'tab')
+      },
+      {
+        label: 'space',
+        click: (e) => this.handleIndentTypeItemClick(e, 'space')
+      }
+    ])
+  }
+
+  handleIndentSizeButtonClick (e) {
+    context.popup([
+      {
+        label: '2',
+        click: (e) => this.handleIndentSizeItemClick(e, 2)
+      },
+      {
+        label: '4',
+        click: (e) => this.handleIndentSizeItemClick(e, 4)
+      },
+      {
+        label: '8',
+        click: (e) => this.handleIndentSizeItemClick(e, 8)
+      }
+    ])
+  }
+
+  handleIndentSizeItemClick (e, indentSize) {
+    let { config, dispatch } = this.props
+    let editor = Object.assign({}, config.editor, {
+      indentSize
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  handleIndentTypeItemClick (e, indentType) {
+    let { config, dispatch } = this.props
+    let editor = Object.assign({}, config.editor, {
+      indentType
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  focus () {
+    this.refs.description.focus()
+  }
+
+  addSnippet () {
+    let { note } = this.state
+
+    note.snippets = note.snippets.concat([{
+      name: '',
+      mode: 'Plain Text',
+      content: ''
+    }])
+    let snippetIndex = note.snippets.length - 1
+
+    this.setState({
+      note,
+      snippetIndex
+    }, () => {
+      this.refs['tab-' + snippetIndex].startRenaming()
+    })
   }
 
   jumpNextTab () {
@@ -542,6 +605,34 @@ class SnippetNoteDetail extends React.Component {
           </div>
           {viewList}
         </div>
+
+        <div styleName='override'>
+          <button
+            onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
+          >
+            {this.state.note.snippets[this.state.snippetIndex].mode == null
+              ? 'Select Syntax...'
+              : this.state.note.snippets[this.state.snippetIndex].mode
+            }&nbsp;
+            <i className='fa fa-caret-down'/>
+          </button>
+          <button
+            onClick={(e) => this.handleIndentTypeButtonClick(e)}
+          >
+            Indent: {config.editor.indentType}&nbsp;
+            <i className='fa fa-caret-down'/>
+          </button>
+          <button
+            onClick={(e) => this.handleIndentSizeButtonClick(e)}
+          >
+            size: {config.editor.indentSize}&nbsp;
+            <i className='fa fa-caret-down'/>
+          </button>
+        </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+        />
       </div>
     )
   }

browser/main/Detail/SnippetNoteDetail.styl

@@ -59,8 +59,9 @@ $info-height = 75px
   opacity 0
 
 .body
-  absolute bottom left right
+  absolute left right
   top $info-height
+  bottom $statusBar-height
 
 .body .description
   absolute top left right
@@ -101,6 +102,19 @@ $info-height = 75px
 .tabView-content
   absolute top left right bottom
 
+.override
+  absolute bottom left
+  height 23px
+  z-index 1
+  button
+    navButtonColor()
+    height 24px
+    border-width 0 1px 0 0
+    border-style solid
+    border-color $ui-borderColor
+    &:active .update-icon
+      color white
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -151,15 +165,3 @@ body[data-theme="dark"]
 
   .tabList .plusButton
     navDarkButtonColor()
-
-  .tabView-top-mode
-    border-color $ui-dark-borderColor
-    background-color $dark-default-button-background
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--hover-backgroundColor
-    &:active
-      background-color $ui-dark-button--active-backgroundColor
-    &:active:hover
-      background-color $ui-dark-button--active-backgroundColor

browser/main/Detail/index.js

@@ -5,6 +5,7 @@ import _ from 'lodash'
 import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
 import ee from 'browser/main/lib/eventEmitter'
+import StatusBar from '../StatusBar'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -48,8 +49,11 @@ class Detail extends React.Component {
           tabIndex='0'
         >
           <div styleName='empty'>
-            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
+            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new post</div>
           </div>
+          <StatusBar
+            {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          />
         </div>
       )
     }