Clean up Preferences and add tab support (wulkano#643)

mofelee · Mar 10, 2019 · 474306c · 474306c
1 parent 901e0e8
commit 474306c
Show file tree

Hide file tree

Showing 16 changed files with 298 additions and 111 deletions.
diff --git a/main/utils/macos-version.js b/main/utils/macos-version.js
@@ -0,0 +1,3 @@
+const macosVersion = require('macos-version');
+
+module.exports = macosVersion;
diff --git a/renderer/components/config/index.js b/renderer/components/config/index.js
@@ -62,7 +62,7 @@ class Config extends React.Component {
         </div>
         <footer>
           <div className="fade"/>
-          <div className="button" onClick={closeWindow}>Done</div>
+          <button type="button" onClick={closeWindow}>Done</button>
         </footer>
         <style jsx>{`
           .container {
@@ -138,7 +138,7 @@ class Config extends React.Component {
             transform: translateY(-100%);
           }
 
-          footer .button {
+          footer button {
             height: 32px;
             line-height: 16px;
             margin: 0 16px 16px 16px;
@@ -149,6 +149,7 @@ class Config extends React.Component {
             align-items: center;
             justify-content: center;
             flex: 1;
+            outline: none;
           }
         `}</style>
       </div>

diff --git a/renderer/components/config/tab.js b/renderer/components/config/tab.js
@@ -24,13 +24,18 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
             line-height: 32px;
             font-size: 12px;
             margin-top: 16px;
+            outline: none;
           }
 
           .has-errors {
             background: rgba(255,59,48,0.10);
             border-color: rgba(255,59,48,0.20);
           }
 
+          input:focus {
+            border-color: #007aff;
+          }
+
           div {
             width: 100%;
           }
@@ -41,10 +46,10 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
 
   if (type === 'select') {
     const options = schema.enum.map(value => ({label: value, value}));
-    return <Select options={options} selected={value} onSelect={value => onChange(name, value)}/>;
+    return <Select tabIndex={0} options={options} selected={value} onSelect={value => onChange(name, value)}/>;
   }
 
-  return <Switch checked={value} onClick={() => onChange(name, !value)}/>;
+  return <Switch tabIndex={0} checked={value} onClick={() => onChange(name, !value)}/>;
 };
 
 ConfigInput.propTypes = {

diff --git a/...onents/preferences/categories/settings.js → ...ponents/preferences/categories/general.js b/...onents/preferences/categories/settings.js → ...ponents/preferences/categories/general.js
@@ -2,7 +2,6 @@ import electron from 'electron';
 import React from 'react';
 import PropTypes from 'prop-types';
 import tildify from 'tildify';
-import macosVersion from 'macos-version';
 
 import {connect, PreferencesContainer} from '../../../containers';
 
@@ -14,12 +13,19 @@ import ShortcutInput from '../shortcut-input';
 
 import Category from './category';
 
-const showCursorSupported = macosVersion.isGreaterThanOrEqualTo('10.14');
-
-class Settings extends React.Component {
+class General extends React.Component {
   static defaultProps = {
     audioDevices: [],
-    kapturesDir: ''
+    kapturesDir: '',
+    category: 'general'
+  }
+
+  state = {}
+
+  componentDidMount() {
+    this.setState({
+      showCursorSupported: electron.remote.require('./utils/macos-version').isGreaterThanOrEqualTo('10.14')
+    });
   }
 
   openKapturesDir = () => {
@@ -47,116 +53,155 @@ class Settings extends React.Component {
       setOpenOnStartup,
       cropperShortcut,
       updateShortcut,
-      toggleShortcuts
+      toggleShortcuts,
+      category
     } = this.props;
 
+    const {showCursorSupported} = this.state;
+
     const devices = audioDevices.map(device => ({
       label: device.name,
       value: device.id
     }));
 
     const kapturesDirPath = tildify(kapturesDir);
-
+    const tabIndex = category === 'general' ? 0 : -1;
     const fpsOptions = [{label: '30 FPS', value: false}, {label: '60 FPS', value: true}];
 
     return (
       <Category>
-        {showCursorSupported && (
-          <Item
-            parentItem
-            title="Show cursor"
-            subtitle="Display the mouse cursor in your Kaptures"
-          >
-            <Switch
-              checked={showCursor}
-              onClick={
-                () => {
-                  if (showCursor) {
-                    toggleSetting('highlightClicks', false);
-                  }
+        {
+          showCursorSupported &&
+            <Item
+              key="showCursor"
+              parentItem
+              title="Show cursor"
+              subtitle="Display the mouse cursor in your Kaptures"
+            >
+              <Switch
+                tabIndex={tabIndex}
+                checked={showCursor}
+                onClick={
+                  () => {
+                    if (showCursor) {
+                      toggleSetting('highlightClicks', false);
+                    }
 
-                  toggleSetting('showCursor');
-                }
-              }/>
-          </Item>)}
-        <Item subtitle="Highlight clicks">
-          <Switch
-            checked={highlightClicks}
-            disabled={!showCursor}
-            onClick={() => toggleSetting('highlightClicks')}
-          />
-        </Item>
+                    toggleSetting('showCursor');
+                  }
+                }/>
+            </Item>
+        }
+        {
+          showCursorSupported &&
+            <Item key="highlightClicks" subtitle="Highlight clicks">
+              <Switch
+                tabIndex={tabIndex}
+                checked={highlightClicks}
+                disabled={!showCursor}
+                onClick={() => toggleSetting('highlightClicks')}
+              />
+            </Item>
+        }
         <Item
+          key="recordKeyboardShortcut"
           parentItem
           title="Keyboard shortcuts"
           subtitle="Toggle and customise keyboard shortcuts"
         >
-          <Switch checked={recordKeyboardShortcut} onClick={toggleShortcuts}/>
+          <Switch tabIndex={tabIndex} checked={recordKeyboardShortcut} onClick={toggleShortcuts}/>
         </Item>
-        {recordKeyboardShortcut && (
-          <Item subtitle="Trigger Kap">
-            <ShortcutInput {...cropperShortcut} onChange={shortcut => updateShortcut('cropperShortcut', shortcut)}/>
-          </Item>
-        )}
+        {
+          recordKeyboardShortcut &&
+            <Item key="cropperShortcut" subtitle="Trigger Kap">
+              <ShortcutInput
+                shortcut={cropperShortcut}
+                tabIndex={tabIndex}
+                onChange={shortcut => updateShortcut('cropperShortcut', shortcut)}
+              />
+            </Item>
+        }
         <Item
+          key="hideDesktopIcons"
           title="Hide desktop icons"
           subtitle="Temporarily hide desktop icons while recording"
         >
-          <Switch checked={hideDesktopIcons} onClick={() => toggleSetting('hideDesktopIcons')}/>
+          <Switch tabIndex={tabIndex} checked={hideDesktopIcons} onClick={() => toggleSetting('hideDesktopIcons')}/>
         </Item>
         <Item
+          key="doNotDisturb"
           title="Silence notifications"
           subtitle="Activate “Do Not Disturb” while recording"
         >
-          <Switch checked={doNotDisturb} onClick={() => toggleSetting('doNotDisturb')}/>
+          <Switch tabIndex={tabIndex} checked={doNotDisturb} onClick={() => toggleSetting('doNotDisturb')}/>
         </Item>
         <Item
+          key="loopExports"
           title="Loop exports"
           subtitle="Infinitely loop exports when supported"
         >
-          <Switch checked={loopExports} onClick={() => toggleSetting('loopExports')}/>
+          <Switch tabIndex={tabIndex} checked={loopExports} onClick={() => toggleSetting('loopExports')}/>
         </Item>
         <Item
+          key="recordAudio"
           parentItem
           title="Audio recording"
           subtitle="Record audio from input device"
         >
           <Switch
+            tabIndex={tabIndex}
             checked={recordAudio}
             onClick={() => toggleSetting('recordAudio')}/>
         </Item>
-        <Item subtitle="Select input device">
+        <Item key="audioInputDeviceId" subtitle="Select input device">
           <Select
+            tabIndex={tabIndex}
             options={devices}
             selected={audioInputDeviceId}
             placeholder="Select Device"
             noOptionsMessage="No input devices"
             onSelect={setAudioInputDeviceId}/>
         </Item>
         <Item
+          key="record60fps"
           title="Capture frame rate"
           subtitle="Increased FPS impacts performance and file size"
         >
           <Select
+            tabIndex={tabIndex}
             options={fpsOptions}
             selected={record60fps}
             onSelect={value => toggleSetting('record60fps', value)}/>
         </Item>
-        <Item title="Allow analytics" subtitle="Help us improve Kap by sending anonymous usage stats">
-          <Switch checked={allowAnalytics} onClick={() => toggleSetting('allowAnalytics')}/>
+        <Item
+          key="allowAnalytics"
+          title="Allow analytics"
+          subtitle="Help us improve Kap by sending anonymous usage stats"
+        >
+          <Switch tabIndex={tabIndex} checked={allowAnalytics} onClick={() => toggleSetting('allowAnalytics')}/>
         </Item>
-        <Item title="Start automatically" subtitle="Launch Kap on system startup">
-          <Switch checked={openOnStartup} onClick={setOpenOnStartup}/>
+        <Item
+          key="openOnStartup"
+          title="Start automatically"
+          subtitle="Launch Kap on system startup"
+        >
+          <Switch tabIndex={tabIndex} checked={openOnStartup} onClick={setOpenOnStartup}/>
         </Item>
-        <Item title="Save to…" subtitle={kapturesDirPath} tooltip={kapturesDir} onSubtitleClick={this.openKapturesDir}>
-          <Button title="Choose" onClick={pickKapturesDir}/>
+        <Item
+          key="pickKapturesDir"
+          title="Save to…"
+          subtitle={kapturesDirPath}
+          tooltip={kapturesDir}
+          onSubtitleClick={this.openKapturesDir}
+        >
+          <Button tabIndex={tabIndex} title="Choose" onClick={pickKapturesDir}/>
         </Item>
       </Category>
     );
   }
 }
 
-Settings.propTypes = {
+General.propTypes = {
   showCursor: PropTypes.bool,
   highlightClicks: PropTypes.bool,
   hideDesktopIcons: PropTypes.bool,
@@ -176,6 +221,7 @@ Settings.propTypes = {
   setOpenOnStartup: PropTypes.func.isRequired,
   updateShortcut: PropTypes.func.isRequired,
   toggleShortcuts: PropTypes.func.isRequired,
+  category: PropTypes.string,
   cropperShortcut: PropTypes.shape({
     metaKey: PropTypes.bool.isRequired,
     altKey: PropTypes.bool.isRequired,
@@ -201,7 +247,8 @@ export default connect(
     openOnStartup,
     allowAnalytics,
     loopExports,
-    cropperShortcut
+    cropperShortcut,
+    category
   }) => ({
     showCursor,
     highlightClicks,
@@ -216,7 +263,8 @@ export default connect(
     openOnStartup,
     allowAnalytics,
     loopExports,
-    cropperShortcut
+    cropperShortcut,
+    category
   }),
   ({
     toggleSetting,
@@ -233,4 +281,4 @@ export default connect(
     updateShortcut,
     toggleShortcuts
   })
-)(Settings);
+)(General);
diff --git a/renderer/components/preferences/categories/index.js b/renderer/components/preferences/categories/index.js
@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 
 import {connect, PreferencesContainer} from '../../../containers';
 
-import Settings from './settings';
+import General from './general';
 import Plugins from './plugins';
 
 const CATEGORIES = [
   {
-    name: 'settings',
-    Component: Settings
+    name: 'general',
+    Component: General
   }, {
     name: 'plugins',
     Component: Plugins
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const macosVersion = require('macos-version');

		module.exports = macosVersion;