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 drawer

Browse source
This commit is contained in:
Luke Pulverenti 2017-01-27 18:05:04 -05:00
parent f503b46422
commit 82bcca376f
10 changed files with 111 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
.touch-menu-la { .touch-menu-la {
width: 260px;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;

63
dashboard-ui/css/dashboard.css
View file

@ -116,62 +116,8 @@ progress {
background: #fff !important; background: #fff !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;
}
.adminDrawer {
background: #fff !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;
}
@media all and (min-width: 640px) {
.dashboardDocument .mainDrawer {
z-index: inherit !important;
top: 58px !important;
left: 0 !important;
transform: none !important;
}
.dashboardDocument .tmla-mask {
display: none !important;
}
.dashboardDocument .mainDrawerButton {
display: none !important;
}
.dashboardDocument .mainDrawerPanelContent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 260px;
}
.dashboardDocument .adminDrawerLogo {
display: none;
}
}
.adminDrawer .sidebarLink { .adminDrawer .sidebarLink {
color: #333 !important; color: #333 !important;
font-weight: 400 !important;
padding: .7em 0 .7em 2em;
} }
.adminDrawer .sidebarHeader { .adminDrawer .sidebarHeader {
@ -179,11 +125,6 @@ progress {
font-weight: 500 !important; font-weight: 500 !important;
} }
.adminDrawer .sidebarLinkIcon {
color: #666;
margin-right: 1em;
}
.adminDrawer .sidebarLink:hover { .adminDrawer .sidebarLink:hover {
color: #00897B !important; color: #00897B !important;
} }
@ -193,10 +134,6 @@ progress {
color: #fff !important; color: #fff !important;
} }
.adminDrawer .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
color: #fff !important;
}
.adminDrawerLogo { .adminDrawerLogo {
padding: 1.5em 1em 1.2em; padding: 1.5em 1em 1.2em;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;

BIN
dashboard-ui/css/images/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

7
dashboard-ui/css/librarybrowser.css
View file

@ -520,13 +520,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
} }
} }
@media all and (min-width: 800px) {
.mainDetailButtons, .itemDetailPage .recordingFields button {
font-size: 110%;
}
}
.detailImageProgressContainer { .detailImageProgressContainer {
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;

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

@ -213,6 +213,29 @@
} }
} }
.sidebarLink {
display: block;
text-decoration: none;
color: #111 !important;
font-weight: normal !important;
vertical-align: middle;
padding: 1em 0 1em 2.4em;
}
.sidebarLink:hover {
background: #f2f2f2;
}
.sidebarLink.selectedSidebarLink {
background: #f2f2f2 !important;
}
.sidebarHeader {
padding-left: 1.4em;
margin: 1.2em 0 .7em;
color: #666;
}
body:not(.dashboardDocument) .btnNotifications { body:not(.dashboardDocument) .btnNotifications {
display: none !important; display: none !important;
} }
@ -224,36 +247,26 @@ body:not(.dashboardDocument) .btnNotifications {
backdrop-filter: blur(5px);*/ backdrop-filter: blur(5px);*/
} }
.darkDrawer .sidebarLinkIcon { .darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
color: #bbb !important; color: #fff !important;
margin-left: 1.6em;
} }
.darkDrawer i.sidebarLinkIcon { .darkDrawer .sidebarHeader {
margin-left: 1.9em; color: #bbb !important;
} }
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink { .darkDrawer .sidebarDivider {
color: #fff !important; background: #262626 !important;
font-weight: normal !important; }
}
.darkDrawer .sidebarHeader { .darkDrawer .sidebarLink:hover {
color: #bbb !important; background: #252528;
} }
.darkDrawer .sidebarDivider { .darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
background: #282828 !important; background: #252528 !important;
} color: #52B54B !important;
}
.darkDrawer .sidebarLink:hover {
background: #252528;
}
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
background: #252528 !important;
color: #52B54B !important;
}
body:not(.dashboardDocument) .headerAppsButton { body:not(.dashboardDocument) .headerAppsButton {
display: none; display: none;
@ -263,6 +276,15 @@ body:not(.dashboardDocument) .headerAppsButton {
padding-bottom: 10vh; padding-bottom: 10vh;
} }
.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;
}
@media all and (min-width: 640px) { @media all and (min-width: 640px) {
.mainDrawerPanel .viewMenuBarTabs { .mainDrawerPanel .viewMenuBarTabs {
@ -273,4 +295,47 @@ body:not(.dashboardDocument) .headerAppsButton {
.viewMenuBarTabs .libraryViewNav { .viewMenuBarTabs .libraryViewNav {
text-align: left !important; text-align: left !important;
} }
}
.dashboardDocument .sidebarLink {
padding: .7em 0 .7em 2.4em;
}
.dashboardDocument .mainDrawer {
z-index: inherit !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
}
.dashboardDocument .mainDrawer-scrollContainer {
margin-top: 50px !important;
}
.dashboardDocument.withTallToolbar .mainDrawer-scrollContainer {
margin-top: 98px !important;
}
.dashboardDocument .tmla-mask {
display: none !important;
}
.dashboardDocument .mainDrawerButton {
display: none !important;
}
.dashboardDocument .mainDrawerPanelContent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 260px;
}
.dashboardDocument .adminDrawerLogo {
display: none !important;
}
.dashboardDocument .darkDrawer {
background-color: rgba(28,28,31,.3) !important;
}
}

40
dashboard-ui/css/site.css
View file

@ -211,46 +211,6 @@ div[data-role='page'] {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.sidebarLinks {
margin-top: 1.5em;
padding-bottom: 50px;
}
.sidebarLink {
display: block;
padding: .8em 20px .8em 0;
text-decoration: none;
color: #111 !important;
font-weight: 500 !important;
vertical-align: middle;
font-size: 110%;
}
.sidebarLink:hover {
background: #f2f2f2;
}
.sidebarLink.selectedSidebarLink {
background: #f2f2f2 !important;
}
.sidebarLinkIcon {
text-align: center;
vertical-align: middle;
margin-right: 1.2em;
}
.sidebarLinkIcon + span {
vertical-align: middle;
}
.sidebarHeader {
padding-left: 20px;
margin: 15px 0 10px;
color: #666;
font-weight: 500;
}
.ui-content { .ui-content {
border-width: 0; border-width: 0;
overflow: visible; overflow: visible;

2
dashboard-ui/index.html
View file

@ -19,7 +19,7 @@
<div class="backdropContainer"></div> <div class="backdropContainer"></div>
<div class="backgroundContainer"></div> <div class="backgroundContainer"></div>
<div class="mainDrawerPanel"> <div class="mainDrawerPanel">
<div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer"></div></div> <div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer darkScroller"></div></div>
<div class="mainDrawerPanelContent"> <div class="mainDrawerPanelContent">
<div class="skinHeader"></div> <div class="skinHeader"></div>
<div class="mainAnimatedPages skinBody"></div> <div class="mainAnimatedPages skinBody"></div>

2
dashboard-ui/scripts/itembynamedetailpage.js
View file

@ -269,7 +269,7 @@
IncludeItemTypes: "Audio", IncludeItemTypes: "Audio",
PersonTypes: "", PersonTypes: "",
ArtistIds: "", ArtistIds: "",
Limit: 30 Limit: 40
}, { }, {
playFromHere: true, playFromHere: true,
action: 'playallfromhere', action: 'playallfromhere',

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

@ -1,4 +1,4 @@
define(['layoutManager', 'viewManager', 'libraryBrowser', 'embyRouter', 'playbackManager', 'paper-icon-button-light', 'material-icons'], function (layoutManager, viewManager, libraryBrowser, embyRouter, playbackManager) { define(['layoutManager', 'viewManager', 'libraryBrowser', 'embyRouter', 'playbackManager', 'paper-icon-button-light', 'material-icons', 'scrollStyles'], function (layoutManager, viewManager, libraryBrowser, embyRouter, playbackManager) {
'use strict'; 'use strict';
var enableBottomTabs = AppInfo.isNativeApp; var enableBottomTabs = AppInfo.isNativeApp;
@ -290,12 +290,9 @@
var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1'; var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">'; html += '<a class="sidebarLink lnkMediaFolder" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);"><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.25em 0 1.55em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><i class="md-icon sidebarLinkIcon">tablet_android</i><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
html += '<div class="sidebarDivider"></div>'; html += '<div class="sidebarDivider"></div>';
@ -312,11 +309,11 @@
html += Globalize.translate('HeaderAdmin'); html += Globalize.translate('HeaderAdmin');
html += '</div>'; html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><i class="md-icon sidebarLinkIcon">dashboard</i><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><i class="md-icon sidebarLinkIcon">mode_edit</i><span class="sidebarLinkText">' + Globalize.translate('MetadataManager') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><span class="sidebarLinkText">' + Globalize.translate('MetadataManager') + '</span></a>';
if (!browserInfo.mobile) { if (!browserInfo.mobile) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><i class="md-icon sidebarLinkIcon">insert_chart</i><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
} }
html += '</div>'; html += '</div>';
} }
@ -326,19 +323,19 @@
html += '<div class="sidebarDivider"></div>'; html += '<div class="sidebarDivider"></div>';
if (user.localUser && (AppInfo.isNativeApp && browserInfo.android)) { if (user.localUser && (AppInfo.isNativeApp && browserInfo.android)) {
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html"><i class="md-icon sidebarLinkIcon">settings</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html"><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
} }
html += '<a class="sidebarLink lnkMediaFolder lnkManageOffline" data-itemid="manageoffline" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html?mode=offline"><i class="md-icon sidebarLinkIcon">file_download</i><span class="sidebarLinkText">' + Globalize.translate('ManageOfflineDownloads') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder lnkManageOffline" data-itemid="manageoffline" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html?mode=offline"><span class="sidebarLinkText">' + Globalize.translate('ManageOfflineDownloads') + '</span></a>';
html += '<a class="sidebarLink lnkMediaFolder lnkSyncToOtherDevices" data-itemid="syncotherdevices" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html"><i class="md-icon sidebarLinkIcon">sync</i><span class="sidebarLinkText">' + Globalize.translate('SyncToOtherDevices') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder lnkSyncToOtherDevices" data-itemid="syncotherdevices" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html"><span class="sidebarLinkText">' + Globalize.translate('SyncToOtherDevices') + '</span></a>';
if (Dashboard.isConnectMode()) { if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><i class="md-icon sidebarLinkIcon">wifi</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
} }
if (user.localUser) { if (user.localUser) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><i class="md-icon sidebarLinkIcon">lock</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
} }
html += '</div>'; html += '</div>';
@ -558,7 +555,7 @@
icon = i.icon || icon; icon = i.icon || icon;
var onclick = i.onclick ? ' function(){' + i.onclick + '}' : 'null'; var onclick = i.onclick ? ' function(){' + i.onclick + '}' : 'null';
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" onclick="return LibraryMenu.onLinkClicked(event, this, ' + onclick + ');" href="' + getItemHref(i, i.CollectionType) + '"><i class="md-icon sidebarLinkIcon" style="color:' + color + '">' + icon + '</i><span class="sectionName">' + i.Name + '</span></a>'; return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" onclick="return LibraryMenu.onLinkClicked(event, this, ' + onclick + ');" href="' + getItemHref(i, i.CollectionType) + '"><span class="sectionName">' + i.Name + '</span></a>';
}).join(''); }).join('');
@ -851,6 +848,12 @@
if (!page.classList.contains('withTabs')) { if (!page.classList.contains('withTabs')) {
LibraryMenu.setTabs(null); LibraryMenu.setTabs(null);
if (page.classList.contains('pageWithAbsoluteTabs')) {
document.body.classList.add('withTallToolbar');
} else {
document.body.classList.remove('withTallToolbar');
}
} }
}); });

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

@ -383,14 +383,6 @@ var Dashboard = {
pageIds = pageIds ? (' data-pageids="' + pageIds + '"') : ''; pageIds = pageIds ? (' data-pageids="' + pageIds + '"') : '';
menuHtml += '<a class="sidebarLink" href="' + item.href + '"' + pageIds + '>'; menuHtml += '<a class="sidebarLink" href="' + item.href + '"' + pageIds + '>';
var icon = item.icon;
if (icon) {
var style = item.color ? ' style="color:' + item.color + '"' : '';
menuHtml += '<i class="md-icon sidebarLinkIcon"' + style + '>' + icon + '</i>';
}
menuHtml += '<span class="sidebarLinkText">'; menuHtml += '<span class="sidebarLinkText">';
menuHtml += item.name; menuHtml += item.name;
menuHtml += '</span>'; menuHtml += '</span>';