Minor fixes and style updates

This commit is contained in:
Juan Tejada 2016-01-18 11:39:53 -08:00
parent 02703998da
commit fa6a2fa5c6
9 changed files with 61 additions and 56 deletions

View file

@ -1,12 +0,0 @@
Reflux = require 'reflux'
Actions = [
'selectItem'
'setSectionCollapse'
]
for key in Actions
Actions[key] = Reflux.createAction(name)
Actions[key].sync = true
module.exports = Actions

View file

@ -16,7 +16,8 @@ class MailboxPerspectiveSidebarItem
@name = @shortenedName ? @mailboxPerspective.name
@iconName = @mailboxPerspective.iconName
@dataTransferType = 'nylas-thread-ids'
@useAltCountStyle = true if @mailboxPerspective.isInbox()
<<<<<<< HEAD
@counterStyle = OutlineViewItem.CounterStyles.Alt if @mailboxPerspective.isInbox()
# Sidenote: I think treating the sidebar items as dumb bundles of data is a
# good idea. `count` /shouldn't/ be a function since if it's value changes,
@ -29,9 +30,9 @@ class MailboxPerspectiveSidebarItem
# { count: X, isSelected: false, isDeleted: true}...
#
@count = @_count()
@isSelected = @_isSelected()
@isDeleted = @_isDeleted()
@isCollapsed = @_isCollapsed()
@selected = @_isSelected()
@deleted = @_isDeleted()
@collapsed = @_isCollapsed()
@
@ -55,8 +56,8 @@ class MailboxPerspectiveSidebarItem
onToggleCollapsed: =>
return unless @children.length > 0
key = "core.accountSidebarCollapsed.#{@id}"
@isCollapsed = not @_isCollapsed()
NylasEnv.config.set(key, @isCollapsed)
@collapsed = not @_isCollapsed()
NylasEnv.config.set(key, @collapsed)
onDelete: =>
return if @category?.isDeleted is true
@ -76,20 +77,16 @@ class MailboxPerspectiveSidebarItem
onSelect: =>
Actions.selectRootSheet(WorkspaceStore.Sheet.Threads)
Actions.focusMailboxPerspective(@mailboxPerspective)
AccountSidebarActions.selectItem()
class SheetSidebarItem
constructor: (@name, @iconName, @sheet) ->
@id = @sheet?.id ? @name
isSelected: =>
WorkspaceStore.rootSheet().id is @id
@selected = WorkspaceStore.rootSheet().id is @id
onSelect: =>
Actions.selectRootSheet(@sheet)
AccountSidebarActions.selectItem()
class DraftListSidebarItem extends SheetSidebarItem

View file

@ -9,7 +9,7 @@ class CategorySidebarSection extends AccountSidebarSection
constructor: ({@label, @iconName, @account, @items} = {}) ->
onCreateItem: (displayName) ->
onCreateItem: (displayName) =>
return unless @account
CategoryClass = @account.categoryClass()
category = new CategoryClass

View file

@ -1,8 +1,9 @@
React = require 'react'
_ = require 'underscore'
React = require 'react'
{OutlineView, ScrollRegion} = require 'nylas-component-kit'
AccountSidebarStore = require '../account-sidebar-store'
class AccountSidebar extends React.Component
@displayName: 'AccountSidebar'
@ -35,7 +36,7 @@ class AccountSidebar extends React.Component
<OutlineView key={section.label} {...section} />
render: =>
<ScrollRegion style={flex:1} id="account-sidebar">
<ScrollRegion className="account-sidebar" >
<div className="account-sidebar-sections">
{@_renderSections()}
</div>

View file

@ -3,6 +3,12 @@
@unread-count-color: fadeout(@text-color-subtle, 40%);
.account-sidebar {
flex: 1;
height: 100%;
background-color: @source-list-bg;
}
#account-switcher {
order: 1;
height: 100%;

View file

@ -20,8 +20,10 @@ import React, {Component, PropTypes} from 'react';
* @param {string} props.className - CSS class to be applied to component
* @param {array} props.items - Items to be rendered by the list
* @param {function} props.itemContent - A function that returns a component
or string for each item. To be editable, itemContent must be a string.
If no function is provided, each value in `items` is coerced to a string.
* or string for each item. To be editable, itemContent must be a string.
* If no function is provided, each value in `items` is coerced to a string.
* @param {(string|object)} props.selected - The selected item. This prop is
* optional unless uou want to control the selection externally.
* @param {boolean} props.showEditIcon - Determines wether to show edit icon
* button on selected items
* @param {object} props.createInputProps - Props object to be passed on to

View file

@ -4,6 +4,12 @@ import DisclosureTriangle from './disclosure-triangle';
import DropZone from './drop-zone';
import RetinaImg from './retina-img';
const CounterStyles = {
Default: 'def',
Alt: 'alt',
}
class OutlineViewItem extends Component {
static displayName = 'OutlineView'
@ -13,11 +19,11 @@ class OutlineViewItem extends Component {
name: PropTypes.string.isRequired,
iconName: PropTypes.string.isRequired,
count: PropTypes.number,
useAltCountStyle: PropTypes.bool,
counterStyle: PropTypes.string,
dataTransferType: PropTypes.string,
isCollapsed: PropTypes.bool,
isDeleted: PropTypes.bool,
isSelected: PropTypes.bool,
collapsed: PropTypes.bool,
deleted: PropTypes.bool,
selected: PropTypes.bool,
shouldAcceptDrop: PropTypes.func,
onToggleCollapsed: PropTypes.func,
onDrop: PropTypes.func,
@ -28,10 +34,11 @@ class OutlineViewItem extends Component {
static defaultProps = {
children: [],
count: 0,
useAltCountStyle: false,
isCollapsed: false,
isDeleted: false,
isSelected: false,
counterStyle: CounterStyles.Default,
dataTransferType: '',
collapsed: false,
deleted: false,
selected: false,
shouldAcceptDrop: ()=> false,
onToggleCollapsed: ()=> {},
onDrop: ()=> {},
@ -59,15 +66,20 @@ class OutlineViewItem extends Component {
}
}
static CounterStyles = CounterStyles;
// Handlers
_onShowContextMenu = ()=> {
const item = this.props;
const label = item.name;
const name = item.name;
const {remote} = require('electron');
const {Menu, MenuItem} = remote.require('electron');
const menu = new Menu();
menu.append(new MenuItem({
label: `Delete ${label}`,
name: `Delete ${name}`,
click: ()=> {
item.onDelete(item.id);
},
@ -97,11 +109,14 @@ class OutlineViewItem extends Component {
this.props.onSelect(this.props.id);
}
// Renderers
_renderCount(item = this.props) {
if (!item.count) return <span></span>;
const className = classnames({
'item-count-box': true,
'alt-count': item.useAltCountStyle === true,
'alt-count': item.counterStyle === CounterStyles.Alt,
});
return <div className={className}>{item.count}</div>;
}
@ -118,9 +133,9 @@ class OutlineViewItem extends Component {
_renderItem(item = this.props, state = this.state) {
const containerClass = classnames({
'item': true,
'selected': item.isSelected,
'selected': item.selected,
'dropping': state.isDropping,
'deleted': item.isDeleted,
'deleted': item.deleted,
});
return (
@ -139,7 +154,7 @@ class OutlineViewItem extends Component {
}
_renderChildren(item = this.props) {
if (item.children.length > 0 && !item.isCollapsed) {
if (item.children.length > 0 && !item.collapsed) {
return (
<section key={`${item.id}-children`}>
{item.children.map(
@ -157,7 +172,7 @@ class OutlineViewItem extends Component {
<div>
<span className="item-container">
<DisclosureTriangle
collapsed={item.isCollapsed}
collapsed={item.collapsed}
visible={item.children.length > 0}
onToggleCollapsed={item.onToggleCollapsed} />
{this._renderItem()}

View file

@ -10,17 +10,15 @@ class OutlineView extends Component {
static displayName = 'OutlineView'
static propTypes = {
label: PropTypes.string,
title: PropTypes.string,
iconName: PropTypes.string,
items: PropTypes.array,
collapsible: PropTypes.bool,
onToggleCollapsed: PropTypes.func,
onCreateItem: PropTypes.func,
}
static defaultProps = {
title: '',
collapsible: false,
items: [],
}
@ -47,19 +45,19 @@ class OutlineView extends Component {
if (event.key === 'Escape') {
this.setState({showCreateInput: false});
}
if (['Enter', 'Return'].include(event.key)) {
if (_.includes(['Enter', 'Return'], event.key)) {
this.props.onCreateItem(event.target.value);
this.setState({showCreateInput: false});
}
}
_renderCreateButton() {
const label = this.props.label;
const title = this.props.title;
return (
<div
className="add-item-button"
onMouseDown={this._onCreateButtonMouseDown}
onMouseUp={this._onCreateButtonClicked.bind(this, label)}>
onMouseUp={this._onCreateButtonClicked.bind(this, title)}>
<RetinaImg
url="nylas://account-sidebar/assets/icon-sidebar-addcategory@2x.png"
style={{height: 14, width: 14}}
@ -68,16 +66,16 @@ class OutlineView extends Component {
);
}
_renderCreateInput(section = this.props) {
const label = _str.decapitalize(section.label.slice(0, section.label.length - 1));
const placeholder = `Create new ${label}`;
_renderCreateInput(props = this.props) {
const title = _str.decapitalize(props.title.slice(0, props.title.length - 1));
const placeholder = `Create new ${title}`;
return (
<span className="item-container">
<div className="item add-item-container">
<DisclosureTriangle collapsed={false} visible={false} />
<div className="icon">
<RetinaImg
name={section.iconName}
name={props.iconName}
fallback="folder.png"
mode={RetinaImg.Mode.ContentIsMask} />
</div>
@ -108,7 +106,7 @@ class OutlineView extends Component {
return (
<section className="nylas-outline-view">
<div className="heading">{this.props.label}</div>
<div className="heading">{this.props.title}</div>
{allowCreate ? this._renderCreateButton() : void 0}
{allowCreate && showInput ? this._renderCreateInput() : void 0}
{this._renderItems()}

View file

@ -5,8 +5,6 @@
.nylas-outline-view {
order: 1;
height: 100%;
background-color: @source-list-bg;
section {
margin-bottom: @padding-base-vertical;