thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactor css to support theming

Browse source 
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
This commit is contained in:
lilia 2016-08-28 23:57:33 -07:00
parent ce583bed18
commit 7b9894d688
8 changed files with 174 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
background.html
View file

@ -52,8 +52,7 @@
<p> {{ content }}</p>
</script>
<script type='text/x-tmpl-mustache' id='conversation'>
<div class='conversation-header'
style='background-color: {{ avatar.color }}'>
<div class='conversation-header {{ 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
{{ #avatar.url }}
style='background-image: url("{{ avatar.url }}");'>
{{ /avatar.url }}
{{ ^avatar.url }}
style='background-color: {{ avatar.color }};'>
{{ /avatar.url }}
<span aria-hidden class='avatar
{{ ^avatar.url }}
{{ avatar.color }}
{{ /avatar.url }}
'
{{ #avatar.url }}
style='background-image: url("{{ avatar.url }}");'
{{ /avatar.url }}
>
{{ avatar.content }}
</span>
</script>

34
js/models/conversations.js
View file

@ -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) {

1
js/views/inbox_view.js
View file

@ -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'),

27
stylesheets/_conversation.scss
View file

@ -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;
}
}

64
stylesheets/_themes.scss Normal file
View file

@ -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 ; }
}

16
stylesheets/_variables.scss
View file

@ -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;

86
stylesheets/manifest.css
View file

@ -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 */

1
stylesheets/manifest.scss
View file

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