mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
79b6c1d94a
Summary: Things still to come: - General tab - Signatures tab (potentially remove and land) Adding emacs things to gitignore Adding progress. iterating on html/css is incredibly painful Added layout for accounts page. Adding layout for appearance page layout for shortcuts preferences page adding layount for notifications menu Adding signatures layout WIP WIP - tab switching, accounts tab WIP ALL THE THINGS Keymap template support (Gmail / outlook, etc.) Test Plan: No tests atm Reviewers: evan Differential Revision: https://phab.nylas.com/D1890
63 lines
1.9 KiB
CoffeeScript
63 lines
1.9 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
{RetinaImg, Flexbox} = require 'nylas-component-kit'
|
|
|
|
class AppearanceModeOption extends React.Component
|
|
@propTypes:
|
|
mode: React.PropTypes.string.isRequired
|
|
active: React.PropTypes.bool
|
|
onClick: React.PropTypes.func
|
|
|
|
constructor: (@props) ->
|
|
|
|
render: =>
|
|
classname = "appearance-mode"
|
|
classname += " active" if @props.active
|
|
<div className={classname} onClick={@props.onClick}>
|
|
<RetinaImg name={"appearance-mode-#{@props.mode}.png"} mode={RetinaImg.Mode.ContentIsMask}/>
|
|
<div>{@props.mode} View</div>
|
|
</div>
|
|
|
|
class PreferencesAppearance extends React.Component
|
|
@displayName: 'PreferencesAppearance'
|
|
@propTypes:
|
|
config: React.PropTypes.object
|
|
|
|
render: =>
|
|
<div className="container-appearance">
|
|
<div className="section">
|
|
<div className="section-header">
|
|
Layout and theme:
|
|
</div>
|
|
<div className="section-body section-appearance">
|
|
<Flexbox direction="row" style={alignItems: "center"}>
|
|
{['list', 'split'].map (mode) =>
|
|
<AppearanceModeOption
|
|
mode={mode} key={mode}
|
|
active={@props.config.get('core.workspace.mode') is mode}
|
|
onClick={ => @props.config.set('core.workspace.mode', mode)} />
|
|
}
|
|
</Flexbox>
|
|
|
|
<div className="section-header">
|
|
<input type="checkbox"
|
|
id="dark"
|
|
checked={@props.config.contains('core.themes','ui-dark')}
|
|
onChange={ => @props.config.toggleContains('core.themes', 'ui-dark')}
|
|
/>
|
|
<label htmlFor="dark">Use dark color scheme</label>
|
|
</div>
|
|
|
|
<div className="section-header">
|
|
Set font size:
|
|
<select>
|
|
<option>12</option>
|
|
</select>
|
|
Points
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
module.exports = PreferencesAppearance
|