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

Added a dark theme

Browse source 
I added a dark theme in order to solve #328.
This may fix #328 at least partially.
This commit is contained in:
Ikarulus 2016-11-17 17:21:03 +01:00 committed by lilia
parent 030096bf91
commit 53cd3af78b
10 changed files with 351 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_locales/en/messages.json
View file

@ -480,5 +480,9 @@
"example": "John"
}
}
},
"themeAndroidDark": {
"message": "Android (dark)",
"description": "Label text for dark Android theme"
}
}

4
background.html
View file

@ -433,6 +433,10 @@
<input type='radio' name='theme' id='theme-setting-android' value='android'>
<label for='theme-setting-android'>Android</label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-android-dark' value='android-dark'>
<label for='theme-setting-android-dark'>{{ themeAndroidDark }}</label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-ios' value='ios'/>
<label for='theme-setting-ios'>iOS</label>

1
js/views/inbox_view.js
View file

@ -97,6 +97,7 @@
applyTheme: function() {
var theme = storage.get('theme-setting') || 'android';
this.$el.removeClass('ios')
.removeClass('android-dark')
.removeClass('android')
.addClass(theme);
},

1
js/views/settings_view.js
View file

@ -84,6 +84,7 @@
nameOnly: i18n('nameOnly'),
safetyNumbersSettingDescription: i18n('safetyNumbersSettingDescription'),
safetyNumbersSettingHeader: i18n('safetyNumbersSettingHeader'),
themeAndroidDark: i18n('themeAndroidDark'),
};
}
});

1
stylesheets/_android.scss
View file

@ -66,4 +66,3 @@
@include header-icon-black('/images/back.svg');
}
}

149
stylesheets/android-dark.scss Normal file
View file

@ -0,0 +1,149 @@
$grey-dark: #333333;
$grey-dark_l2: darken($grey-dark, 4%);
$grey-dark_l3: darken($grey-dark_l2, 7%);
$grey-dark_l4: darken($grey-dark_l3, 8%);
$text-dark: #CCCCCC;
.android-dark {
color: $text-dark;
hr {
border-color: $grey-dark;
}
#header {
background-color: $grey-dark;
color: $text-dark;
transition: background-color 0.5s;
&.inactive {
background-color: $grey-dark;
color: $text-dark;
}
}
.message-detail, .message-container, .conversation, .modal .content,
.discussion-container, .attachment-previews {
background-color: $grey-dark_l3;
}
.lightbox .content {
background-color: rgba(0, 0, 0, 0);
}
.key-verification .key {
background-color: $grey-dark_l4;
border-color: $grey-dark_l2;
}
.menu-list {
background-color: $grey-dark_l2;
color: $text-dark;
li:hover {
background-color: $grey-dark;
}
}
.flex {
background-color: $grey-dark_l2;
.send-message {
background-color: $grey-dark_l2;
color: $text-dark;
}
}
.conversation-stack .inactive {
.conversation-header{
background-color: $grey-dark;
color: $text-dark;
}
}
.contact-details .name {
font-weight: 400;
}
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
background-color: $grey-dark_l3;
border-color: $grey-dark;
}
.conversation.placeholder .conversation-header {
display: none;
}
.conversation-header, .bubble {
@include avatar-colors;
}
.message-list .advisory .content {
background-color: $grey-dark;
}
.inactive .conversation-header {
background-color: $grey-dark !important;
color: $text-dark;
}
.sent .status {
display: inline-block;
@include color-svg('/images/check.svg', white);
}
.paperclip:before {
content: '';
display: inline-block;
width: $button-height;
height: $button-height;
@include color-svg('/images/paperclip.svg', white);
transform: rotateZ(-45deg);
}
.scrollable {
background-color: $grey-dark_l3;
.conversation-list-item {
background-color: $grey-dark_l3;
color: $text-dark;
}
}
.bottom-bar {
min-height: 10px;
background-color: $grey-dark_l2;
}
.search {
background-color: $grey-dark_l2;
border-color: $grey-dark_l2;
@include invert-text-color;
}
.bubble {
padding: 9px 12px;
border-radius: $border-radius;
box-shadow: 0 3px 3px -4px black;
}
.outgoing .bubble {
background-color: $grey-dark;
@include invert-text-color;
}
.outgoing .hourglass, .incoming .hourglass {
@include hourglass(#000);
}
.incoming .bubble {
.sender, .content, .body, .meta, a {
@include invert-text-color;
}
.attachments, .content {
a {
color: $grey_l;
}
}
}
button.clock {
@include header-icon-white('/images/clock.svg');
}
button.hamburger {
@include header-icon-white('/images/menu.svg');
}
button.back {
@include header-icon-white('/images/back.svg');
}
button.grey {
background-color: $grey-dark;
color: $text-dark;
border-color: $grey-dark_l2;
}
::-webkit-scrollbar-thumb {
background: rgba(120,120,120,0.15);
&:hover {
background: rgba(120,120,120,0.25);
}
}
::-webkit-scrollbar-track {
background-color: $grey-dark_l2;
}
}

181
stylesheets/manifest.css
View file

@ -1697,4 +1697,185 @@ li.entry .error-icon-container {
-webkit-mask-size: 100%;
background-color: black; }
.android-dark {
color: #CCCCCC; }
.android-dark hr {
border-color: #333333; }
.android-dark #header {
background-color: #333333;
color: #CCCCCC;
transition: background-color 0.5s; }
.android-dark #header.inactive {
background-color: #333333;
color: #CCCCCC; }
.android-dark .message-detail, .android-dark .message-container, .android-dark .conversation, .android-dark .modal .content,
.android-dark .discussion-container, .android-dark .attachment-previews {
background-color: #171717; }
.android-dark .lightbox .content {
background-color: transparent; }
.android-dark .key-verification .key {
background-color: #030303;
border-color: #292929; }
.android-dark .menu-list {
background-color: #292929;
color: #CCCCCC; }
.android-dark .menu-list li:hover {
background-color: #333333; }
.android-dark .flex {
background-color: #292929; }
.android-dark .flex .send-message {
background-color: #292929;
color: #CCCCCC; }
.android-dark .conversation-stack .inactive .conversation-header {
background-color: #333333;
color: #CCCCCC; }
.android-dark .contact-details .name {
font-weight: 400; }
.android-dark .group-member-list .members .contact, .android-dark .new-group-update .members .contact, .android-dark .attachment-previews img {
background-color: #171717;
border-color: #333333; }
.android-dark .conversation.placeholder .conversation-header {
display: none; }
.android-dark .conversation-header.red, .android-dark .bubble.red {
background-color: #EF5350; }
.android-dark .conversation-header.pink, .android-dark .bubble.pink {
background-color: #EC407A; }
.android-dark .conversation-header.purple, .android-dark .bubble.purple {
background-color: #AB47BC; }
.android-dark .conversation-header.deep_purple, .android-dark .bubble.deep_purple {
background-color: #7E57C2; }
.android-dark .conversation-header.indigo, .android-dark .bubble.indigo {
background-color: #5C6BC0; }
.android-dark .conversation-header.blue, .android-dark .bubble.blue {
background-color: #2196F3; }
.android-dark .conversation-header.light_blue, .android-dark .bubble.light_blue {
background-color: #03A9F4; }
.android-dark .conversation-header.cyan, .android-dark .bubble.cyan {
background-color: #00BCD4; }
.android-dark .conversation-header.teal, .android-dark .bubble.teal {
background-color: #009688; }
.android-dark .conversation-header.green, .android-dark .bubble.green {
background-color: #4CAF50; }
.android-dark .conversation-header.light_green, .android-dark .bubble.light_green {
background-color: #7CB342; }
.android-dark .conversation-header.orange, .android-dark .bubble.orange {
background-color: #FF9800; }
.android-dark .conversation-header.deep_orange, .android-dark .bubble.deep_orange {
background-color: #FF5722; }
.android-dark .conversation-header.amber, .android-dark .bubble.amber {
background-color: #FFB300; }
.android-dark .conversation-header.blue_grey, .android-dark .bubble.blue_grey {
background-color: #607D8B; }
.android-dark .conversation-header.grey, .android-dark .bubble.grey {
background-color: #999999; }
.android-dark .conversation-header.default, .android-dark .bubble.default {
background-color: #2090ea; }
.android-dark .message-list .advisory .content {
background-color: #333333; }
.android-dark .inactive .conversation-header {
background-color: #333333 !important;
color: #CCCCCC; }
.android-dark .sent .status {
display: inline-block;
-webkit-mask: url("/images/check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android-dark .paperclip:before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
-webkit-mask: url("/images/paperclip.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white;
transform: rotateZ(-45deg); }
.android-dark .scrollable {
background-color: #171717; }
.android-dark .scrollable .conversation-list-item {
background-color: #171717;
color: #CCCCCC; }
.android-dark .bottom-bar {
min-height: 10px;
background-color: #292929; }
.android-dark .search {
background-color: #292929;
border-color: #292929;
color: white; }
.android-dark .search::selection {
background: white;
color: #454545; }
.android-dark .bubble {
padding: 9px 12px;
border-radius: 5px;
box-shadow: 0 3px 3px -4px black; }
.android-dark .outgoing .bubble {
background-color: #333333;
color: white; }
.android-dark .outgoing .bubble::selection {
background: white;
color: #454545; }
.android-dark .outgoing .hourglass, .android-dark .incoming .hourglass {
display: inline-block;
position: relative;
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: transparent;
background-size: 100%; }
.android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
width: 13px;
height: 11px; }
.android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.android-dark .outgoing .hourglass .sand, .android-dark .incoming .hourglass .sand {
background: #000; }
.android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass:after {
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #000; }
.android-dark .incoming .bubble .sender, .android-dark .incoming .bubble .content, .android-dark .incoming .bubble .body, .android-dark .incoming .bubble .meta, .android-dark .incoming .bubble a {
color: white; }
.android-dark .incoming .bubble .sender::selection, .android-dark .incoming .bubble .content::selection, .android-dark .incoming .bubble .body::selection, .android-dark .incoming .bubble .meta::selection, .android-dark .incoming .bubble a::selection {
background: white;
color: #454545; }
.android-dark .incoming .bubble .attachments a, .android-dark .incoming .bubble .content a {
color: #f3f3f3; }
.android-dark button.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android-dark button.clock:focus, .android-dark button.clock:hover {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android-dark button.hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android-dark button.hamburger:focus, .android-dark button.hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android-dark button.back {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android-dark button.back:focus, .android-dark button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android-dark button.grey {
background-color: #333333;
color: #CCCCCC;
border-color: #292929; }
.android-dark ::-webkit-scrollbar-thumb {
background: rgba(120, 120, 120, 0.15); }
.android-dark ::-webkit-scrollbar-thumb:hover {
background: rgba(120, 120, 120, 0.25); }
.android-dark ::-webkit-scrollbar-track {
background-color: #292929; }
/*# sourceMappingURL=manifest.css.map */

1
stylesheets/manifest.scss
View file

@ -18,3 +18,4 @@
@import 'conversation';
@import 'ios';
@import 'android';
@import 'android-dark';

4
test/fixtures_test.js
View file

@ -14,6 +14,10 @@ describe("Fixtures", function() {
var view = new Whisper.InboxView({appWindow: {contentWindow: window}});
view.$el.removeClass('android').addClass('ios');
view.$el.prependTo($('#render-ios'));
var view = new Whisper.InboxView({appWindow: {contentWindow: window}});
view.$el.removeClass('android').addClass('android-dark');
view.$el.prependTo($('#render-android-dark'));
}).then(done,done);
});
});

6
test/index.html
View file

@ -12,6 +12,8 @@
</div>
<div id="render-android" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
</div>
<div id="render-android-dark" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
</div>
<div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
</div>
<script type='text/x-tmpl-mustache' id='two-column'>
@ -436,6 +438,10 @@
<input type='radio' name='theme' id='theme-setting-android' value='android'>
<label for='theme-setting-android'>Android</label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-android-dark' value='android-dark'>
<label for='theme-setting-android-dark'>{{ themeAndroidDark }} </label>
</div>
<div>
<input type='radio' name='theme' id='theme-setting-ios' value='ios'/>
<label for='theme-setting-ios'>iOS</label>