mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update nav drawer
This commit is contained in:
Luke Pulverenti
parent
f9b4288b08
commit
61b625bbdb
6 changed files with 171 additions and 218 deletions
|
|
@ -2,20 +2,23 @@
|
|||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -280px;
|
||||
bottom: 0;
|
||||
background-color: #FFF;
|
||||
will-change: transform;
|
||||
contain: layout style;
|
||||
display: flex;
|
||||
transition: transform ease-out 60ms;
|
||||
transition: transform ease-out 60ms, left ease-out 300ms;
|
||||
z-index: 1099;
|
||||
}
|
||||
|
||||
.touch-menu-la.open {
|
||||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.touch-menu-la.transition {
|
||||
/*transition: transform 0.3s ease-out;*/
|
||||
transition: -webkit-transform ease-out 280ms;
|
||||
transition: transform ease-out 280ms;
|
||||
transition: -webkit-transform ease-out 280ms, left ease-out 300ms;
|
||||
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: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@
|
|||
options.target.style.left = -options.width + 'px';
|
||||
|
||||
if (!options.disableEdgeSwipe) {
|
||||
var handle = document.createElement('div');
|
||||
handle.className = "tmla-handle";
|
||||
handle.style.width = options.handleSize + 'px';
|
||||
handle.style.right = -options.handleSize + 'px';
|
||||
options.target.appendChild(handle);
|
||||
//var handle = document.createElement('div');
|
||||
//handle.className = "tmla-handle";
|
||||
//handle.style.width = options.handleSize + 'px';
|
||||
//handle.style.right = -options.handleSize + 'px';
|
||||
//options.target.appendChild(handle);
|
||||
}
|
||||
|
||||
if (!options.disableMask) {
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
TouchMenuLA.prototype.touchStartMenu = function () {
|
||||
menuHammer.on('panstart', function (ev) {
|
||||
options.target.classList.remove('transition');
|
||||
options.target.classList.add('open');
|
||||
velocity = Math.abs(ev.velocity);
|
||||
});
|
||||
menuHammer.on('panmove', function (ev) {
|
||||
|
|
|
|||
|
|
@ -56,48 +56,6 @@
|
|||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.libraryViewNav.bottom {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
.libraryViewNav.bottom {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.libraryViewNav {
|
||||
|
|
@ -272,20 +230,17 @@
|
|||
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 {
|
||||
background-color: #222;
|
||||
background-color: #333;
|
||||
height: auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dashboardDocument .viewMenuBar .primaryIcons {
|
||||
padding: .92em 0;
|
||||
padding: .7em 0;
|
||||
}
|
||||
|
||||
.dashboardDocument .withTallToolbar .primaryIcons {
|
||||
.dashboardDocument.withTallToolbar .primaryIcons {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -308,42 +263,30 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs {
|
||||
width: auto;
|
||||
padding-left: 272px;
|
||||
}
|
||||
|
||||
.mainDrawerPanel .viewMenuBarTabs #tabsContent {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
.viewMenuBarTabs #tabsContent {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs paper-tab {
|
||||
width: auto !important;
|
||||
}
|
||||
.viewMenuBarTabs #tabsContainer {
|
||||
margin: auto;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
touch-action: auto !important;
|
||||
}
|
||||
|
||||
.viewMenuBarTabs #tabsContainer {
|
||||
margin: auto;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
touch-action: auto !important;
|
||||
}
|
||||
.viewMenuBarTabs paper-tabs {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.viewMenuBarTabs paper-tabs {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.viewMenuBarTabs .paperTabLink {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.mainDrawerPanel:not([narrow]) .viewMenuBarTabs .tab-content {
|
||||
display: block !important;
|
||||
}
|
||||
.viewMenuBarTabs .paperTabLink {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.viewMenuBar paper-icon-button.paper-tabs {
|
||||
display: none !important;
|
||||
|
|
@ -458,18 +401,17 @@ body:not(.dashboardDocument) .btnNotifications {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel #drawer {
|
||||
.darkDrawer {
|
||||
background-color: #1D1D20 !important;
|
||||
/*background-color: rgba(40,40,40,.8) !important;
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);*/
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLinkIcon {
|
||||
color: #bbb !important;
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
.darkDrawer .sidebarLinkIcon {
|
||||
color: #bbb !important;
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
|
||||
i.sidebarLinkIcon {
|
||||
font-size: 24px;
|
||||
|
|
@ -477,76 +419,114 @@ i.sidebarLinkIcon {
|
|||
width: 24px;
|
||||
}
|
||||
|
||||
.darkDrawerPanel i.sidebarLinkIcon {
|
||||
.darkDrawer i.sidebarLinkIcon {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLinkText, .darkDrawerPanel .sidebarLink {
|
||||
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
|
||||
color: #fff !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarHeader {
|
||||
.darkDrawer .sidebarHeader {
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarDivider {
|
||||
.darkDrawer .sidebarDivider {
|
||||
background: #282828 !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLink:hover {
|
||||
.darkDrawer .sidebarLink:hover {
|
||||
background: #252528;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .sidebarLink.selectedSidebarLink, .darkDrawerPanel .selectedMediaFolder {
|
||||
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
|
||||
background: #252528 !important;
|
||||
color: #52B54B!important;
|
||||
color: #52B54B !important;
|
||||
}
|
||||
|
||||
.darkDrawerPanel .headerAppsButton {
|
||||
body:not(.dashboardDocument) .headerAppsButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adminDrawerPanel #drawer {
|
||||
.adminDrawer {
|
||||
background: #fff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel:not([narrow]) #drawer {
|
||||
z-index: 998 !important;
|
||||
top: 65px !important;
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.adminDrawerPanel:not([narrow]) .mainDrawerButton {
|
||||
display: none !important;
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.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;
|
||||
font-weight: 400 !important;
|
||||
padding: .7em 0 .7em 1.5em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarHeader {
|
||||
.adminDrawer .sidebarHeader {
|
||||
color: #666 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLinkIcon {
|
||||
.adminDrawer .sidebarLinkIcon {
|
||||
color: #666;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink:hover {
|
||||
.adminDrawer .sidebarLink:hover {
|
||||
color: #00897B !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink.selectedSidebarLink {
|
||||
.adminDrawer .sidebarLink.selectedSidebarLink {
|
||||
background: #52B54B !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.adminDrawerPanel .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
|
||||
.adminDrawer .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
|
@ -557,7 +537,7 @@ i.sidebarLinkIcon {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.adminDrawerPanel:not([narrow]) .adminDrawerLogo {
|
||||
.dashboardDocument.mainDrawerOpen .adminDrawerLogo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -565,21 +545,11 @@ i.sidebarLinkIcon {
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
.adminDrawerPanel #drawer #expandIcon {
|
||||
color: #000;
|
||||
}
|
||||
@media all and (max-width: 640px) {
|
||||
|
||||
.adminDrawerPanel #drawer emby-collapsible > .style-scope {
|
||||
margin: .7em 0;
|
||||
}
|
||||
|
||||
.adminDrawerPanel:not([narrow]) .libraryMenuButtonText {
|
||||
font-size: 150%;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.adminDrawerPanel[narrow] .headerAppsButton {
|
||||
display: none;
|
||||
.dashboardDocument .headerAppsButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title-separator {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,13 @@
|
|||
<body>
|
||||
<div class="backdropContainer"></div>
|
||||
|
||||
<div class="skinContainer">
|
||||
<paper-drawer-panel class="mainDrawerPanel mainDrawerPanelPreInit">
|
||||
<div class="mainDrawer" drawer></div>
|
||||
<div class="mainDrawerPanelContent" main>
|
||||
<div class="pageBackground"></div>
|
||||
<div class="skinHeader"></div>
|
||||
<div class="mainAnimatedPages skinBody"></div>
|
||||
</div>
|
||||
</paper-drawer-panel>
|
||||
<div class="skinContainer mainDrawerPanel">
|
||||
<div class="mainDrawer hide"><div class="scrollContainer"></div></div>
|
||||
<div class="mainDrawerPanelContent">
|
||||
<div class="pageBackground"></div>
|
||||
<div class="skinHeader"></div>
|
||||
<div class="mainAnimatedPages skinBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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() {
|
||||
|
||||
|
|
@ -278,17 +280,16 @@
|
|||
|
||||
function toggleMainDrawer() {
|
||||
|
||||
if (mainDrawerPanel.selected == 'drawer') {
|
||||
closeMainDrawer(mainDrawerPanel);
|
||||
if (navDrawerInstance.isVisible) {
|
||||
closeMainDrawer();
|
||||
} else {
|
||||
openMainDrawer(mainDrawerPanel);
|
||||
openMainDrawer();
|
||||
}
|
||||
}
|
||||
|
||||
function openMainDrawer(drawerPanel) {
|
||||
function openMainDrawer() {
|
||||
|
||||
drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel');
|
||||
drawerPanel.openDrawer();
|
||||
navDrawerInstance.open();
|
||||
lastOpenTime = new Date().getTime();
|
||||
}
|
||||
|
||||
|
|
@ -298,16 +299,13 @@
|
|||
document.body.classList.add('bodyWithPopupOpen');
|
||||
}
|
||||
}
|
||||
function closeMainDrawer(drawerPanel) {
|
||||
function closeMainDrawer() {
|
||||
|
||||
drawerPanel = drawerPanel || document.querySelector('.mainDrawerPanel');
|
||||
drawerPanel.closeDrawer();
|
||||
navDrawerInstance.close();
|
||||
}
|
||||
function onMainDrawerSelect(e) {
|
||||
|
||||
var drawer = e.target;
|
||||
|
||||
if (drawer.selected != 'drawer') {
|
||||
if (!navDrawerInstance.isVisible) {
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
} else {
|
||||
onMainDrawerOpened();
|
||||
|
|
@ -373,23 +371,17 @@
|
|||
|
||||
html += '</div>';
|
||||
|
||||
var drawer = mainDrawerPanel.querySelector('.mainDrawer');
|
||||
navDrawerScrollContainer.innerHTML = html;
|
||||
|
||||
drawer.innerHTML = html;
|
||||
|
||||
var lnkManageServer = drawer.querySelector('.lnkManageServer');
|
||||
var lnkManageServer = navDrawerScrollContainer.querySelector('.lnkManageServer');
|
||||
if (lnkManageServer) {
|
||||
lnkManageServer.addEventListener('click', onManageServerClicked);
|
||||
}
|
||||
|
||||
require(['imageLoader'], function (imageLoader) {
|
||||
imageLoader.fillImages(mainDrawerPanel.getElementsByClassName('lazy'));
|
||||
});
|
||||
}
|
||||
|
||||
function refreshDashboardInfoInDrawer(page, user) {
|
||||
|
||||
if (!mainDrawerPanel.querySelector('.adminDrawerLogo')) {
|
||||
if (!navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
|
||||
createDashboardMenu(page);
|
||||
} else {
|
||||
updateDashboardMenuSelectedItem();
|
||||
|
|
@ -411,7 +403,7 @@
|
|||
|
||||
function updateDashboardMenuSelectedItem() {
|
||||
|
||||
var links = mainDrawerPanel.querySelectorAll('.sidebarLink');
|
||||
var links = navDrawerScrollContainer.querySelectorAll('.sidebarLink');
|
||||
|
||||
for (var i = 0, length = links.length; i < length; i++) {
|
||||
var link = links[i];
|
||||
|
|
@ -453,7 +445,7 @@
|
|||
|
||||
html = html.split('href=').join('onclick="return LibraryMenu.onLinkClicked(event, this);" href=');
|
||||
|
||||
mainDrawerPanel.querySelector('.mainDrawer').innerHTML = html;
|
||||
navDrawerScrollContainer.innerHTML = html;
|
||||
|
||||
updateDashboardMenuSelectedItem();
|
||||
}
|
||||
|
|
@ -698,7 +690,7 @@
|
|||
if (!type) {
|
||||
if (LibraryMenu.tabType) {
|
||||
|
||||
mainDrawerPanel.classList.remove('withTallToolbar');
|
||||
document.body.classList.remove('withTallToolbar');
|
||||
viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
|
||||
viewMenuBarTabs.innerHTML = '';
|
||||
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>';
|
||||
|
||||
}).join('') + '</paper-tabs>';
|
||||
mainDrawerPanel.classList.add('withTallToolbar');
|
||||
document.body.classList.add('withTallToolbar');
|
||||
LibraryMenu.tabType = type;
|
||||
});
|
||||
return;
|
||||
|
|
@ -958,14 +950,14 @@
|
|||
|
||||
if (isDashboardPage) {
|
||||
refreshDashboardInfoInDrawer(page);
|
||||
mainDrawerPanel.forceNarrow = false;
|
||||
//mainDrawerPanel.forceNarrow = false;
|
||||
} else {
|
||||
|
||||
if (mainDrawerPanel.classList.contains('adminDrawerPanel')) {
|
||||
if (navDrawerElement.classList.contains('adminDrawer')) {
|
||||
refreshLibraryDrawer();
|
||||
}
|
||||
|
||||
mainDrawerPanel.forceNarrow = true;
|
||||
//mainDrawerPanel.forceNarrow = true;
|
||||
}
|
||||
|
||||
setDrawerClass(page);
|
||||
|
|
@ -1085,11 +1077,11 @@
|
|||
}
|
||||
|
||||
if (admin) {
|
||||
mainDrawerPanel.classList.add('adminDrawerPanel');
|
||||
mainDrawerPanel.classList.remove('darkDrawerPanel');
|
||||
navDrawerElement.classList.add('adminDrawer');
|
||||
navDrawerElement.classList.remove('darkDrawer');
|
||||
} else {
|
||||
mainDrawerPanel.classList.add('darkDrawerPanel');
|
||||
mainDrawerPanel.classList.remove('adminDrawerPanel');
|
||||
navDrawerElement.classList.add('darkDrawer');
|
||||
navDrawerElement.classList.remove('adminDrawer');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1105,20 +1097,34 @@
|
|||
});
|
||||
}
|
||||
|
||||
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
|
||||
var headerCreated;
|
||||
var userRequiresUpdateAfterHeader;
|
||||
function getNavDrawerOptions() {
|
||||
|
||||
require(['paper-icon-button-light', 'material-icons'], function () {
|
||||
renderHeader();
|
||||
headerCreated = true;
|
||||
var drawerWidth = screen.availWidth - 50;
|
||||
// At least 240
|
||||
drawerWidth = Math.max(drawerWidth, 240);
|
||||
// But not exceeding 270
|
||||
drawerWidth = Math.min(drawerWidth, 270);
|
||||
|
||||
var user = userRequiresUpdateAfterHeader;
|
||||
if (user) {
|
||||
updateUserInHeader(user);
|
||||
var disableEdgeSwipe = false;
|
||||
|
||||
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) {
|
||||
initializeApiClient(apiClient);
|
||||
|
|
@ -1128,12 +1134,7 @@
|
|||
setDrawerClass();
|
||||
ConnectionManager.user(ConnectionManager.getApiClient(user.ServerId)).then(function (user) {
|
||||
refreshLibraryDrawer(user);
|
||||
|
||||
if (headerCreated) {
|
||||
updateUserInHeader(user);
|
||||
} else {
|
||||
userRequiresUpdateAfterHeader = user;
|
||||
}
|
||||
updateUserInHeader(user);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2212,8 +2212,6 @@ var AppInfo = {};
|
|||
|
||||
deps.push('scripts/mediacontroller');
|
||||
|
||||
deps.push('paper-drawer-panel');
|
||||
|
||||
require(deps, function (events) {
|
||||
|
||||
window.Events = events;
|
||||
|
|
@ -2232,25 +2230,6 @@ var AppInfo = {};
|
|||
|
||||
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 = [];
|
||||
deps.push('scripts/extensions');
|
||||
|
||||
|
|
@ -3382,3 +3361,4 @@ window.addEventListener("beforeunload", function () {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue