Added icon

app/renderer/components/settings.js

@@ -8,6 +8,7 @@ const aboutActions = require('../../../js/about/aboutActions')
 const getSetting = require('../../../js/settings').getSetting
 const {changeSetting} = require('../lib/settingsUtil')
 const SwitchControl = require('../../../js/components/switchControl')
+const {StyleSheet, css} = require('aphrodite')
 
 class SettingsList extends ImmutableComponent {
   render () {
@@ -100,9 +101,69 @@ class SiteSettingCheckbox extends ImmutableComponent {
   }
 }
 
+class SettingItemIcon extends ImmutableComponent {
+  render () {
+    const icon = require('../../../img/icon_pencil.svg')
+    // const icon = require(this.props.icon)
+    const bg = StyleSheet.create({
+      Icon: {
+        '-webkit-mask-image': `url(${icon})`
+      }
+    })
+
+    return <div className='settingItem'>
+      {
+        this.props.dataL10nId
+          ? <span data-l10n-id={this.props.dataL10nId} />
+          : null
+      }
+      <div>
+        {
+          this.props.position === 'left'
+            ? <span className={css(bg.Icon, styles.icon, styles.iconLeft)} />
+            : null
+        }
+        <div className={css(styles.child)}>
+          {this.props.children}
+        </div>
+        {
+          this.props.position === 'right'
+            ? <span className={css(bg.Icon, styles.icon, styles.iconRight)} />
+            : null
+        }
+      </div>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    backgroundColor: '#5a5a5a',
+    height: '16px',
+    width: '16px',
+    display: 'inline-block',
+    verticalAlign: 'top',
+    padding: '0px',
+    '-webkit-mask-repeat': 'no-repeat'
+  },
+
+  iconLeft: {
+    margin: '8px 10px 0 0'
+  },
+
+  iconRight: {
+    margin: '8px 0 0 10px'
+  },
+
+  child: {
+    display: 'inline-block'
+  }
+})
+
 module.exports = {
   SettingsList,
   SettingItem,
   SettingCheckbox,
-  SiteSettingCheckbox
+  SiteSettingCheckbox,
+  SettingItemIcon
 }

js/about/preferences.js

@@ -10,7 +10,7 @@ const UrlUtil = require('../lib/urlutil')
 
 // Components
 const ModalOverlay = require('../components/modalOverlay')
-const {SettingsList, SettingItem, SettingCheckbox, SiteSettingCheckbox} = require('../../app/renderer/components/settings')
+const {SettingsList, SettingItem, SettingCheckbox, SiteSettingCheckbox, SettingItemIcon} = require('../../app/renderer/components/settings')
 const {SettingTextbox} = require('../../app/renderer/components/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/dropdown')
 const Button = require('../components/button')
@@ -629,14 +629,14 @@ class GeneralTab extends ImmutableComponent {
           isDarwin ? null : <SettingCheckbox dataL10nId='autoHideMenuBar' prefKey={settings.AUTO_HIDE_MENU} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         }
         <SettingCheckbox dataL10nId='disableTitleMode' prefKey={settings.DISABLE_TITLE_MODE} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingItem dataL10nId='downloadDefaultPath'>
+        <SettingItemIcon dataL10nId='downloadDefaultPath' position='right' icon='../../../img/icon_pencil.svg'>
           <SettingTextbox
             spellCheck='false'
             readOnly='true'
             data-l10n-id='downloadDefaultPathInput'
             value={getSetting(settings.DOWNLOAD_DEFAULT_PATH, this.props.settings)}
             onClick={this.openDownloadDialog} />
-        </SettingItem>
+        </SettingItemIcon>
         <SettingCheckbox dataL10nId='downloadAlwaysAsk' prefKey={settings.DOWNLOAD_ALWAYS_ASK}
           settings={this.props.settings}
           onChangeSetting={this.props.onChangeSetting} />