Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-12-29 20:04:59 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(list): Add ThreadIcon injected region to narrow thread-list

Browse source
This commit is contained in:
Juan Tejada 2016-03-24 11:59:12 -07:00
parent cff427d710
commit 3cdd831e22
2 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
internal_packages/thread-list/lib/thread-list-columns.cjsx
View file

@ -6,6 +6,7 @@ classNames = require 'classnames'
RetinaImg,
MailLabelSet,
MailImportantIcon,
InjectedComponent,
InjectedComponentSet} = require 'nylas-component-kit'
{Thread, FocusedPerspectiveStore, Utils} = require 'nylas-exports'
@ -113,23 +114,37 @@ cNarrow = new ListTabular.Column
if hasDraft
pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
<div>
<div style={display: 'flex', alignItems: 'center'}>
<div style={display: 'flex', alignItems: 'flex-start'}>
<div className="icons-column">
<ThreadListIcon thread={thread} />
<ThreadListParticipants thread={thread} />
{pencil}
<span style={flex:1}></span>
{attachment}
{TimestampComponentForPerspective(thread)}
<InjectedComponentSet
key="injected-component-set"
inline={true}
direction="column"
containersRequired={false}
matching={role: "ThreadListIcon"}
className="thread-injected-icons"
exposedProps={thread: thread}
/>
<MailImportantIcon
thread={thread}
showIfAvailableForAnyAccount={true}
/>
</div>
<MailImportantIcon
thread={thread}
showIfAvailableForAnyAccount={true} />
<div className="subject">{subject(thread.subject)}</div>
<div className="snippet-and-labels">
<div className="snippet">{thread.snippet}&nbsp;</div>
<div style={flex: 1, flexShrink: 1}></div>
<MailLabelSet thread={thread} />
<div className="thread-info-column">
<div className="participants-wrapper">
<ThreadListParticipants thread={thread} />
{pencil}
<span style={flex:1}></span>
{attachment}
{TimestampComponentForPerspective(thread)}
</div>
<div className="subject">{subject(thread.subject)}</div>
<div className="snippet-and-labels">
<div className="snippet">{thread.snippet}&nbsp;</div>
<div style={flex: 1, flexShrink: 1}></div>
<MailLabelSet thread={thread} />
</div>
</div>
</div>

34
internal_packages/thread-list/stylesheets/thread-list.less
View file

@ -200,10 +200,10 @@
}
.timestamp {
font-size: @font-size-small;
font-size: @font-size-small;
font-weight: @font-weight-normal;
min-width:70px;
margin-right:@scrollbar-margin;
margin-right: @scrollbar-margin;
opacity: 0.62;
}
@ -394,6 +394,27 @@ body.platform-win32 {
}
.thread-list-narrow {
.icons-column {
display: flex;
flex-direction: column;
align-items: center;
width: 25px;
margin-right: 5px;
.thread-injected-icons {
align-items: center;
}
}
.thread-info-column {
flex: 1;
align-self: center;
.participants-wrapper {
display: flex;
align-items: center;
min-height: 24px;
}
}
.list-column {
display:block;
}
@ -407,9 +428,6 @@ body.platform-win32 {
.participants {
font-size: @font-size-base;
}
.thread-icon {
margin-right:5px;
}
.mail-important-icon {
margin-left:1px;
@ -423,12 +441,10 @@ body.platform-win32 {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
margin-left:30px;
margin-right:@scrollbar-margin;
margin-right: @scrollbar-margin;
}
.snippet-and-labels {
margin-left:30px;
margin-right:@scrollbar-margin;
margin-right: @scrollbar-margin;
display: flex;
align-items: baseline;
overflow: hidden;