change layout

browser/main/Main.js

@@ -94,18 +94,18 @@ class Main extends React.Component {
             'location'
           ])}
         />
-        <TopBar
-          {..._.pick(this.props, [
-            'dispatch',
-            'storages',
-            'config',
-            'params',
-            'location'
-          ])}
-        />
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
         >
+          <TopBar style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'storages',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
           <NoteList style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',

browser/main/Main.styl

@@ -2,9 +2,8 @@
   absolute top left bottom right
 
 .body
-  absolute right
+  absolute right top
   bottom $statusBar-height - 1
-  top $topBar-height - 1
   left $sideNav-width
 
 .body--expanded

browser/main/NoteList/NoteList.styl

@@ -1,8 +1,9 @@
 .root
-  absolute top left bottom
+  absolute left bottom
   border-top $ui-border
   border-bottom $ui-border
   overflow auto
+  top $topBar-height - 1
 
 .item
   position relative

browser/main/SideNav/SideNav.styl

@@ -9,12 +9,12 @@
   color $ui-text-color
 
 .top
-  height 60px
+  height $topBar-height
   border-bottom $ui-border
 
 .top-menu
   navButtonColor()
-  height 59px
+  height $topBar-height - 1
   padding 0 10px
   font-size 14px
   width 100%

browser/main/TopBar/TopBar.styl

@@ -1,55 +1,50 @@
 .root
-  absolute top right
-  background-color $ui-backgroundColor
-  left $sideNav-width
-  height $topBar-height -1
-  clearfix()
-
-.left
-  float left
-  height $topBar-height - 1
-  line-height $topBar-height
-
-.left-search
-  margin-top 12px
-  margin-left 25px
-  height 34px
-  width 200px
-  float left
-  border-radius 22px
   position relative
-  background-color white
-  border $ui-border
+  width 100%
+  background-color $ui-backgroundColor
+  height $topBar-height - 1
 
-.left-search-icon
-  absolute left
-  width 36px
-  height 32px
-  padding 0
+$control-height = 34px
+
+.control
+  position absolute
+  top 8px
+  left 8px
+  right 8px
+  height $control-height
+  border $ui-border
+  border-radius 20px
+  overflow hidden
+.control-search
+  absolute top left bottom
+  right 40px
+  background-color white
+
+.control-search-icon
+  absolute top bottom left
   line-height 32px
+  width 35px
   color $ui-inactive-text-color
 
-.left-search-input
+.control-search-input
+  display block
   absolute top bottom right
-  height 32px
-  left 34px
-  border none
-  outline none
-  font-size 14px
+  left 30px
+  input
+    width 100%
+    height 100%
+    outline none
+    border none
 
-.left-control
-  float left
-  margin-left 15px
-
-.left-control-newPostButton
-  width 34px
-  height 34px
-  margin-top 12px
-  border-radius 17px
+.control-newPostButton
+  display block
+  absolute top right bottom
+  width 40px
+  height $control-height - 2
   navButtonColor()
-  border $ui-border
+  border-left $ui-border
   font-size 14px
-  line-height 32px
+  line-height 28px
   padding 0
   &:active
     border-color $ui-button--active-backgroundColor
@@ -57,7 +52,7 @@
     display block
 
 
-.left-control-newPostButton-tooltip
+.control-newPostButton-tooltip
   position fixed
   line-height 1.4
   background-color $ui-tooltip-backgroundColor
@@ -70,39 +65,3 @@
   border-radius 5px
   display none
   pointer-events none
-
-.right
-  float right
-  height $topBar-height -1
-  clearfix()
-
-.right-helpButton
-  width 24px
-  height 24px
-  border-radius 12px
-  navButtonColor()
-  border $ui-border
-  line-height 22px
-  font-size 12px
-  padding 0
-  float left
-  margin-top 17px
-
-.right-linksButton
-  float left
-  height 44px
-  width 44px
-  border-radius 17px
-  background-color transparent
-  border none
-  margin-top 7px
-  margin-left 5px
-  margin-right 15px
-  opacity 0.8
-  &:hover, &:active
-    opacity 1
-
-.root--expanded
-  @extend .root
-  absolute top right
-  left $sideNav--folded-width

browser/main/TopBar/index.js

@@ -5,6 +5,8 @@ import activityRecord from 'browser/lib/activityRecord'
 import _ from 'lodash'
 import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
+import modal from 'browser/main/lib/modal'
+import NewNoteModal from 'browser/main/modals/NewNoteModal'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -33,49 +35,46 @@ class TopBar extends React.Component {
   }
 
   handleNewPostButtonClick (e) {
-    let { storages, params, dispatch } = this.props
+    let { storages, params, dispatch, location } = this.props
     let storage = _.find(storages, {key: params.storageKey})
     if (storage == null) storage = storages[0]
     if (storage == null) throw new Error('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
     if (folder == null) throw new Error('No folder to craete a note')
-    // activityRecord.emit('ARTICLE_CREATE')
-    console.log(storage, folder)
-    dataApi
-      .createNote(storage.key, folder.key, {
-        title: '',
-        content: ''
-      })
-      .then((note) => {
-        dispatch({
-          type: 'CREATE_NOTE',
-          note: note
-        })
-      })
+
+    modal.open(NewNoteModal, {
+      storage: storage.key,
+      folder: folder.key,
+      dispatch,
+      location
+    })
   }
 
   handleTutorialButtonClick (e) {
   }
 
   render () {
-    let { config } = this.props
+    let { config, style } = this.props
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+        style={style}
       >
-        <div styleName='left'>
-          <div styleName='left-search'>
-            <i styleName='left-search-icon' className='fa fa-search fa-fw'/>
-            <input styleName='left-search-input'
-              ref='searchInput'
-              onFocus={(e) => this.handleSearchChange(e)}
-              onBlur={(e) => this.handleSearchChange(e)}
-              value={this.state.search}
-              onChange={(e) => this.handleSearchChange(e)}
-              placeholder='Search'
-              type='text'
-            />
+        <div styleName='control'>
+          <div styleName='control-search'>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <div styleName='control-search-input'>
+              <input
+                ref='searchInput'
+                onFocus={(e) => this.handleSearchChange(e)}
+                onBlur={(e) => this.handleSearchChange(e)}
+                value={this.state.search}
+                onChange={(e) => this.handleSearchChange(e)}
+                placeholder='Search'
+                type='text'
+              />
+            </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'
                 onClick={(e) => this.handleSearchClearButton(e)}
@@ -83,27 +82,15 @@ class TopBar extends React.Component {
                 <i className='fa fa-times'/>
               </button>
             }
-          </div>
 
-          <div styleName='left-control'>
-            <button styleName='left-control-newPostButton'
-              onClick={(e) => this.handleNewPostButtonClick(e)}>
-              <i className='fa fa-plus'/>
-              <span styleName='left-control-newPostButton-tooltip'>
-                New Note {OSX ? '⌘' : '^'} + n
-              </span>
-            </button>
           </div>
-        </div>
-
-        <div styleName='right'>
-          <button styleName='right-helpButton'
-            onClick={(e) => this.handleTutorialButtonClick(e)}
-            disabled
-          >
-            ?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
+          <button styleName='control-newPostButton'
+            onClick={(e) => this.handleNewPostButtonClick(e)}>
+            <i className='fa fa-plus'/>
+            <span styleName='control-newPostButton-tooltip'>
+              New Note {OSX ? '⌘' : '^'} + n
+            </span>
           </button>
-
         </div>
       </div>
     )

browser/styles/index.styl

@@ -7,7 +7,7 @@ $danger-lighten-color = lighten(#c9302c, 5%)
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
-$topBar-height = 60px
+$topBar-height = 50px
 
 // UI default
 $ui-text-color = #515151