Modify search style and add hotkey of searching

Author: chunqiuyiyu

app/commands/commandBindings/misc.js

@@ -3,6 +3,7 @@ import * as Panel from 'components/Panel/actions'
 import * as SideBar from 'components/Panel/SideBar/actions'
 import terminalState from 'components/Terminal/state'
 import * as Terminal from 'components/Terminal/actions'
+import * as searchState from 'commons/Search/state'
 
 const getComponentByName = name => window.refs[name].getWrappedInstance()
 export default {
@@ -23,6 +24,9 @@ export default {
   'global:show_env': () => {
     SideBar.toggleSidePanelView('SIDEBAR.RIGHT.env')
   },
+  'global:show_search': () => {
+    SideBar.toggleSidePanelView('SIDEBAR.LEFT.find')
+  },
   'modal:dismiss': (c) => {
     Modal.dismissModal()
   },

app/commands/keymaps.js

@@ -93,6 +93,12 @@ const keymapStore = observable({
       mac: 'cmd+f11',
       win: 'ctrl+f11',
       label: i18n`settings.keymap.into_zenmode`
+    },
+    {
+      command: 'global:show_search',
+      mac: 'cmd+shift+f',
+      win: 'ctrl+shift+f',
+      label: i18n`settings.keymap.search`
     }
   ],
   pluginsKeymaps: [],

app/commons/Search/state.js

@@ -1,18 +1,18 @@
-import { observable } from 'mobx'
+import { observable, map } from 'mobx'
 
 export const ws = observable({
   name: '',
   status: false,
   first: true
 })
 
-export const searching = observable({
+export const searching = map({
   pattern: '',
   path: '',
   caseSensitive: false,
   word: false,
   isPattern: false,
-  singleFork: false
+  singleFork: false,
 })
 
 export const searched = observable({

app/components/Search/search.new.jsx

@@ -56,7 +56,7 @@ export class SearchResultItem extends Component {
                     let {start, end, length, innerStart, innerEnd, line, lineNum} = result;
                     return (
                         <div key={`${fileName}-${resultSize}-${lineNum}-${start}`} className='search-item-line' onClick={() => this.handleItemClick(path, innerStart, innerEnd, lineNum)}>
-                            <span className='search-item-content'>{line.substring(0, innerStart)}<b>{line.substring(innerStart, innerEnd)}</b>{line.substring(innerEnd)}</span>
+                            {line && <span className='search-item-content'>{line.substring(0, innerStart)}<b>{line.substring(innerStart, innerEnd)}</b>{line.substring(innerEnd)}</span>}
                         </div>
                     )})
                 }
@@ -103,14 +103,18 @@ class SearchPanel extends Component {
         if (state.ws.first) {
             content = ''
         } else if (!state.searched.end) {
-            content = 'Searching...'
+            content = i18n`panel.left.searching`
         } else if(state.searched.message !== '') {
             content = state.searched.message;
         } else if (state.searched.results.length != 0) {
             const pattern = state.searching.pattern;
-            let count = 0;
+            const files = state.searched.results.length
+            let number = 0
+            let count = 0
+
             content = state.searched.results.map((searchChunk) => {
                 count++
+                number += searchChunk.results.length
                 return (<SearchResultItem
                     key={`${pattern}-${count}`}
                     fileName={searchChunk.fileName}
@@ -121,6 +125,7 @@ class SearchPanel extends Component {
                 })
             return (
                 <div className='search-result-list'>
+                    <div>{i18n`panel.result.tip${{ files, number }}`}</div>
                     {content}
                 </div>
             )
@@ -136,6 +141,11 @@ class SearchPanel extends Component {
     }
 
     render () {
+        const searching = state.searching
+        const caseSensitive = searching.get('caseSensitive')
+        const word = searching.get('word')
+        const isPattern = searching.get('isPattern')
+
         return (
             <div className='search-panel'>
                 <div className='search-panel-title'>
@@ -148,46 +158,44 @@ class SearchPanel extends Component {
                             value={state.keyword}
                             onChange={this.handleKeywordChange}
                             onKeyDown={this.onKeyDown}
-                            placeholder={i18n.get('panel.left.find')}
+                            placeholder={i18n.get(`panel.left.placeholder`)}
                         />
                     </div>
-                    {/* <div className='search-checkbox'>
-                        <input 
-                            title={i18n.get('panel.checkbox.case')}
-                            label={i18n.get('panel.checkbox.case')}
-                            className='search-control-case-sensitive'
-                            onChange={this.caseSensitive}
-                            type='checkbox'/>
-                        <input title={i18n.get('panel.checkbox.word')}
-                            label={i18n.get('panel.checkbox.word')}
-                            className='search-control-word'
-                            onChange={this.word}
-                            type='checkbox'
-                            disabled={state.searching.isPattern}/>
-                        <input title={i18n.get('panel.checkbox.pattern')}
-                            label={i18n.get('panel.checkbox.pattern')}
-                            className='search-control-pattern'
-                            onChange={this.pattern}
-                            type='checkbox'/>
-                    </div> */}
+                    <div className='search-checkbox'>
+                        <span title={i18n.get('panel.checkbox.case')}
+                          onClick={() => this.caseSensitive(caseSensitive)}
+                          className={caseSensitive ? 'active' : ''}>{'Aa'}</span>
+                        <span title={i18n.get('panel.checkbox.word')}
+                          onClick={() => this.word(word)}
+                          className={word ? 'active' : ''}>{'Al'}</span>
+                        <span title={i18n.get('panel.checkbox.pattern')}
+                          onClick={() => this.pattern(isPattern)}
+                          className={isPattern ? 'active' : ''}>{'.*'}</span>
+                    </div>
                 </div>
                 {this.renderResult()}
             </div>
         )
     }
 
-    caseSensitive = e => {
-        state.searching.caseSensitive = e.target.checked;
+    caseSensitive = caseSensitive => {
+        state.searching.set('caseSensitive', !caseSensitive)
     }
 
-    word = e => {
-        state.searching.word = e.target.checked;
+    word = word => {
+        state.searching.set('word', !word)
+        if (!word) {
+            state.searching.set('isPattern', false)
+        }
     }
 
-    pattern = e => {
-        state.searching.isPattern = e.target.checked;
+    pattern = isPattern => {
+        state.searching.set('isPattern', !isPattern)
+        if (!isPattern) {
+            state.searching.set('word', false)
+        }
     }
 
 }
 
-export default SearchPanel;
+export default SearchPanel

app/i18n/en_US/panel.json

@@ -7,7 +7,9 @@
    "left": {
       "project": "Project",
       "working": "Working",
-      "find": "Find"
+      "find": "Search",
+      "placeholder": "Enter keyword",
+      "searching": "Searching..."
    },
    "right": {
     "plugin": "Plugin Development"
@@ -18,6 +20,7 @@
       "pattern": "Pattern Match"
    },
    "result": {
-      "blank": "Search Result Is 0"
+      "blank": "Search Result is 0",
+      "tip": "Searched for {number} results, included in {files} files"
    }
 }

app/i18n/en_US/settings.json

@@ -44,7 +44,8 @@
     "exit_zenmode": "Exit Zen Mode",
     "sysKeymap": "System Keybindings",
     "pluginKeymap": "Plugins Keybindings",
-    "pluginSource": "Keybindings Source"
+    "pluginSource": "Keybindings Source",
+    "search": "Search All Files"
    },
    "appearance": {
       "main": "Appearance Setting",

app/i18n/zh_CN/panel.json

@@ -7,7 +7,9 @@
    "left": {
       "project": "文件树",
       "working": "工作文件",
-      "find": "搜索"
+      "find": "搜索",
+      "placeholder": "输入关键词",
+      "searching": "搜索中..."
    },
    "right": {
      "plugin": "插件开发"
@@ -18,6 +20,7 @@
       "pattern": "正则匹配"
    },
    "result": {
-      "blank": "查询结果为 0 条"
+      "blank": "查询结果为 0 条",
+      "tip": "搜索到 {number} 个结果，包含于 {files} 个文件中"
    }
 }

app/i18n/zh_CN/settings.json

@@ -43,7 +43,8 @@
     "exit_zenmode": "退出禅模式",
     "sysKeymap": "系统快捷键",
     "pluginKeymap": "插件快捷键",
-    "pluginSource": "来源插件"
+    "pluginSource": "来源插件",
+    "search": "全文搜索"
    },
    "appearance": {
       "main": "样式",

app/styles/core-ui/Search.styl

@@ -7,20 +7,42 @@
     margin-bottom: 14px;  
   }
   .search-panel-input {
-    margin-bottom: 14px;
-    background-color: #1e1e1e
-    border: 1px solid #333
+    margin-bottom: 10px;
     // display: flex
     .search-controls {
       border: none
     }
     .search-checkbox {
       margin-right: inherit;
-      position inherit;
+      position: inherit;
+      top: 43px;
+      display: inline-block;
+      position: absolute;
+      right: 15px;
+      
+      .active {
+        color: #337ab7;
+        font-weight: bold;
+      }
+        
+      span {
+        width: 22px;
+        height: 22px;
+        padding: 3px;
+        display: inline-block;
+        cursor: default;
+
+        
+        &:hover {
+          color: #337ab7;
+          font-weight: bold;
+        }
+      }
     }
   }
   .search-item {
     cursor: pointer;
+    margin-top: 10px;
     white-space: nowrap;
     .search-item-path {
       line-height: 20px;
@@ -37,7 +59,8 @@
         width: 18px;
         text-align: center;
         display: inline-block;
-        transform: translateY(1px)
+        transform: translateY(1px);
+        margin-right: 4px;
       }
       .search-item-path-path {
         opacity: .6;
@@ -57,14 +80,21 @@
       }
     }
     .search-item-line {
-      padding-left: 12px;
+      padding-left: 20px;
       line-height: 20px;
+      margin-top: 10px;
       text-overflow: ellipsis;
       overflow: hidden;
       h {
         // font-weight: 700;
         background: #d2691e78;
       }
+      
+      b {
+        background: #337ab7;
+        color: #fff;
+        font-weight: normal;
+      }
     }
   }
 }