keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects 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
pull/749/head
lilia 9 years ago
parent ce583bed18
commit 7b9894d688
8 changed files with 174 additions and 76 deletions
Show Stats Download Patch File Download Diff File

21
background.html
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save