Merge branch 'feature/tidy' into develop

Author: oldj

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.jsxapp-ui/panel/Buttons.jsx renamed to 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/Buttons.less app-ui/Panel/Buttons.lessapp-ui/panel/Buttons.less renamed to app-ui/Panel/Buttons.less

@@ -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.jsx app-ui/Panel/List.jsxapp-ui/panel/List.jsx renamed to app-ui/Panel/List.jsx

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

app-ui/panel/List.less app-ui/Panel/List.lessapp-ui/panel/List.less renamed to app-ui/Panel/List.less

@@ -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.jsx app-ui/Panel/ListItem.jsxapp-ui/panel/ListItem.jsx renamed to app-ui/Panel/ListItem.jsx

@@ -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;
 }