Organize the files and delete some useless code.

app-ui/App.jsx

@@ -7,7 +7,7 @@
 
 import React from 'react'
 import { notification } from 'antd'
-import Panel from './panel/Panel'
+import Panel from './Panel'
 import Content from './content/Content'
 import SudoPrompt from './frame/SudoPrompt'
 import EditPrompt from './frame/EditPrompt'

app-ui/panel/Buttons.jsx → app-ui/Panel/Buttons.jsx

@@ -93,31 +93,31 @@ export default class Buttons extends React.Component {
       <div id="sh-buttons" className={styles.root}>
         <div className={styles.left}>
           <a
-            className={styles["btn-add"]}
+            className={styles['btn-add']}
             href="#"
             onClick={() => Buttons.btnAdd()}
           >
-            <Icon type="plus" className="iconfont" />
+            <Icon type="plus"/>
           </a>
         </div>
 
         <div className={styles.right}>
           <Icon
             type="search"
             className={classnames({
-              iconfont: 1,
               on: this.state.search_on
             })}
             onClick={() => this.btnSearch()}
           />
-          <i
-            className={classnames({
-              iconfont: 1,
-              'icon-switchon': this.state.top_toggle_on,
-              'icon-switchoff': !this.state.top_toggle_on
-            })}
-            onClick={() => this.btnToggle()}
-          />
+          {/*<i*/}
+          {/*  className={classnames({*/}
+          {/*    iconfont: 1,*/}
+          {/*    'icon-switchon': this.state.top_toggle_on,*/}
+          {/*    'icon-switchoff': !this.state.top_toggle_on*/}
+          {/*  })}*/}
+          {/*  onClick={() => this.btnToggle()}*/}
+          {/*/>*/}
+          <Icon type="setting" onClick={() => Agent.emit('show_preferences')}/>
         </div>
       </div>
     )

app-ui/panel/ListItem.jsx → app-ui/Panel/ListItem.jsx

@@ -10,6 +10,8 @@ import classnames from 'classnames'
 import { Icon } from 'antd'
 import Agent from '../Agent'
 import isInViewport from 'wheel-js/src/browser/isInViewport'
+import IconOn from './images/on.svg'
+import IconOff from './images/off.svg'
 import styles from './ListItem.less'
 
 export default class ListItem extends React.Component {
@@ -93,39 +95,23 @@ export default class ListItem extends React.Component {
       >
         {sys ? null : (
           <div className={styles['item-buttons']}>
-            <i
-              className={classnames({
-                iconfont: 1,
-                'icon-edit': 1
-              })}
-              onClick={this.toEdit.bind(this)}
-            />
-            <i className={classnames({
-              iconfont: 1,
-              switch: 1,
-              'icon-on': data.on,
-              'icon-off': !data.on
-            })}
-               onClick={this.toggle.bind(this)}
+            {is_selected ? (
+              <Icon
+                type="form"
+                onClick={this.toEdit.bind(this)}
+                className={styles['icon-edit']}
+              />
+            ) : null}
+            <Icon
+              className={styles.switcher}
+              component={data.on ? IconOn : IconOff}
+              onClick={this.toggle.bind(this)}
             />
           </div>
         )}
-        {/*<i className={classnames({*/}
-        {/*'iconfont': 1*/}
-        {/*, 'item-icon': 1*/}
-        {/*, 'icon-warn': !!data.error*/}
-        {/*, 'icon-file': !sys && !data.error && data.where !== 'group'*/}
-        {/*, 'icon-files': data.where === 'group'*/}
-        {/*, 'icon-sysserver': sys && !data.error*/}
-        {/*})}*/}
-        {/*title={data.error || ''}*/}
-        {/*/>*/}
         <Icon
           type={icon_type}
-          className={classnames({
-            iconfont: 1,
-            'item-icon': 1
-          })}
+          className={styles['item-icon']}
           title={data.error || ''}
         />
         <span>{this.getTitle()}</span>

app-ui/panel/ListItem.less → app-ui/Panel/ListItem.less

@@ -7,7 +7,7 @@
     font-size: 14px;
     padding: 8px 10px 8px 10px;
 
-    i.item-icon {
+    .item-icon {
       width: 22px;
       font-size: 12px;
     }
@@ -20,47 +20,38 @@
       color: #fff;
     }
 
-    i.item-icon {
+    .item-icon {
       color: #fff;
     }
 
     &:hover {
-      :global(i.icon-edit) {
+      .icon-edit {
         display: inline-block;
         color: #fff;
       }
     }
   }
+}
 
-  :global {
-    i {
-      display: inline-block;
-      width: 20px;
-      text-align: center;
-      margin-right: 5px;
-
-      &.item-icon {
-        font-size: 10px;
-      }
-
-      &.switch {
-        cursor: pointer;
-        line-height: 23px;
+.item-icon {
+  margin-right: 0.5em;
+  width: 1.5em;
+}
 
-        &.icon-on {
-          color: #af9;
-        }
-      }
+.icon-edit {
+  margin-right: 0.5em;
+  font-size: 1.5em;
+  transform: scale(0.7);
+  cursor: pointer;
+}
 
-      &.icon-edit {
-        display: none;
-      }
-    }
-  }
+.switcher {
+  cursor: pointer;
+  font-size: 1.5em;
 }
 
 .item-buttons {
   position: absolute;
   right: 10px;
-  margin-top: -2px;
+  margin-top: -1px;
 }

app-ui/panel/Panel.jsx → app-ui/Panel/index.jsx

@@ -9,11 +9,11 @@ import React from 'react'
 import Buttons from './Buttons'
 //import SearchBar from './searchbar'
 import List from './List'
-import styles from './Panel.less'
+import styles from './index.less'
 import Agent from '../Agent'
 
-export default class Panel extends React.Component {
-  
+export default class Index extends React.Component {
+
   handleOndragenter (events) {
     events.preventDefault()
   }

app-ui/content/Editor.jsx

@@ -186,7 +186,7 @@ export default class Editor extends React.Component {
     })
   }
 
-  componentWillReceiveProps (next_props) {
+  componentWillReceiveProps (next_props) { // todo ...
     //console.log(next_props);
     let cm = this.codemirror
     let doc = cm.getDoc()

app/menu/main_menu.js

@@ -9,10 +9,10 @@ const path = require('path')
 const paths = require('../server/paths')
 const {Menu, shell, dialog} = require('electron')
 const m_lang = require('../server/lang')
-const getPref = require('../server/actions/getPref')
+//const getPref = require('../server/actions/getPref')
 const checkUpdate = require('../server/checkUpdate')
 const svr = require('../server/svr')
-const version = require('../version')
+//const version = require('../version')
 
 function doInit (app, lang) {
   let last_path = null
@@ -191,11 +191,13 @@ function doInit (app, lang) {
           label: lang.feedback,
           click () {
             shell.openExternal('https://github.com/oldj/SwitchHosts/issues')
+              .catch(e => console.log(e))
           }
         }, {
           label: lang.homepage,
           click () {
             shell.openExternal('https://oldj.github.io/SwitchHosts/')
+              .catch(e => console.log(e))
           }
         }]
     }

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "switchhosts",
-  "version": "3.3.13",
+  "version": "3.3.14",
   "description": "Switch hosts quickly!",
   "main": "main.js",
   "scripts": {