Merge branch 'feature/pref' into develop

Author: oldj

app/lang/cn.js

@@ -78,6 +78,12 @@ exports.content = {
   , pref_choice_mode: '选择模式'
   , pref_choice_mode_multiple: '多选'
   , pref_choice_mode_single: '单选'
+  , pref_tab_advanced: '高级'
+  , pref_tab_custom_cmd: '自定义命令'
+  , pref_tab_general: '通用'
+  , pref_tab_usage_data_title: '帮助改进 SwitchHosts!'
+  , pref_tab_usage_data_desc: '您愿意发送匿名的使用数据来帮助我们改进 SwitchHosts! 吗？数据中不会包含任何隐私信息。'
+  , pref_tab_usage_data_label: '好的，发送匿名的使用数据'
   , preferences: '设置'
   , quit: '退出'
   , readonly: '只读'

app/lang/en.js

@@ -78,6 +78,12 @@ exports.content = {
   , pref_choice_mode: 'Choice mode'
   , pref_choice_mode_multiple: 'Multiple choices'
   , pref_choice_mode_single: 'Single choice'
+  , pref_tab_advanced: 'Advanced'
+  , pref_tab_custom_cmd: 'Custom comand'
+  , pref_tab_general: 'General'
+  , pref_tab_usage_data_title: 'Make SwitchHosts! better!'
+  , pref_tab_usage_data_desc: 'Would you like to help us improve SwitchHosts! by periodically submitting anonymous usage data?'
+  , pref_tab_usage_data_label: 'Yes, submit anonymized usage data'
   , preferences: 'Preferences'
   , quit: 'Quit'
   , readonly: 'Read only'

app/server/actions/statRecord.js

@@ -7,11 +7,13 @@
 
 const request = require('request')
 const version = require('../../configs').version_full
+const getPref = require('./getPref')
 
 const url = 'http://lab.oldj.net/s.gif'
 const session_id = (new Date()).getTime() + ':' + Math.random()
 const queue = []
 let is_initialized = false
+let send_usage_data = null
 
 function log (actions) {
   let u = url + '?' + [
@@ -39,13 +41,27 @@ function send () {
   if (queue.length === 0) return
 
   let action = queue.splice(0).join(',')
-  log(action)
+  if (send_usage_data) {
+    log(action)
+  } else {
+    console.log('send_usage_data:false')
+  }
+}
+
+function initGetPrefCfg () {
+  return getPref()
+    .then(v => v.send_usage_data)
+    .then(v => {
+      send_usage_data = (v !== false)
+    })
 }
 
 function init () {
   if (is_initialized) return
   is_initialized = true
 
+  initGetPrefCfg()
+
   record('launch')
   //SH_event.on('toggle_host', () => {
   //  record('switch')

app/ui/bundle.js

@@ -1 +1 @@
-exports.version = [3,3,6,5276];
+exports.version = [3,3,6,5280];

app/version.js

@@ -10,6 +10,7 @@
     "dll": "webpack --config scripts/webpack.dll.js --progress --profile --colors",
     "dev": "cross-env ENV=dev electron app",
     "build": "gulp ver && npm run _ln && webpack --progress --profile --colors",
+    "w": "npm run build -- -w",
     "pack": "gulp pack",
     "pack-mac": "gulp pack --platform=macOS",
     "pack-win": "gulp pack --platform=win64",
@@ -27,7 +28,6 @@
     "url": "https://github.com/oldj/SwitchHosts/issues"
   },
   "homepage": "https://oldj.github.io/SwitchHosts/",
-  "dependencies": {},
   "devDependencies": {
     "antd": "^2.10.2",
     "autoprefixer": "^6.7.2",
@@ -81,6 +81,7 @@
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",
+    "ramda": "^0.24.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "rimraf": "^2.6.0",
@@ -111,4 +112,4 @@
       "presets": ["latest", "stage-0"]
     }
   }
-}
+}

package-lock.json

@@ -36,6 +36,7 @@
         line-height: @lh;
         padding: 2px 0;
         margin-bottom: 10px;
+        white-space: normal;
 
         .title {
           float: left;
@@ -45,19 +46,20 @@
         .cnt {
           margin-left: 100px;
           line-height: @lh;
-          //input[type=text] {
-          //  width: 240px;
-          //  outline: none;
-          //  padding: 4px 10px;
-          //}
+          input[type=text] {
+            width: 240px;
+            outline: none;
+            padding: 4px 10px;
+          }
           textarea {
             font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
           }
         }
 
         .inform {
           color: #999;
-          line-height: @lh;
+          line-height: 20px;
+          margin-bottom: 5px;
         }
       }
 

package.json

@@ -6,7 +6,8 @@
 'use strict'
 
 import React from 'react'
-import { Checkbox, Input, Radio, Select } from 'antd'
+import R from 'ramda'
+import { Checkbox, Input, Radio, Select, Tabs } from 'antd'
 import MyFrame from './frame'
 import classnames from 'classnames'
 import Agent from '../Agent'
@@ -16,7 +17,8 @@ import './preferences.less'
 
 const RadioGroup = Radio.Group
 const Option = Select.Option
-const pref_keys = ['after_cmd', 'auto_launch', 'choice_mode', 'hide_at_launch', 'is_dock_icon_hidden', 'user_language']
+const TabPane = Tabs.TabPane
+const pref_keys = ['after_cmd', 'auto_launch', 'choice_mode', 'hide_at_launch', 'is_dock_icon_hidden', 'user_language', 'send_usage_data']
 
 export default class PreferencesPrompt extends React.Component {
   constructor (props) {
@@ -30,6 +32,7 @@ export default class PreferencesPrompt extends React.Component {
       auto_launch: false,
       hide_at_launch: false,
       lang_list: [],
+      send_usage_data: true,
       update_found: false // 发现新版本
     }
 
@@ -58,13 +61,7 @@ export default class PreferencesPrompt extends React.Component {
     this.setState({
       show: false
     }, () => {
-      let prefs = {}
-      let d = this.state
-      pref_keys.map(k => {
-        if (d.hasOwnProperty(k)) {
-          prefs[k] = d[k]
-        }
-      })
+      let prefs = R.pick(pref_keys, this.state)
 
       Agent.pact('setPref', prefs)
         .then(() => {
@@ -124,16 +121,15 @@ export default class PreferencesPrompt extends React.Component {
 
     return (
       <div className="ln">
-        <div className="title">{lang.language}</div>
-        <div className="cnt">
+        <div>{lang.language}</div>
+        <div className="inform">{lang.should_restart_after_change_language}</div>
+        <div>
           <Select
             value={this.state.user_language || ''}
             onChange={v => this.updateLangKey(v)}
           >
             {this.getLanguageOptions()}
           </Select>
-
-          <div className="inform">{lang.should_restart_after_change_language}</div>
         </div>
       </div>
     )
@@ -144,8 +140,8 @@ export default class PreferencesPrompt extends React.Component {
 
     return (
       <div className="ln">
-        <div className="title">{lang.pref_choice_mode}</div>
-        <div className="cnt">
+        <div>{lang.pref_choice_mode}</div>
+        <div>
           <RadioGroup
             onChange={e => this.updateChoiceMode(e.target.value)}
             value={this.state.choice_mode}
@@ -163,12 +159,12 @@ export default class PreferencesPrompt extends React.Component {
 
     return (
       <div className="ln">
-        <div className="title">{lang.pref_after_cmd}</div>
-        <div className="cnt">
+        <div>{lang.pref_after_cmd}</div>
+        <div>
           <div className="inform">{lang.pref_after_cmd_info}</div>
           <Input
             type="textarea"
-            rows={4}
+            rows={8}
             defaultValue={this.state.after_cmd}
             placeholder={lang.pref_after_cmd_placeholder}
             onChange={(e) => this.updateAfterCmd(e.target.value)}
@@ -183,13 +179,12 @@ export default class PreferencesPrompt extends React.Component {
 
     return (
       <div className="ln">
-        <div className="title">{lang.auto_launch}</div>
-        <div className="cnt">
-          <Checkbox
-            value={this.state.auto_launch}
-            onChange={(e) => this.updateAutoLaunch(e.target.checked)}
-          />
-        </div>
+        <Checkbox
+          value={this.state.auto_launch}
+          onChange={(e) => this.updateAutoLaunch(e.target.checked)}
+        >
+          {lang.auto_launch}
+        </Checkbox>
       </div>
     )
   }
@@ -199,12 +194,30 @@ export default class PreferencesPrompt extends React.Component {
 
     return (
       <div className="ln">
-        <div className="title">{lang.hide_at_launch}</div>
-        <div className="cnt">
+        <Checkbox
+          checked={this.state.hide_at_launch}
+          onChange={(e) => this.updateMinimizeAtLaunch(e.target.checked)}
+        >
+          {lang.hide_at_launch}
+        </Checkbox>
+      </div>
+    )
+  }
+
+  prefAdvanced () {
+    let {lang} = this.props
+
+    return (
+      <div className="ln">
+        <div>{lang.pref_tab_usage_data_title}</div>
+        <div className="inform">{lang.pref_tab_usage_data_desc}</div>
+        <div>
           <Checkbox
-            checked={this.state.hide_at_launch}
-            onChange={(e) => this.updateMinimizeAtLaunch(e.target.checked)}
-          />
+            checked={this.state.send_usage_data}
+            onChange={(e) => this.setState({send_usage_data: e.target.checked})}
+          >
+            {lang.pref_tab_usage_data_label}
+          </Checkbox>
         </div>
       </div>
     )
@@ -215,21 +228,39 @@ export default class PreferencesPrompt extends React.Component {
   }
 
   body () {
+    let {lang} = this.props
+
     return (
       <div ref="body">
         {/*<div className="title">{SH_Agent.lang.hosts_title}</div>*/}
         {/*<div className="cnt">*/}
         {/*</div>*/}
         <div
-          className={classnames('current-version', {'update-found': this.state.update_found})}>
-          <a href="#"
-             onClick={PreferencesPrompt.openDownloadPage}>{formatVersion(current_version)}</a>
+          className={classnames('current-version', {'update-found': this.state.update_found})}
+        >
+          <a
+            href="#"
+            onClick={PreferencesPrompt.openDownloadPage}
+          >{formatVersion(current_version)}</a>
         </div>
-        {this.prefLanguage()}
-        {this.prefChoiceMode()}
-        {this.prefAfterCmd()}
-        {/*{this.prefAutoLaunch()}*/}
-        {this.prefMinimizeAtLaunch()}
+        <Tabs
+          defaultActiveKey="1"
+          tabPosition="left"
+          style={{minHeight: 240}}
+        >
+          <TabPane tab={lang.pref_tab_general} key="1">
+            {this.prefLanguage()}
+            {this.prefChoiceMode()}
+            {/*{this.prefAutoLaunch()}*/}
+            {this.prefMinimizeAtLaunch()}
+          </TabPane>
+          <TabPane tab={lang.pref_tab_custom_cmd} key="2">
+            {this.prefAfterCmd()}
+          </TabPane>
+          <TabPane tab={lang.pref_tab_advanced} key="3">
+            {this.prefAdvanced()}
+          </TabPane>
+        </Tabs>
       </div>
     )
   }