public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-08-05 16:49:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding theme chooser controls.

Browse source
This commit is contained in:
Samuel Clay 2020-06-11 19:25:03 -04:00
parent 15839cf2d4
commit 49eca350f4
4 changed files with 49 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
media/css/darkmode.css
View file

@ -21,6 +21,16 @@
/* = Global = */
/* ========== */
.NB-theme-transitioning div,
.NB-theme-transitioning span,
.NB-theme-transitioning a,
.NB-theme-transitioning ul,
.NB-theme-transitioning li,
body.NB-theme-transitioning {
transition: color 1s ease-out,
background-color 1s ease-out,
border-color 1s ease-out;
}
body.NB-dark {
background-color: #191b1c;
color: #ccc;
@ -197,7 +207,7 @@ color: #a85b40;
/* Manage menu on splash page & cogwheel pop-up */
.NB-dark .NB-menu-manage-container,
.NB-dark .NB-menu-manage .NB-menu-manage-site-info, /* Preferences title background */
.NB-dark .NB-menu-item, /* Icon background */
.NB-dark .NB-menu-manage li.NB-menu-item, /* Icon background */
.NB-dark .NB-menu-manage-title /* Title text background */ {
background-color: #303739;
border-radius: 4px;
@ -843,11 +853,6 @@ border-bottom-color: #303739;
text-shadow: 0 1px 0 rgba(0,0,0,.8);
}
/* Feed text for unread feeds*/
.NB-dark .unread_view_neutral .unread_neutral {
font-weight: normal;
}
/* "All Site Stories" text*/
.NB-dark .NB-feeds-header {
background: none;

36
media/js/newsblur/reader/reader.js
View file

@ -148,6 +148,7 @@
this.setup_unfetched_feed_check();
this.switch_story_layout();
this.load_delayed_stylesheets();
this.load_theme();
},
// ========
@ -3262,6 +3263,29 @@
}
},
switch_theme: function(theme) {
this.model.preference('theme', theme);
this.load_theme();
},
load_theme: function() {
var theme = this.model.preference('theme');
$('.NB-theme-option').removeClass('NB-active');
$('.NB-options-theme-'+theme).addClass('NB-active');
$("body").addClass('NB-theme-transitioning');
if (theme == 'dark') {
$("body").addClass('NB-dark');
} else {
$("body").removeClass('NB-dark');
}
_.delay(function() {
$("body").removeClass("NB-theme-transitioning");
}, 2000);
},
close_interactions_popover: function() {
NEWSBLUR.InteractionsPopover.close();
},
@ -3410,11 +3434,11 @@
$.make('li', { className: 'NB-menu-item NB-menu-manage-theme' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('ul', { className: 'segmented-control NB-options-theme' }, [
$.make('li', { className: 'NB-single-story-option NB-options-theme-light NB-active' }, [
$.make('li', { className: 'NB-theme-option NB-options-theme-light NB-active' }, [
$.make('div', { className: 'NB-icon' }),
'Light'
]),
$.make('li', { className: 'NB-single-story-option NB-options-theme-dark' }, [
$.make('li', { className: 'NB-theme-option NB-options-theme-dark' }, [
$.make('div', { className: 'NB-icon' }),
'Dark'
])
@ -6241,6 +6265,14 @@
$.targetIs(e, { tagSelector: '.NB-menu-manage-theme' }, function($t, $p){
e.preventDefault();
});
$.targetIs(e, { tagSelector: '.NB-options-theme-light' }, function($t, $p){
e.preventDefault();
self.switch_theme('light');
});
$.targetIs(e, { tagSelector: '.NB-options-theme-dark' }, function($t, $p){
e.preventDefault();
self.switch_theme('dark');
});
$.targetIs(e, { tagSelector: '.NB-menu-manage-logout' }, function($t, $p){
e.preventDefault();
e.stopPropagation();

3
templates/base.html
View file

@ -92,7 +92,8 @@
'story_share_facebook' : true,
'story_share_readitlater' : false,
'story_share_instapaper' : true,
'story_share_email' : true
'story_share_email' : true,
'theme' : 'light'
};
NEWSBLUR.URLs = {
'upload-avatar' : "{% url "upload-avatar" %}",

4
templates/reader/manage_module.xhtml
View file

@ -11,11 +11,11 @@
<li class="NB-menu-item NB-menu-manage-theme">
<div class="NB-menu-manage-image"></div>
<ul class="segmented-control NB-options-theme">
<li class="NB-taskbar-button NB-options-theme-light">
<li class="NB-taskbar-button NB-theme-option NB-options-theme-light">
<div class="NB-task-image"></div>
<span class="NB-task-title">Light</span>
</li>
<li class="NB-taskbar-button NB-options-theme-dark">
<li class="NB-taskbar-button NB-theme-option NB-options-theme-dark">
<div class="NB-task-image"></div>
<span class="NB-task-title">Dark</span>
</li>