-
- {@_threadHeaders()}
-
-
{@_threadRows()}
@@ -72,17 +68,26 @@ ThreadListTabular = React.createClass
LabelComponent = label.view
+ numMessages = (thread) ->
+ numMsg = thread.numMessages()
+ if numMsg < 1 then "" else numMsg
+
c2 = new ThreadListColumn
name: "Subject"
- flex: 6
+ flex: 3
resolver: (thread) ->
- {subject(thread)}
- {thread.snippet}
- {labelComponents(thread)}
+ {subject(thread)}
+ {numMessages(thread)}
c3 = new ThreadListColumn
+ name: "Snippet"
+ flex: 4
+ resolver: (thread) ->
+
{thread.snippet}
+
+ c4 = new ThreadListColumn
name: "Date"
flex: 1
resolver: (thread, parentComponent) ->
@@ -90,15 +95,17 @@ ThreadListTabular = React.createClass
{parentComponent.threadTime()}
- return [c0, c1, c2, c3]
+ return [c0, c1, c2, c3, c4]
_threadHeaders: ->
- for col in @state.columns
-
- {col.name}
-
+ return
+ # TODO: There's currently no styling for headers
+ # for col in @state.columns
+ #
+ # {col.name}
+ #
# The `numTags` attribute is only used to trigger a re-render of the
# ThreadListTabularItem when a tag gets added or removed (like a star).
diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index 1ccaa4317..4793d284d 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -12,6 +12,11 @@
-webkit-user-select: none;
display: flex;
position: relative;
+
+ .message-count {
+ color: @text-color-inverse;
+ background: @background-tertiary;
+ }
}
.thread-list-container {
@@ -110,7 +115,8 @@
.thread-rows {
overflow: auto;
- padding-top: @font-size-base * 2; /* height of thread-list-headers*/
+ // Add back when when we re-implement thread-list-headers
+ // padding-top: @font-size-base * 2; /* height of thread-list-headers*/
}
.thread-list-column {
diff --git a/src/flux/models/thread.coffee b/src/flux/models/thread.coffee
index 02a7cafac..47d195dd4 100644
--- a/src/flux/models/thread.coffee
+++ b/src/flux/models/thread.coffee
@@ -41,6 +41,9 @@ class Thread extends Model
@naturalSortOrder: ->
Thread.attributes.lastMessageTimestamp.descending()
+ # TODO Implement me
+ numMessages: -> Math.round(Math.random() * 5)
+
fromJSON: (json) =>
super(json)
@unread = @isUnread()
diff --git a/static/mixins/common-ui-elements.less b/static/mixins/common-ui-elements.less
new file mode 100644
index 000000000..b55f2861e
--- /dev/null
+++ b/static/mixins/common-ui-elements.less
@@ -0,0 +1,11 @@
+// A Mixin holding common UI elements.
+
+// A box to hold counts of things (like number of items in a tag, or
+// number of messages in a thread)
+.item-count-box {
+ display: inline;
+ padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
+ margin-top: floor(@line-height-large - @line-height-small)/2;
+ line-height: @line-height-small;
+ border-radius: @border-radius-small;
+}
diff --git a/static/type.less b/static/type.less
index 4c2f3b5c8..72d432adb 100644
--- a/static/type.less
+++ b/static/type.less
@@ -96,10 +96,10 @@ mark,
// Contextual colors
.text-muted {
- color: @text-muted;
+ color: @text-color-subtle;
}
.text-primary {
- .text-emphasis-variant(@brand-primary);
+ .text-emphasis-variant(@accent-primary);
}
.text-success {
.text-emphasis-variant(@state-success-text);
@@ -121,7 +121,7 @@ mark,
// Given the contrast here, this is the only class to have its color inverted
// automatically.
color: #fff;
- .bg-variant(@brand-primary);
+ .bg-variant(@accent-primary);
}
.bg-success {
.bg-variant(@state-success-bg);
@@ -260,4 +260,4 @@ address {
margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
-}
\ No newline at end of file
+}
diff --git a/static/variables/ui-mixins.less b/static/variables/ui-mixins.less
index 61d7c1f7d..fc2adc2f0 100644
--- a/static/variables/ui-mixins.less
+++ b/static/variables/ui-mixins.less
@@ -1,2 +1,3 @@
+@import "../mixins/common-ui-elements.less";
@import "../mixins/text-emphasis.less";
@import "../mixins/background-variant.less";
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index c264ec7e2..adbd8e6f6 100644
--- a/static/variables/ui-variables.less
+++ b/static/variables/ui-variables.less
@@ -1,57 +1,74 @@
-//
-// Variables
-// --------------------------------------------------
+// Color abstraction heirarcy:
+// 1. Hex code (#428bca)
+// 2. Common color name (@blue)
+// 3. Generic color descriptor (@accent-primary, @background-primary)
+// --------
+// 4. Generic usage descriptor (@input-background, @button-background)
+// 5. Application-specific usage (@unread-label-background)
-// Mostly drawn from Bootstrap's variables.less
+// Typography abstraction heirarcy
+// 1. Font-face (FaktPro)
+// 2. Common name (@bold, @italic)
+// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
+// --------
+// 4. Generic usage descriptor (.btn-text, .p-body)
+// 5. Application-specific usage (.message-list-h1, .salesforce-h1)
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
+//=============================== Colors ===============================//
+//== Brand colors
+@nilas-yellow: #D5DC28;
+@nilas-yellow-dark: #A0C23A;
+@nilas-green: #5CB346;
+@nilas-green-dark: #078E46;
+@nilas-blue: #11A1A2;
+@nilas-blue-dark: #0F7982;
+@nilas-black: #313435;
-@gray-base: #0a0b0c;
-@gray-darker: lighten(@gray-base, 13.5%); // #222
-@gray-dark: lighten(@gray-base, 20%); // #333
-@gray: lighten(@gray-base, 33.5%); // #555
-@gray-light: lighten(@gray-base, 46.7%); // #777
-@gray-lighter: lighten(@gray-base, 92.5%); // #eee
+//== Generic colors
+@black: @nilas-black;
+@gray-base: #0a0b0c;
+@gray-darker: lighten(@gray-base, 13.5%); // #222
+@gray-dark: lighten(@gray-base, 20%); // #333
+@gray: lighten(@gray-base, 33.5%); // #555
+@gray-light: lighten(@gray-base, 46.7%); // #777
+@gray-lighter: lighten(@gray-base, 92.5%); // #eee
+@white: #ffffff;
-@brand-primary: #428bca;
-@brand-success: #5cb85c;
-@brand-info: #5bc0de;
-@brand-warning: #f0ad4e;
-@brand-danger: #d9534f;
+//== Color descriptors
+@accent-primary: @nilas-blue;
+@accent-secondary: @nilas-yellow;
+
+@background-primary: #ffffff;
+@background-secondary: #f6f6f6;
+@background-tertiary: #6d7987;
+
+@info-color: @nilas-blue-dark;
+@success-color: @nilas-green;
+@warning-color: #f0ad4e;
+@error-color: #d9534f;
+@danger-color: #d9534f;
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
+//============================= Typography =============================//
-//** Background color for ``.
-@body-bg: #fff;
-//** Global text color on ``.
-@text-color: @gray-dark;
-@text-muted: @gray-light;
+@text-color: @black;
+@text-color-inverse: @white;
+@text-color-subtle: fadeout(@text-color, 50%);
-//** Global textual link color.
-@link-color: @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color: darken(@link-color, 15%);
-//** Link hover decoration.
-@link-hover-decoration: underline;
+@text-color-link: @nilas-blue;
+@text-color-link-hover: @nilas-blue-dark;
+@text-color-link-active: @nilas-blue-dark;
+
+@text-color-highlight: @black;
+@text-color-selected: @white;
+@text-color-info: @light-blue;
+@text-color-success: @green;
+@text-color-warning: #ff982d;
+@text-color-error: @red;
+@text-color-destructive: @red;
-//== Panels and Sidebars
-//
-//
-@panel-background-color: @gray-lighter;
-@toolbar-background-color: @gray-lighter;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
@font-face {
font-family: 'FaktPro';
font-style: normal;
@@ -179,23 +196,23 @@
@btn-default-border: #ccc;
@btn-primary-color: #fff;
-@btn-primary-bg: @brand-primary;
+@btn-primary-bg: @accent-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
-@btn-success-bg: @brand-success;
+@btn-success-bg: @success-color;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-info-color: #fff;
-@btn-info-bg: @brand-info;
+@btn-info-bg: @info-color;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-warning-color: #fff;
-@btn-warning-bg: @brand-warning;
+@btn-warning-bg: @warning-color;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
-@btn-danger-bg: @brand-danger;
+@btn-danger-bg: @danger-color;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light;
@@ -381,17 +398,6 @@
@unread-color: #009ec4; //!
@action-color: @green;
-@text-color-highlight: @black;
-@text-color-selected: @white;
-@text-color-subtle: fadeout(@text-color, 50%);
-@text-color-inverse: white;
-@text-color-info: @light-blue;
-@text-color-link: @light-blue;
-@text-color-success: @green;
-@text-color-warning: #ff982d;
-@text-color-error: @red;
-@text-color-destructive: @red;
-
@progress-bar-fill: @light-blue;
@progress-bar-background: @light-gray;
@@ -462,4 +468,9 @@
@standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
@standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);
-@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
\ No newline at end of file
+@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
+
+@body-bg: @white;
+//== Panels and Sidebars
+@panel-background-color: @gray-lighter;
+@toolbar-background-color: @gray-lighter;