mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
1425 lines
37 KiB
HTML
1425 lines
37 KiB
HTML
|
|
<!DOCTYPE HTML>
|
|
<html lang="" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
<title>Interface Concepts · Nylas Mail Plugin SDK</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="GitBook 3.2.2">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/style.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../styles/website.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="HandheldFriendly" content="true"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
|
|
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
<link rel="next" href="React.html" />
|
|
|
|
|
|
<link rel="prev" href="PackageOverview.html" />
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href='../img/favicon.png' type="image/x-icon">
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="book">
|
|
<div class="book-summary">
|
|
|
|
|
|
<div id="book-search-input" role="search">
|
|
<input type="text" placeholder="Type to search" />
|
|
</div>
|
|
|
|
|
|
<nav role="navigation">
|
|
|
|
|
|
|
|
<ul class="summary">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="chapter " data-level="1.1" >
|
|
|
|
<span>
|
|
|
|
|
|
Nylas Mail SDK Guides
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.2" data-path="../">
|
|
|
|
<a href="../">
|
|
|
|
|
|
Introduction
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.3" data-path="GettingStarted.html">
|
|
|
|
<a href="GettingStarted.html">
|
|
|
|
|
|
Getting Started
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.4" data-path="GettingStarted-2.html">
|
|
|
|
<a href="GettingStarted-2.html">
|
|
|
|
|
|
Getting Started Part 2
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.5" data-path="PackageOverview.html">
|
|
|
|
<a href="PackageOverview.html">
|
|
|
|
|
|
Building a Package
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter active" data-level="1.6" data-path="InterfaceConcepts.html">
|
|
|
|
<a href="InterfaceConcepts.html">
|
|
|
|
|
|
Interface Concepts
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7" data-path="React.html">
|
|
|
|
<a href="React.html">
|
|
|
|
|
|
UI Components
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.8" data-path="Architecture.html">
|
|
|
|
<a href="Architecture.html">
|
|
|
|
|
|
Application Architecture
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.9" data-path="Debugging.html">
|
|
|
|
<a href="Debugging.html">
|
|
|
|
|
|
Debugging Nylas Mail
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.10" data-path="Database.html">
|
|
|
|
<a href="Database.html">
|
|
|
|
|
|
Accessing the Database
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.11" data-path="ComposerExtensions.html">
|
|
|
|
<a href="ComposerExtensions.html">
|
|
|
|
|
|
Extending the Composer
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.12" data-path="WritingSpecs.html">
|
|
|
|
<a href="WritingSpecs.html">
|
|
|
|
|
|
Writing Tests
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.13" data-path="IntegrationTesting.html">
|
|
|
|
<a href="IntegrationTesting.html">
|
|
|
|
|
|
Integration Testing
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.14" data-path="Windows.html">
|
|
|
|
<a href="Windows.html">
|
|
|
|
|
|
Developing on Windows
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.15" data-path="FAQ.html">
|
|
|
|
<a href="FAQ.html">
|
|
|
|
|
|
FAQ
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="header">Full Class Reference</li>
|
|
|
|
|
|
|
|
<li class="chapter " data-level="2.1" >
|
|
|
|
<span>
|
|
|
|
|
|
General
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.1.1" data-path="../classes/Actions.html">
|
|
|
|
<a href="../classes/Actions.html">
|
|
|
|
|
|
Actions
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.2" data-path="../classes/BufferedProcess.html">
|
|
|
|
<a href="../classes/BufferedProcess.html">
|
|
|
|
|
|
BufferedProcess
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.3" data-path="../classes/ChangeFolderTask.html">
|
|
|
|
<a href="../classes/ChangeFolderTask.html">
|
|
|
|
|
|
ChangeFolderTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.4" data-path="../classes/ChangeLabelsTask.html">
|
|
|
|
<a href="../classes/ChangeLabelsTask.html">
|
|
|
|
|
|
ChangeLabelsTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.5" data-path="../classes/ChangeMailTask.html">
|
|
|
|
<a href="../classes/ChangeMailTask.html">
|
|
|
|
|
|
ChangeMailTask
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.6" data-path="../classes/Color.html">
|
|
|
|
<a href="../classes/Color.html">
|
|
|
|
|
|
Color
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.7" data-path="../classes/Config.html">
|
|
|
|
<a href="../classes/Config.html">
|
|
|
|
|
|
Config
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.8" data-path="../classes/Contenteditable.html">
|
|
|
|
<a href="../classes/Contenteditable.html">
|
|
|
|
|
|
Contenteditable
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.9" data-path="../classes/KeyCommandsRegion.html">
|
|
|
|
<a href="../classes/KeyCommandsRegion.html">
|
|
|
|
|
|
KeyCommandsRegion
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.10" data-path="../classes/NylasEnvConstructor.html">
|
|
|
|
<a href="../classes/NylasEnvConstructor.html">
|
|
|
|
|
|
NylasEnvConstructor
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.11" data-path="../classes/QueryResultSet.html">
|
|
|
|
<a href="../classes/QueryResultSet.html">
|
|
|
|
|
|
QueryResultSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.12" data-path="../classes/QuerySubscriptionPool.html">
|
|
|
|
<a href="../classes/QuerySubscriptionPool.html">
|
|
|
|
|
|
QuerySubscriptionPool
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.13" data-path="../classes/StyleManager.html">
|
|
|
|
<a href="../classes/StyleManager.html">
|
|
|
|
|
|
StyleManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.14" data-path="../classes/Task.html">
|
|
|
|
<a href="../classes/Task.html">
|
|
|
|
|
|
Task
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.15" data-path="../classes/TaskQueueStatusStore.html">
|
|
|
|
<a href="../classes/TaskQueueStatusStore.html">
|
|
|
|
|
|
TaskQueueStatusStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.1.16" data-path="../classes/ThemeManager.html">
|
|
|
|
<a href="../classes/ThemeManager.html">
|
|
|
|
|
|
ThemeManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2" >
|
|
|
|
<span>
|
|
|
|
|
|
Component Kit
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.2.1" data-path="../classes/EventedIFrame.html">
|
|
|
|
<a href="../classes/EventedIFrame.html">
|
|
|
|
|
|
EventedIFrame
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.2" data-path="../classes/Flexbox.html">
|
|
|
|
<a href="../classes/Flexbox.html">
|
|
|
|
|
|
Flexbox
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.3" data-path="../classes/InjectedComponent.html">
|
|
|
|
<a href="../classes/InjectedComponent.html">
|
|
|
|
|
|
InjectedComponent
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.4" data-path="../classes/InjectedComponentSet.html">
|
|
|
|
<a href="../classes/InjectedComponentSet.html">
|
|
|
|
|
|
InjectedComponentSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.5" data-path="../classes/Menu.html">
|
|
|
|
<a href="../classes/Menu.html">
|
|
|
|
|
|
Menu
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.6" data-path="../classes/MenuItem.html">
|
|
|
|
<a href="../classes/MenuItem.html">
|
|
|
|
|
|
MenuItem
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.7" data-path="../classes/MenuNameEmailItem.html">
|
|
|
|
<a href="../classes/MenuNameEmailItem.html">
|
|
|
|
|
|
MenuNameEmailItem
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.8" data-path="../classes/MultiselectActionBar.html">
|
|
|
|
<a href="../classes/MultiselectActionBar.html">
|
|
|
|
|
|
MultiselectActionBar
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.9" data-path="../classes/MultiselectList.html">
|
|
|
|
<a href="../classes/MultiselectList.html">
|
|
|
|
|
|
MultiselectList
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.10" data-path="../classes/ResizableRegion.html">
|
|
|
|
<a href="../classes/ResizableRegion.html">
|
|
|
|
|
|
ResizableRegion
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.11" data-path="../classes/RetinaImg.html">
|
|
|
|
<a href="../classes/RetinaImg.html">
|
|
|
|
|
|
RetinaImg
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.12" data-path="../classes/Spinner.html">
|
|
|
|
<a href="../classes/Spinner.html">
|
|
|
|
|
|
Spinner
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.2.13" data-path="../classes/UnsafeComponent.html">
|
|
|
|
<a href="../classes/UnsafeComponent.html">
|
|
|
|
|
|
UnsafeComponent
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3" >
|
|
|
|
<span>
|
|
|
|
|
|
Extensions
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.3.1" data-path="../classes/ComposerExtension.html">
|
|
|
|
<a href="../classes/ComposerExtension.html">
|
|
|
|
|
|
ComposerExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.2" data-path="../classes/ContenteditableExtension.html">
|
|
|
|
<a href="../classes/ContenteditableExtension.html">
|
|
|
|
|
|
ContenteditableExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.3" data-path="../classes/DraftStoreExtension.html">
|
|
|
|
<a href="../classes/DraftStoreExtension.html">
|
|
|
|
|
|
DraftStoreExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.4" data-path="../classes/MessageStoreExtension.html">
|
|
|
|
<a href="../classes/MessageStoreExtension.html">
|
|
|
|
|
|
MessageStoreExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.3.5" data-path="../classes/MessageViewExtension.html">
|
|
|
|
<a href="../classes/MessageViewExtension.html">
|
|
|
|
|
|
MessageViewExtension
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4" >
|
|
|
|
<span>
|
|
|
|
|
|
Models
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.4.1" data-path="../classes/Contact.html">
|
|
|
|
<a href="../classes/Contact.html">
|
|
|
|
|
|
Contact
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.2" data-path="../classes/Message.html">
|
|
|
|
<a href="../classes/Message.html">
|
|
|
|
|
|
Message
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.3" data-path="../classes/Model.html">
|
|
|
|
<a href="../classes/Model.html">
|
|
|
|
|
|
Model
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.4.4" data-path="../classes/Thread.html">
|
|
|
|
<a href="../classes/Thread.html">
|
|
|
|
|
|
Thread
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5" >
|
|
|
|
<span>
|
|
|
|
|
|
Stores
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.5.1" data-path="../classes/AccountStore.html">
|
|
|
|
<a href="../classes/AccountStore.html">
|
|
|
|
|
|
AccountStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.2" data-path="../classes/ComponentRegistry.html">
|
|
|
|
<a href="../classes/ComponentRegistry.html">
|
|
|
|
|
|
ComponentRegistry
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.3" data-path="../classes/ContactStore.html">
|
|
|
|
<a href="../classes/ContactStore.html">
|
|
|
|
|
|
ContactStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.4" data-path="../classes/FocusedContentStore.html">
|
|
|
|
<a href="../classes/FocusedContentStore.html">
|
|
|
|
|
|
FocusedContentStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.5" data-path="../classes/TaskQueue.html">
|
|
|
|
<a href="../classes/TaskQueue.html">
|
|
|
|
|
|
TaskQueue
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.5.6" data-path="../classes/WorkspaceStore.html">
|
|
|
|
<a href="../classes/WorkspaceStore.html">
|
|
|
|
|
|
WorkspaceStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6" >
|
|
|
|
<span>
|
|
|
|
|
|
Database
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.6.1" data-path="../classes/Attribute.html">
|
|
|
|
<a href="../classes/Attribute.html">
|
|
|
|
|
|
Attribute
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.2" data-path="../classes/AttributeBoolean.html">
|
|
|
|
<a href="../classes/AttributeBoolean.html">
|
|
|
|
|
|
AttributeBoolean
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.3" data-path="../classes/AttributeCollection.html">
|
|
|
|
<a href="../classes/AttributeCollection.html">
|
|
|
|
|
|
AttributeCollection
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.4" data-path="../classes/AttributeDateTime.html">
|
|
|
|
<a href="../classes/AttributeDateTime.html">
|
|
|
|
|
|
AttributeDateTime
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.5" data-path="../classes/AttributeJoinedData.html">
|
|
|
|
<a href="../classes/AttributeJoinedData.html">
|
|
|
|
|
|
AttributeJoinedData
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.6" data-path="../classes/AttributeNumber.html">
|
|
|
|
<a href="../classes/AttributeNumber.html">
|
|
|
|
|
|
AttributeNumber
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.7" data-path="../classes/AttributeObject.html">
|
|
|
|
<a href="../classes/AttributeObject.html">
|
|
|
|
|
|
AttributeObject
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.8" data-path="../classes/AttributeServerId.html">
|
|
|
|
<a href="../classes/AttributeServerId.html">
|
|
|
|
|
|
AttributeServerId
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.9" data-path="../classes/AttributeString.html">
|
|
|
|
<a href="../classes/AttributeString.html">
|
|
|
|
|
|
AttributeString
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.10" data-path="../classes/DatabaseStore.html">
|
|
|
|
<a href="../classes/DatabaseStore.html">
|
|
|
|
|
|
DatabaseStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.11" data-path="../classes/Matcher.html">
|
|
|
|
<a href="../classes/Matcher.html">
|
|
|
|
|
|
Matcher
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.12" data-path="../classes/ModelQuery.html">
|
|
|
|
<a href="../classes/ModelQuery.html">
|
|
|
|
|
|
ModelQuery
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.6.13" data-path="../classes/SortOrder.html">
|
|
|
|
<a href="../classes/SortOrder.html">
|
|
|
|
|
|
SortOrder
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7" >
|
|
|
|
<span>
|
|
|
|
|
|
Drafts
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.7.1" data-path="../classes/DraftChangeSet.html">
|
|
|
|
<a href="../classes/DraftChangeSet.html">
|
|
|
|
|
|
DraftChangeSet
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7.2" data-path="../classes/DraftEditingSession.html">
|
|
|
|
<a href="../classes/DraftEditingSession.html">
|
|
|
|
|
|
DraftEditingSession
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.7.3" data-path="../classes/DraftStore.html">
|
|
|
|
<a href="../classes/DraftStore.html">
|
|
|
|
|
|
DraftStore
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.8" >
|
|
|
|
<span>
|
|
|
|
|
|
NylasEnv
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<ul class="articles">
|
|
|
|
|
|
<li class="chapter " data-level="2.8.1" data-path="../classes/PackageManager.html">
|
|
|
|
<a href="../classes/PackageManager.html">
|
|
|
|
|
|
PackageManager
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="2.9" >
|
|
|
|
<span>
|
|
|
|
|
|
Atom
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="divider"></li>
|
|
|
|
<li>
|
|
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
Published with GitBook
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="book-body">
|
|
|
|
<div class="body-inner">
|
|
|
|
|
|
|
|
<div class="book-header" role="navigation">
|
|
|
|
|
|
<!-- Title -->
|
|
<h1>
|
|
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
<a href=".." >Interface Concepts</a>
|
|
</h1>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="page-wrapper" tabindex="-1" role="main">
|
|
<div class="page-inner">
|
|
|
|
<div id="book-search-results">
|
|
<div class="search-noresults">
|
|
|
|
<section class="normal markdown-section">
|
|
|
|
<h1 id="interface-concepts"><a name="interface-concepts" class="plugin-anchor" href="#interface-concepts"><i class="fa fa-link" aria-hidden="true"></i></a>Interface Concepts</h1>
|
|
<p>The Nylas Mail user interface is conceptually organized into Sheets. Each Sheet represents a window of content. For example, the <code>Threads</code> sheet lies at the heart of the application. When the user chooses the "Files" tab, a separate <code>Files</code> sheet is displayed in place of <code>Threads</code>. When the user clicks a thread in single panel mode, a <code>Thread</code> sheet is pushed on to the workspace and appears after a brief transition.</p>
|
|
<p><img src="../img/sheets.png"></p>
|
|
<p>The {WorkspaceStore} maintains the state of the application's workspace and the stack of sheets currently being displayed. Your packages can declare "root" sheets which are listed in the app's main sidebar, or push custom sheets on top of sheets to display data.</p>
|
|
<p>The Nylas Workspace supports two display modes: <code>split</code> and <code>list</code>. Each Sheet describes its appearance in each of the view modes it supports. For example, the <code>Threads</code> sheet describes a three column <code>split</code> view and a single column <code>list</code> view. Other sheets, like <code>Files</code> register for only one mode, and the user's mode preference is ignored.</p>
|
|
<p>For each mode, Sheets register a set of column names.</p>
|
|
<p><img src="../img/columns.png"></p>
|
|
<pre><code class="lang-coffee">@defineSheet <span class="hljs-string">'Threads'</span>, {root: <span class="hljs-literal">true</span>},
|
|
split: [<span class="hljs-string">'RootSidebar'</span>, <span class="hljs-string">'ThreadList'</span>, <span class="hljs-string">'MessageList'</span>, <span class="hljs-string">'MessageListSidebar'</span>]
|
|
list: [<span class="hljs-string">'RootSidebar'</span>, <span class="hljs-string">'ThreadList'</span>]
|
|
</code></pre>
|
|
<p>Column names are important. Once you've registered a sheet, your package (and other packages) register React components that appear in each column.</p>
|
|
<p>Sheets also have a <code>Header</code> and <code>Footer</code> region that spans all of their content columns. You can register components to appear in these regions to display notifications, add bars beneath the toolbar, etc.</p>
|
|
<pre><code class="lang-coffee">ComponentRegistry.register AccountSidebar,
|
|
location: WorkspaceStore.Location.RootSidebar
|
|
|
|
|
|
ComponentRegistry.register NotificationsStickyBar,
|
|
location: WorkspaceStore.Sheet.Threads.Header
|
|
</code></pre>
|
|
<p>Each column is laid out as a CSS Flexbox, making them extremely flexible. For more about layout using Flexbox, see Working with Flexbox.</p>
|
|
<h3 id="toolbars"><a name="toolbars" class="plugin-anchor" href="#toolbars"><i class="fa fa-link" aria-hidden="true"></i></a>Toolbars</h3>
|
|
<p>Toolbars in Nylas Mail are also powered by the {ComponentRegistry}. Though toolbars appear to be a single unit at the top of a sheet, they are divided into columns with the same widths as the columns in the sheet beneath them.</p>
|
|
<p><img src="../img/toolbar.png"></p>
|
|
<p>Each Toolbar column is laid out using {Flexbox}. You can control where toolbar elements appear within the column using the CSS <code>order</code> attribute. To make it easy to position toolbar items on the left, right, or center of a column, we've added two "spacer" elements with <code>order:50</code> and <code>order:-50</code> that evenly use up available space. Other CSS attributes allow you to control whether your items shrink or expand as the column's size changes.</p>
|
|
<p><img src="../img/toolbar-column.png"></p>
|
|
<p>To add items to a toolbar, you inject them via the {ComponentRegistry}. There are several ways of describing the location of a toolbar component which are useful in different scenarios:</p>
|
|
<ul>
|
|
<li><p><code><Location>.Toolbar</code>: This component will always appear in the toolbar above the column named <code><Location></code>.</p>
|
|
<p> (Example: Compose button which appears above the Left Sidebar column, regardless of what else is there.)</p>
|
|
</li>
|
|
<li><p><code><ComponentName>.Toolbar</code>: This component will appear in the toolbar above <code><ComponentName></code>.</p>
|
|
<p> (Example: Archive button that should always be coupled with the MessageList component, placed anywhere a MessageList component is placed.)</p>
|
|
</li>
|
|
<li><p><code>Global.Toolbar.Left</code>: This component will always be added to the leftmost column of the toolbar.</p>
|
|
<p> (Example: Window Controls)</p>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<div class="search-results">
|
|
<div class="has-results">
|
|
|
|
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
<ul class="search-results-list"></ul>
|
|
|
|
</div>
|
|
<div class="no-results">
|
|
|
|
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<a href="PackageOverview.html" class="navigation navigation-prev " aria-label="Previous page: Building a Package">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
|
|
<a href="React.html" class="navigation navigation-next " aria-label="Next page: UI Components">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var gitbook = gitbook || [];
|
|
gitbook.push(function() {
|
|
gitbook.page.hasChanged({"page":{"title":"Interface Concepts","level":"1.6","depth":1,"next":{"title":"UI Components","level":"1.7","depth":1,"path":"guides/React.md","ref":"guides/React.md","articles":[]},"previous":{"title":"Building a Package","level":"1.5","depth":1,"path":"guides/PackageOverview.md","ref":"guides/PackageOverview.md","articles":[]},"dir":"ltr"},"config":{"plugins":["search","lunr","-fontsettings","-sharing","anchors","github","editlink","favicon"],"root":"./docs_src","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/nylas/nylas-mail-docs/tree/master"},"github":{"url":"https://github.com/nylas/nylas-mail-docs"},"favicon":{"shortcut":"/img/favicon.png"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"anchors":{},"highlight":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Nylas Mail Plugin SDK","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"3.2.2"},"file":{"path":"guides/InterfaceConcepts.md","mtime":"2017-01-30T09:55:21.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-30T10:28:53.038Z"},"basePath":"..","book":{"language":""}});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<script src="../gitbook/gitbook.js"></script>
|
|
<script src="../gitbook/theme.js"></script>
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
|
|
|
|
|
|
|
|
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|