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

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

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

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

@ -19,7 +19,7 @@ MessageParticipants = React.createClass
_toEveryone: -> _toEveryone: ->
<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-everyone">Everyone</span> <span className="participant-name to-everyone">Everyone</span>
</span> </span>
@ -30,7 +30,7 @@ MessageParticipants = React.createClass
<span className="participant-name cc-contact">{@_joinNames(@props.cc)}</span> <span className="participant-name cc-contact">{@_joinNames(@props.cc)}</span>
</span> </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> <span className="participant-name to-contact">{@_joinNames(@props.to)}</span>
{cc_spans} {cc_spans}
</span> </span>

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

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

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

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

2
static/type.less
View file

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

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

@ -23,6 +23,7 @@
@nilas-blue: #11A1A2; @nilas-blue: #11A1A2;
@nilas-blue-dark: #0F7982; @nilas-blue-dark: #0F7982;
@nilas-black: #313435; @nilas-black: #313435;
@nilas-gray: #434648;
//== Generic colors //== Generic colors
@black: @nilas-black; @black: @nilas-black;
@ -63,6 +64,8 @@
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%); @text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); @text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
@text-color-heading: @nilas-gray;
@text-color-link: @nilas-blue; @text-color-link: @nilas-blue;
@text-color-link-hover: @nilas-blue-dark; @text-color-link-hover: @nilas-blue-dark;
@text-color-link-active: @nilas-blue-dark; @text-color-link-active: @nilas-blue-dark;
@ -81,7 +84,7 @@
font-family: 'FaktPro'; font-family: 'FaktPro';
font-style: normal; font-style: normal;
font-weight: 300; 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 { @font-face {
@ -160,8 +163,15 @@
// 14px text and 1.428 line-height (~20px to start). // 14px text and 1.428 line-height (~20px to start).
@spacing-standard: @font-size-base; @spacing-standard: @font-size-base;
@spacing-double: @spacing-standard * 2;
@spacing-quarter: @spacing-standard * 0.25;
@spacing-half: @spacing-standard * 0.5; @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-vertical: 6px;
@padding-base-horizontal: 12px; @padding-base-horizontal: 12px;
@ -288,9 +298,6 @@
//== Source List (used in Sidebar, iTunes-style) //== Source List (used in Sidebar, iTunes-style)
// //
// ## // ##
@ -331,18 +338,9 @@
//** Text color for content within disabled list items //** Text color for content within disabled list items
@list-disabled-text-color: @list-disabled-color; @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 //** Abbreviations and acronyms border color
@abbr-border-color: @gray-light; @abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color //** Blockquote small color
@blockquote-small-color: @gray-light; @blockquote-small-color: @gray-light;
//** Blockquote font size //** Blockquote font size
@ -351,6 +349,7 @@
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
//== Form states and alerts //== Form states and alerts
// //
//## Define colors for form feedback states and, by default, alerts. //## Define colors for form feedback states and, by default, alerts.