merged with latest master; using icon as checkbox.

src/renderer/views/preferences.js

@@ -0,0 +1,157 @@
+const React = require('react')
+const remote = require('electron').remote
+const dialog = remote.dialog
+
+const {dispatch} = require('../lib/dispatcher')
+
+module.exports = class Preferences extends React.Component {
+  render () {
+    var state = this.props.state
+    return (
+      <div className='preferences'>
+        {renderGeneralSection(state)}
+        {renderPlaybackSection(state)}
+      </div>
+    )
+  }
+}
+
+function renderGeneralSection (state) {
+  return renderSection({
+    key: 'general',
+    title: 'General',
+    description: '',
+    icon: 'settings'
+  }, [
+    renderDownloadDirSelector(state)
+  ])
+}
+
+function renderPlaybackSection (state) {
+  return renderSection({
+    title: 'Playback',
+    description: '',
+    icon: 'settings'
+  }, [
+    renderPlayInVlcSelector(state)
+  ])
+}
+
+function renderPlayInVlcSelector (state) {
+  return renderCheckbox({
+    label: 'Play in VLC',
+    description: 'Media will play in VLC',
+    property: 'playInVlc',
+    value: state.saved.prefs.playInVlc
+  },
+  state.unsaved.prefs.playInVlc,
+  function (value) {
+    setStateValue('playInVlc', value)
+  })
+}
+
+function renderDownloadDirSelector (state) {
+  return renderFileSelector({
+    key: 'download-path',
+    label: 'Download Path',
+    description: 'Data from torrents will be saved here',
+    property: 'downloadPath',
+    options: {
+      title: 'Select download directory',
+      properties: [ 'openDirectory' ]
+    }
+  },
+  state.unsaved.prefs.downloadPath,
+  function (filePath) {
+    setStateValue('downloadPath', filePath)
+  })
+}
+
+// Renders a prefs section.
+// - definition should be {icon, title, description}
+// - controls should be an array of vdom elements
+function renderSection (definition, controls) {
+  var helpElem = !definition.description ? null : (
+    <div key='help' className='help text'>
+      <i className='icon'>help_outline</i>{definition.description}
+    </div>
+  )
+  return (
+    <section key={definition.key} className='section preferences-panel'>
+      <div className='section-container'>
+        <div key='heading' className='section-heading'>
+          <i className='icon'>{definition.icon}</i>{definition.title}
+        </div>
+        {helpElem}
+        <div key='body' className='section-body'>
+          {controls}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function renderCheckbox (definition, value, callback) {
+  var checked = ''
+  if (value) checked = 'checked'
+
+  return hx`
+    <div class='control-group'>
+      <div class='controls'>
+        <label class='control-label'>
+          <div class='preference-title'>${definition.label}</div>
+        </label>
+        <div class='controls'>
+          <label>
+            <input type='checkbox' class='checkbox'
+              onclick=${handleClick}
+              id=${definition.property}
+              ${checked} />
+
+            <span class="checkbox-label">${definition.description}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  `
+  function handleClick () {
+    callback(this.checked)
+  }
+}
+
+// Creates a file chooser
+// - defition should be {label, description, options}
+//   options are passed to dialog.showOpenDialog
+// - value should be the current pref, a file or folder path
+// - callback takes a new file or folder path
+function renderFileSelector (definition, value, callback) {
+  return (
+    <div key={definition.key} className='control-group'>
+      <div className='controls'>
+        <label className='control-label'>
+          <div className='preference-title'>{definition.label}</div>
+          <div className='preference-description'>{definition.description}</div>
+        </label>
+        <div className='controls'>
+          <input type='text' className='file-picker-text'
+            id={definition.property}
+            disabled='disabled'
+            value={value} />
+          <button className='btn' onClick={handleClick}>
+            <i className='icon'>folder_open</i>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+  function handleClick () {
+    dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
+      if (!Array.isArray(filenames)) return
+      callback(filenames[0])
+    })
+  }
+}
+
+function setStateValue (property, value) {
+  dispatch('updatePreferences', property, value)
+}