public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-08-31 21:41:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Got the styling right for site notifications. Now need to hook up feed choser and buttons and all notifications list.

Browse source
This commit is contained in:
Samuel Clay 2016-11-15 13:32:43 -08:00
parent 19460d6bcb
commit 201b024261
4 changed files with 80 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
media/css/reader.css
View file

@ -8821,6 +8821,10 @@ form.opml_import_form input {
/* = Notifications Modal = */
/* ======================= */
.NB-modal.NB-modal-notifications .NB-fieldset {
border-bottom: none;
width: 100%;
}
.NB-modal-notifications .NB-preference-label {
float: left;
margin: 10px 0;
@ -8832,6 +8836,50 @@ form.opml_import_form input {
float: left;
overflow: hidden;
}
.NB-feed-notification {
width: 100%;
}
.NB-feed-notification .NB-feed-notification-filter {
float: right;
margin: 0 12px;
}
.NB-feed-notification .NB-feed-title {
font-size: 12px;
}
.NB-feed-notification .NB-feed-icon {
width: 16px;
height: 16px;
float: left;
margin: 0 7px 0 0;
}
.NB-feed-notification .NB-feed-notification-filter .NB-unread-icon,
.NB-feed-notification .NB-feed-notification-filter .NB-focus-icon {
width: 8px;
height: 12px;
display: block;
float: left;
margin: 0 5px 0 2px;
background: transparent url('/media/embed/icons/circular/g_icn_unread.png') no-repeat 0 center;
background-size: 8px;
}
.NB-feed-notification .NB-feed-notification-filter .NB-focus-icon {
background: transparent url('/media/embed/icons/circular/g_icn_focus.png') no-repeat 0 center;
background-size: 8px;
}
.NB-feed-notification .segmented-control {
margin-top: -2px;
margin-bottom: 2px;
}
.NB-feed-notification .segmented-control li {
padding: 2px 6px;
font-size: 10px;
}
.NB-feed-notification .NB-feed-notifications {
float: right;
}
.NB-modal-notifications .NB-modal-section-site {
margin: 12px 0 0;
}
/* ===================== */

31
media/js/newsblur/reader/reader_notifications.js
View file

@ -55,8 +55,6 @@ _.extend(NEWSBLUR.ReaderNotifications.prototype, {
populate_settings: function(data) {
var $submit = $('.NB-modal-submit-save', this.$modal);
var $loading = $('.NB-modal-loading', this.$modal);
var $page_history = $(".NB-exception-page-history", this.$modal);
var $feed_history = $(".NB-exception-feed-history", this.$modal);
$loading.removeClass('NB-active');
this.resize();
@ -71,29 +69,20 @@ _.extend(NEWSBLUR.ReaderNotifications.prototype, {
])),
$.make('div', { className: 'NB-modal-loading' }),
$.make('h2', { className: 'NB-modal-title' }, 'Notifications'),
$.make('h2', { className: 'NB-modal-subtitle' }, [
$.make('img', { className: 'NB-modal-feed-image feed_favicon' }),
$.make('div', { className: 'NB-modal-feed-heading' }, [
$.make('span', { className: 'NB-modal-feed-title' }),
$.make('span', { className: 'NB-modal-feed-subscribers' })
])
]),
(this.feed && $.make('div', { className: 'NB-fieldset NB-modal-submit' }, [
$.make('h5', [
$.make('div', { className: 'NB-exception-option-status NB-right' }),
$.make('div', { className: 'NB-exception-option-meta' }),
'Site Notifications'
]),
$.make('div', { className: 'NB-fieldset-fields' }, [
this.make_feed_notification(this.feed)
$.make('fieldset', [
$.make('legend', 'Site Notifications'),
$.make('div', { className: 'NB-modal-section NB-modal-section-site'}, [
this.make_feed_notification(this.feed)
])
])
])),
$.make('div', { className: 'NB-fieldset NB-modal-submit' }, [
$.make('h5', [
'All notifications'
]),
$.make('div', { className: 'NB-fieldset-fields' }, [
this.make_feed_notifications()
$.make('fieldset', [
$.make('legend', 'All Notifications'),
$.make('div', { className: 'NB-modal-section'}, [
this.make_feed_notifications()
])
])
])
]);

4
media/js/newsblur/views/feed_list_view.js
View file

@ -232,6 +232,10 @@ NEWSBLUR.Views.FeedList = Backbone.View.extend({
NEWSBLUR.reader.open_feedchooser_modal({'premium_only': true});
} else if (next == 'password') {
NEWSBLUR.reader.open_account_modal({'change_password': true});
} else if (next == 'notifications') {
_.delay(function() {
NEWSBLUR.reader.open_notifications_modal(NEWSBLUR.assets.active_feed && NEWSBLUR.assets.active_feed.id);
}, 200);
}
var url = $.getQueryString('url') || $.getQueryString('add');

25
media/js/newsblur/views/feed_notification_view.js
View file

@ -12,14 +12,25 @@ NEWSBLUR.Views.FeedNotificationView = Backbone.View.extend({
render: function() {
var feed = this.model;
var $feed = $(_.template('<div class="NB-feed-notification <% if (selected) { %>selected<% } %>>\
var $feed = $(_.template('<div class="NB-feed-notification <% if (selected) { %>selected<% } %>">\
<ul class="segmented-control NB-feed-notifications">\
<li class="NB-feed-notifications-option NB-feed-notifications-email">Email</li>\
<li class="NB-feed-notifications-option NB-feed-notifications-web">Web</li>\
<li class="NB-feed-notifications-option NB-feed-notifications-ios">iOS</li>\
<li class="NB-feed-notifications-option NB-feed-notifications-android">Android</li>\
</ul>\
<ul class="segmented-control NB-feed-notification-filter">\
<li class="NB-feed-notification-filter-unread NB-active">\
<div class="NB-unread-icon"></div>\
Unread stories\
</li>\
<li class="NB-feed-notification-filter-focus">\
<div class="NB-focus-icon"></div>\
Focus\
</li>\
</ul>\
<img class="NB-feed-icon" src="<%= $.favicon(feed) %>">\
<div class="NB-feed-title"><%= feed.get("feed_title") %></div>\
<div class="NB-feed-notifications">\
<div class="NB-feed-notifications-option NB-feed-notifications-email">Email</div>\
<div class="NB-feed-notifications-option NB-feed-notifications-web">Web</div>\
<div class="NB-feed-notifications-option NB-feed-notifications-ios">iOS</div>\
<div class="NB-feed-notifications-option NB-feed-notifications-android">Android</div>\
</div>\
</div>\
', {
feed : feed,