mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-06 08:08:10 +08:00
42 lines
4.8 KiB
HTML
42 lines
4.8 KiB
HTML
---
|
|
layout: docs
|
|
title: Interface Concepts
|
|
edit_url: "https://github.com/nylas/N1/blob/a2c697754ad692e6a54629ffd93883dda79b0d78/docs/InterfaceConcepts.md"
|
|
---
|
|
<p>The N1 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-pane mode, a <code>Thread</code> sheet is pushed on to the workspace and appears after a brief transition.</p>
|
|
<p><img src="./images/sheets.png"></p>
|
|
<p>The <a href='workspacestore.html'>WorkspaceStore</a> 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 it's 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="./images/columns.png"></p>
|
|
<pre><code class="lang-coffee"><span class="hljs-variable">@defineSheet</span> <span class="hljs-string">'Threads'</span>, {<span class="hljs-attribute">root</span>: true},
|
|
<span class="hljs-attribute">split</span>: [<span class="hljs-string">'RootSidebar'</span>, <span class="hljs-string">'ThreadList'</span>, <span class="hljs-string">'MessageList'</span>, <span class="hljs-string">'MessageListSidebar'</span>]
|
|
<span class="hljs-attribute">list</span>: [<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<span class="hljs-class">.register</span> AccountSidebar,
|
|
location: WorkspaceStore<span class="hljs-class">.Location</span><span class="hljs-class">.RootSidebar</span>
|
|
|
|
|
|
ComponentRegistry<span class="hljs-class">.register</span> NotificationsStickyBar,
|
|
location: WorkspaceStore<span class="hljs-class">.Sheet</span><span class="hljs-class">.Threads</span><span class="hljs-class">.Header</span>
|
|
</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>
|
|
<p>###Toolbars</p>
|
|
<p>Toolbars in N1 are also powered by the <a href='componentregistry.html'>ComponentRegistry</a>. 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="./images/toolbar.png"></p>
|
|
<p>Each Toolbar column is laid out using <a href='flexbox.html'>Flexbox</a>. 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="./images/toolbar-column.png"></p>
|
|
<p>To add items to a toolbar, you inject them via the <a href='componentregistry.html'>ComponentRegistry</a>. 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>
|