From fa6a2fa5c675372c6f758ac1cff5407a3b27bdc9 Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Mon, 18 Jan 2016 11:39:53 -0800 Subject: [PATCH] Minor fixes and style updates --- .../lib/account-sidebar-actions.coffee | 12 ----- .../lib/account-sidebar-items.coffee | 19 ++++---- .../lib/account-sidebar-sections.coffee | 2 +- .../lib/components/account-sidebar.cjsx | 5 ++- .../stylesheets/account-sidebar.less | 6 +++ src/components/editable-list.jsx | 6 ++- src/components/outline-view-item.jsx | 45 ++++++++++++------- src/components/outline-view.jsx | 20 ++++----- static/components/outline-view.less | 2 - 9 files changed, 61 insertions(+), 56 deletions(-) delete mode 100644 internal_packages/account-sidebar/lib/account-sidebar-actions.coffee diff --git a/internal_packages/account-sidebar/lib/account-sidebar-actions.coffee b/internal_packages/account-sidebar/lib/account-sidebar-actions.coffee deleted file mode 100644 index e86583b76..000000000 --- a/internal_packages/account-sidebar/lib/account-sidebar-actions.coffee +++ /dev/null @@ -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 diff --git a/internal_packages/account-sidebar/lib/account-sidebar-items.coffee b/internal_packages/account-sidebar/lib/account-sidebar-items.coffee index 4d0ec4eb8..88dbf8cd2 100644 --- a/internal_packages/account-sidebar/lib/account-sidebar-items.coffee +++ b/internal_packages/account-sidebar/lib/account-sidebar-items.coffee @@ -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 diff --git a/internal_packages/account-sidebar/lib/account-sidebar-sections.coffee b/internal_packages/account-sidebar/lib/account-sidebar-sections.coffee index cc368e4cf..fe1701ccb 100644 --- a/internal_packages/account-sidebar/lib/account-sidebar-sections.coffee +++ b/internal_packages/account-sidebar/lib/account-sidebar-sections.coffee @@ -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 diff --git a/internal_packages/account-sidebar/lib/components/account-sidebar.cjsx b/internal_packages/account-sidebar/lib/components/account-sidebar.cjsx index 5049593f8..fe04cc765 100644 --- a/internal_packages/account-sidebar/lib/components/account-sidebar.cjsx +++ b/internal_packages/account-sidebar/lib/components/account-sidebar.cjsx @@ -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 render: => - +
{@_renderSections()}
diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less index 71852309a..98acdb2a4 100644 --- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less +++ b/internal_packages/account-sidebar/stylesheets/account-sidebar.less @@ -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%; diff --git a/src/components/editable-list.jsx b/src/components/editable-list.jsx index 80b4d2d4d..ce94511dc 100644 --- a/src/components/editable-list.jsx +++ b/src/components/editable-list.jsx @@ -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 diff --git a/src/components/outline-view-item.jsx b/src/components/outline-view-item.jsx index e35a8477e..353a8ac97 100644 --- a/src/components/outline-view-item.jsx +++ b/src/components/outline-view-item.jsx @@ -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 ; const className = classnames({ 'item-count-box': true, - 'alt-count': item.useAltCountStyle === true, + 'alt-count': item.counterStyle === CounterStyles.Alt, }); return
{item.count}
; } @@ -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 (
{item.children.map( @@ -157,7 +172,7 @@ class OutlineViewItem extends Component {
0} onToggleCollapsed={item.onToggleCollapsed} /> {this._renderItem()} diff --git a/src/components/outline-view.jsx b/src/components/outline-view.jsx index 966e2f9d1..814bebd17 100644 --- a/src/components/outline-view.jsx +++ b/src/components/outline-view.jsx @@ -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 (
+ onMouseUp={this._onCreateButtonClicked.bind(this, title)}>
@@ -108,7 +106,7 @@ class OutlineView extends Component { return (
-
{this.props.label}
+
{this.props.title}
{allowCreate ? this._renderCreateButton() : void 0} {allowCreate && showInput ? this._renderCreateInput() : void 0} {this._renderItems()} diff --git a/static/components/outline-view.less b/static/components/outline-view.less index 27ea9ed33..ad8998dc9 100644 --- a/static/components/outline-view.less +++ b/static/components/outline-view.less @@ -5,8 +5,6 @@ .nylas-outline-view { order: 1; - height: 100%; - background-color: @source-list-bg; section { margin-bottom: @padding-base-vertical;