Refactor css to support theming

Move away from inline style attributes for setting contact colors.
Apply colors by name via css classes instead. Also lays groundwork
for syncing contact colors.

// FREEBIE

background.html

@@ -52,8 +52,7 @@
     <p> {{ content }}</p>
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
-    <div class='conversation-header'
+    <div class='conversation-header {{ avatar.color }}'>
-        style='background-color: {{ avatar.color }}'>
         <div class='header-buttons left'>
           <div class='vertical-align'>
             <button class='back hide'></button>
@@ -146,7 +145,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='message'>
       {{> avatar }}
-      <div class='bubble' style='background-color: {{ avatar.color }};'>
+      <div class='bubble {{ avatar.color }}'>
           <div class='sender' dir='auto'>{{ sender }}</div>
           <div class='attachments'></div>
           <p class='content' dir='auto'>{{ message }}</p>
@@ -176,13 +175,15 @@
       </svg>
   </script>
   <script type='text/x-tmpl-mustache' id='avatar'>
-    <span class='avatar' aria-hidden
+    <span aria-hidden class='avatar
-          {{ #avatar.url }}
+      {{ ^avatar.url }}
-            style='background-image: url("{{ avatar.url }}");'>
+        {{ avatar.color }}
-          {{ /avatar.url }}
+      {{ /avatar.url }}
-          {{ ^avatar.url }}
+      '
-            style='background-color: {{ avatar.color }};'>
+      {{ #avatar.url }}
-          {{ /avatar.url }}
+        style='background-image: url("{{ avatar.url }}");'
+      {{ /avatar.url }}
+    >
         {{ avatar.content }}
     </span>
   </script>

js/models/conversations.js

@@ -8,21 +8,21 @@
    // TODO: Factor out private and group subclasses of Conversation
 
    var COLORS = [
-        '#EF5350', // red
+        'red',
-        '#EC407A', // pink
+        'pink',
-        '#AB47BC', // purple
+        'purple',
-        '#7E57C2', // deep purple
+        'deep_purple',
-        '#5C6BC0', // indigo
+        'indigo',
-        '#2196F3', // blue
+        'blue',
-        '#03A9F4', // light blue
+        'light_blue',
-        '#00BCD4', // cyan
+        'cyan',
-        '#009688', // teal
+        'teal',
-        '#4CAF50', // green
+        'green',
-        '#7CB342', // light green
+        'light_green',
-        '#FF9800', // orange
+        'orange',
-        '#FF5722', // deep orange
+        'deep_orange',
-        '#FFB300', // amber
+        'amber',
-        '#607D8B', // blue grey
+        'blue_grey',
     ];
 
   Whisper.Conversation = Backbone.Model.extend({
@@ -360,10 +360,10 @@
             if (title) {
                 color = COLORS[Math.abs(this.hashCode()) % 15];
             } else {
-                color = '#999999';
+                color = 'grey';
             }
         } else {
-            color = '#2090ea';
+            color = 'default';
         }
 
         if (this.avatarUrl) {

js/views/inbox_view.js

@@ -91,6 +91,7 @@
         className: 'inbox',
         initialize: function (options) {
             this.render();
+            this.$el.addClass('android'); // theme
             new Whisper.FontSizeView({ el: this.el });
             this.conversation_stack = new Whisper.ConversationStack({
                 el: this.$('.conversation-stack'),

stylesheets/_conversation.scss

@@ -369,32 +369,6 @@ li.entry .error-icon-container {
     .avatar, .bubble {
       float: left;
     }
-    .bubble {
-      color: white;
-      background-color: $blue;
-
-      .meta {
-        color: white;
-      }
-
-      .content {
-        &::selection, a::selection {
-          color: $grey_d;
-          background: white;
-        }
-
-        &::-moz-selection, a::-moz-selection {
-          color: $grey_d;
-          background: white;
-        }
-      }
-
-      .attachments, .content {
-        a {
-          color: $grey_l;
-        }
-      }
-    }
   }
 
   .outgoing {
@@ -408,7 +382,6 @@ li.entry .error-icon-container {
     }
 
     .bubble {
-      background-color: $grey_l;
       clear: left;
     }
   }

stylesheets/_themes.scss

@@ -0,0 +1,64 @@
+@mixin invert-text-color {
+  &, .meta {
+    color: white;
+  }
+
+  .content {
+    &::selection, a::selection {
+      background: white;
+      color: $grey_d;
+    }
+
+    &::-moz-selection, a::-moz-selection {
+      background: white;
+      color: $grey_d;
+    }
+  }
+
+  .attachments, .content {
+    a {
+      color: $grey_l;
+    }
+  }
+}
+
+.ios {
+  .incoming .bubble {
+    background-color: $grey_l;
+    color: $grey_d;
+  }
+  .outgoing .bubble {
+    background-color: $blue;
+    @include invert-text-color;
+  }
+}
+
+.android {
+  .outgoing .bubble {
+    background-color: $grey_l;
+  }
+
+  .incoming .bubble {
+    @include invert-text-color;
+  }
+}
+
+.avatar, .conversation-header, .android .bubble {
+  &.red         { background-color: $material_red         ; }
+  &.pink        { background-color: $material_pink        ; }
+  &.purple      { background-color: $material_purple      ; }
+  &.deep_purple { background-color: $material_deep_purple ; }
+  &.indigo      { background-color: $material_indigo      ; }
+  &.blue        { background-color: $material_blue        ; }
+  &.light_blue  { background-color: $material_light_blue  ; }
+  &.cyan        { background-color: $material_cyan        ; }
+  &.teal        { background-color: $material_teal        ; }
+  &.green       { background-color: $material_green       ; }
+  &.light_green { background-color: $material_light_green ; }
+  &.orange      { background-color: $material_orange      ; }
+  &.deep_orange { background-color: $material_deep_orange ; }
+  &.amber       { background-color: $material_amber       ; }
+  &.blue_grey   { background-color: $material_blue_grey   ; }
+  &.grey        { background-color: #999999               ; }
+  &.default     { background-color: $blue                 ; }
+}

stylesheets/_variables.scss

@@ -48,3 +48,19 @@ $error-icon-size: 24px;
 
 $font-size: 14px;
 $font-size-small: (13/14) + em;
+
+$material_red: #EF5350;
+$material_pink: #EC407A;
+$material_purple: #AB47BC;
+$material_deep_purple: #7E57C2;
+$material_indigo: #5C6BC0;
+$material_blue: #2196F3;
+$material_light_blue: #03A9F4;
+$material_cyan: #00BCD4;
+$material_teal: #009688;
+$material_green: #4CAF50;
+$material_light_green: #7CB342;
+$material_orange: #FF9800;
+$material_deep_orange: #FF5722;
+$material_amber: #FFB300;
+$material_blue_grey: #607D8B;

stylesheets/manifest.css

@@ -1132,27 +1132,6 @@ li.entry .error-icon-container {
   .message-list .incoming .avatar,
   .message-list .incoming .bubble {
     float: left; }
-  .message-container .incoming .bubble,
-  .message-list .incoming .bubble {
-    color: white;
-    background-color: #2090ea; }
-    .message-container .incoming .bubble .meta,
-    .message-list .incoming .bubble .meta {
-      color: white; }
-    .message-container .incoming .bubble .content::selection, .message-container .incoming .bubble .content a::selection,
-    .message-list .incoming .bubble .content::selection,
-    .message-list .incoming .bubble .content a::selection {
-      color: #454545;
-      background: white; }
-    .message-container .incoming .bubble .content::-moz-selection, .message-container .incoming .bubble .content a::-moz-selection,
-    .message-list .incoming .bubble .content::-moz-selection,
-    .message-list .incoming .bubble .content a::-moz-selection {
-      color: #454545;
-      background: white; }
-    .message-container .incoming .bubble .attachments a, .message-container .incoming .bubble .content a,
-    .message-list .incoming .bubble .attachments a,
-    .message-list .incoming .bubble .content a {
-      color: #f3f3f3; }
   .message-container .outgoing .error-icon-container,
   .message-list .outgoing .error-icon-container {
     left: auto;
@@ -1163,7 +1142,6 @@ li.entry .error-icon-container {
     float: right; }
   .message-container .outgoing .bubble,
   .message-list .outgoing .bubble {
-    background-color: #f3f3f3;
     clear: left; }
   .message-container .control .bubble .content,
   .message-list .control .bubble .content {
@@ -1299,4 +1277,68 @@ li.entry .error-icon-container {
         background-color: #d9d9d9;
         border-color: silver; }
 
+.ios .incoming .bubble {
+  background-color: #f3f3f3;
+  color: #454545; }
+.ios .outgoing .bubble {
+  background-color: #2090ea; }
+  .ios .outgoing .bubble, .ios .outgoing .bubble .meta {
+    color: white; }
+  .ios .outgoing .bubble .content::selection, .ios .outgoing .bubble .content a::selection {
+    background: white;
+    color: #454545; }
+  .ios .outgoing .bubble .content::-moz-selection, .ios .outgoing .bubble .content a::-moz-selection {
+    background: white;
+    color: #454545; }
+  .ios .outgoing .bubble .attachments a, .ios .outgoing .bubble .content a {
+    color: #f3f3f3; }
+
+.android .outgoing .bubble {
+  background-color: #f3f3f3; }
+.android .incoming .bubble, .android .incoming .bubble .meta {
+  color: white; }
+.android .incoming .bubble .content::selection, .android .incoming .bubble .content a::selection {
+  background: white;
+  color: #454545; }
+.android .incoming .bubble .content::-moz-selection, .android .incoming .bubble .content a::-moz-selection {
+  background: white;
+  color: #454545; }
+.android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
+  color: #f3f3f3; }
+
+.avatar.red, .conversation-header.red, .android .bubble.red {
+  background-color: #EF5350; }
+.avatar.pink, .conversation-header.pink, .android .bubble.pink {
+  background-color: #EC407A; }
+.avatar.purple, .conversation-header.purple, .android .bubble.purple {
+  background-color: #AB47BC; }
+.avatar.deep_purple, .conversation-header.deep_purple, .android .bubble.deep_purple {
+  background-color: #7E57C2; }
+.avatar.indigo, .conversation-header.indigo, .android .bubble.indigo {
+  background-color: #5C6BC0; }
+.avatar.blue, .conversation-header.blue, .android .bubble.blue {
+  background-color: #2196F3; }
+.avatar.light_blue, .conversation-header.light_blue, .android .bubble.light_blue {
+  background-color: #03A9F4; }
+.avatar.cyan, .conversation-header.cyan, .android .bubble.cyan {
+  background-color: #00BCD4; }
+.avatar.teal, .conversation-header.teal, .android .bubble.teal {
+  background-color: #009688; }
+.avatar.green, .conversation-header.green, .android .bubble.green {
+  background-color: #4CAF50; }
+.avatar.light_green, .conversation-header.light_green, .android .bubble.light_green {
+  background-color: #7CB342; }
+.avatar.orange, .conversation-header.orange, .android .bubble.orange {
+  background-color: #FF9800; }
+.avatar.deep_orange, .conversation-header.deep_orange, .android .bubble.deep_orange {
+  background-color: #FF5722; }
+.avatar.amber, .conversation-header.amber, .android .bubble.amber {
+  background-color: #FFB300; }
+.avatar.blue_grey, .conversation-header.blue_grey, .android .bubble.blue_grey {
+  background-color: #607D8B; }
+.avatar.grey, .conversation-header.grey, .android .bubble.grey {
+  background-color: #999999; }
+.avatar.default, .conversation-header.default, .android .bubble.default {
+  background-color: #2090ea; }
+
 /*# sourceMappingURL=manifest.css.map */

stylesheets/manifest.scss

@@ -12,3 +12,4 @@
 // Build the main view
   @import 'index';
   @import 'conversation';
+  @import 'themes';