Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-11-01 00:46:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

🎨: Fixes, labels in narrow thread view, better label wrap

Browse source
This commit is contained in:
Ben Gotow 2016-02-11 15:24:33 -08:00
parent aaf68b25c8
commit 03a33e5270
11 changed files with 90 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
internal_packages/message-list/lib/message-list.cjsx
View file

@ -216,8 +216,10 @@ class MessageList extends React.Component
<div className="message-subject-wrap">
<MailImportantIcon thread={@state.currentThread}/>
<div style={flex: 1}>
<span className="message-subject">{subject}</span>
{@_renderLabels()}
</div>
{@_renderIcons()}
</div>

7
internal_packages/message-list/stylesheets/message-list.less
View file

@ -17,7 +17,7 @@ body.platform-win32 {
.sheet-toolbar {
.message-toolbar-arrow.down {
margin: 0 0 0 1px;
padding: 6px 5px 0 5px;
padding: 0 5px;
.windows-btn-bg;
&:hover {
background: #e5e5e5;
@ -29,7 +29,7 @@ body.platform-win32 {
}
.message-toolbar-arrow.up {
margin: 0 0 0 1px;
padding: 6px 5px 0 5px;
padding: 0 5px;
.windows-btn-bg;
&.btn-icon:hover {
color: @text-color;
@ -126,7 +126,6 @@ body.platform-win32 {
width: calc(~"100% - 12px");
max-width: @message-max-width;
margin: 11px auto 10px auto;
padding-left: 20px;
-webkit-user-select: text;
line-height: @font-size-large * 1.8;
display: flex;
@ -134,7 +133,7 @@ body.platform-win32 {
}
.mail-important-icon {
margin-right:@spacing-half;
margin-bottom:2px;
margin-bottom:1px;
flex-shrink: 0;
}
.message-subject {

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

@ -121,8 +121,19 @@ cNarrow = new ListTabular.Column
if hasDraft
pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
labels = []
if AccountStore.accountForId(thread.accountId).usesLabels()
currentCategories = FocusedPerspectiveStore.current().categories() ? []
ignored = [].concat(currentCategories, CategoryStore.hiddenCategories(thread.accountId))
ignoredIds = _.pluck(ignored, 'id')
for label in (thread.sortedCategories())
continue if label.id in ignoredIds
c3LabelComponentCache[label.id] ?= <MailLabel label={label} key={label.id} />
labels.push c3LabelComponentCache[label.id]
<div>
<div style={display: 'flex'}>
<div style={display: 'flex', alignItems: 'center'}>
<ThreadListIcon thread={thread} />
<ThreadListParticipants thread={thread} />
{pencil}
@ -134,7 +145,11 @@ cNarrow = new ListTabular.Column
thread={thread}
showIfAvailableForAnyAccount={true} />
<div className="subject">{subject(thread.subject)}</div>
<div className="snippet">{thread.snippet}</div>
<div className="snippet-and-labels">
<div className="snippet">{thread.snippet}&nbsp;</div>
<div style={flex: 1, flexShrink: 1}></div>
{labels}
</div>
</div>
module.exports =

4
internal_packages/thread-list/lib/thread-list.cjsx
View file

@ -71,10 +71,10 @@ class ThreadList extends React.Component
render: ->
if @state.style is 'wide'
columns = ThreadListColumns.Wide
itemHeight = 39
itemHeight = 36
else
columns = ThreadListColumns.Narrow
itemHeight = 90
itemHeight = 85
<FluxContainer
stores=[ThreadListStore]

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

@ -28,8 +28,8 @@
.mail-label {
// Note - these !important styles override values set by a style tag
// since the color of the label is detemined programatically.
background: none !important;
box-shadow: 0 0.5px 0 @text-color-inverse, 0 -0.5px 0 @text-color-inverse, 0.5px 0 0 @text-color-inverse, -0.5px 0 0 @text-color-inverse !important;
background: fade(@text-color-inverse, 20%) !important;
box-shadow: none !important;
-webkit-filter: brightness(600%) grayscale(100%);
}
@ -50,14 +50,11 @@
.list-item {
background-color: darken(@background-primary, 2%);
}
.list-column {
border-bottom: 1px solid fade(@list-border, 60%);
line-height: 36px;
}
.mail-important-icon {
margin-top:1px;
margin-left:6px;
padding: 12px;
vertical-align: initial;
@ -85,8 +82,6 @@
text-overflow: ellipsis;
text-align: left;
overflow: hidden;
position: relative;
top:2px;
&.no-recipients {
color: @text-color-very-subtle;
@ -95,14 +90,14 @@
.details {
display:flex;
align-items: center;
.subject {
font-size: @font-size-small;
font-weight: @font-weight-normal;
padding-right: @padding-base-horizontal;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
top:2px;
// Shrink, but only after snippet has shrunk
flex-shrink:0.1;
@ -110,11 +105,9 @@
.snippet {
font-size: @font-size-small;
font-weight: @font-weight-normal;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0.62;
top:2px;
flex: 1;
}
.thread-icon {
@ -126,8 +119,6 @@
.timestamp {
font-size: @font-size-small;
font-weight: @font-weight-normal;
position: relative;
top:2px;
text-align: right;
min-width:70px;
margin-right:@scrollbar-margin;
@ -146,10 +137,8 @@
}
.unread:not(.focused):not(.selected):not(.next-is-selected) {
.list-column {
border-bottom: 1px solid @list-border;
}
}
.unread:not(.focused) {
// Never show any unread styles when the thread is focused.
@ -171,11 +160,10 @@
.thread-injected-icons {
vertical-align: top;
line-height: 26px;
}
.thread-icon {
width:26px;
height:26px;
width:25px;
height:24px;
flex-shrink:0;
background-size: 15px;
display:inline-block;
@ -321,18 +309,24 @@ body.platform-win32 {
}
.thread-list-narrow {
.list-column {
display:block;
}
.list-tabular-item {
line-height: 21px;
}
.timestamp {
order: 100;
min-width: 0;
}
.participants {
font-size: @font-size-base;
}
.thread-icon {
margin-right:4px;
margin-right:5px;
}
.mail-important-icon {
margin-top:1px;
margin-left:1px;
float:left;
padding: 12px;
@ -344,19 +338,30 @@ body.platform-win32 {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
padding-top:2px;
padding-bottom:2px;
margin-left:30px;
margin-right:@scrollbar-margin;
}
.snippet-and-labels {
margin-left:30px;
margin-right:@scrollbar-margin;
display: flex;
align-items: baseline;
overflow: hidden;
.mail-label {
padding: 1px 8px;
font-size: 0.8em;
line-height: 17px;
}
.snippet {
font-size: @font-size-small;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.7;
text-align: left;
margin-left:30px;
margin-right:@scrollbar-margin;
min-height: 21px;
margin-right:4px;
}
}
}
@ -388,10 +393,8 @@ body.is-blurred {
.list-item {
&.selected {
background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
color: @text-color;
.list-column {
border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
}
color: @text-color;
}
}
}

2
static/components/disclosure-triangle.less
View file

@ -4,7 +4,7 @@
.disclosure-triangle {
flex-shrink: 0;
padding:7px;
padding-top:12px;
padding-top:11px;
width:20px;
visibility: hidden;

9
static/components/extra.less
View file

@ -51,6 +51,10 @@ body.platform-win32 {
cursor:default;
line-height: 22px;
-webkit-user-select: none;
&:last-child {
margin-right: 0;
}
}
.mail-label.removable {
padding-left:12px;
@ -80,9 +84,8 @@ body.platform-win32 {
.mail-important-icon {
width:16px;
height:16px;
vertical-align: middle;
width: 25px;
height: 25px;
display:inline-block;
background-repeat: no-repeat;
background-position:center;

46
static/components/list-tabular.less
View file

@ -48,7 +48,7 @@
left: -1px;
right:-1px;
top: 0;
height:49px;
height:37px;
border-left:1px solid @border-color-divider;
border-right:1px solid @border-color-divider;
background-color: @background-primary;
@ -66,7 +66,7 @@
cursor:default;
text-align: center;
color:@text-color-subtle;
padding-top: 15px;
line-height: 38px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -80,7 +80,6 @@
.list-container {
.list-item {
font-size: @font-size-base;
line-height: @line-height-computed;
color: @text-color;
background: @list-bg;
@ -91,44 +90,34 @@
&.selected {
background: @list-selected-bg;
color: @list-selected-color;
.list-column {
border-bottom: 1px solid @list-selected-border;
}
}
&.next-is-selected {
.list-column {
border-bottom: 1px solid @list-selected-border;
}
}
&.focused {
background: @list-focused-bg;
color: @list-focused-color;
.list-column {
border-bottom: 1px solid @list-focused-border;
}
}
}
}
body.is-blurred {
.list-container {
.list-item {
&.selected {
background: fadeout(desaturate(@list-selected-bg, 100%), 65%);
color: @text-color;
.list-column {
border-bottom: 1px solid fadeout(desaturate(@list-selected-border, 100%), 65%);
}
color: @text-color;
}
&.focused {
background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
color: @text-color;
.list-column {
border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
}
color: @text-color;
}
}
}
@ -143,6 +132,9 @@ body.is-blurred {
position: relative;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid @list-border;
&:hover {
cursor: default;
}
@ -178,7 +170,7 @@ body.is-blurred {
}
.checkmark {
padding: 12px;
padding: 11px;
position: absolute;
top: 0;
left: 0;
@ -197,32 +189,14 @@ body.is-blurred {
.list-column {
// The width is set by React.
display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
display: inherit;
padding: 0 @padding-base-horizontal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid @list-border;
&:last-child {
text-align: right;
}
}
.list-headers {
display: flex;
position: absolute;
width: 100%;
top: 0;
position: absolute;
background: fade(@list-bg,90%);
font-size: @font-size-base;
line-height: @font-size-base * 1.6;
height:@font-size-base * 2;
z-index: 3;
}
.list-header {
}
}

15
static/components/outline-view.less
View file

@ -71,16 +71,18 @@
color: @text-color-subtle;
flex: 1;
display: flex;
img.content-mask {
background-color: @text-color-subtle;
vertical-align: text-bottom;
}
align-items: baseline;
font-size: @font-size-small;
font-weight: 400;
padding-right: @spacing-standard;
line-height: @line-height-large * 1.1;
clear: both;
img.content-mask {
background-color: @text-color-subtle;
vertical-align: text-bottom;
}
.icon {
flex-shrink: 0;
order: 1;
@ -88,11 +90,7 @@
.name {
order: 2;
padding-left: @padding-small-horizontal * 0.85;
position:relative;
top:1px;
overflow: hidden;
padding-top: @padding-small-vertical;
padding-bottom:@padding-small-vertical;
line-height: @line-height-small;
text-overflow: ellipsis;
}
@ -103,7 +101,6 @@
color: @count-color;
margin-left: @padding-small-horizontal * 0.8;
box-shadow: 0 0.5px 0 @count-color, 0 -0.5px 0 @count-color, 0.5px 0 0 @count-color, -0.5px 0 0 @count-color;
}
.item-count-box.alt-count {
color: @source-list-active-bg;

4
static/mixins/common-ui-elements.less
View file

@ -5,15 +5,13 @@
// A box to hold counts of things (like number of items in a tag, or
// number of messages in a thread)
.item-count-box {
float: right;
min-width: 15px;
height: 15px;
text-align: center;
display: inline;
font-size: @font-size-tiny;
padding: 0 0.286em 0 0.286em;
margin-top: floor(@line-height-large*1.1 - @font-size)/2 + 1;
line-height: @font-size;
line-height: 15px;
border-radius: @border-radius-small;
}
body.platform-win32 {

2
static/workspace.less
View file

@ -160,7 +160,7 @@ body.is-blurred {
.sheet-toolbar-container {
background-image: -webkit-linear-gradient(top, lighten(@toolbar-background-color, 9%), @toolbar-background-color);
box-shadow: inset 0 1px 0 lighten(@toolbar-background-color, 15%);
box-shadow: inset 0 1px 0 lighten(@toolbar-background-color, 10%);
color:@text-color-heading;
}