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

update nav drawer

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-21 12:38:29 -04:00
parent f9b4288b08
commit 61b625bbdb
6 changed files with 171 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

11
dashboard-ui/components/navdrawer/navdrawer.css
View file

@ -2,20 +2,23 @@
width: 240px; width: 240px;
position: fixed; position: fixed;
top: 0; top: 0;
left: -280px;
bottom: 0; bottom: 0;
background-color: #FFF; background-color: #FFF;
will-change: transform; will-change: transform;
contain: layout style; contain: layout style;
display: flex; display: flex;
transition: transform ease-out 60ms; transition: transform ease-out 60ms, left ease-out 300ms;
z-index: 1099; z-index: 1099;
} }
.touch-menu-la.open {
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}
.touch-menu-la.transition { .touch-menu-la.transition {
/*transition: transform 0.3s ease-out;*/ /*transition: transform 0.3s ease-out;*/
transition: -webkit-transform ease-out 280ms; transition: -webkit-transform ease-out 280ms, left ease-out 300ms;
transition: transform ease-out 280ms; transition: transform ease-out 280ms, left ease-out 300ms;
/*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s; /*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/ transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
} }

11
dashboard-ui/components/navdrawer/navdrawer.js
View file

@ -48,11 +48,11 @@
options.target.style.left = -options.width + 'px'; options.target.style.left = -options.width + 'px';
if (!options.disableEdgeSwipe) { if (!options.disableEdgeSwipe) {
var handle = document.createElement('div'); //var handle = document.createElement('div');
handle.className = "tmla-handle"; //handle.className = "tmla-handle";
handle.style.width = options.handleSize + 'px'; //handle.style.width = options.handleSize + 'px';
handle.style.right = -options.handleSize + 'px'; //handle.style.right = -options.handleSize + 'px';
options.target.appendChild(handle); //options.target.appendChild(handle);
} }
if (!options.disableMask) { if (!options.disableMask) {
@ -71,6 +71,7 @@
TouchMenuLA.prototype.touchStartMenu = function () { TouchMenuLA.prototype.touchStartMenu = function () {
menuHammer.on('panstart', function (ev) { menuHammer.on('panstart', function (ev) {
options.target.classList.remove('transition'); options.target.classList.remove('transition');
options.target.classList.add('open');
velocity = Math.abs(ev.velocity); velocity = Math.abs(ev.velocity);
}); });
menuHammer.on('panmove', function (ev) { menuHammer.on('panmove', function (ev) {

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

@ -56,48 +56,6 @@
vertical-align: middle; vertical-align: middle;
} }
.mainDrawerPanel {
position: static !important;
width: auto !important;
height: auto !important;
touch-action: auto !important;
overflow: visible;
}
.mainDrawerPanelPreInit #drawer {
display: none !important;
}
.mainDrawerPanel #drawer {
z-index: 1099 !important;
position: fixed !important;
bottom: 0;
height: auto !important;
/* Need to reset this because it causes the entire panel to be draggable in safari */
box-sizing: initial !important;
font-size: 108%;
}
.mainDrawerPanel[narrow] #main {
left: 0 !important;
position: static !important;
z-index: 1;
}
.mainDrawerPanel #scrim {
/* Give it at least something to make it visible */
z-index: 1098;
/* It defaults to absolute, not visible after scrolling */
position: fixed !important;
}
.mainDrawer {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
scroll-behavior: smooth;
}
.drawerContent { .drawerContent {
padding-bottom: 100px; padding-bottom: 100px;
} }
@ -189,10 +147,10 @@
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12);
} }
.libraryViewNav.bottom { .libraryViewNav.bottom {
top: auto !important; top: auto !important;
bottom: 0; bottom: 0;
} }
.libraryViewNav { .libraryViewNav {
@ -272,20 +230,17 @@
align-items: center; align-items: center;
} }
.viewMenuBar {
/*box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);*/
}
.dashboardDocument .viewMenuBar { .dashboardDocument .viewMenuBar {
background-color: #222; background-color: #333;
height: auto; height: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
} }
.dashboardDocument .viewMenuBar .primaryIcons { .dashboardDocument .viewMenuBar .primaryIcons {
padding: .92em 0; padding: .7em 0;
} }
.dashboardDocument .withTallToolbar .primaryIcons { .dashboardDocument.withTallToolbar .primaryIcons {
padding-bottom: 0; padding-bottom: 0;
} }
@ -308,42 +263,30 @@
display: flex; display: flex;
} }
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs {
width: auto;
padding-left: 272px;
}
.mainDrawerPanel .viewMenuBarTabs #tabsContent { .viewMenuBarTabs #tabsContent {
display: block !important; display: block !important;
width: 100%; width: 100%;
} }
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs paper-tab { .viewMenuBarTabs #tabsContainer {
width: auto !important; margin: auto;
} -ms-flex: none;
-webkit-flex: none;
flex: none;
flex-shrink: 0;
flex-grow: 1;
touch-action: auto !important;
}
.viewMenuBarTabs #tabsContainer { .viewMenuBarTabs paper-tabs {
margin: auto; overflow: visible !important;
-ms-flex: none; }
-webkit-flex: none;
flex: none;
flex-shrink: 0;
flex-grow: 1;
touch-action: auto !important;
}
.viewMenuBarTabs paper-tabs { .viewMenuBarTabs .paperTabLink {
overflow: visible !important; padding-left: 1.5em;
} padding-right: 1.5em;
}
.viewMenuBarTabs .paperTabLink {
padding-left: 1.5em;
padding-right: 1.5em;
}
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs .tab-content {
display: block !important;
}
.viewMenuBar paper-icon-button.paper-tabs { .viewMenuBar paper-icon-button.paper-tabs {
display: none !important; display: none !important;
@ -458,18 +401,17 @@ body:not(.dashboardDocument) .btnNotifications {
display: none !important; display: none !important;
} }
.darkDrawerPanel #drawer { .darkDrawer {
background-color: #1D1D20 !important; background-color: #1D1D20 !important;
/*background-color: rgba(40,40,40,.8) !important; /*background-color: rgba(40,40,40,.8) !important;
-webkit-backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);*/ backdrop-filter: blur(5px);*/
box-shadow: none !important;
} }
.darkDrawerPanel .sidebarLinkIcon { .darkDrawer .sidebarLinkIcon {
color: #bbb !important; color: #bbb !important;
margin-left: 1.6em; margin-left: 1.6em;
} }
i.sidebarLinkIcon { i.sidebarLinkIcon {
font-size: 24px; font-size: 24px;
@ -477,76 +419,114 @@ i.sidebarLinkIcon {
width: 24px; width: 24px;
} }
.darkDrawerPanel i.sidebarLinkIcon { .darkDrawer i.sidebarLinkIcon {
margin-left: 1em; margin-left: 1em;
} }
.darkDrawerPanel .sidebarLinkText, .darkDrawerPanel .sidebarLink { .darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
color: #fff !important; color: #fff !important;
font-weight: normal !important; font-weight: normal !important;
} }
.darkDrawerPanel .sidebarHeader { .darkDrawer .sidebarHeader {
color: #bbb !important; color: #bbb !important;
} }
.darkDrawerPanel .sidebarDivider { .darkDrawer .sidebarDivider {
background: #282828 !important; background: #282828 !important;
} }
.darkDrawerPanel .sidebarLink:hover { .darkDrawer .sidebarLink:hover {
background: #252528; background: #252528;
} }
.darkDrawerPanel .sidebarLink.selectedSidebarLink, .darkDrawerPanel .selectedMediaFolder { .darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
background: #252528 !important; background: #252528 !important;
color: #52B54B!important; color: #52B54B !important;
} }
.darkDrawerPanel .headerAppsButton { body:not(.dashboardDocument) .headerAppsButton {
display: none; display: none;
} }
.adminDrawerPanel #drawer { .adminDrawer {
background: #fff !important; background: #fff !important;
box-shadow: none !important;
} }
.adminDrawerPanel:not([narrow]) #drawer { .dashboardDocument .mainDrawerPanelContent {
z-index: 998 !important; transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
top: 65px !important; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
} }
.adminDrawerPanel:not([narrow]) .mainDrawerButton { @media all and (min-width: 640px) {
display: none !important;
.mainDrawerPanel .viewMenuBarTabs {
width: auto;
padding-left: 272px;
}
.mainDrawerPanel .viewMenuBarTabs paper-tab {
width: auto !important;
}
.mainDrawerPanel .viewMenuBarTabs .tab-content {
display: block !important;
}
.dashboardDocument .mainDrawer {
z-index: 998 !important;
top: 65px !important;
left: 0 !important;
}
.dashboardDocument .mainDrawerButton {
display: none !important;
}
.dashboardDocument .libraryMenuButtonText {
font-size: 150%;
margin-left: 1em;
}
.dashboardDocument .mainDrawerPanelContent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 270px;
}
} }
.adminDrawerPanel .sidebarLink { .adminDrawer .sidebarLink {
color: #333 !important; color: #333 !important;
font-weight: 400 !important; font-weight: 400 !important;
padding: .7em 0 .7em 1.5em; padding: .7em 0 .7em 1.5em;
} }
.adminDrawerPanel .sidebarHeader { .adminDrawer .sidebarHeader {
color: #666 !important; color: #666 !important;
font-weight: 500 !important; font-weight: 500 !important;
} }
.adminDrawerPanel .sidebarLinkIcon { .adminDrawer .sidebarLinkIcon {
color: #666; color: #666;
margin-right: 1em; margin-right: 1em;
} }
.adminDrawerPanel .sidebarLink:hover { .adminDrawer .sidebarLink:hover {
color: #00897B !important; color: #00897B !important;
} }
.adminDrawerPanel .sidebarLink.selectedSidebarLink { .adminDrawer .sidebarLink.selectedSidebarLink {
background: #52B54B !important; background: #52B54B !important;
color: #fff !important; color: #fff !important;
} }
.adminDrawerPanel .sidebarLink.selectedSidebarLink .sidebarLinkIcon { .adminDrawer .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
color: #fff !important; color: #fff !important;
} }
@ -557,7 +537,7 @@ i.sidebarLinkIcon {
display: block; display: block;
} }
.adminDrawerPanel:not([narrow]) .adminDrawerLogo { .dashboardDocument.mainDrawerOpen .adminDrawerLogo {
display: none; display: none;
} }
@ -565,21 +545,11 @@ i.sidebarLinkIcon {
height: 30px; height: 30px;
} }
.adminDrawerPanel #drawer #expandIcon { @media all and (max-width: 640px) {
color: #000;
}
.adminDrawerPanel #drawer emby-collapsible > .style-scope { .dashboardDocument .headerAppsButton {
margin: .7em 0; display: none;
} }
.adminDrawerPanel:not([narrow]) .libraryMenuButtonText {
font-size: 150%;
margin-left: 1em;
}
.adminDrawerPanel[narrow] .headerAppsButton {
display: none;
} }
.title-separator { .title-separator {

16
dashboard-ui/index.html
View file

@ -6,15 +6,13 @@
<body> <body>
<div class="backdropContainer"></div> <div class="backdropContainer"></div>
<div class="skinContainer"> <div class="skinContainer mainDrawerPanel">
<paper-drawer-panel class="mainDrawerPanel mainDrawerPanelPreInit"> <div class="mainDrawer hide"><div class="scrollContainer"></div></div>
<div class="mainDrawer" drawer></div> <div class="mainDrawerPanelContent">
<div class="mainDrawerPanelContent" main> <div class="pageBackground"></div>
<div class="pageBackground"></div> <div class="skinHeader"></div>
<div class="skinHeader"></div> <div class="mainAnimatedPages skinBody"></div>
<div class="mainAnimatedPages skinBody"></div> </div>
</div>
</paper-drawer-panel>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,6 +1,8 @@
define(['imageLoader', 'layoutManager', 'viewManager'], function (imageLoader, layoutManager, viewManager) { define(['imageLoader', 'layoutManager', 'viewManager', 'navdrawer', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, navdrawer) {
var mainDrawerPanel = document.querySelector('.mainDrawerPanel'); var navDrawerElement = document.querySelector('.mainDrawer');
var navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
var navDrawerInstance;
function renderHeader() { function renderHeader() {
@ -278,17 +280,16 @@
function toggleMainDrawer() { function toggleMainDrawer() {
if (mainDrawerPanel.selected == 'drawer') { if (navDrawerInstance.isVisible) {
closeMainDrawer(mainDrawerPanel); closeMainDrawer();
} else { } else {
openMainDrawer(mainDrawerPanel); openMainDrawer();
} }
} }
function openMainDrawer(drawerPanel) { function openMainDrawer() {
drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel'); navDrawerInstance.open();
drawerPanel.openDrawer();
lastOpenTime = new Date().getTime(); lastOpenTime = new Date().getTime();
} }
@ -298,16 +299,13 @@
document.body.classList.add('bodyWithPopupOpen'); document.body.classList.add('bodyWithPopupOpen');
} }
} }
function closeMainDrawer(drawerPanel) { function closeMainDrawer() {
drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel'); navDrawerInstance.close();
drawerPanel.closeDrawer();
} }
function onMainDrawerSelect(e) { function onMainDrawerSelect(e) {
var drawer = e.target; if (!navDrawerInstance.isVisible) {
if (drawer.selected != 'drawer') {
document.body.classList.remove('bodyWithPopupOpen'); document.body.classList.remove('bodyWithPopupOpen');
} else { } else {
onMainDrawerOpened(); onMainDrawerOpened();
@ -373,23 +371,17 @@
html += '</div>'; html += '</div>';
var drawer = mainDrawerPanel.querySelector('.mainDrawer'); navDrawerScrollContainer.innerHTML = html;
drawer.innerHTML = html; var lnkManageServer = navDrawerScrollContainer.querySelector('.lnkManageServer');
var lnkManageServer = drawer.querySelector('.lnkManageServer');
if (lnkManageServer) { if (lnkManageServer) {
lnkManageServer.addEventListener('click', onManageServerClicked); lnkManageServer.addEventListener('click', onManageServerClicked);
} }
require(['imageLoader'], function (imageLoader) {
imageLoader.fillImages(mainDrawerPanel.getElementsByClassName('lazy'));
});
} }
function refreshDashboardInfoInDrawer(page, user) { function refreshDashboardInfoInDrawer(page, user) {
if (!mainDrawerPanel.querySelector('.adminDrawerLogo')) { if (!navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
createDashboardMenu(page); createDashboardMenu(page);
} else { } else {
updateDashboardMenuSelectedItem(); updateDashboardMenuSelectedItem();
@ -411,7 +403,7 @@
function updateDashboardMenuSelectedItem() { function updateDashboardMenuSelectedItem() {
var links = mainDrawerPanel.querySelectorAll('.sidebarLink'); var links = navDrawerScrollContainer.querySelectorAll('.sidebarLink');
for (var i = 0, length = links.length; i < length; i++) { for (var i = 0, length = links.length; i < length; i++) {
var link = links[i]; var link = links[i];
@ -453,7 +445,7 @@
html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href='); html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href=');
mainDrawerPanel.querySelector('.mainDrawer').innerHTML = html; navDrawerScrollContainer.innerHTML = html;
updateDashboardMenuSelectedItem(); updateDashboardMenuSelectedItem();
} }
@ -698,7 +690,7 @@
if (!type) { if (!type) {
if (LibraryMenu.tabType) { if (LibraryMenu.tabType) {
mainDrawerPanel.classList.remove('withTallToolbar'); document.body.classList.remove('withTallToolbar');
viewMenuBarTabs = document.querySelector('.viewMenuBarTabs'); viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
viewMenuBarTabs.innerHTML = ''; viewMenuBarTabs.innerHTML = '';
viewMenuBarTabs.classList.add('hide'); viewMenuBarTabs.classList.add('hide');
@ -724,7 +716,7 @@
return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>'; return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>';
}).join('') + '</paper-tabs>'; }).join('') + '</paper-tabs>';
mainDrawerPanel.classList.add('withTallToolbar'); document.body.classList.add('withTallToolbar');
LibraryMenu.tabType = type; LibraryMenu.tabType = type;
}); });
return; return;
@ -958,14 +950,14 @@
if (isDashboardPage) { if (isDashboardPage) {
refreshDashboardInfoInDrawer(page); refreshDashboardInfoInDrawer(page);
mainDrawerPanel.forceNarrow = false; //mainDrawerPanel.forceNarrow = false;
} else { } else {
if (mainDrawerPanel.classList.contains('adminDrawerPanel')) { if (navDrawerElement.classList.contains('adminDrawer')) {
refreshLibraryDrawer(); refreshLibraryDrawer();
} }
mainDrawerPanel.forceNarrow = true; //mainDrawerPanel.forceNarrow = true;
} }
setDrawerClass(page); setDrawerClass(page);
@ -1085,11 +1077,11 @@
} }
if (admin) { if (admin) {
mainDrawerPanel.classList.add('adminDrawerPanel'); navDrawerElement.classList.add('adminDrawer');
mainDrawerPanel.classList.remove('darkDrawerPanel'); navDrawerElement.classList.remove('darkDrawer');
} else { } else {
mainDrawerPanel.classList.add('darkDrawerPanel'); navDrawerElement.classList.add('darkDrawer');
mainDrawerPanel.classList.remove('adminDrawerPanel'); navDrawerElement.classList.remove('adminDrawer');
} }
} }
@ -1105,20 +1097,34 @@
}); });
} }
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect); function getNavDrawerOptions() {
var headerCreated;
var userRequiresUpdateAfterHeader;
require(['paper-icon-button-light', 'material-icons'], function () { var drawerWidth = screen.availWidth - 50;
renderHeader(); // At least 240
headerCreated = true; drawerWidth = Math.max(drawerWidth, 240);
// But not exceeding 270
drawerWidth = Math.min(drawerWidth, 270);
var user = userRequiresUpdateAfterHeader; var disableEdgeSwipe = false;
if (user) {
updateUserInHeader(user); if (browserInfo.safari) {
disableEdgeSwipe = true;
} }
userRequiresUpdateAfterHeader = null;
}); // Default is 600px
//drawer.responsiveWidth = '640px';
return {
target: navDrawerElement,
onChange: onMainDrawerSelect,
width: drawerWidth,
disableEdgeSwipe: disableEdgeSwipe
};
}
navDrawerInstance = new navdrawer(getNavDrawerOptions());
navDrawerElement.classList.remove('hide');
renderHeader();
Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) { Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) {
initializeApiClient(apiClient); initializeApiClient(apiClient);
@ -1128,12 +1134,7 @@
setDrawerClass(); setDrawerClass();
ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) { ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) {
refreshLibraryDrawer(user); refreshLibraryDrawer(user);
updateUserInHeader(user);
if (headerCreated) {
updateUserInHeader(user);
} else {
userRequiresUpdateAfterHeader = user;
}
}); });
}); });

22
dashboard-ui/scripts/site.js
View file

@ -2212,8 +2212,6 @@ var AppInfo = {};
deps.push('scripts/mediacontroller'); deps.push('scripts/mediacontroller');
deps.push('paper-drawer-panel');
require(deps, function (events) { require(deps, function (events) {
window.Events = events; window.Events = events;
@ -2232,25 +2230,6 @@ var AppInfo = {};
function initAfterDependencies() { function initAfterDependencies() {
var drawer = document.querySelector('.mainDrawerPanel');
drawer.classList.remove('mainDrawerPanelPreInit');
drawer.forceNarrow = true;
var drawerWidth = screen.availWidth - 50;
// At least 240
drawerWidth = Math.max(drawerWidth, 240);
// But not exceeding 270
drawerWidth = Math.min(drawerWidth, 270);
drawer.drawerWidth = drawerWidth + "px";
if (browserInfo.safari) {
drawer.disableEdgeSwipe = true;
}
// Default is 600px
drawer.responsiveWidth = '640px';
var deps = []; var deps = [];
deps.push('scripts/extensions'); deps.push('scripts/extensions');
@ -3382,3 +3361,4 @@ window.addEventListener("beforeunload", function () {
} }
} }
}); });