metacode selector working nicely

app/assets/stylesheets/metacode-select.scss.erb

@@ -5,48 +5,20 @@
 .metacodeSelect {
   border-top: 1px solid #DDD;
   padding: 0;
+  background: #FFF;
     
-  .tabList {
+  .metacodeFilterInput {
-    float: left;
+    width: 100px;
-    background: #FFF;
+    outline: none;
-    
+    border: 0;
-    div {
+    padding: 8px;
-      border-right: 1px solid #DDD;
+    font-size: 14px;
-      border-bottom: 1px solid #DDD;
+    line-height: 14px;
-    }
+    color: #424242;
-    
+    font-family: 'din-medium', helvetica, sans-serif;
-    div:last-child {
-      border-bottom: none;
-    }
-    
-    div.active {
-      border-right: none;
-      background: #EEE;
-      
-      .metacodeFilterInput {
-        background: #EEE;
-      }
-    }
-    
-    .metacodeFilterInput {
-      width: 100px;
-      outline: none;
-      border: 0;
-      padding: 8px;
-      font-size: 14px;
-      line-height: 14px;
-      color: #424242;
-      font-family: 'din-medium', helvetica, sans-serif;
-    }
-    
-    span {
-      padding: 8px;
-      display: block;
-    }
   }
   
   .metacodeList {
-    float:left;
     list-style: none;
     background: #FFF;
     min-height: 107px;
@@ -57,7 +29,7 @@
       cursor: pointer;
       
       &:hover, &.keySelect {
-        background: #EEE;
+        background: #4CAF50;
       }
     }
 

app/views/maps/_newtopic.html.erb

@@ -22,7 +22,7 @@
     <span><%= user_metacode().name %></span>
     <div class="downArrow"></div>
   </div>
-  <%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %>
+  <%= form.text_field :name, :maxlength => 140, :placeholder => "what are you thinking..." %>
   <div class="clearfloat"></div>
   <div id="metacodeSelector"></div>
   <div class="clearfloat"></div>

frontend/src/Metamaps/Create.js

@@ -253,9 +253,7 @@ const Create = {
             Create.newTopic.hideSelector()
             $('#topic_name').focus()
           },
-          metacodes: DataModel.Metacodes.models,
+          metacodes: DataModel.Metacodes.models
-          recent: Create.recentMetacodes,
-          mostUsed: Create.mostUsedMetacodes
         }),
         document.getElementById('metacodeSelector')
       )

frontend/src/Metamaps/JIT.js

@@ -725,7 +725,7 @@ const JIT = {
     const creatingMap = GlobalUI.lightbox
     if (creatingMap === 'newmap' || creatingMap === 'forkmap') {
       GlobalUI.CreateMap.submit()
-    } else if (Create.newTopic.beingCreated) {
+    } else if (Create.newTopic.beingCreated && !Create.newTopic.metacodeSelectorOpen) {
       Topic.createTopicLocally()
     } else if (Create.newSynapse.beingCreated) {
       Synapse.createSynapseLocally()

frontend/src/components/MetacodeSelect.js

@@ -25,7 +25,6 @@ class MetacodeSelect extends Component {
     super(props)
     this.state = {
       filterText: '',
-      activeTab: 0,
       selectingSection: true,
       underCursor: 0
     }
@@ -46,112 +45,72 @@ class MetacodeSelect extends Component {
     this.setState({ filterText: e.target.value, underCursor: 0 })
   }
   
-  changeDisplay (activeTab) {
-    this.setState({ activeTab, underCursor: 0 })
-  }
-  
   getSelectMetacodes () {
     const { metacodes, recent, mostUsed } = this.props
     const { filterText, activeTab } = this.state
 
-    let selectMetacodes = []
+    let selectMetacodes = metacodes
-    if (activeTab == 0) { // search
+    if (filterText.length > 1) { // search
       selectMetacodes = filterText.length > 1 ? metacodes.filter(m => {
         return m.get('name').toLowerCase().search(filterText.toLowerCase()) > -1
       }) : []
-    } else if (activeTab == 1) { // recent
-      selectMetacodes = recent.map(id => {
-        return metacodes.find(m => m.id == id)
-      }).filter(m => m)
-    } else if (activeTab == 2) { // mostUsed
-      selectMetacodes = mostUsed.map(id => {
-        return metacodes.find(m => m.id == id)
-      }).filter(m => m)
     }
     return selectMetacodes
   }
   
   handleKeyUp (e) {
     const { close } = this.props
-    const { activeTab, underCursor, selectingSection } = this.state
+    const { underCursor } = this.state
     const selectMetacodes = this.getSelectMetacodes()
     let nextIndex
 
     switch (e.which) {
       case ENTER_KEY:
-        if (selectMetacodes.length && !selectingSection) this.resetAndClick(selectMetacodes[underCursor].id)
+        if (selectMetacodes.length) this.resetAndClick(selectMetacodes[underCursor].id)
         break
       case UP_ARROW:
-        if (selectingSection && activeTab == 0) {
+        if (underCursor == 0) {
           close()
           break
         }
-        else if (selectingSection) {
-          nextIndex = activeTab - 1
-          this.changeDisplay(nextIndex)
-          break
-        }
         nextIndex = underCursor == 0 ? selectMetacodes.length - 1 : underCursor - 1
         this.setState({ underCursor: nextIndex })
         break
       case DOWN_ARROW:
-        if (selectingSection) {
-          nextIndex = activeTab == 2 ? 0 : activeTab + 1
-          this.changeDisplay(nextIndex)
-          break
-        }
         nextIndex = underCursor == selectMetacodes.length - 1 ? 0 : underCursor + 1
         this.setState({ underCursor: nextIndex })
         break
-      case RIGHT_ARROW:
-        if (selectingSection) this.setState({ selectingSection: false })
-        break
-      case LEFT_ARROW:
-        if (!selectingSection) this.setState({ selectingSection: true })
-        break
     }
   }
   
   resetAndClick (id) {
     const { onClick } = this.props
     this.setState({ filterText: '', underCursor: 0 })
-    this.changeDisplay(0)
     onClick(id)
   }
   
   render () {
-    const { onClick, close, recent, mostUsed } = this.props
+    const { onClick, close } = this.props
-    const { filterText, activeTab, underCursor, selectingSection } = this.state
+    const { filterText, underCursor } = this.state
     const selectMetacodes = this.getSelectMetacodes()
     return <div className='metacodeSelect'>
       <div className='tabList'>
-        <div className={ activeTab == 0 ? 'active' : '' }
+        <input type='text'
-             onClick={() => { this.changeDisplay(0) }}>
-          <input type='text'
                  className='metacodeFilterInput'
                  placeholder='Search...'
                  ref='input'
                  value={ filterText }
                  onChange={ this.changeFilterText.bind(this) } />
-        </div>
+        <ul className='metacodeList'>
-        <div className={ activeTab == 1 ? 'active' : '' }
+          { selectMetacodes.map((m, index) => {
-             onClick={() => { this.changeDisplay(1) }}>
+            return <Metacode underCursor={underCursor == index} 
-          <span>Recent</span>
-        </div>
-        <div className={ activeTab == 2 ? 'active' : '' }
-             onClick={() => { this.changeDisplay(2) }}>
-          <span>Most Used</span>
-        </div>
-      </div>
-      <ul className='metacodeList'>
-        { selectMetacodes.map((m, index) => {
-            return <Metacode underCursor={!selectingSection && underCursor == index} 
                              key={m.id} 
                              m={m} 
                              onClick={this.resetAndClick.bind(this)} />
           })}
-      </ul>
+        </ul>
-      <div className='clearfloat'></div>
+        <div className='clearfloat'></div>
+      </div>
     </div>
   }
 }
@@ -160,8 +119,6 @@ MetacodeSelect.propTypes = {
   onClick: PropTypes.func.isRequired,
   close: PropTypes.func.isRequired,
   metacodes: PropTypes.array.isRequired,
-  recent: PropTypes.array.isRequired,
-  mostUsed: PropTypes.array.isRequired
 }
 
 export default MetacodeSelect