mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework notifications flyout
This commit is contained in:
Luke Pulverenti
parent
9b6cd65b9d
commit
8e0dc6d8e4
11 changed files with 115 additions and 189 deletions
|
|
@ -6,12 +6,16 @@
|
|||
padding-top: 98px !important;
|
||||
}
|
||||
|
||||
.libraryMenuDivider {
|
||||
.sidebarDivider {
|
||||
height: 1px;
|
||||
background: #333;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.ui-page-theme-a .sidebarDivider {
|
||||
background: #ddd !important;
|
||||
}
|
||||
|
||||
.headerBackButton {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,35 @@
|
|||
.btnNotifications {
|
||||
text-decoration: none !important;
|
||||
position: absolute;
|
||||
top: 25px !important;
|
||||
right: 10px !important;
|
||||
padding: 0 !important;
|
||||
outline: 0 !important;
|
||||
margin: 0 !important;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btnNotifications:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.btnNotificationsInner {
|
||||
vertical-align: middle;
|
||||
border-radius: 1000px;
|
||||
padding: 6px 10px 5px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
display: inline;
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.levelNormal {
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
|
||||
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
|
||||
background-image: linear-gradient(top,#4d90fe,#4787ed);
|
||||
color: #fff !important;
|
||||
color: #4d90fe;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.levelWarning {
|
||||
background-color: #FF7537;
|
||||
background-image: none;
|
||||
color: #fff !important;
|
||||
color: #FF7537;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.levelError {
|
||||
background-color: #d14836;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
|
||||
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
|
||||
background-image: linear-gradient(top,#dd4b39,#d14836);
|
||||
color: #fff !important;
|
||||
color: #d14836;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flyoutNotification {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: 1px solid #444;
|
||||
padding: 0 0 .5em;
|
||||
}
|
||||
|
||||
|
|
@ -66,11 +40,15 @@
|
|||
}
|
||||
|
||||
.flyoutNotification:last-child {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.flyoutNotification a {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.notificationTime {
|
||||
color: green;
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
.notificationImage {
|
||||
|
|
@ -91,10 +69,6 @@
|
|||
color: blue;
|
||||
}
|
||||
|
||||
.notificationsList {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.imgNotification, .imgNotificationInner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -484,14 +484,6 @@ h1 .imageLink {
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.sidebarDivider {
|
||||
height: 0;
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
margin: .7em 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sidebarHeader {
|
||||
padding-left: 20px;
|
||||
margin: 15px 0 10px;
|
||||
|
|
|
|||
|
|
@ -4,19 +4,16 @@
|
|||
<title>${TitleNotifications}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="notificationsPage" data-role="page" class="page type-interior notificationConfigurationPage">
|
||||
<div id="notificationsPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/notificationlist">
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<div class="readOnlyContent">
|
||||
|
||||
<div class="notificationsList" style="margin-top: 1em;">
|
||||
</div>
|
||||
|
||||
<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check">${ButtonMarkRead}</button></p>
|
||||
<div class="readOnlyContent" style="margin: auto;max-width:900px;">
|
||||
|
||||
<h1>${TitleNotifications}</h1>
|
||||
<div class="notificationsList" style="margin-top: 1em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
html += '<div class="libraryMenuOptions">';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="libraryMenuDivider"></div>';
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
html += '<div class="adminMenuOptions">';
|
||||
|
||||
html += '<div class="sidebarHeader">';
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="dashboard" href="dashboard.html"><span class="fa fa-server sidebarLinkIcon"></span>' + Globalize.translate('ButtonServer') + '</a>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="libraryMenuDivider"></div>';
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
html += '<div class="userMenuOptions">';
|
||||
|
||||
if (Dashboard.isConnectMode()) {
|
||||
|
|
@ -311,26 +311,29 @@
|
|||
html += user.name;
|
||||
html += '</a>';
|
||||
|
||||
//html += '<a href="#" class="btnNotifications"><div class="btnNotificationsInner">0</div></a>';
|
||||
|
||||
html += '<div class="libraryMenuDivider" style="margin-top:0;"></div>';
|
||||
html += '<div class="sidebarDivider" style="margin-top:0;"></div>';
|
||||
|
||||
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
|
||||
|
||||
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '"><span class="fa fa-home sidebarLinkIcon"></span><span>' + Globalize.translate('ButtonHome') + '</span></a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><span class="fa fa-inbox sidebarLinkIcon"></span>';
|
||||
html += Globalize.translate('ButtonInbox');
|
||||
html += '<div class="btnNotifications"><div class="btnNotificationsInner">0</div></div>';
|
||||
html += '</a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><span class="fa fa-tablet sidebarLinkIcon"></span>' + Globalize.translate('ButtonRemote') + '</a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder syncViewMenu" data-itemid="mysync" href="mysync.html"><span class="fa fa-cloud sidebarLinkIcon"></span>' + Globalize.translate('ButtonSync') + '</a>';
|
||||
|
||||
html += '<div class="libraryMenuDivider"></div>';
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
html += getViewsHtml();
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
$(document.body).append(html).trigger('libraryMenuCreated');
|
||||
|
||||
panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create');
|
||||
|
||||
|
|
|
|||
|
|
@ -217,6 +217,15 @@
|
|||
Protocol: 'http'
|
||||
});
|
||||
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'mp4',
|
||||
Type: 'Video',
|
||||
AudioCodec: 'aac',
|
||||
VideoCodec: 'h264',
|
||||
Context: 'Static',
|
||||
Protocol: 'http'
|
||||
});
|
||||
|
||||
if (canPlayAac && $.browser.safari) {
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'aac',
|
||||
|
|
@ -225,6 +234,13 @@
|
|||
Context: 'Streaming',
|
||||
Protocol: 'http'
|
||||
});
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'aac',
|
||||
Type: 'Audio',
|
||||
AudioCodec: 'aac',
|
||||
Context: 'Static',
|
||||
Protocol: 'http'
|
||||
});
|
||||
} else {
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'mp3',
|
||||
|
|
@ -233,6 +249,13 @@
|
|||
Context: 'Streaming',
|
||||
Protocol: 'http'
|
||||
});
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'mp3',
|
||||
Type: 'Audio',
|
||||
AudioCodec: 'mp3',
|
||||
Context: 'Static',
|
||||
Protocol: 'http'
|
||||
});
|
||||
}
|
||||
|
||||
profile.ContainerProfiles = [];
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
(function ($, document, Notifications) {
|
||||
|
||||
$(document).on("pageinit", "#notificationsPage", function () {
|
||||
$(document).on("pageshowready", "#notificationsPage", function () {
|
||||
|
||||
// If there is no user logged in there can be no notifications
|
||||
if (!Dashboard.getCurrentUserId()) return;
|
||||
|
||||
|
||||
var elem = $(".notificationsList");
|
||||
var btn = $(".btnMarkReadContainer");
|
||||
var startIndex = 0;
|
||||
var limit = 10;
|
||||
|
||||
Notifications.showNotificationsList(startIndex, limit, elem, btn);
|
||||
Notifications.showNotificationsList(startIndex, limit, elem);
|
||||
|
||||
elem.on("click", ".btnPreviousPage", function (e) {
|
||||
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
|
||||
if (startIndex < 0) startIndex = 0;
|
||||
|
||||
Notifications.showNotificationsList(startIndex, limit, elem, btn);
|
||||
Notifications.showNotificationsList(startIndex, limit, elem);
|
||||
|
||||
})
|
||||
.on("click", ".btnNextPage", function (e) {
|
||||
|
|
@ -29,25 +28,11 @@
|
|||
|
||||
startIndex = startIndex + limit;
|
||||
|
||||
Notifications.showNotificationsList(startIndex, limit, elem, btn);
|
||||
Notifications.showNotificationsList(startIndex, limit, elem);
|
||||
|
||||
});
|
||||
|
||||
$(".readOnlyContent").on("click", ".btnMarkRead", function () {
|
||||
|
||||
var ids = $(".notificationsList div").map(function () {
|
||||
|
||||
return this.getAttribute('data-notificationid');
|
||||
|
||||
}).get();
|
||||
|
||||
Notifications.markNotificationsRead(ids, function () {
|
||||
|
||||
Notifications.showNotificationsList(startIndex, limit, elem, btn);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Notifications.markNotificationsRead([]);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -43,51 +43,6 @@
|
|||
});
|
||||
};
|
||||
|
||||
self.showNotificationsFlyout = function () {
|
||||
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
var html = '<div data-role="panel" data-position="right" data-display="overlay" class="notificationsFlyout" data-position-fixed="true" data-theme="a">';
|
||||
|
||||
html += '<h1 style="margin: .25em 0;">';
|
||||
html += '<span style="vertical-align:middle;">' + Globalize.translate('HeaderNotifications') + '</span>';
|
||||
|
||||
if (user.Policy.IsAdministrator) {
|
||||
html += '<a data-role="button" data-inline="true" data-icon="arrow-r" href="notificationlist.html" data-iconpos="notext" style="vertical-align:middle;margin-left:.5em;">' + Globalize.translate('ButtonViewNotifications') + '</a>';
|
||||
}
|
||||
|
||||
html += '</h1>';
|
||||
|
||||
html += '<div>';
|
||||
|
||||
html += '<div class="notificationsFlyoutlist">Loading...';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
|
||||
$('.notificationsFlyout').panel({}).trigger('create').panel("open").on("panelclose", function () {
|
||||
|
||||
$(this).off("panelclose").remove();
|
||||
|
||||
});
|
||||
|
||||
self.isFlyout = true;
|
||||
|
||||
var startIndex = 0;
|
||||
var limit = 5;
|
||||
var elem = $('.notificationsFlyoutlist');
|
||||
|
||||
refreshNotifications(startIndex, limit, elem, null, false).done(function () {
|
||||
|
||||
self.markNotificationsRead([]);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
self.markNotificationsRead = function (ids, callback) {
|
||||
|
||||
ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () {
|
||||
|
|
@ -104,51 +59,36 @@
|
|||
|
||||
};
|
||||
|
||||
self.showNotificationsList = function (startIndex, limit, elem, btn) {
|
||||
self.showNotificationsList = function (startIndex, limit, elem) {
|
||||
|
||||
refreshNotifications(startIndex, limit, elem, btn, true);
|
||||
refreshNotifications(startIndex, limit, elem, true);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
function refreshNotifications(startIndex, limit, elem, btn, showPaging) {
|
||||
function refreshNotifications(startIndex, limit, elem, showPaging) {
|
||||
|
||||
var apiClient = window.ApiClient;
|
||||
|
||||
if (apiClient) {
|
||||
return apiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) {
|
||||
|
||||
listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, btn, showPaging);
|
||||
listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, showPaging);
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, btn, showPaging) {
|
||||
function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, showPaging) {
|
||||
|
||||
if (!totalRecordCount) {
|
||||
elem.html('<p style="padding:.5em 1em;">' + Globalize.translate('LabelNoUnreadNotifications') + '</p>');
|
||||
|
||||
if (btn) {
|
||||
btn.hide();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
Notifications.total = totalRecordCount;
|
||||
|
||||
if (btn) {
|
||||
if (list.filter(function (n) {
|
||||
|
||||
return !n.IsRead;
|
||||
|
||||
}).length) {
|
||||
btn.show();
|
||||
} else {
|
||||
btn.hide();
|
||||
}
|
||||
}
|
||||
|
||||
var html = '';
|
||||
|
||||
if (totalRecordCount > limit && showPaging === true) {
|
||||
|
|
@ -194,7 +134,7 @@
|
|||
html += '<p class="notificationTime" style="margin: .5em 0;">' + humane_date(notification.Date) + '</p>';
|
||||
|
||||
if (notification.Description) {
|
||||
html += '<p style="margin: .5em 0;max-height:100px;overflow:hidden;text-overflow:ellipsis;">' + notification.Description + '</p>';
|
||||
html += '<p style="margin: .5em 0;max-height:150px;overflow:hidden;text-overflow:ellipsis;">' + notification.Description + '</p>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -223,12 +163,10 @@
|
|||
|
||||
window.Notifications = new notifications();
|
||||
|
||||
$(document).on('headercreated', function (e) {
|
||||
$(document).on('libraryMenuCreated', function (e) {
|
||||
|
||||
if (window.ApiClient) {
|
||||
//$('<button class="headerButton headerButtonRight btnNotifications" data-role="none" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></button>').insertAfter($('.headerSearchButton')).on('click', Notifications.showNotificationsFlyout);
|
||||
|
||||
//Notifications.updateNotificationCount();
|
||||
Notifications.updateNotificationCount();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -721,7 +721,7 @@ var Dashboard = {
|
|||
item = items[i];
|
||||
|
||||
if (item.divider) {
|
||||
menuHtml += "<div class='sidebarDivider ui-bar-inherit'></div>";
|
||||
menuHtml += "<div class='sidebarDivider'></div>";
|
||||
}
|
||||
|
||||
if (item.href) {
|
||||
|
|
@ -765,11 +765,31 @@ var Dashboard = {
|
|||
|
||||
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
|
||||
|
||||
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" data-transition="none" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>';
|
||||
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 20px;"><a href="index.html" data-transition="none" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>';
|
||||
|
||||
html += '<div class="sidebarLinks">';
|
||||
html += menuHtml;
|
||||
// sidebarLinks
|
||||
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
html += '<div class="userMenuOptions">';
|
||||
|
||||
if (Dashboard.isConnectMode()) {
|
||||
html += '<a class="sidebarLink" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>';
|
||||
html += '<span class="sidebarLinkText">';
|
||||
html += Globalize.translate('ButtonSelectServer');
|
||||
html += '</span>';
|
||||
html += '</a>';
|
||||
}
|
||||
|
||||
html += '<a class="sidebarLink" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-sign-out sidebarLinkIcon"></span>';
|
||||
html += '<span class="sidebarLinkText">';
|
||||
html += Globalize.translate('ButtonSignOut');
|
||||
html += '</span>';
|
||||
html += '</a>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(function () {
|
||||
|
||||
var unlockId = "premiumunlock";
|
||||
var unlockId = "com.mb.android.unlock";
|
||||
var updatedProducts = [];
|
||||
|
||||
function updateProductInfo(id, owned) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,15 @@
|
|||
return platform.indexOf('android') != -1;
|
||||
}
|
||||
|
||||
function getPremiumUnlockFeatureId() {
|
||||
|
||||
if (isAndroid()) {
|
||||
return "com.mb.android.unlock";
|
||||
}
|
||||
|
||||
return 'premiumunlock';
|
||||
}
|
||||
|
||||
function validatePlayback(deferred) {
|
||||
|
||||
// Don't require validation on android
|
||||
|
|
@ -17,37 +26,16 @@
|
|||
|
||||
validateFeature({
|
||||
|
||||
id: 'premiumunlock'
|
||||
id: getPremiumUnlockFeatureId()
|
||||
|
||||
}, deferred);
|
||||
}
|
||||
|
||||
function validateLiveTV(deferred) {
|
||||
|
||||
// Don't require validation if not android
|
||||
if (!isAndroid()) {
|
||||
deferred.resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
validateFeature({
|
||||
|
||||
id: 'premiumunlock'
|
||||
|
||||
}, deferred);
|
||||
}
|
||||
|
||||
function validateSmb(deferred) {
|
||||
|
||||
// Don't require validation if not android
|
||||
if (!isAndroid()) {
|
||||
deferred.resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
validateFeature({
|
||||
|
||||
id: 'premiumunlock'
|
||||
id: getPremiumUnlockFeatureId()
|
||||
|
||||
}, deferred);
|
||||
}
|
||||
|
|
@ -215,8 +203,10 @@
|
|||
}
|
||||
};
|
||||
|
||||
var depends = isAndroid() ? 'thirdparty/cordova/android/iap' : 'thirdparty/cordova/iap';
|
||||
|
||||
requirejs([depends]);
|
||||
if (isAndroid()) {
|
||||
requirejs(['thirdparty/cordova/android/iap']);
|
||||
} else {
|
||||
requirejs(['thirdparty/cordova/iap']);
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue