Merge branch 'feature/tidy' into develop

README.md

@@ -87,35 +87,20 @@ SwitchHosts! stores data at `~/.SwitchHosts` (Or folder `.SwitchHosts` under the
     npm run dev
     ```
 
-### Package and Zip
+### Package
 
- - It is recommended to use [electron-packager](https://github.com/electron-userland/electron-packager) for packaging.
-
-    ```bash
-    # install electron-packager for use from cli
-    npm install electron-packager -g
-    ```
-
- - Go to the `./` folder, run `npm run pack` . The packaged file will be the `./dist` folder.
+ - It is recommended to use [electron-builder](https://github.com/electron-userland/electron-builder) for packaging.
+ - Go to the `./` folder, run `npm run make` . The packaged file will be the `./dist` folder.
  - This command may take several minutes to finish when you run it the first time, as it needs time to download dependent files. You can download the dependencies manually [here](https://github.com/electron/electron/releases), or [Taobao mirror](https://npm.taobao.org/mirrors/electron/), then save the files to `~/.electron`. You can check the [Electron Docs](http://electron.atom.io/docs/) for more infomation.
 
     ```bash
     # pack
-    npm run pack  # the packed files will be in ./dist
+    npm run make # the packed files will be in ./dist
 
-    # or pack for a special platform
-    npm run pack-mac  # pack for macOS, the packed files will be in ./dist
-    npm run pack-win  # pack for Windows, the packed files will be in ./dist
+    # or 
+    npm run build-and-make
     ```
 
- - After packaging, you can make a zip file by running the following command.
-
-    ```bash
-    # zip
-    npm run zip  # the zipped files will be in ./dist
-    ```
-
-
 ## Copyright
 
 SwitchHosts! is a free and open source software, it is released under the MIT license.

README_cn.md

@@ -87,32 +87,18 @@ SwitchHosts! 的数据文件在 `~/.SwitchHosts` 目录下（Windows 用户为
     npm run dev
     ```
 
-### 打包发布
+### 打包
 
- - 建议使用 [electron-packager](https://github.com/electron-userland/electron-packager) 进行打包
-
-    ```bash
-    # install electron-packager for use from cli
-    npm install electron-packager -g
-    ```
-
- - 在 `./` 目录下，运行 `npm run pack` 命令，打包后的文件位于 `./dist` 目录；
+ - 建议使用 [electron-builder](https://github.com/electron-userland/electron-builder) 进行打包
+ - 在 `./` 目录下，运行 `npm run make` 命令，打包后的文件位于 `./dist` 目录；
  - 首次执行此命令可能需要花费较多时间（需要下载对应的构建文件），也可先手动下载[对应的发布版本](https://github.com/electron/electron/releases)（[淘宝镜像](https://npm.taobao.org/mirrors/electron/)），手动保存到 `~/.electron` 目录下。更多信息请参考 [Electron 文档](http://electron.atom.io/docs/)。
 
     ```bash
     # pack
-    npm run pack  # the packed files will be in ./dist
+    npm run make # the packed files will be in ./dist
 
-    # 也可以只打包特定平台的版本，如
-    npm run pack-mac  # pack for macOS, the packed files will be in ./dist
-    npm run pack-win  # pack for Windows, the packed files will be in ./dist
-    ```
-
- - 打包完成后，可运行以下命令将生成的程序压缩为 zip 文件。
-
-    ```bash
-    # zip
-    npm run zip  # the zipped files will be in ./dist
+    # 或者
+    npm run build-and-make
     ```
 
 ## 更新历史

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/List.jsx → app-ui/Panel/List.jsx

@@ -84,7 +84,8 @@ export default class List extends React.Component {
         <ListItem
           data={this.props.sys_hosts}
           {...this.props}
-          sys="1"/>
+          sys="1"
+        />
         <div ref={c => this.el_items = c} className={styles['custom-items']}>
           {this.customItems()}
         </div>

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

@@ -9,3 +9,8 @@
   overflow: auto;
 }
 
+:global(.platform-darwin) {
+  .custom-items {
+    top: 72px;
+  }
+}

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

@@ -2,12 +2,13 @@
   position: relative;
   padding: 7px 10px 7px 12px;
   cursor: pointer;
+  -webkit-app-region: no-drag;
 
   &.sys-hosts {
     font-size: 14px;
     padding: 8px 10px 8px 10px;
 
-    i.item-icon {
+    .item-icon {
       width: 22px;
       font-size: 12px;
     }
@@ -20,47 +21,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()
   }
@@ -26,13 +26,19 @@ export default class Panel extends React.Component {
     events.preventDefault()
     let file = events.dataTransfer.files[0]
     if (file) {
-      Agent.emit('add_hosts', file.name, 'file://'+file.path)
+      Agent.emit('add_hosts', file.name, 'file://' + file.path)
     }
   }
 
   render () {
+    let {platform} = Agent
+
     return (
-      <div id="panel" className={styles.root} onDragEnter={this.handleOndragenter} onDragOver={this.handleOndragover} onDrop={this.handleOndrop}>
+      <div id="panel" className={styles.root} onDragEnter={this.handleOndragenter} onDragOver={this.handleOndragover}
+           onDrop={this.handleOndrop}>
+        {platform === 'darwin' ? (
+          <div className={styles.mac_handler}/>
+        ) : null}
         <List {...this.props}/>
         {/*<SearchBar/>*/}
         <Buttons/>

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

@@ -10,4 +10,10 @@
   //height: 100%;
   background: @bg_left;
   color: @font_color_left;
+  -webkit-app-region: drag;
+}
+
+.mac_handler {
+  height: 36px;
+  //-webkit-app-region: drag;
 }

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-ui/content/cm_hl.js

@@ -19,12 +19,12 @@ export default function () {
         stream.skipToEnd()
         return 'comment'
       }
-      if (!s.match(/^\s*([\d\.]+|[\da-f:\.%lo]+)\s+\w/i)) {
+      if (!s.match(/^\s*([\d.]+|[\da-f:.%lo]+)\s+\w/i)) {
         return 'error'
       }
 
-      if (sol && ch.match(/[\w\.:%]/)) {
-        stream.eatWhile(/[\w\.:%]/)
+      if (sol && ch.match(/[\w.:%]/)) {
+        stream.eatWhile(/[\w.:%]/)
         return 'ip'
       }
 

app-ui/frame/EditPrompt.jsx

@@ -54,7 +54,7 @@ export default class EditPrompt extends React.Component {
 
   componentDidMount () {
     Agent.on('add_hosts', (title, uri) => {
-      var goWhere = ''
+      let goWhere = ''
       if (uri) {
         goWhere = 'remote'
       }
@@ -207,7 +207,7 @@ export default class EditPrompt extends React.Component {
           <a href="#" className="del"
              onClick={this.confirmDel.bind(this)}
           >
-            <i className="iconfont icon-delete"/>
+            <Icon type="delete"/>
             <span>{lang.del_hosts}</span>
           </a>
         </div>