{{ content }}
diff --git a/js/models/conversations.js b/js/models/conversations.js index a0390597..97acd0fd 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -8,21 +8,21 @@ // TODO: Factor out private and group subclasses of Conversation var COLORS = [ - '#EF5350', // red - '#EC407A', // pink - '#AB47BC', // purple - '#7E57C2', // deep purple - '#5C6BC0', // indigo - '#2196F3', // blue - '#03A9F4', // light blue - '#00BCD4', // cyan - '#009688', // teal - '#4CAF50', // green - '#7CB342', // light green - '#FF9800', // orange - '#FF5722', // deep orange - '#FFB300', // amber - '#607D8B', // blue grey + 'red', + 'pink', + 'purple', + 'deep_purple', + 'indigo', + 'blue', + 'light_blue', + 'cyan', + 'teal', + 'green', + 'light_green', + 'orange', + 'deep_orange', + 'amber', + '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) { diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 0eca37cd..624539da 100644 --- a/js/views/inbox_view.js +++ b/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'), diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 7b2f1f5b..f1415f68 100644 --- a/stylesheets/_conversation.scss +++ b/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; } } diff --git a/stylesheets/_themes.scss b/stylesheets/_themes.scss new file mode 100644 index 00000000..e253df1e --- /dev/null +++ b/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 ; } +} diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 42b3aef4..3f8e230d 100644 --- a/stylesheets/_variables.scss +++ b/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; diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 2de66a54..d251d8a6 100644 --- a/stylesheets/manifest.css +++ b/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 */ diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index a97c7dc9..1cfff76f 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -12,3 +12,4 @@ // Build the main view @import 'index'; @import 'conversation'; + @import 'themes';