mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

switch to dark library menu

Browse source 
Conflicts:
	MediaBrowser.WebDashboard/dashboard-ui/css/librarymenu.css
This commit is contained in:
Luke Pulverenti 2016-01-27 14:39:20 -05:00
parent 2136b4e83a
commit 8d8b47dd96
2 changed files with 20 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

35
dashboard-ui/css/librarymenu.css
View file

@ -79,7 +79,6 @@
.mainDrawer { .mainDrawer {
height: auto !important; height: auto !important;
border-right: 1px solid #e0e0e0;
} }
.mainDrawerContent { .mainDrawerContent {
@ -355,29 +354,11 @@
} }
.drawerUserPanel { .drawerUserPanel {
background: url(images/splash720.jpg);
background-size: cover;
background-position: center center;
margin-bottom: 1em;
position: relative;
color: #fff; color: #fff;
height: 140px; padding: 1em 1.2em;
}
.drawerUserPanelInner {
background-color: rgba(0, 0, 0, .70);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.drawerUserPanelContent {
color: #fff;
font-weight: 500;
padding: 1.1em;
font-size: 14px; font-size: 14px;
display: flex;
align-items: center;
} }
.drawerUserPanelUserImage { .drawerUserPanelUserImage {
@ -385,12 +366,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
border-radius: 1000px; border-radius: 1000px;
vertical-align: middle;
} }
.drawerUserPanelUserName { .drawerUserPanelUserName {
padding-top: 1.5em; padding-left: 1em;
padding-left: .35em;
} }
.libraryDocument .dashboardDrawerContent { .libraryDocument .dashboardDrawerContent {
@ -418,7 +397,9 @@ body:not(.dashboardDocument) .btnNotifications {
} }
.darkDrawer { .darkDrawer {
background-color: #282828 !important; background-color: rgba(30,30,30,1) !important;
backdrop-filter: brightness(1.5) blur(4px);
box-shadow: none !important;
} }
.darkDrawer .sidebarLinkIcon { .darkDrawer .sidebarLinkIcon {
@ -435,7 +416,7 @@ body:not(.dashboardDocument) .btnNotifications {
} }
.darkDrawer .sidebarDivider { .darkDrawer .sidebarDivider {
background: #555 !important; background: #303030 !important;
} }
.darkDrawer .sidebarLink:hover { .darkDrawer .sidebarLink:hover {

32
dashboard-ui/scripts/librarymenu.js
View file

@ -286,10 +286,8 @@
if (userAtTop) { if (userAtTop) {
html += '<div class="drawerUserPanel">'; html += '<div class="drawerUserPanel">';
html += '<div class="drawerUserPanelInner">';
html += '<div class="drawerUserPanelContent">';
var imgWidth = 60; var imgWidth = 40;
if (hasUserImage) { if (hasUserImage) {
var url = user.imageUrl; var url = user.imageUrl;
@ -305,8 +303,6 @@
html += user.name; html += user.name;
html += '</div>'; html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>'; html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
@ -845,21 +841,6 @@
document.body.classList.remove('dashboardDocument'); document.body.classList.remove('dashboardDocument');
document.body.classList.add('hideMainDrawer'); document.body.classList.add('hideMainDrawer');
} }
// Set drawer background color
var darkDrawer = false;
if (!Dashboard.isConnectMode() && !browserInfo.mobile) {
darkDrawer = true;
}
var drawer = document.querySelector('.mainDrawerPanel #drawer');
if (drawer) {
if (darkDrawer) {
drawer.classList.add('darkDrawer');
} else {
drawer.classList.remove('darkDrawer');
}
}
}); });
function updateTitle(page) { function updateTitle(page) {
@ -939,6 +920,14 @@
initializeApiClient(window.ApiClient); initializeApiClient(window.ApiClient);
} }
function setDrawerClass() {
var drawer = document.querySelector('.mainDrawerPanel #drawer');
if (drawer) {
drawer.classList.add('darkDrawer');
}
}
var mainDrawerPanel = document.querySelector('.mainDrawerPanel'); var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect); mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
@ -951,6 +940,7 @@
Events.on(ConnectionManager, 'localusersignedin', function (e, user) { Events.on(ConnectionManager, 'localusersignedin', function (e, user) {
requiresLibraryMenuRefresh = true; requiresLibraryMenuRefresh = true;
requiresDrawerRefresh = true; requiresDrawerRefresh = true;
setDrawerClass();
ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(updateUserInHeader); ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(updateUserInHeader);
}); });
@ -964,6 +954,8 @@
updateCastIcon(); updateCastIcon();
}); });
setDrawerClass();
})(window, document, jQuery, window.devicePixelRatio); })(window, document, jQuery, window.devicePixelRatio);
(function () { (function () {