mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-27 10:28:31 +08:00
message list styles
This commit is contained in:
Evan Morikawa
parent
b61e62c6a3
commit
e7a1f22046
5 changed files with 130 additions and 116 deletions
|
|
@ -53,16 +53,20 @@ MessageItem = React.createClass
|
|||
|
||||
if @state.collapsed
|
||||
<div className="message-item-wrap collapsed">
|
||||
{header}
|
||||
<div className="messsage-item-area">
|
||||
{header}
|
||||
</div>
|
||||
</div>
|
||||
else
|
||||
<div className="message-item-wrap">
|
||||
{header}
|
||||
{attachments}
|
||||
<EmailFrame showQuotedText={@state.showQuotedText}>
|
||||
{@_formatBody()}
|
||||
</EmailFrame>
|
||||
<a className={@_quotedTextClasses()} onClick={@_toggleQuotedText}></a>
|
||||
<div className="message-item-area">
|
||||
{header}
|
||||
{attachments}
|
||||
<EmailFrame showQuotedText={@state.showQuotedText}>
|
||||
{@_formatBody()}
|
||||
</EmailFrame>
|
||||
<a className={@_quotedTextClasses()} onClick={@_toggleQuotedText}></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
_quotedTextClasses: -> React.addons.classSet
|
||||
|
|
|
|||
|
|
@ -54,17 +54,6 @@ MessageList = React.createClass
|
|||
</div>
|
||||
</div>
|
||||
|
||||
# TODO Add actions and notifications back in.
|
||||
_oldMessageListHeaders: ->
|
||||
return <div></div>
|
||||
<div className="message-list-primary-actions">
|
||||
{@_messageListPrimaryActions()}
|
||||
</div>
|
||||
|
||||
<div className="message-list-notification-bars">
|
||||
{@_messageListNotificationBars()}
|
||||
</div>
|
||||
|
||||
_messageListPrimaryActions: ->
|
||||
MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
|
||||
<div className="primary-actions-bar">
|
||||
|
|
@ -82,11 +71,9 @@ MessageList = React.createClass
|
|||
MessageListHeaders = ComponentRegistry.findAllViewsByRole('MessageListHeader')
|
||||
|
||||
<div className="message-list-headers">
|
||||
<h2>{@state.current_thread.subject}</h2>
|
||||
<h2 className="message-subject">{@state.current_thread.subject}</h2>
|
||||
|
||||
<Participants clickable={true}
|
||||
context={'primary'}
|
||||
participants={@_threadParticipants()}/>
|
||||
{@_oldParticipants()}
|
||||
|
||||
{for MessageListHeader in MessageListHeaders
|
||||
<MessageListHeader thread={@state.current_thread} />
|
||||
|
|
@ -156,5 +143,30 @@ MessageList = React.createClass
|
|||
return _.values(participants)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# TODO Add actions and notifications back in.
|
||||
_oldMessageListHeaders: ->
|
||||
return <div></div>
|
||||
<div className="message-list-primary-actions">
|
||||
{@_messageListPrimaryActions()}
|
||||
</div>
|
||||
|
||||
<div className="message-list-notification-bars">
|
||||
{@_messageListNotificationBars()}
|
||||
</div>
|
||||
|
||||
# TODO Add participants back in
|
||||
_oldParticipants: ->
|
||||
return <div></div>
|
||||
<Participants clickable={true}
|
||||
context={'primary'}
|
||||
participants={@_threadParticipants()}/>
|
||||
|
||||
|
||||
|
||||
MessageList.minWidth = 600
|
||||
MessageList.maxWidth = 900
|
||||
|
|
|
|||
|
|
@ -2,26 +2,31 @@
|
|||
@import "ui-mixins";
|
||||
|
||||
#message-list {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
order: 2;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.title-and-messages {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.messages-wrap {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-list-headers {
|
||||
text-align: left;
|
||||
margin: 15px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding-bottom: 5px;
|
||||
font-size: 26px;
|
||||
line-height: 1.2;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
margin: 0 auto;
|
||||
padding: @spacing-double @spacing-standard;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
|
||||
.participants {
|
||||
.contact-chip {
|
||||
|
|
@ -30,74 +35,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
.message-list-primary-actions {
|
||||
z-index: 2;
|
||||
-webkit-user-select: none;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
padding-left:13px;
|
||||
background-color: @background-color;
|
||||
border-bottom:1px solid @border-color;
|
||||
|
||||
.primary-actions-bar {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
line-height: 2;
|
||||
.btn-icon {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-wrap {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-and-messages {
|
||||
height: calc(~"100% - 56px");
|
||||
min-width: 600px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
// .message-list-primary-actions {
|
||||
// z-index: 2;
|
||||
// -webkit-user-select: none;
|
||||
// padding-top: 6px;
|
||||
// padding-bottom: 5px;
|
||||
// padding-left:13px;
|
||||
// background-color: @background-color;
|
||||
// border-bottom:1px solid @border-color;
|
||||
//
|
||||
// .primary-actions-bar {
|
||||
// width: 100%;
|
||||
// font-size: 21px;
|
||||
// line-height: 2;
|
||||
// .btn-icon {
|
||||
// padding-top: 0;
|
||||
// padding-bottom: 0;
|
||||
// }
|
||||
// .btn {
|
||||
// margin-left: 4px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.message-item-wrap {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
padding-top: @spacing-standard;
|
||||
&:first-child { padding-top: 0; }
|
||||
|
||||
border-bottom: 1px solid @border-primary-bg;
|
||||
&:last-child { border-bottom: 0; }
|
||||
}
|
||||
|
||||
.message-item-area {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-standard;
|
||||
|
||||
&.collapsed {
|
||||
margin-top:0;
|
||||
margin-bottom:0;
|
||||
border-bottom:0;
|
||||
&:last-child {
|
||||
margin-bottom:15px;
|
||||
border-bottom: 1px solid darken(@border-color, 5%);
|
||||
}
|
||||
.message-header {
|
||||
border-bottom:0;
|
||||
}
|
||||
padding: 0 @spacing-standard;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
background: @background-color;
|
||||
margin: 15px;
|
||||
border-top: 1px solid darken(@border-color, 2%);
|
||||
border-left: 1px solid darken(@border-color, 2%);
|
||||
border-right: 1px solid darken(@border-color, 5%);
|
||||
border-bottom: 1px solid darken(@border-color, 5%);
|
||||
border-radius: 2px;
|
||||
|
||||
.message-header {
|
||||
padding: 5px 15px;
|
||||
border-bottom: 1px solid @border-color;
|
||||
-webkit-user-select: text;
|
||||
|
||||
.message-actions {
|
||||
float:right;
|
||||
padding-right:15px;
|
||||
|
|
@ -152,8 +135,8 @@
|
|||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0 15px;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
margin-top: @spacing-standard;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,17 +9,28 @@
|
|||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: @font-family-heading;
|
||||
font-weight: @headings-font-weight;
|
||||
line-height: @line-height-heading;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: @font-size-h1;
|
||||
font-weight: @font-weight-semi-bold;
|
||||
}
|
||||
h2, .h2 {
|
||||
font-size: @font-size-h2;
|
||||
font-weight: @font-weight-blond;
|
||||
}
|
||||
h3, .h3 { font-size: @font-size-h3; }
|
||||
h4, .h4 { font-size: @font-size-h4; }
|
||||
h5, .h5 { font-size: @font-size-h5; }
|
||||
h6, .h6 { font-size: @font-size-h6; }
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
|
|
@ -43,13 +54,6 @@ h6, .h6 {
|
|||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: @font-size-h1; }
|
||||
h2, .h2 { font-size: @font-size-h2; }
|
||||
h3, .h3 { font-size: @font-size-h3; }
|
||||
h4, .h4 { font-size: @font-size-h4; }
|
||||
h5, .h5 { font-size: @font-size-h5; }
|
||||
h6, .h6 { font-size: @font-size-h6; }
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
|
|
|||
|
|
@ -42,6 +42,10 @@
|
|||
@background-secondary: #f6f6f6;
|
||||
@background-tertiary: #6d7987;
|
||||
|
||||
@border-primary-bg: darken(@background-primary, 10%);
|
||||
@border-secondary-bg: darken(@background-secondary, 10%);
|
||||
@border-tertiary-bg: darken(@background-tertiary, 10%);
|
||||
|
||||
@info-color: @nilas-blue-dark;
|
||||
@success-color: @nilas-green;
|
||||
@warning-color: #f0ad4e;
|
||||
|
|
@ -73,6 +77,13 @@
|
|||
@text-color-destructive: @danger-color;
|
||||
|
||||
// ----- Font Families -----
|
||||
@font-face {
|
||||
font-family: 'FaktPro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'FaktPro';
|
||||
font-style: normal;
|
||||
|
|
@ -104,9 +115,11 @@
|
|||
@font-family-heading: @font-family-sans-serif;
|
||||
|
||||
// ----- Font Weights -----
|
||||
@font-weight-blond: 300;
|
||||
@font-weight-normal: 400;
|
||||
@font-weight-medium: 500;
|
||||
@font-weight-semi-bold: 600;
|
||||
@headings-font-weight: 600;
|
||||
|
||||
// ----- Font Sizes -----
|
||||
@font-size-base: 15px;
|
||||
|
|
@ -117,20 +130,18 @@
|
|||
@font-size-large: @font-size-base * 1.06; // 16px
|
||||
@font-size-larger: @font-size-base * 1.20; // 18px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h1: @font-size-base * 1.6; // 24px
|
||||
@font-size-h2: @font-size-base * 1.6; // 24px
|
||||
@font-size-h3: @font-size-base * 1.7; // 24px
|
||||
@font-size-h4: @font-size-base * 1.25; // 18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
@font-size-h6: @font-size-base * 0.85; // 12px
|
||||
|
||||
// ----- Line Height -----
|
||||
@line-height-base: 1.5; // 22.5/15
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
@line-height-heading: 1.1;
|
||||
|
||||
@headings-font-weight: 500;
|
||||
|
||||
|
||||
//============================ Iconography =============================//
|
||||
// Specify custom location and filename of the included Glyphicons icon
|
||||
|
|
|
|||
Loading…
Reference in a new issue