Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-01 13:14:16 +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, RetinaImg,
MailLabelSet, MailLabelSet,
MailImportantIcon, MailImportantIcon,
InjectedComponent,
InjectedComponentSet} = require 'nylas-component-kit' InjectedComponentSet} = require 'nylas-component-kit'
{Thread, FocusedPerspectiveStore, Utils} = require 'nylas-exports' {Thread, FocusedPerspectiveStore, Utils} = require 'nylas-exports'
@ -113,23 +114,37 @@ cNarrow = new ListTabular.Column
if hasDraft if hasDraft
pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} /> pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
<div> <div style={display: 'flex', alignItems: 'flex-start'}>
<div style={display: 'flex', alignItems: 'center'}> <div className="icons-column">
<ThreadListIcon thread={thread} /> <ThreadListIcon thread={thread} />
<ThreadListParticipants thread={thread} /> <InjectedComponentSet
{pencil} key="injected-component-set"
<span style={flex:1}></span> inline={true}
{attachment} direction="column"
{TimestampComponentForPerspective(thread)} containersRequired={false}
matching={role: "ThreadListIcon"}
className="thread-injected-icons"
exposedProps={thread: thread}
/>
<MailImportantIcon
thread={thread}
showIfAvailableForAnyAccount={true}
/>
</div> </div>
<MailImportantIcon <div className="thread-info-column">
thread={thread} <div className="participants-wrapper">
showIfAvailableForAnyAccount={true} /> <ThreadListParticipants thread={thread} />
<div className="subject">{subject(thread.subject)}</div> {pencil}
<div className="snippet-and-labels"> <span style={flex:1}></span>
<div className="snippet">{thread.snippet}&nbsp;</div> {attachment}
<div style={flex: 1, flexShrink: 1}></div> {TimestampComponentForPerspective(thread)}
<MailLabelSet thread={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>
</div> </div>

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

@ -200,10 +200,10 @@
} }
.timestamp { .timestamp {
font-size: @font-size-small; font-size: @font-size-small;
font-weight: @font-weight-normal; font-weight: @font-weight-normal;
min-width:70px; min-width:70px;
margin-right:@scrollbar-margin; margin-right: @scrollbar-margin;
opacity: 0.62; opacity: 0.62;
} }
@ -394,6 +394,27 @@ body.platform-win32 {
} }
.thread-list-narrow { .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 { .list-column {
display:block; display:block;
} }
@ -407,9 +428,6 @@ body.platform-win32 {
.participants { .participants {
font-size: @font-size-base; font-size: @font-size-base;
} }
.thread-icon {
margin-right:5px;
}
.mail-important-icon { .mail-important-icon {
margin-left:1px; margin-left:1px;
@ -423,12 +441,10 @@ body.platform-win32 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left; text-align: left;
margin-left:30px; margin-right: @scrollbar-margin;
margin-right:@scrollbar-margin;
} }
.snippet-and-labels { .snippet-and-labels {
margin-left:30px; margin-right: @scrollbar-margin;
margin-right:@scrollbar-margin;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
overflow: hidden; overflow: hidden;