Fix: minor features

設定ボタンアイコンの変更
削除Modalでcmd+enterの使用
検索バーデザイン

Author: Rokt33r

browser/main/Components/BlueprintDeleteModal.jsx

@@ -7,6 +7,9 @@ var BlueprintDeleteModal = React.createClass({
     close: React.PropTypes.func,
     blueprint: React.PropTypes.object
   },
+  componentDidMount: function () {
+    React.findDOMNode(this).focus()
+  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },
@@ -21,7 +24,7 @@ var BlueprintDeleteModal = React.createClass({
   },
   render: function () {
     return (
-      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
+      <div tabIndex='3' onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
         <div className='modal-header'>
           <h1>Delete Blueprint</h1>
         </div>

browser/main/Components/PlanetHeader.jsx

@@ -27,15 +27,15 @@ var PlanetHeader = React.createClass({
         <div className='headerLabel'>
           <span className='userName'>{currentUserName}</span><br/>
           <span className='planetName'>{currentPlanetName}</span>
-          <button onClick={this.props.openSettingModal} className={'menuBtn'}>
-            <i className='fa fa-gears'></i>
+          <button onClick={this.props.openSettingModal} className='menuBtn'>
+            <i className='fa fa-chevron-down'></i>
           </button>
         </div>
         <div className='headerControl'>
-          <span className='searchInput'>
+          <div className='searchInput'>
             <i className='fa fa-search'/>
             <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
-          </span>
+          </div>
           <a className='downloadButtton btn-primary'>Download Mac app</a>
         </div>
       </div>

browser/main/Components/SnippetDeleteModal.jsx

@@ -7,11 +7,15 @@ var SnippetDeleteModal = React.createClass({
     close: React.PropTypes.func,
     snippet: React.PropTypes.object
   },
+  componentDidMount: function () {
+    React.findDOMNode(this).focus()
+  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },
   handleKeyDown: function (e) {
-    if ((e.keyCode === 13 && e.metaKey)) {
+    console.log(e)
+    if (e.keyCode === 13 && e.metaKey) {
       e.preventDefault()
       this.submit()
     }
@@ -21,7 +25,7 @@ var SnippetDeleteModal = React.createClass({
   },
   render: function () {
     return (
-      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
+      <div tabIndex='3' onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
         <div className='modal-header'>
           <h1>Delete Snippet</h1>
         </div>

browser/styles/main/containers/PlanetContainer.styl

@@ -1,4 +1,3 @@
-
 .PlanetContainer
   absolute top bottom right
   left 50px
@@ -50,30 +49,20 @@
         color darken(brandBorderColor, 30%)
     .menuBtn
       position absolute
-      top 10px
+      top 15px
       right 5px
       font-size 1em
-      color lightButtonColor
-      border none
+      btnDefault()
       box-sizing border-box
       circle()
-      background-image none
-      background-color transparent
-      width 44px
-      height 44px
+      width 33px
+      height 33px
       text-align center
       cursor pointer
       transition 0.1s
       transform scale(0.8)
       &:focus, &.focus
         outline none
-      &:hover, &.hover, &:focus, &.focus
-        border-color darken(lightButtonColor, 50%)
-        color darken(lightButtonColor, 50%)
-      &:active, &.active
-        border-color darken(brandBorderColor, 30%)
-        background-color brandColor
-        color white
   .headerControl
     absolute top bottom right
     left 200px
@@ -84,10 +73,12 @@
       left 0
       input
         padding-left 32px
+        width 300px
       .fa
         position absolute
         top 8px
         left 12px
+        color inactiveTextColor
     .downloadButtton
       position absolute
       right 5px

browser/styles/mixins/btn.styl

@@ -13,7 +13,6 @@ btnDefault()
     background-color brandColor
     color white
 
-
 btnPrimary()
   border-style solid
   border-width 1px

browser/styles/shared/modal.styl

@@ -126,6 +126,7 @@
         margin 40px auto
         font-size 1.5em
         color brandColor
+        text-align center
       nav
         button
           font-size 1em

browser/styles/vars.styl

@@ -13,7 +13,7 @@ hoverBackgroundColor= transparentify(#444, 3%)
 inactiveTextColor = #888
 textColor = #4D4D4D
 backgroundColor= white
-fontSize= 16px
+fontSize= 14px
 
 shadowColor= #C5C5C5