Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-03-03 19:43:04 +08:00
Code Issues Projects Releases Packages Wiki Activity

message list styling

Browse source
This commit is contained in:
Evan Morikawa 2015-03-04 09:49:09 -08:00
parent e7a1f22046
commit 8f89954fd9
7 changed files with 65 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
internal_packages/message-list/lib/email-frame.cjsx
View file

@ -5,25 +5,40 @@ EmailFixingStyles = """
<style>
/* Styles for an email iframe */
@font-face {
font-family: 'Proxima Nova Regular';
src: url('fonts/Proxima-Nova/regular.woff') format('woff');
font-weight: normal;
font-family: 'FaktPro';
font-style: normal;
font-weight: 300;
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS');
}
@font-face {
font-family: 'Proxima Nova Bold';
src: url('fonts/Proxima-Nova/bold.woff') format('woff');
font-weight: normal;
font-family: 'FaktPro';
font-style: normal;
font-weight: 400;
src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS');
}
@font-face {
font-family: 'FaktPro';
font-style: normal;
font-weight: 500;
src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.ttf'), local('Comic Sans MS');
}
@font-face {
font-family: 'FaktPro';
font-style: normal;
font-weight: 600;
src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.ttf'), local('Comic Sans MS');
}
/* Clean Message Display */
html, body {
font-family: "Proxima Nova Regular", sans-serif;
font-family: "FaktPro", "Helvetica", "Lucidia Grande", sans-serif;
font-size: 16px;
line-height: 1.35;
line-height: 1.5;
color: #333;
color: #313435;
border: 0;
margin: 0;
@ -33,16 +48,8 @@ EmailFixingStyles = """
word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;
}
::selection {
color: #f1f1f1;
background: #009ec4;
}
strong, b, .bold {
font-family: "Proxima Nova Bold", sans-serif;
font-weight: normal;
font-style: normal;
letter-spacing: 0.3px;
font-weight: 600;
}
body {
@ -53,15 +60,15 @@ EmailFixingStyles = """
}
a {
color: #1486D4;
color: #11A1A2;
}
a:hover {
color: #1069a5;
color: #0f7982;
}
a:visited {
color: #1069a5;
color: #11A1A2;
}
a img {
border-bottom: 0;

5
internal_packages/message-list/lib/message-item.cjsx
View file

@ -122,6 +122,7 @@ MessageItem = React.createClass
@setState
downloads: FileDownloadStore.downloadsForFileIds(@props.message.fileIds())
## TODO: Re-implement message collapsing
_onToggleCollapsed: ->
@setState
collapsed: !@state.collapsed
# @setState
# collapsed: !@state.collapsed

4
internal_packages/message-list/lib/message-participants.cjsx
View file

@ -19,7 +19,7 @@ MessageParticipants = React.createClass
_toEveryone: ->
<span>
<span className="participant-label to-label">To:&nbsp;</span>
<span className="participant-label to-label">&nbsp;>&nbsp;</span>
<span className="participant-name to-everyone">Everyone</span>
</span>
@ -30,7 +30,7 @@ MessageParticipants = React.createClass
<span className="participant-name cc-contact">{@_joinNames(@props.cc)}</span>
</span>
<span>
<span className="participant-label to-label">To:&nbsp;</span>
<span className="participant-label to-label">&nbsp;>&nbsp;</span>
<span className="participant-name to-contact">{@_joinNames(@props.to)}</span>
{cc_spans}
</span>

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

@ -24,7 +24,8 @@
.message-list-headers {
margin: 0 auto;
padding: @spacing-double @spacing-standard;
padding: @spacing-double;
padding-bottom: @spacing-standard;
width: 100%;
max-width: 800px;
@ -63,7 +64,7 @@
width: 100%;
margin: 0 auto;
padding-top: @spacing-standard;
padding: @spacing-double 0;
&:first-child { padding-top: 0; }
border-bottom: 1px solid @border-primary-bg;
@ -74,13 +75,14 @@
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: @spacing-standard;
padding: @spacing-standard @spacing-double;
&.collapsed {
padding: 0 @spacing-standard;
padding: 0 @spacing-double;
}
.message-header {
font-size: @font-size-small;
.message-actions {
float:right;
padding-right:15px;
@ -95,8 +97,7 @@
}
.message-time, .message-indicator {
font-size: @font-size-small;
color: @text-color-subtle;
color: @text-color-very-subtle;
margin-top: 3px;
float: right;
}
@ -105,6 +106,10 @@
margin-right: 4px;
}
.to-label {
font-weight: 600;
}
.to-label, .to-everyone, .cc-label, .cc-contact, .to-label, .to-contact {
position: relative;
top: -1px;
@ -114,29 +119,25 @@
display: none;
}
.from-contact {
font-weight:@headings-font-weight;
font-weight: @headings-font-weight;
color: @text-color;
font-size: @font-size-large;
margin-right: 15px;
}
.to-label, .cc-label {
font-size: @font-size-small;
color: @text-color;
color: @text-color-very-subtle;
}
.cc-label {
margin-left: 15px;
margin-left: @spacing-standard;
}
.to-contact, .cc-contact, .to-everyone {
font-size: @font-size-small;
color: @text-color-subtle;
color: @text-color-very-subtle;
}
iframe {
width: 100%;
border: 0;
padding: 0;
margin-top: @spacing-standard;
margin-top: @spacing-sub-double;
overflow: auto;
}
}

4
src/flux/models/contact.coffee
View file

@ -22,11 +22,11 @@ class Contact extends Model
json
displayName: ->
return "Me" if @email == NamespaceStore.current().emailAddress
return "You" if @email == NamespaceStore.current().emailAddress
@_nameParts().join(' ')
displayFirstName: ->
return "Me" if @email == NamespaceStore.current().emailAddress
return "You" if @email == NamespaceStore.current().emailAddress
@firstName()
displayLastName: ->

2
static/type.less
View file

@ -10,11 +10,11 @@ h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @font-family-heading;
line-height: @line-height-heading;
color: @text-color-heading;
small,
.small {
line-height: 1;
color: @headings-small-color;
}
}

27
static/variables/ui-variables.less
View file

@ -23,6 +23,7 @@
@nilas-blue: #11A1A2;
@nilas-blue-dark: #0F7982;
@nilas-black: #313435;
@nilas-gray: #434648;
//== Generic colors
@black: @nilas-black;
@ -63,6 +64,8 @@
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
@text-color-heading: @nilas-gray;
@text-color-link: @nilas-blue;
@text-color-link-hover: @nilas-blue-dark;
@text-color-link-active: @nilas-blue-dark;
@ -81,7 +84,7 @@
font-family: 'FaktPro';
font-style: normal;
font-weight: 300;
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS');
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS');
}
@font-face {
@ -160,8 +163,15 @@
// 14px text and 1.428 line-height (~20px to start).
@spacing-standard: @font-size-base;
@spacing-double: @spacing-standard * 2;
@spacing-quarter: @spacing-standard * 0.25;
@spacing-half: @spacing-standard * 0.5;
@spacing-three-quarters: @spacing-standard * 0.75;
@spacing-sub-double: @spacing-standard * 1.75;
@spacing-double: @spacing-standard * 2;
@spacing-super-double: @spacing-standard * 2.25;
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@ -288,9 +298,6 @@
//== Source List (used in Sidebar, iTunes-style)
//
// ##
@ -331,18 +338,9 @@
//** Text color for content within disabled list items
@list-disabled-text-color: @list-disabled-color;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@ -351,6 +349,7 @@
@blockquote-border-color: @gray-lighter;
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.