diff --git a/internal_packages/message-list/lib/message-item.cjsx b/internal_packages/message-list/lib/message-item.cjsx
index 5c650b8f6..17839f2bd 100644
--- a/internal_packages/message-list/lib/message-item.cjsx
+++ b/internal_packages/message-list/lib/message-item.cjsx
@@ -53,16 +53,20 @@ MessageItem = React.createClass
if @state.collapsed
- {header}
+
+ {header}
+
- {header}
- {attachments}
-
- {@_formatBody()}
-
-
+
+ {header}
+ {attachments}
+
+ {@_formatBody()}
+
+
+
- {@_messageListPrimaryActions()}
-
-
-
- {@_messageListNotificationBars()}
-
-
_messageListPrimaryActions: ->
MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
@@ -82,11 +71,9 @@ MessageList = React.createClass
MessageListHeaders = ComponentRegistry.findAllViewsByRole('MessageListHeader')
-
{@state.current_thread.subject}
+
{@state.current_thread.subject}
-
+ {@_oldParticipants()}
{for MessageListHeader in MessageListHeaders
@@ -156,5 +143,30 @@ MessageList = React.createClass
return _.values(participants)
+
+
+
+
+
+ # TODO Add actions and notifications back in.
+ _oldMessageListHeaders: ->
+ return
+
+ {@_messageListPrimaryActions()}
+
+
+
+ {@_messageListNotificationBars()}
+
+
+ # TODO Add participants back in
+ _oldParticipants: ->
+ return
+
+
+
+
MessageList.minWidth = 600
MessageList.maxWidth = 900
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index e6ef4f005..8b8f6edc2 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -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;
}
}
diff --git a/static/type.less b/static/type.less
index 37be4e4c9..6031dd5d8 100644
--- a/static/type.less
+++ b/static/type.less
@@ -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
// -------------------------
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index 341a3f460..57fb69f21 100644
--- a/static/variables/ui-variables.less
+++ b/static/variables/ui-variables.less
@@ -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