mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
Minor fixes and style updates
This commit is contained in:
parent
02703998da
commit
fa6a2fa5c6
9 changed files with 61 additions and 56 deletions
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -5,8 +5,6 @@
|
|||
|
||||
.nylas-outline-view {
|
||||
order: 1;
|
||||
height: 100%;
|
||||
background-color: @source-list-bg;
|
||||
|
||||
section {
|
||||
margin-bottom: @padding-base-vertical;
|
||||
|
|
Loading…
Reference in a new issue